Merge to Prod

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/FileUpload/FileDropZone.tsx

@@ -71,8 +71,59 @@ function FileDropZone(props: PropsType) {
     lg: <FullDropZone />,
   });
 
+  const MAX_VIDEO_SIZE = 50 * 1024 * 1024; // 50MB
+  const MAX_IMAGE_SIZE = 3 * 1024 * 1024; // 3MB
+
+  async function resizeImage(file: File): Promise<File> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const img = new Image();
+        img.src = reader.result as string;
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return reject(new Error("Canvas context not available"));
+
+          const MAX_WIDTH = 4096;
+          const MAX_HEIGHT = 4096;
+          let width = img.width;
+          let height = img.height;
+
+          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+            if (width > height) {
+              height = (height * MAX_WIDTH) / width;
+              width = MAX_WIDTH;
+            } else {
+              width = (width * MAX_HEIGHT) / height;
+              height = MAX_HEIGHT;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+          ctx.drawImage(img, 0, 0, width, height);
+
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(new File([blob], file.name, { type: "image/jpeg" }));
+              } else {
+                reject(new Error("Failed to resize image"));
+              }
+            },
+            "image/jpeg",
+            0.8
+          );
+        };
+      };
+      reader.onerror = (error) => reject(error);
+    });
+  }
+
   const onDrop = useCallback(
-    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+    async (acceptedFiles: File[], fileRejections: FileRejection[]) => {
       if (fileRejections.length > 0) {
         toast({
           status: "error",
@@ -104,7 +155,49 @@ function FileDropZone(props: PropsType) {
         return;
       }
 
-      setFileArr([...fileArr, ...acceptedFiles]);
+      let newFiles: File[] = [];
+
+      const processedFiles = await Promise.all(
+        acceptedFiles.map(async (file) => {
+          console.log(file.size);
+          if (file.type.startsWith("video/")) {
+            if (file.size > MAX_VIDEO_SIZE) {
+              toast({
+                status: "error",
+                position: "top",
+                title: "Error",
+                description: `The video ${file.name} exceeds the 50MB limit.`,
+                duration: 4000,
+                isClosable: true,
+              });
+              return null;
+            }
+            return file;
+          } else if (file.type.startsWith("image/")) {
+            if (file.size > MAX_IMAGE_SIZE) {
+              try {
+                return await resizeImage(file);
+              } catch (error) {
+                console.error(`Failed to resize image ${file.name}`, error);
+                toast({
+                  status: "error",
+                  position: "top",
+                  title: "Error",
+                  description: `Failed to resize image ${file.name}.`,
+                  duration: 4000,
+                  isClosable: true,
+                });
+                return null;
+              }
+            }
+            return file;
+          }
+          return null;
+        })
+      );
+
+      newFiles = processedFiles.filter((file): file is File => file !== null);
+      setFileArr([...fileArr, ...newFiles]);
     },
     [fileArr, setFileArr]
   );

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==