From 6459a85ba646be329e0d27df849c52f7bbbe508c Mon Sep 17 00:00:00 2001
From: aakash2330 <aakash2330@gmail.com>
Date: Mon, 23 Sep 2024 20:30:14 +0530
Subject: [PATCH 1/5] ui-fixes

---
 src/components/RecentJobs.tsx      | 2 ++
 src/components/TestimonialCard.tsx | 4 ++--
 src/components/Testimonials.tsx    | 2 +-
 src/layouts/mobile-nav.tsx         | 2 ++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/RecentJobs.tsx b/src/components/RecentJobs.tsx
index 73573269..827c039f 100644
--- a/src/components/RecentJobs.tsx
+++ b/src/components/RecentJobs.tsx
@@ -21,6 +21,8 @@ export default async function RecentJobs() {
             {job.companyLogo ? (
               <div className="w-12 h-12 rounded-full flex items-center justify-center border-none ouline-none ">
                 <Image
+                  width={400}
+                  height={400}
                   className="w-12 h-12"
                   src={job.companyLogo}
                   alt="company-logo"
diff --git a/src/components/TestimonialCard.tsx b/src/components/TestimonialCard.tsx
index e1505fca..6a85f9ed 100644
--- a/src/components/TestimonialCard.tsx
+++ b/src/components/TestimonialCard.tsx
@@ -12,7 +12,7 @@ export default function TestimonialCard({ testimonial }: testimonialCardProps) {
   const { theme } = useTheme();
   return (
     <motion.div
-      className="md:w-5/6 w-full  h-auto mx-auto my-2 cursor-pointer"
+      className="md:w-5/6 w-full md:h-[15rem] h-auto mx-auto my-2 cursor-pointer"
       whileHover={{ y: -5 }}
       transition={{ type: 'tween' }}
     >
@@ -27,7 +27,7 @@ export default function TestimonialCard({ testimonial }: testimonialCardProps) {
                 : '',
         }}
       >
-        <div className="bg-gradient-to-b dark:from-[#0F172A] dark:to-[#020817] from-[#F1F5F9] to-[#FFFFFF] rounded-3xl p-5 flex flex-col  relative">
+        <div className="bg-gradient-to-b overflow-y-auto dark:from-[#0F172A] dark:to-[#020817] from-[#F1F5F9] to-[#FFFFFF] rounded-3xl p-5 flex flex-col relative">
           <div className="w-full flex items-center">
             <Quote className="w-7 h-7 absolute top-5 right-5 text-[#94A3B8]" />
             <p className="w-12 h-12 p-2 rounded-full flex items-center justify-center border bg-gray-500 text-white">
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
index 7d022498..8c0adc02 100644
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@@ -13,7 +13,7 @@ export default function Testimonials() {
           Real Success Stories from Job Seekers and Employers
         </p>
       </div>
-      <div className="w-full grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 items-center mt-10">
+      <div className="w-full grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 items-center mt-10">
         {testimonials.map((testimonial, i) => (
           <TestimonialCard key={i} testimonial={testimonial} />
         ))}
diff --git a/src/layouts/mobile-nav.tsx b/src/layouts/mobile-nav.tsx
index a0d0d7b6..de226332 100644
--- a/src/layouts/mobile-nav.tsx
+++ b/src/layouts/mobile-nav.tsx
@@ -85,6 +85,8 @@ export function MobileNav() {
                 ) : (
                   <div className="w-12 h-12 rounded-full flex items-center justify-center border-none ouline-none">
                     <Image
+                      width={400}
+                      height={400}
                       className="w-12 h-12"
                       src={spotifyLogo}
                       alt="company-logo"

From c239bef0a56e613833e22635b3bbcc348af0769c Mon Sep 17 00:00:00 2001
From: aakash2330 <aakash2330@gmail.com>
Date: Tue, 24 Sep 2024 01:22:06 +0530
Subject: [PATCH 2/5] reset gmaps input

---
 src/components/RecentJobs.tsx        |  6 +-
 src/components/gmaps-autosuggest.tsx | 88 +++++++++++++++++-----------
 src/components/job-form.tsx          | 10 +++-
 3 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/src/components/RecentJobs.tsx b/src/components/RecentJobs.tsx
index 827c039f..62e4c5db 100644
--- a/src/components/RecentJobs.tsx
+++ b/src/components/RecentJobs.tsx
@@ -3,6 +3,7 @@ import { calculateTimeSincePosted, getFirstLetterCaps } from './job-landing';
 import Image from 'next/image';
 import { formatSalary } from '@/lib/utils';
 import { Briefcase, MapPin } from 'lucide-react';
+import Link from 'next/link';
 
 export default async function RecentJobs() {
   const recentJobs = await getRecentJobs();
@@ -13,7 +14,8 @@ export default async function RecentJobs() {
   return (
     <div className="w-full grid lg:grid-cols-3  md:grid-cols-2 grid-cols-1 gap-2 items-center mt-10">
       {recentJobs.additional.recentJobs.map((job, i) => (
-        <div
+        <Link
+          href={`/jobs/${job.id}`}
           key={i}
           className="md:max-w-[520px] md:min-w-[300px] min-w-[250px] w-full min-h-[200px] h-auto flex flex-col mx-auto my-2 gap-3 cursor-pointer dark:bg-[#0F172A] border bg-[#F1F5F9] dark:border-[#1E293B] border-[#E2E8F0] rounded-xl md:p-5 p-3 dark:hover:bg-[#111a2f] hover:bg-[#ebf1f7] duration-200 transition ease-in-out"
         >
@@ -76,7 +78,7 @@ export default async function RecentJobs() {
               )
             )}
           </div>
-        </div>
+        </Link>
       ))}
     </div>
   );
diff --git a/src/components/gmaps-autosuggest.tsx b/src/components/gmaps-autosuggest.tsx
index d6e6b76e..0da347d5 100644
--- a/src/components/gmaps-autosuggest.tsx
+++ b/src/components/gmaps-autosuggest.tsx
@@ -1,43 +1,65 @@
 import Script from 'next/script';
 import { Input } from './ui/input';
 import { clientEnv } from '@/env/client';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 export type TgmapsAddress = { city: string; fullAddress: string };
 
-export function GmapsAutocompleteAddress({ form }: { form: any }) {
-  let autocomplete: any = null;
+export const GmapsAutocompleteAddress = forwardRef(
+  function GmapsAutocompleteAddress(
+    {
+      form,
+    }: {
+      form: any;
+    },
+    ref
+  ) {
+    let autocomplete: any = null;
+    const inputRef = useRef<HTMLInputElement | null>(null);
 
-  function onPlaceChanged() {
-    const { name, formatted_address } = autocomplete.getPlace();
-    form.setValue('city', name);
-    form.setValue('address', formatted_address);
-  }
+    function onPlaceChanged() {
+      const { name, formatted_address } = autocomplete.getPlace();
+      form.setValue('city', name);
+      form.setValue('address', formatted_address);
+    }
 
-  function initializeGmaps() {
-    if ((window as any).google) {
-      autocomplete = new (window as any).google.maps.places.Autocomplete(
-        document.getElementById('autocomplete'),
-        {
-          types: ['(cities)'],
-        }
-      );
-      autocomplete.addListener('place_changed', onPlaceChanged);
+    function initializeGmaps() {
+      if ((window as any).google) {
+        autocomplete = new (window as any).google.maps.places.Autocomplete(
+          document.getElementById('autocomplete'),
+          {
+            types: ['(cities)'],
+          }
+        );
+        autocomplete.addListener('place_changed', onPlaceChanged);
+      }
     }
-  }
-  return (
-    <>
-      <Script
-        src={`https://maps.googleapis.com/maps/api/js?key=${clientEnv.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
-        strategy="lazyOnload"
-        onLoad={initializeGmaps}
-      />
 
-      <Input
-        id="autocomplete"
-        type="text"
-        className="w-full bg-gray-800 border-none text-white"
-        placeholder="Where is the job located?"
-      />
-    </>
-  );
-}
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        if (inputRef.current) {
+          inputRef.current.value = '';
+          form.setValue('city', '');
+          form.setValue('address', '');
+        }
+      },
+    }));
+    return (
+      <>
+        <Script
+          src={`https://maps.googleapis.com/maps/api/js?key=${clientEnv.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
+          strategy="lazyOnload"
+          onLoad={initializeGmaps}
+        />
+
+        <Input
+          ref={inputRef}
+          id="autocomplete"
+          type="text"
+          className="w-full bg-gray-800 border-none text-white"
+          placeholder="Where is the job located?"
+        />
+      </>
+    );
+  }
+);
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index ac217430..a902fd59 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -57,6 +57,8 @@ const PostJobForm = () => {
     },
   });
 
+  const ref = useRef<any>(null);
+
   const handleClick = () => {
     //@ts-ignore
     document.getElementById('fileInput').click();
@@ -128,6 +130,7 @@ const PostJobForm = () => {
         variant: 'success',
       });
       setPreviewImg(null);
+      ref.current.reset();
       form.reset(form.formState.defaultValues);
     } catch (_error) {
       toast({
@@ -345,7 +348,10 @@ const PostJobForm = () => {
               )}
             </div>
 
-            <GmapsAutocompleteAddress form={form}></GmapsAutocompleteAddress>
+            <GmapsAutocompleteAddress
+              ref={ref}
+              form={form}
+            ></GmapsAutocompleteAddress>
 
             <FormField
               control={form.control}
@@ -392,7 +398,7 @@ const PostJobForm = () => {
                   <Image
                     src={previewImg}
                     ref={companyLogoImg}
-                    className="object-cover"
+                    className="object-cover w-full h-full"
                     alt="Company Logo"
                     width={80}
                     height={80}

From e2d807ede66a3faaf2aff37c285cd527be47b597 Mon Sep 17 00:00:00 2001
From: aakash2330 <aakash2330@gmail.com>
Date: Wed, 25 Sep 2024 16:04:18 +0530
Subject: [PATCH 3/5] fix:ui-fixes+job Form Submission Fix

---
 next.config.js                       |  9 +++++++
 src/components/Jobcard.tsx           |  6 ++---
 src/components/gmaps-autosuggest.tsx | 24 ++++++++++++++++++-
 src/components/job-form.tsx          | 36 ++++++++++++++++++----------
 src/layouts/mobile-nav.tsx           |  4 +++-
 src/lib/validators/jobs.validator.ts |  4 ++--
 6 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/next.config.js b/next.config.js
index 3f0b294c..ce43b208 100644
--- a/next.config.js
+++ b/next.config.js
@@ -21,6 +21,15 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'job-board.b-cdn.net', // Change this to your CDN domain
       },
+      {
+        protocol: 'https',
+        hostname: 'wwww.example.com',
+      },
+
+      {
+        protocol: 'https',
+        hostname: 'aakash2330.b-cdn.net',
+      },
     ],
   },
 };
diff --git a/src/components/Jobcard.tsx b/src/components/Jobcard.tsx
index f8df21a0..1e4508bf 100644
--- a/src/components/Jobcard.tsx
+++ b/src/components/Jobcard.tsx
@@ -14,12 +14,12 @@ export default function JobCard({ job }: { job: JobType }) {
       className="sm:text-sm text-xs text-slate-500 dark:text-slate-400 font-medium flex flex-col border p-6 bg-slate-100 gap-4 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-lg "
     >
       <div className="flex w-full gap-3">
-        <div>
+        <div className="size-16 relative">
           <Image
             alt="company_logo"
+            className="object-cover"
             src={job.companyLogo}
-            width={48}
-            height={48}
+            fill
           />
         </div>
         <div className="flex flex-col gap-2">
diff --git a/src/components/gmaps-autosuggest.tsx b/src/components/gmaps-autosuggest.tsx
index 25e1e759..edd54bd0 100644
--- a/src/components/gmaps-autosuggest.tsx
+++ b/src/components/gmaps-autosuggest.tsx
@@ -1,10 +1,31 @@
 import Script from 'next/script';
 import { Input } from './ui/input';
 import { clientEnv } from '@/env/client';
+import { useImperativeHandle, useRef } from 'react';
 
 export type TgmapsAddress = { city: string; fullAddress: string };
 
-export default function GmapsAutocompleteAddress({ form }: { form: any }) {
+export default function GmapsAutocompleteAddress({
+  form,
+  innerRef,
+}: {
+  form: any;
+  innerRef: any;
+}) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useImperativeHandle(innerRef, () => {
+    return {
+      reset: () => {
+        if (inputRef.current) {
+          inputRef.current.value = '';
+          form.setValue('city', '');
+          form.setValue('address', '');
+        }
+      },
+    };
+  });
+
   let autocomplete: any = null;
 
   function onPlaceChanged() {
@@ -33,6 +54,7 @@ export default function GmapsAutocompleteAddress({ form }: { form: any }) {
       />
 
       <Input
+        ref={inputRef}
         id="autocomplete"
         type="text"
         className="w-full bg-gray-800 border-none text-white"
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index bb167f51..0d742beb 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -34,13 +34,11 @@ import { Label } from './ui/label';
 import dynamic from 'next/dynamic';
 import { uploadFileAction } from '@/actions/upload-to-cdn';
 
-const DynamicLineDrawingAnimation = dynamic(
-  () => import('./gmaps-autosuggest'),
-  {
-    ssr: false,
-  }
-);
+const DynamicGmapsAutoSuggest = dynamic(() => import('./gmaps-autosuggest'), {
+  ssr: false,
+});
 import { EmployementType } from '@prisma/client';
+import _ from 'lodash';
 
 const PostJobForm = () => {
   const { toast } = useToast();
@@ -56,6 +54,7 @@ const PostJobForm = () => {
       city: '',
       address: '',
       companyLogo: '',
+      hasExperiencerange: false,
       workMode: 'remote',
       type: EmployementType.Full_time,
       category: 'design',
@@ -66,6 +65,8 @@ const PostJobForm = () => {
     },
   });
 
+  const gmapsInputRef = useRef<any>(null);
+
   const handleClick = () => {
     //@ts-ignore
     document.getElementById('fileInput').click();
@@ -132,6 +133,11 @@ const PostJobForm = () => {
         variant: 'success',
       });
       setPreviewImg(null);
+
+      if (gmapsInputRef.current) {
+        gmapsInputRef.current.reset();
+      }
+
       form.reset(form.formState.defaultValues);
     } catch (_error) {
       toast({
@@ -274,10 +280,13 @@ const PostJobForm = () => {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          <SelectItem value="full-time">Full-time</SelectItem>
-                          <SelectItem value="part-time">Part-time</SelectItem>
-                          <SelectItem value="contract">Contract</SelectItem>
-                          <SelectItem value="internship">Internship</SelectItem>
+                          {Object.keys(EmployementType).map((item, index) => {
+                            return (
+                              <SelectItem key={index} value={item}>
+                                {_.startCase(item)}
+                              </SelectItem>
+                            );
+                          })}
                         </SelectContent>
                       </Select>
                     </FormItem>
@@ -356,9 +365,10 @@ const PostJobForm = () => {
                 </div>
               </div>
 
-              <DynamicLineDrawingAnimation
+              <DynamicGmapsAutoSuggest
+                innerRef={gmapsInputRef}
                 form={form}
-              ></DynamicLineDrawingAnimation>
+              ></DynamicGmapsAutoSuggest>
 
               <FormField
                 control={form.control}
@@ -405,7 +415,7 @@ const PostJobForm = () => {
                     <Image
                       src={previewImg}
                       ref={companyLogoImg}
-                      className="object-cover"
+                      className="object-cover w-full h-full"
                       alt="Company Logo"
                       width={80}
                       height={80}
diff --git a/src/layouts/mobile-nav.tsx b/src/layouts/mobile-nav.tsx
index 20e59be3..fe187c76 100644
--- a/src/layouts/mobile-nav.tsx
+++ b/src/layouts/mobile-nav.tsx
@@ -85,7 +85,9 @@ export function MobileNav() {
                 ) : (
                   <div className="w-12 h-12 rounded-full flex items-center justify-center border-none ouline-none">
                     <Image
-                      className="w-12 h-12"
+                      width={400}
+                      height={400}
+                      className="object-cover w-full h-full"
                       src={spotifyLogo}
                       alt="company-logo"
                     />
diff --git a/src/lib/validators/jobs.validator.ts b/src/lib/validators/jobs.validator.ts
index 4162c949..29ddcd52 100644
--- a/src/lib/validators/jobs.validator.ts
+++ b/src/lib/validators/jobs.validator.ts
@@ -12,12 +12,12 @@ export const JobPostSchema = z
     type: z.nativeEnum(EmployementType, {
       message: 'Employment Type is Required',
     }),
-    skills: z.array(z.string()),
+    skills: z.array(z.string()).optional(),
     category: z.string(),
     companyEmail: z.string().email('Invalid email').min(1, 'Email is required'),
     companyBio: z.string().min(1, 'Company Bio is required'),
     companyLogo: z.string().url(),
-    hasSalaryRange: z.boolean(),
+    hasSalaryRange: z.boolean().optional(),
     minSalary: z.coerce
       .number({ message: 'Min salary must be a number' })
       .nonnegative()

From 29bd53d66c6b67b206826e541e73a3e6d3f891f6 Mon Sep 17 00:00:00 2001
From: aakash2330 <aakash2330@gmail.com>
Date: Wed, 25 Sep 2024 16:09:43 +0530
Subject: [PATCH 4/5] removed-unnecessary-allowed-domanin

---
 next.config.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/next.config.js b/next.config.js
index ce43b208..2e772965 100644
--- a/next.config.js
+++ b/next.config.js
@@ -25,11 +25,6 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'wwww.example.com',
       },
-
-      {
-        protocol: 'https',
-        hostname: 'aakash2330.b-cdn.net',
-      },
     ],
   },
 };

From 4f53347748125dacf23aaaaaf320c16602927a94 Mon Sep 17 00:00:00 2001
From: aakash2330 <aakash2330@gmail.com>
Date: Wed, 25 Sep 2024 16:20:17 +0530
Subject: [PATCH 5/5] removed-unnecessary-overflow

---
 src/components/TestimonialCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TestimonialCard.tsx b/src/components/TestimonialCard.tsx
index 6a85f9ed..b16569ba 100644
--- a/src/components/TestimonialCard.tsx
+++ b/src/components/TestimonialCard.tsx
@@ -27,7 +27,7 @@ export default function TestimonialCard({ testimonial }: testimonialCardProps) {
                 : '',
         }}
       >
-        <div className="bg-gradient-to-b overflow-y-auto dark:from-[#0F172A] dark:to-[#020817] from-[#F1F5F9] to-[#FFFFFF] rounded-3xl p-5 flex flex-col relative">
+        <div className="bg-gradient-to-b  dark:from-[#0F172A] dark:to-[#020817] from-[#F1F5F9] to-[#FFFFFF] rounded-3xl p-5 flex flex-col relative">
           <div className="w-full flex items-center">
             <Quote className="w-7 h-7 absolute top-5 right-5 text-[#94A3B8]" />
             <p className="w-12 h-12 p-2 rounded-full flex items-center justify-center border bg-gray-500 text-white">