Merge pull request #2170 from omnivore-app/fix/username-validation

Fix issue where incorrect username validation message was displayed during signup, add label sorting to cards

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -58,6 +58,7 @@ export const DescriptionStyle = {
   '-webkit-box-orient': 'vertical',
   height: '45px',
   alignItems: 'start',
+  maxWidth: '-webkit-fill-available',
 }
 
 export const AuthorInfoStyle = {

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -18,6 +18,7 @@ import {
   timeAgo,
   TitleStyle,
 } from './LibraryCardStyles'
+import { sortedLabels } from '../../../lib/labelsSort'
 
 dayjs.extend(relativeTime)
 
@@ -178,9 +179,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                   minHeight: '35px',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {sortedLabels(props.item.labels).map(
+                  ({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  )
+                )}
               </HStack>
               <VStack
                 css={{

packages/web/components/patterns/LibraryCards/LibraryListCard.tsx

@@ -14,6 +14,7 @@ import {
   timeAgo,
   TitleStyle,
 } from './LibraryCardStyles'
+import { sortedLabels } from '../../../lib/labelsSort'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
@@ -118,9 +119,11 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                   display: 'block',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {sortedLabels(props.item.labels).map(
+                  ({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  )
+                )}
               </HStack>
             </HStack>
           </VStack>

packages/web/components/templates/ProfileLayout.tsx

@@ -16,8 +16,7 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
         css={{
           // bg: '$omnivoreYellow',
           height: '100vh',
-          background:
-            '-webkit-linear-gradient(-65deg, rgba(255, 255, 255, 1.0) 45%, rgba(255, 210, 52, 1.0) 0%)',
+          bg: '$omnivoreYellow',
         }}
       >
         {props.children}

packages/web/lib/labelsSort.ts

@@ -0,0 +1,36 @@
+import { Label } from './networking/fragments/labelFragment'
+
+export const sortedLabels = (labels: Label[] | undefined): Label[] => {
+  if (!labels) {
+    return []
+  }
+
+  const colors = new Map<string, Label[]>()
+  for (const label of labels) {
+    const list = colors.get(label.color) ?? []
+    list.push(label)
+    colors.set(
+      label.color,
+      list.sort((a, b) => a.name.localeCompare(b.name))
+    )
+  }
+
+  const sortedColors = Array.from(colors.keys()).sort((a, b) => {
+    // Sort by the first element's name
+    const aname = colors.get(a)?.find(() => true)?.name ?? a
+    const bname = colors.get(b)?.find(() => true)?.name ?? b
+    return aname.localeCompare(bname)
+  })
+
+  const result: Label[] = []
+  for (const key of sortedColors) {
+    const items = colors.get(key)
+    if (!items) {
+      continue
+    }
+    const sorted = items.sort((a, b) => a.name.localeCompare(b.name))
+    result.push(...sorted)
+  }
+
+  return result
+}

packages/web/lib/networking/queries/useValidateUsernameQuery.tsx

@@ -24,8 +24,12 @@ export function useValidateUsernameQuery({
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const isUsernameValid = (data as any)?.validateUsername ?? false
-  const usernameErrorMessage = validationErrorMessage(username)
+  if (isUsernameValid) {
+    return { isUsernameValid }
+  }
 
+  // Try to figure out why the username is invalid
+  const usernameErrorMessage = validationErrorMessage(username.toLowerCase())
   if (usernameErrorMessage) {
     return {
       isUsernameValid: false,
@@ -33,10 +37,6 @@ export function useValidateUsernameQuery({
     }
   }
 
-  if (isUsernameValid) {
-    return { isUsernameValid }
-  }
-
   return {
     isUsernameValid: false,
     usernameErrorMessage: 'This username is not available',