other option select

email-notification/models.ts

@@ -162,6 +162,10 @@ const postSchema = new Schema<IPost | IDraftPost>({
             enum: Object.values(Breed),
         },
     ],
+    otherBreedDescription: {
+        type: String,
+        required: false,
+    },
     gender: {
         type: String,
         default: null,

email-notification/types.ts

@@ -77,6 +77,7 @@ export enum Breed {
     TerrierSmall = "terrierSmall", // Terrier (Small)
     Weimaraner = "weimaraner",
     Whippet = "whippet",
+    Other = "other",
 }
 
 export enum Gender {
@@ -143,6 +144,7 @@ export interface IPost {
     type: FosterType;
     size: Size;
     breed: Breed[];
+    otherBreedDescription?: string;
     gender: Gender;
     age: Age;
     temperament: Temperament[];

package.json

@@ -13,4 +13,4 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
   }
-}
+}

web/components/PetPostModal/EditPostModal.tsx

@@ -101,6 +101,7 @@ const formSchema = z.object({
   breed: z
     .array(z.nativeEnum(Breed))
     .transform((val, ctx) => arrayEmptyValidation(val, ctx, "Breed")),
+  otherBreedDescription: z.string().optional(),
   temperament: z.array(z.nativeEnum(Temperament)),
   medical: z.array(z.nativeEnum(Medical)),
   behavioral: z.array(z.nativeEnum(Behavioral)),
@@ -155,6 +156,7 @@ const EditPostModal: React.FC<{
     medical,
     gender,
     breed,
+    otherBreedDescription,
     getsAlongWithOlderKids,
     getsAlongWithYoungKids,
     getsAlongWithLargeDogs,
@@ -172,6 +174,7 @@ const EditPostModal: React.FC<{
     type,
     size,
     breed,
+    otherBreedDescription,
     draft,
     temperament,
     spayNeuterStatus,
@@ -490,42 +493,42 @@ const EditPostModal: React.FC<{
             onClick={
               isContentView
                 ? () => {
-                    setIsContentView(false);
-                  }
+                  setIsContentView(false);
+                }
                 : () => {
-                    //TODO: Wait for success to close.
-                    const validation = formSchema.safeParse(formState);
-                    if (validation.success) {
-                      setIsLoading(true);
-                      editPost(!formState.draft)
-                        .then(() => {
-                          onClose();
-                          setFileArr(fileArr);
-                          setIsContentView(true);
-                          dispatch({
-                            type: "clear",
-                          });
-                        })
-                        .finally(() => {
-                          setIsLoading(false);
+                  //TODO: Wait for success to close.
+                  const validation = formSchema.safeParse(formState);
+                  if (validation.success) {
+                    setIsLoading(true);
+                    editPost(!formState.draft)
+                      .then(() => {
+                        onClose();
+                        setFileArr(fileArr);
+                        setIsContentView(true);
+                        dispatch({
+                          type: "clear",
                         });
-                    } else {
-                      toast.closeAll();
-                      toast({
-                        title: "Error",
-                        description: validation.error.issues
-                          .map((issue) => issue.message)
-                          .join("\r\n"),
-                        containerStyle: {
-                          whiteSpace: "pre-line",
-                        },
-                        status: "error",
-                        duration: 5000,
-                        isClosable: true,
-                        position: "top",
+                      })
+                      .finally(() => {
+                        setIsLoading(false);
                       });
-                    }
+                  } else {
+                    toast.closeAll();
+                    toast({
+                      title: "Error",
+                      description: validation.error.issues
+                        .map((issue) => issue.message)
+                        .join("\r\n"),
+                      containerStyle: {
+                        whiteSpace: "pre-line",
+                      },
+                      status: "error",
+                      duration: 5000,
+                      isClosable: true,
+                      position: "top",
+                    });
                   }
+                }
             }
           >
             {isContentView ? "Next" : "Post"}

web/components/PostCreationModal/Form/FormSlide.tsx

@@ -193,15 +193,31 @@ export const FormSlide: React.FC<{
               value: k,
               label: v,
             }))}
-            onChange={(e) =>
+            onChange={(e) => {
               dispatchFormState({
                 type: "setField",
                 key: "breed",
                 data: e!.map(({ value }) => value) as Breed[],
               })
             }
+            }
+          />
+        </FormControl>
+        {formState.breed.includes(Breed.Other) ?
+        <FormControl className="otherBreedForm" gridColumn="span 1">
+          <FormLabel>Other Breed Description</FormLabel>
+          <Textarea
+            value={formState.otherBreedDescription}
+            onChange={(e) =>
+              dispatchFormState({
+                type: "setField",
+                key: "otherBreedDescription",
+                data: e.target.value,
+              })
+            }
           />
         </FormControl>
+        : <></>}
         <FormControl className="temperamentForm" gridColumn="span 1">
           <FormLabel>Temperament</FormLabel>
           <Select

web/components/PostCreationModal/PostCreationModal.tsx

@@ -103,6 +103,7 @@ const formSchema = z.object({
   breed: z
     .array(z.nativeEnum(Breed))
     .transform((val, ctx) => arrayEmptyValidation(val, ctx, "Breed")),
+  otherBreedDescription: z.string().optional(),
   temperament: z.array(z.nativeEnum(Temperament)),
   medical: z.array(z.nativeEnum(Medical)),
   behavioral: z.array(z.nativeEnum(Behavioral)),
@@ -160,6 +161,7 @@ const PostCreationModal: React.FC<{
     type: null,
     size: null,
     breed: [],
+    otherBreedDescription: "",
     temperament: [],
     medical: [],
     behavioral: [],

web/db/models/Post.ts

@@ -36,6 +36,10 @@ const postSchema = new Schema<IPost | IDraftPost>({
       enum: Object.values(Breed),
     },
   ],
+  otherBreedDescription: {
+    type: String,
+    required: false
+  },
   gender: {
     type: String,
     default: null,

web/pages/onboarding.tsx

@@ -171,6 +171,7 @@ function Onboarding() {
         { value: Breed.TerrierSmall, label: "Terrier (Small)" },
         { value: Breed.Weimaraner, label: "Weimaraner" },
         { value: Breed.Whippet, label: "Whippet" },
+        { value: Breed.Other, label: "Other" },
       ],
       qtype: QType.Question,
       singleAnswer: false,
@@ -234,6 +235,7 @@ function Onboarding() {
         { value: Breed.TerrierSmall, label: "Terrier (Small)" },
         { value: Breed.Weimaraner, label: "Weimaraner" },
         { value: Breed.Whippet, label: "Whippet" },
+        { value: Breed.Other, label: "Other" },
       ],
       qtype: QType.Question,
       singleAnswer: false,

web/pages/post/[postId].tsx

@@ -157,6 +157,7 @@ function PostPage({
     medical,
     gender,
     breed,
+    otherBreedDescription,
     getsAlongWithOlderKids,
     getsAlongWithYoungKids,
     getsAlongWithLargeDogs,
@@ -364,7 +365,12 @@ function PostPage({
               </Text>
               <Text>
                 <b>Breed: </b>
-                {breed.map((breed) => breedLabels[breed]).join(", ")}
+                {breed.map((breed) => {
+                  if (breed === "other" && otherBreedDescription) {
+                    return "Other (" + otherBreedDescription + ")";
+                  }
+                  return breedLabels[breed]
+                }).join(", ")}
               </Text>
               <Text>
                 <b>Size: </b>

web/server/routers/post.ts

@@ -54,6 +54,7 @@ const postSchema = z.object({
   type: z.nativeEnum(FosterType),
   size: z.nativeEnum(Size),
   breed: z.array(z.nativeEnum(Breed)),
+  otherBreedDescription: z.string().optional(),
   gender: z.nativeEnum(Gender),
   age: z.nativeEnum(Age),
   draft: z.boolean(),

web/utils/types/post.ts

@@ -115,6 +115,7 @@ export enum Breed {
   TerrierSmall = "terrierSmall", // Terrier (Small)
   Weimaraner = "weimaraner",
   Whippet = "whippet",
+  Other = "other",
 }
 
 export const breedLabels: Record<Breed, string> = {
@@ -168,6 +169,7 @@ export const breedLabels: Record<Breed, string> = {
   [Breed.TerrierSmall]: "Terrier (Small)", // Terrier (Small)
   [Breed.Weimaraner]: "Weimaraner",
   [Breed.Whippet]: "Whippet",
+  [Breed.Other]: "Other",
 };
 
 export enum Gender {
@@ -325,6 +327,7 @@ export interface IPost {
   type: FosterType;
   size: Size;
   breed: Breed[];
+  otherBreedDescription?: string;
   gender: Gender;
   age: Age;
   temperament: Temperament[];

yarn.lock

@@ -498,4 +498,4 @@ wrap-ansi@^7.0.0:
 yaml@^2.1.3:
   version "2.2.1"
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz"
-  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
+  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==