Job form fix (code100x#406)

* ui-fixes

* reset gmaps input

* fix:ui-fixes+job Form Submission Fix

* removed-unnecessary-allowed-domanin

* removed-unnecessary-overflow

next.config.js

@@ -21,6 +21,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'job-board.b-cdn.net', // Change this to your CDN domain
       },
+      {
+        protocol: 'https',
+        hostname: 'wwww.example.com',
+      },
     ],
   },
 };

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

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

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} />
         ))}

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"

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}

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"
                     />

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()