Fixed 'Create Job' button

src/actions/upload-to-cdn.ts

@@ -1,20 +1,32 @@
 'use server';
 
+import { withServerActionAsyncCatcher } from '@/lib/async-catch';
+import { ErrorHandler } from '@/lib/error';
+import { SuccessResponse } from '@/lib/success';
+import { ServerActionReturnType } from '@/types/api.types';
 import { v4 as uuidv4 } from 'uuid';
 
-export async function uploadFileAction(formData: FormData) {
-  const CDN_BASE_UPLOAD_URL = process.env.CDN_BASE_UPLOAD_URL!;
-  const CDN_BASE_ACCESS_URL = process.env.CDN_BASE_ACCESS_URL!;
-  const CDN_API_KEY = process.env.CDN_API_KEY!;
-
+type ResponseType = {
+  message?: string;
+  url?: string;
+};
+export const uploadFileAction = withServerActionAsyncCatcher<
+  FormData,
+  ServerActionReturnType<ResponseType>
+>(async (formData) => {
   try {
+    const CDN_BASE_UPLOAD_URL = process.env.CDN_BASE_UPLOAD_URL!;
+    const CDN_BASE_ACCESS_URL = process.env.CDN_BASE_ACCESS_URL!;
+    const CDN_API_KEY = process.env.CDN_API_KEY!;
+
     const file = formData.get('file') as File;
-    const uniqueFileName = formData.get('uniqueFileName') || uuidv4(); // Generate unique key if not provided
+    const uniqueFileName = formData.get('uniqueFileName') || uuidv4();
 
     if (!file) {
-      return { error: 'File is required', status: 400 };
+      throw new ErrorHandler('File is required', 'BAD_REQUEST');
     }
-    const uploadUrl = `${CDN_BASE_UPLOAD_URL}/${uniqueFileName}.webp`;
+
+    const uploadUrl = `${CDN_BASE_UPLOAD_URL}/${uniqueFileName}`;
     const fileBuffer = Buffer.from(await file.arrayBuffer());
 
     const response = await fetch(uploadUrl, {
@@ -25,16 +37,17 @@ export async function uploadFileAction(formData: FormData) {
       },
       body: fileBuffer,
     });
+
     if (response.ok) {
-      return {
+      return new SuccessResponse('File uploaded successfully', 200, {
         message: 'File uploaded successfully',
-        url: `${CDN_BASE_ACCESS_URL}/${uniqueFileName}.webp`,
-      };
+        url: `${CDN_BASE_ACCESS_URL}/${uniqueFileName}`,
+      }).serialize();
     } else {
-      return { error: 'Failed to upload file', status: response.status };
+      throw new ErrorHandler('Failed to upload file', 'INTERNAL_SERVER_ERROR');
     }
   } catch (error) {
-    console.error('Error uploading file:', error);
-    return { error: 'Internal server error', status: 500 };
+    console.error('Error during file upload:', error);
+    throw new ErrorHandler('Failed to upload file', 'INTERNAL_SERVER_ERROR');
   }
-}
+});

src/components/DescriptionEditor.tsx

@@ -23,9 +23,10 @@ const DescriptionEditor: React.FC<DescriptionEditorProps> = ({
     setDescription(initialValue || '');
   }, [initialValue]);
 
-  const handleChange = (content: string) => {
+  // @ts-ignore
+  const handleChange = (content: string, _delta, _source, editor) => {
     setDescription(content);
-    onDescriptionChange(fieldName, content); // Pass the content back to the parent form
+    onDescriptionChange(fieldName, editor.getText());
   };
 
   const modules = {
@@ -46,7 +47,6 @@ const DescriptionEditor: React.FC<DescriptionEditorProps> = ({
     'bullet',
     'link',
   ];
-
   return (
     <div data-text-editor={fieldName}>
       <ReactQuill

src/components/gmaps-autosuggest.tsx

@@ -7,9 +7,11 @@ export type TgmapsAddress = { city: string; fullAddress: string };
 export default function GmapsAutocompleteAddress({
   form,
   innerRef,
+  fieldProps,
 }: {
   form: any;
   innerRef: any;
+  fieldProps: any;
 }) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -31,6 +33,7 @@ export default function GmapsAutocompleteAddress({
     const { name, formatted_address } = autocomplete.getPlace();
     form.setValue('city', name);
     form.setValue('address', formatted_address);
+    form.trigger(['city', 'address']);
   }
 
   function initializeGmaps() {
@@ -53,11 +56,13 @@ export default function GmapsAutocompleteAddress({
       />
 
       <Input
+        {...fieldProps}
         ref={inputRef}
         id="autocomplete"
         type="text"
         className="w-full bg-gray-800 border-none text-white"
         placeholder="Where is the job located?"
+        onChangeCapture={() => form.setValue('city', '')}
       />
     </>
   );