From dd9be4b565c6090dcdb399bacc4d7acd531e8545 Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Thu, 24 Oct 2024 01:18:45 +0530
Subject: [PATCH] add logo upload

---
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   1 +
 src/actions/auth.actions.ts                   |   3 +-
 src/components/Onboarding.tsx                 | 149 ------------------
 src/components/auth/signup.tsx                |  35 ++++
 src/lib/validators/auth.validator.ts          |   2 +
 6 files changed, 42 insertions(+), 150 deletions(-)
 create mode 100644 prisma/migrations/20241023193014_added_logo_field/migration.sql
 delete mode 100644 src/components/Onboarding.tsx

diff --git a/prisma/migrations/20241023193014_added_logo_field/migration.sql b/prisma/migrations/20241023193014_added_logo_field/migration.sql
new file mode 100644
index 00000000..258c08ef
--- /dev/null
+++ b/prisma/migrations/20241023193014_added_logo_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Company" ADD COLUMN     "logo" TEXT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index eee59b2d..14ec3d51 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -36,6 +36,7 @@ model User {
 model Company {
   id          String    @id @default(cuid())
   name        String
+  logo        String?
   website     String?
   description String?
   jobs        Job[]
diff --git a/src/actions/auth.actions.ts b/src/actions/auth.actions.ts
index 8818d7be..a5b43444 100644
--- a/src/actions/auth.actions.ts
+++ b/src/actions/auth.actions.ts
@@ -72,6 +72,7 @@ export const signUp = withServerActionAsyncCatcher<
               name: _data.companyInfo.name,
               website: _data.companyInfo.website || '',
               description: _data.companyInfo.description || '',
+              logo: _data.companyInfo.logo || '',
               userId: user.id,
             },
           });
@@ -84,6 +85,7 @@ export const signUp = withServerActionAsyncCatcher<
               title: 'Company Profile',
               companyName: _data.companyInfo.name,
               companyBio: _data.companyInfo.description || '',
+              companyLogo: _data.companyInfo.logo || '',
               companyEmail: baseData.email,
               category: 'Company',
               type: 'Full_time',
@@ -91,7 +93,6 @@ export const signUp = withServerActionAsyncCatcher<
               city: '',
               address: '',
               application: '',
-              companyLogo: '',
               skills: [],
             },
           });
