Merge branch 'develop' into contribution

Author: NiallJoeMaher

.github/pull_request_template.md

@@ -1,24 +1,25 @@
 # ✨ Codu Pull Request 💻
 
 Fixes #(issue)
+
 <!-- for example `Fixes #1012` -->
 
 ## Pull Request details
 
-- INFO ABOUT YOUR PULL REQUEST GOES HERE (Please be as descriptive as possible) 🤜
-- Use bullet points to make it easy to read.
+<!-- - INFO ABOUT YOUR PULL REQUEST GOES HERE (Please be as descriptive as possible) 🤜
+- Use bullet points to make it easy to read. -->
 
 ## Any Breaking changes
 
-- IF ANYTHING YOU'RE COMMITTING WOULD BREAK SOMETHING, INCLUDE HERE WHAT WOULD BREAK
-- IF YOU HAVE NO BREAKING CHANGES, ENTER 'None'
+<!-- - IF ANYTHING YOU'RE COMMITTING WOULD BREAK SOMETHING, INCLUDE HERE WHAT WOULD BREAK
+- IF YOU HAVE NO BREAKING CHANGES, ENTER 'None' --->
 
 ## Associated Screenshots
 
-- IF YOU HAVE ANY SCREENSHOTS, INCLUDE THEM HERE. _( Welcome file extensions include gifs/png screenshots of your feature in action )_
-- IF YOU HAVE NO SCREENSHOTS, ENTER 'None'
+<!-- - IF YOU HAVE ANY SCREENSHOTS, INCLUDE THEM HERE. _( Welcome file extensions include gifs/png screenshots of your feature in action )_
+- IF YOU HAVE NO SCREENSHOTS, ENTER 'None' --->
 
 ## [Optional] What gif best describes this PR or how it makes you feel
 
-- [HERES](https://stackoverflow.com/questions/34341808/is-there-a-way-to-add-an-animated-gif-to-a-markdown-file) HOW TO EASILY ADD GIFS TO A PR
-- IF NO GIF COMES TO MIND, ENTER 'None'
+<!-- - [HERES](https://stackoverflow.com/questions/34341808/is-there-a-way-to-add-an-animated-gif-to-a-markdown-file) HOW TO EASILY ADD GIFS TO A PR
+- IF NO GIF COMES TO MIND, ENTER 'None' -->

app/(app)/jobs/create/_client.tsx

@@ -24,11 +24,15 @@ import { Strong, Text } from "@/components/ui-components/text";
 import { Textarea } from "@/components/ui-components/textarea";
 import { saveJobsInput, saveJobsSchema } from "@/schema/job";
 import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { uploadFile } from "@/utils/s3helpers";
+import { getUploadUrl } from "@/app/actions/getUploadUrl";
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import React, { useRef, useState } from "react";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import * as Sentry from "@sentry/nextjs";
+import { toast } from "sonner";
 
 export default function Content() {
   const {
@@ -54,8 +58,70 @@ export default function Content() {
   const flagEnabled = isFlagEnabled(FEATURE_FLAGS.JOBS);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [imgUrl, setImgUrl] = useState<string | null>(null);
+  const [uploadStatus, setUploadStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
   const onSubmit: SubmitHandler<saveJobsInput> = (values) => {
-    console.log(values);
+    const formData = {
+      ...values,
+      companyLogo: imgUrl || undefined,
+    };
+    console.log(formData);
+  };
+
+  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (uploadStatus === "loading") {
+      return toast.info("Upload in progress, please wait...");
+    }
+
+    if (e.target.files && e.target.files.length > 0) {
+      setUploadStatus("loading");
+
+      const file = e.target.files[0];
+      const { size, type } = file;
+
+      if (size > 1048576) {
+        setUploadStatus("error");
+        return toast.error("File size too big (max 1MB).");
+      }
+
+      try {
+        const res = await getUploadUrl({
+          size,
+          type,
+          uploadType: "uploads",
+        });
+
+        const signedUrl = res?.data;
+
+        if (!signedUrl) {
+          setUploadStatus("error");
+          return toast.error(
+            "Something went wrong uploading the logo, please retry.",
+          );
+        }
+
+        const { fileLocation } = await uploadFile(signedUrl, file);
+        if (!fileLocation) {
+          setUploadStatus("error");
+          return toast.error(
+            "Something went wrong uploading the logo, please retry.",
+          );
+        }
+
+        setUploadStatus("success");
+        setImgUrl(fileLocation);
+        toast.success("Company logo uploaded successfully!");
+      } catch (error) {
+        setUploadStatus("error");
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "An error occurred while uploading the logo.",
+        );
+        Sentry.captureException(error);
+      }
+    }
   };
   if (!flagEnabled) {
     notFound();
@@ -89,15 +155,16 @@ export default function Content() {
                 onClick={() => {
                   fileInputRef.current?.click();
                 }}
+                disabled={uploadStatus === "loading"}
               >
-                Change Logo
+                {uploadStatus === "loading" ? "Uploading..." : "Change Logo"}
               </Button>
               <Input
                 type="file"
                 id="file-input"
                 name="company-logo"
                 accept="image/png, image/gif, image/jpeg"
-                onChange={() => {}}
+                onChange={handleLogoUpload}
                 className="hidden"
                 ref={fileInputRef}
               />

app/(app)/my-posts/_client.tsx

@@ -206,11 +206,11 @@ const MyPosts = () => {
                             <div className="dropdown-bg py-1">
                               <MenuItem>
                                 <Link
-                                  className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
+                                  className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-neutral-500"
                                   href={`/create/${id}`}
                                 >
                                   <PencilIcon
-                                    className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                    className="mr-3 h-5 w-5 text-neutral-500 group-hover:text-neutral-400"
                                     aria-hidden="true"
                                   />
                                   Edit
@@ -220,10 +220,10 @@ const MyPosts = () => {
                               <MenuItem>
                                 <button
                                   onClick={() => setSelectedArticleToDelete(id)}
-                                  className="dropdown-item group flex w-full items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
+                                  className="dropdown-item group flex w-full items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-neutral-500"
                                 >
                                   <TrashIcon
-                                    className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                    className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-400"
                                     aria-hidden="true"
                                   />
                                   Delete

package.json

@@ -84,7 +84,7 @@
     "isomorphic-dompurify": "^2.16.0",
     "lowlight": "^3.1.0",
     "lucide-react": "^0.451.0",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.9",
     "next": "^14.2.21",
     "next-auth": "^4.24.9",
     "next-safe-action": "^7.9.4",

schema/job.ts

@@ -23,6 +23,7 @@ export const saveJobsSchema = z.object({
     .url("Provide a valid url")
     .optional()
     .or(z.literal("")),
+  companyLogo: z.string().optional(),
   remote: z.boolean().optional().default(false),
   relocation: z.boolean().optional().default(false),
   visa_sponsorship: z.boolean().optional().default(false),