annagu/sort-cat-alphabetically

prisma/schema.prisma

@@ -35,16 +35,16 @@ enum Location {
 }
 
 enum Category {
-  CLOTHING
+  BEVERAGE_CONTAINER
   CHARGER
-  UMBRELLA
+  CLOTHING
+  EARBUDS_HEADPHONES_CASES
   GLASSES_CASES
   JEWELRY_WATCHES
-  EARBUDS_HEADPHONES_CASES
+  KEYS
   PHONES_LAPTOPS_TABLETS
-  BEVERAGE_CONTAINER
   STATIONARY
-  KEYS
+  UMBRELLA
   OTHER
 }
 
@@ -81,8 +81,7 @@ enum Status {
 }
 
 enum Value {
-  LOW
-  MEDIUM
+  GENERAL
   HIGH
 }
 

src/components/Form/Listbox.tsx

@@ -63,6 +63,7 @@ export default function MyListbox<T, K extends FieldValues>({
                 ? field.value?.length > 0
                   ? field.value
                       .map((value: T) => displayValue(value))
+                      .sort()
                       .join(', ')
                   : placeholder
                 : field.value

src/env/schema.mjs

@@ -28,5 +28,6 @@ export const clientSchema = z.object({
  */
 export const clientEnv = {
   // NEXT_PUBLIC_BAR: process.env.NEXT_PUBLIC_BAR,
-  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
+    process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
 };

src/lib/schemas.ts

@@ -17,7 +17,10 @@ export const ItemSchema = z.object({
   shortDescription: z.string().min(3),
   categories: z.array(z.nativeEnum(Category)),
   color: z.nativeEnum(Color),
-  value: z.nativeEnum(Value),
+  value: z.nativeEnum(Value, {
+    required_error: 'Required',
+    invalid_type_error: 'Required'
+  }),
   identifiable: z.boolean(),
   itemLocation: z.string().min(3),
   retrieveLocation: z.nativeEnum(Location),

src/pages/manage/items/create.tsx

@@ -137,7 +137,15 @@ const CreateItem: NextPageWithLayout = () => {
             </span>
           </label>
           <MyListbox
-            values={Object.values(Category)}
+            values={Object.values(Category).sort((a, b) => {
+              if (a === 'OTHER') {
+                return 1;
+              }
+              if (b === 'OTHER') {
+                return -1;
+              }
+              return a.localeCompare(b);
+            })}
             displayValue={(prop) => Categories[prop]}
             keyValue={(prop) => prop}
             name="categories"

src/server/trpc/router/account.ts

@@ -6,5 +6,5 @@ export default router({
     ctx.prisma.account.delete({
       where: { clerkId: input }
     })
-  ),
+  )
 });

src/types/index.ts

@@ -39,15 +39,15 @@ export const Colors: Record<Color, string> = {
   OTHER: 'Other'
 };
 export const Categories: Record<Category, string> = {
-  CLOTHING: 'Clothing',
+  BEVERAGE_CONTAINER: 'Beverage Container',
   CHARGER: 'Charger',
-  UMBRELLA: 'Umbrellas',
+  CLOTHING: 'Clothing',
+  EARBUDS_HEADPHONES_CASES: 'Earbuds/Headphones/Case',
   GLASSES_CASES: 'Glasses/Sunglasses/Cases',
   JEWELRY_WATCHES: 'Jewelry/Watches',
-  EARBUDS_HEADPHONES_CASES: 'Earbuds/Headphones/Case',
+  KEYS: 'Keys',
   PHONES_LAPTOPS_TABLETS: 'Phones/Laptops/Tablets',
-  BEVERAGE_CONTAINER: 'Beverage Container',
   STATIONARY: 'Stationary',
-  KEYS: 'Keys',
+  UMBRELLA: 'Umbrellas',
   OTHER: 'Other'
 };