loader-added

code100x · Oct 16, 2024 · 991b0d7 · 991b0d7
1 parent 62f7f50
commit 991b0d7
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 21 deletions.
diff --git a/src/components/user-multistep-form/add-project-form.tsx b/src/components/user-multistep-form/add-project-form.tsx
@@ -17,6 +17,8 @@ import { Button } from '../ui/button';
 import { Textarea } from '../ui/textarea';
 import { useToast } from '../ui/use-toast';
 import { addUserProjects } from '@/actions/user.profile.actions';
+import { useState } from 'react';
+import { LoadingSpinner } from '../loading-spinner';
 
 export const AddProject = () => {
   const form = useForm<projectSchemaType>({
@@ -28,13 +30,13 @@ export const AddProject = () => {
       projectLiveLink: '',
     },
   });
-
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const { toast } = useToast();
 
   const onSubmit = async (data: projectSchemaType) => {
     try {
+      setIsLoading(true);
       const response = await addUserProjects(data);
-
       if (!response.status) {
         return toast({
           title: response.message || 'Error',
@@ -52,6 +54,8 @@ export const AddProject = () => {
         description: 'Internal server error',
         variant: 'destructive',
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -108,9 +112,15 @@ export const AddProject = () => {
             </FormItem>
           )}
         />
-        <Button type="submit" className="mt-4">
-          Submit
-        </Button>
+        {isLoading ? (
+          <div className="mt-4">
+            <LoadingSpinner />
+          </div>
+        ) : (
+          <Button type="submit" className="mt-4">
+            Submit
+          </Button>
+        )}
       </form>
     </Form>
   );

diff --git a/src/components/user-multistep-form/add-resume-form.tsx b/src/components/user-multistep-form/add-resume-form.tsx
@@ -5,11 +5,13 @@ import { Button } from '../ui/button';
 import { useToast } from '../ui/use-toast';
 import { uploadFileAction } from '@/actions/upload-to-cdn';
 import { addUserResume } from '@/actions/user.profile.actions';
+import { LoadingSpinner } from '../loading-spinner';
 
 export const AddResume = () => {
   const resumeFileRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = useState<File | null>(null);
   const [fileName, setFileName] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleClick = () => {
     if (resumeFileRef.current) {
@@ -55,6 +57,7 @@ export const AddResume = () => {
     formData.append('file', file);
 
     try {
+      setIsLoading(true);
       const uniqueFileName = `${Date.now()}-${file.name}`;
       formData.append('uniqueFileName', uniqueFileName);
 
@@ -86,14 +89,15 @@ export const AddResume = () => {
           variant: 'success',
         });
       }
-    } catch (error) {
-      console.error('Image upload failed:', error);
-      toast({
+    } catch (_error) {
+      return toast({
         title: 'Upload Error',
         description:
           'An error occurred while uploading the file. Please try again.',
         variant: 'destructive',
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -137,9 +141,13 @@ export const AddResume = () => {
       <p className="text-sm text-gray-500 text-center mt-2">
         Allowed file types: PDF, DOC, DOCX
       </p>
-      <Button className="mt-4 w-full" onClick={onSubmit}>
-        Submit
-      </Button>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        <Button className="mt-4 w-full" onClick={onSubmit}>
+          Submit
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/src/components/user-multistep-form/add-skills-form.tsx b/src/components/user-multistep-form/add-skills-form.tsx
@@ -10,11 +10,13 @@ import {
 } from '@/lib/validators/user.profile.validator';
 import { useToast } from '../ui/use-toast';
 import { addUserSkills } from '@/actions/user.profile.actions';
+import { LoadingSpinner } from '../loading-spinner';
 
 export const AddSkills = () => {
   const [comboBoxSelectedValues, setComboBoxSelectedValues] = useState<
     string[]
   >([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const form = useForm<addSkillsSchemaType>({
     resolver: zodResolver(addSkillsSchema),
@@ -25,8 +27,8 @@ export const AddSkills = () => {
   const { toast } = useToast();
   const onSubmit = async (data: addSkillsSchemaType) => {
     try {
+      setIsLoading(true);
       const response = await addUserSkills(data);
-
       if (!response.status) {
         return toast({
           title: response.message || 'Error',
@@ -46,6 +48,8 @@ export const AddSkills = () => {
         description: 'Internal server error',
         variant: 'destructive',
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -57,9 +61,15 @@ export const AddSkills = () => {
           setComboBoxSelectedValues={setComboBoxSelectedValues}
           form={form}
         ></SkillsCombobox>
-        <Button type="submit" className="mt-4">
-          Submit
-        </Button>
+        {isLoading ? (
+          <div className="mt-4">
+            <LoadingSpinner />{' '}
+          </div>
+        ) : (
+          <Button type="submit" className="mt-4">
+            Submit
+          </Button>
+        )}
       </form>
     </Form>
   );

diff --git a/src/components/user-multistep-form/addExperience-form.tsx b/src/components/user-multistep-form/addExperience-form.tsx
@@ -28,6 +28,8 @@ import {
 } from '@/lib/validators/user.profile.validator';
 import { addUserExperience } from '@/actions/user.profile.actions';
 import { useToast } from '../ui/use-toast';
+import { LoadingSpinner } from '../loading-spinner';
+import { useState } from 'react';
 
 export const AddExperience = () => {
   const form = useForm<expFormSchemaType>({
@@ -46,9 +48,11 @@ export const AddExperience = () => {
   });
 
   const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const onSubmit = async (data: expFormSchemaType) => {
     try {
+      setIsLoading(true);
       const response = await addUserExperience(data);
       if (!response.status) {
         return toast({
@@ -67,6 +71,8 @@ export const AddExperience = () => {
         description: 'Internal server error',
         variant: 'destructive',
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -259,10 +265,15 @@ export const AddExperience = () => {
               </FormItem>
             )}
           />
-
-          <Button type="submit" className="w-full">
-            Submit
-          </Button>
+          {isLoading ? (
+            <div className="mt-4">
+              <LoadingSpinner />{' '}
+            </div>
+          ) : (
+            <Button type="submit" className="w-full">
+              Submit
+            </Button>
+          )}
         </form>
       </Form>
     </div>

diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
@@ -49,8 +49,19 @@ export const projectSchema = z.object({
     .string()
     .min(20, { message: 'Summary must be at least 20 characters' })
     .max(255, { message: 'Summary cannot exceed 255 characters' }),
-  projectLiveLink: z.string().url().optional(),
-  projectGithub: z.string({ message: 'Github Link is required' }).url(),
+  projectLiveLink: z
+    .string()
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://'), {
+      message: 'URL must be a https request',
+    })
+    .optional(),
+  projectGithub: z
+    .string({ message: 'Github Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://github.com/'), {
+      message: 'URL must be a GitHub link starting with "https://github.com/"',
+    }),
 });
 
 export type projectSchemaType = z.infer<typeof projectSchema>;