diff --git a/src/components/Onboarding.tsx b/src/components/Onboarding.tsx
deleted file mode 100644
index 8f90b99c..00000000
--- a/src/components/Onboarding.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Building, Check } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const companySetupSchema = z.object({
-  companyName: z.string().min(1, 'Company name is required'),
-  companyWebsite: z.string().url('Invalid URL'),
-  description: z.string().min(10, 'Description must be at least 10 characters'),
-});
-
-type CompanySetupForm = z.infer<typeof companySetupSchema>;
-
-export default function OnboardingComponent() {
-  const [isOpen, setIsOpen] = useState(true);
-  const [selectedRole, setSelectedRole] = useState<string | null>(null);
-  const [showCompanySetup, setShowCompanySetup] = useState(false);
-  const [showConfirmation, setShowConfirmation] = useState(false);
-  const router = useRouter();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<CompanySetupForm>({
-    resolver: zodResolver(companySetupSchema),
-  });
-
-  const handleRoleSelection = (role: string) => {
-    setSelectedRole(role);
-    if (role === 'jobSeeker') {
-      router.push('/home');
-    } else if (role === 'hr') {
-      setShowCompanySetup(true);
-    }
-    setIsOpen(false);
-  };
-
-  const handleCompanySetup = async () => {
-    setShowCompanySetup(false);
-    setShowConfirmation(true);
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Choose your role</DialogTitle>
-            <DialogDescription>
-              Select a role to personalize your experience
-            </DialogDescription>
-          </DialogHeader>
-          <RadioGroup onValueChange={handleRoleSelection}>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="jobSeeker" id="jobSeeker" />
-              <Label htmlFor="jobSeeker">Job Seeker</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <RadioGroupItem value="hr" id="hr" />
-              <Label htmlFor="hr">HR</Label>
-            </div>
-          </RadioGroup>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={showCompanySetup} onOpenChange={setShowCompanySetup}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>
-              Set up your company profile for {selectedRole}
-            </DialogTitle>
-          </DialogHeader>
-          <form
-            onSubmit={handleSubmit(handleCompanySetup)}
-            className="space-y-4"
-          >
-            <div className="flex justify-center">
-              <Building className="w-16 h-16 text-gray-400" />
-            </div>
-            <Input
-              type="file"
-              accept="image/*"
-              placeholder="Upload Company Logo"
-            />
-            <Input placeholder="Company Name" {...register('companyName')} />
-            {errors.companyName && (
-              <p className="text-red-500">{errors.companyName.message}</p>
-            )}
-            <Input
-              placeholder="Company Website"
-              {...register('companyWebsite')}
-            />
-            {errors.companyWebsite && (
-              <p className="text-red-500">{errors.companyWebsite.message}</p>
-            )}
-            <Textarea placeholder="Description" {...register('description')} />
-            {errors.description && (
-              <p className="text-red-500">{errors.description.message}</p>
-            )}
-            <Button type="submit" className="w-full">
-              Finish Setup
-            </Button>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={showConfirmation} onOpenChange={setShowConfirmation}>
-        <DialogContent className="sm:max-w-[425px] text-center">
-          <div className="flex justify-center mb-4">
-            <div className="rounded-full bg-green-100 p-3">
-              <Check className="w-8 h-8 text-green-600" />
-            </div>
-          </div>
-          <DialogTitle>You are All Set</DialogTitle>
-          <DialogDescription>Start posting jobs</DialogDescription>
-          <div className="flex flex-col gap-2 mt-4">
-            <Button onClick={() => router.push('/post-job')}>
-              Post your First Job
-            </Button>
-            <Button variant="outline" onClick={() => router.push('/home')}>
-              Go to Home
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <h1 className="text-4xl font-bold text-gray-800">
-        Welcome to Our 100xJobs
-      </h1>
-    </div>
-  );
-}
diff --git a/src/components/auth/signup.tsx b/src/components/auth/signup.tsx
index ac652d39..4a094b01 100644
--- a/src/components/auth/signup.tsx
+++ b/src/components/auth/signup.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -31,6 +32,7 @@ export const Signup = () => {
   const { toast } = useToast();
   const router = useRouter();
   const [isHr, setIsHr] = useState(false);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
 
   const form = useForm<SignupData>({
     resolver: zodResolver(SignupSchema),
@@ -51,6 +53,17 @@ export const Signup = () => {
     },
   });
 
+  const handleLogoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setLogoPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
   async function signupHandler(data: Omit<SignupData, 'companyInfo'>) {
     try {
       const signupData: SignupData = {
@@ -190,6 +203,28 @@ export const Signup = () => {
                   </FormItem>
                 )}
               />
+              <FormItem>
+                <FormLabel>Company Logo</FormLabel>
+                <FormControl>
+                  <Input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleLogoChange}
+                  />
+                </FormControl>
+                {logoPreview && (
+                  <div className="mt-2">
+                    <Image
+                      src={logoPreview}
+                      alt="Company Logo Preview"
+                      width={100}
+                      height={100}
+                      className="object-contain"
+                    />
+                  </div>
+                )}
+                <FormMessage />
+              </FormItem>
             </div>
           )}
 
diff --git a/src/lib/validators/auth.validator.ts b/src/lib/validators/auth.validator.ts
index 514bbba5..1113e522 100644
--- a/src/lib/validators/auth.validator.ts
+++ b/src/lib/validators/auth.validator.ts
@@ -11,6 +11,7 @@ export const companySetupSchema = z.object({
   companyName: z.string().min(1, 'Company name is required'),
   companyWebsite: z.string().url('Invalid URL'),
   description: z.string().min(10, 'Description must be at least 10 characters'),
+  logo: z.string().optional(),
 });
 
 // Define the company info schema
@@ -18,6 +19,7 @@ export const CompanyInfoSchema = z.object({
   name: z.string(),
   website: z.string().optional(),
   description: z.string().optional(),
+  logo: z.string().optional(),
 });
 
 // Extend the base signup schema