From 2059c7a897a260f9879090be29eeb73ae8a21005 Mon Sep 17 00:00:00 2001
From: Joy-Adah <joya6470@gmail.com>
Date: Fri, 29 Nov 2024 10:47:09 +0100
Subject: [PATCH 1/2] feat: manufacturer account creation backend integration

---
 .../src/app/manufacturer/account/page.tsx     |  2 +
 .../manufacturer/ManufacturerForm.tsx         | 63 ++++++++++++++++++-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/manufacturer/account/page.tsx b/frontend/src/app/manufacturer/account/page.tsx
index 0f7eac4..c6cec5e 100644
--- a/frontend/src/app/manufacturer/account/page.tsx
+++ b/frontend/src/app/manufacturer/account/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import ManufacturerForm from '@/components/manufacturer/ManufacturerForm';
 
 export default function ManufacturerPage() {
diff --git a/frontend/src/components/manufacturer/ManufacturerForm.tsx b/frontend/src/components/manufacturer/ManufacturerForm.tsx
index d466d2e..870b02a 100644
--- a/frontend/src/components/manufacturer/ManufacturerForm.tsx
+++ b/frontend/src/components/manufacturer/ManufacturerForm.tsx
@@ -7,8 +7,51 @@ import {
   MapIcon,
   PhotoIcon,
 } from '@heroicons/react/24/outline';
+import { useState, FormEvent } from 'react';
+import axios from 'axios';
 
 export default function ManufacturerForm() {
+  const [companyName, setCompanyName] = useState('');
+  const [manufacturerName, setManufacturerName] = useState('');
+  const [address, setAddress] = useState('');
+  const [email, setEmail] = useState('');
+  const [registrationCode, setRegistrationCode] = useState('');
+  const [phone, setPhone] = useState('');
+  const [registrationImage, setRegistrationImage] = useState<File | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+    formData.append('name', companyName);
+    formData.append('manufacturerName', manufacturerName);
+    formData.append('address', address);
+    formData.append('email', email);
+    formData.append('rc', registrationCode);
+    formData.append('phone', phone);
+    if (registrationImage) {
+      formData.append('registrationImage', registrationImage);
+    }
+
+    try {
+      // Todo manufacturer api endpoint would change
+      const response = await axios.post('/api/manufacturers', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      if (response.status !== 200) {
+        // Todo handle error
+        throw new Error('Failed to create manufacturer');
+      }
+      // Todo handle success
+    } catch (error) {
+      // Todo handle error
+      console.error('Error creating manufacturer:', error);
+    }
+  };
+
   return (
     <div className=" w-[52rem] space-y-8">
       <div className="text-center">
@@ -19,7 +62,10 @@ export default function ManufacturerForm() {
           Enter your Manufacturer details to get started!
         </p>
       </div>
-      <form className="mt-8 space-y-6 bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl border border-gray-700">
+      <form
+        onSubmit={handleSubmit}
+        className="mt-8 space-y-6 bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl border border-gray-700"
+      >
         <div className="space-y-6">
           <div>
             <label
@@ -40,6 +86,8 @@ export default function ManufacturerForm() {
                 name="companyName"
                 type="text"
                 required
+                value={companyName}
+                onChange={(e) => setCompanyName(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter company name"
               />
@@ -65,6 +113,8 @@ export default function ManufacturerForm() {
                 name="manufacturerName"
                 type="text"
                 required
+                value={manufacturerName}
+                onChange={(e) => setManufacturerName(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter manufacturer name"
               />
@@ -87,6 +137,8 @@ export default function ManufacturerForm() {
                 name="address"
                 type="text"
                 required
+                value={address}
+                onChange={(e) => setAddress(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter company address"
               />
@@ -112,6 +164,8 @@ export default function ManufacturerForm() {
                 name="email"
                 type="email"
                 required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter company email"
               />
@@ -137,6 +191,8 @@ export default function ManufacturerForm() {
                 name="rc"
                 type="text"
                 required
+                value={registrationCode}
+                onChange={(e) => setRegistrationCode(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter registration code"
               />
@@ -162,6 +218,8 @@ export default function ManufacturerForm() {
                 name="phone"
                 type="tel"
                 required
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
                 className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white"
                 placeholder="Enter phone number"
               />
@@ -186,6 +244,9 @@ export default function ManufacturerForm() {
               type="file"
               accept="image/*"
               required
+              onChange={(e) =>
+                setRegistrationImage(e.target.files?.[0] || null)
+              }
               className="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-xl bg-black/30 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out sm:text-sm text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-500 file:text-white hover:file:bg-orange-600"
             />
           </div>

From f481c45e9a07aa37068aa3cc6d76c09c57431458 Mon Sep 17 00:00:00 2001
From: Joy-Adah <joya6470@gmail.com>
Date: Sun, 1 Dec 2024 10:04:24 +0100
Subject: [PATCH 2/2] feat: add api logic and use alert hook

---
 .../app/manufacturer/account/api_service.tsx  | 35 +++++++++++++++
 .../manufacturer/ManufacturerForm.tsx         | 45 +++++++------------
 2 files changed, 50 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/manufacturer/account/api_service.tsx

diff --git a/frontend/src/app/manufacturer/account/api_service.tsx b/frontend/src/app/manufacturer/account/api_service.tsx
new file mode 100644
index 0000000..b9b4dad
--- /dev/null
+++ b/frontend/src/app/manufacturer/account/api_service.tsx
@@ -0,0 +1,35 @@
+import { FormEvent } from 'react';
+
+interface ManufacturerFormData {
+  name: string;
+  address: string;
+  email: string;
+  rc: string;
+  phone: string;
+  registrationImage?: File;
+}
+
+export const handleSubmit = async (
+  e: FormEvent,
+  data: ManufacturerFormData
+) => {
+  e.preventDefault();
+  try {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== undefined) {
+        formData.append(key, value);
+      }
+    });
+
+    const response = await fetch('/api/manufacturers', {
+      method: 'POST',
+      body: formData,
+    });
+    if (!response.ok) throw new Error('Registration failed');
+    return response.json();
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+};
diff --git a/frontend/src/components/manufacturer/ManufacturerForm.tsx b/frontend/src/components/manufacturer/ManufacturerForm.tsx
index 870b02a..7713e58 100644
--- a/frontend/src/components/manufacturer/ManufacturerForm.tsx
+++ b/frontend/src/components/manufacturer/ManufacturerForm.tsx
@@ -7,8 +7,9 @@ import {
   MapIcon,
   PhotoIcon,
 } from '@heroicons/react/24/outline';
-import { useState, FormEvent } from 'react';
-import axios from 'axios';
+import { useState } from 'react';
+import { handleSubmit } from '../../app/manufacturer/account/api_service';
+import { useAlert } from '../../hooks/useAlert';
 
 export default function ManufacturerForm() {
   const [companyName, setCompanyName] = useState('');
@@ -18,37 +19,21 @@ export default function ManufacturerForm() {
   const [registrationCode, setRegistrationCode] = useState('');
   const [phone, setPhone] = useState('');
   const [registrationImage, setRegistrationImage] = useState<File | null>(null);
+  const { showAlert } = useAlert();
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-
-    const formData = new FormData();
-    formData.append('name', companyName);
-    formData.append('manufacturerName', manufacturerName);
-    formData.append('address', address);
-    formData.append('email', email);
-    formData.append('rc', registrationCode);
-    formData.append('phone', phone);
-    if (registrationImage) {
-      formData.append('registrationImage', registrationImage);
-    }
-
+  const onSubmit = async (e: React.FormEvent) => {
     try {
-      // Todo manufacturer api endpoint would change
-      const response = await axios.post('/api/manufacturers', formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
+      await handleSubmit(e, {
+        name: companyName,
+        address: address,
+        email: email,
+        rc: registrationCode,
+        phone: phone,
+        registrationImage: registrationImage || undefined,
       });
-
-      if (response.status !== 200) {
-        // Todo handle error
-        throw new Error('Failed to create manufacturer');
-      }
-      // Todo handle success
+      showAlert('success', 'Manufacturer registered successfully!');
     } catch (error) {
-      // Todo handle error
-      console.error('Error creating manufacturer:', error);
+      showAlert('error', 'Failed to register manufacturer. Please try again.');
     }
   };
 
@@ -63,7 +48,7 @@ export default function ManufacturerForm() {
         </p>
       </div>
       <form
-        onSubmit={handleSubmit}
+        onSubmit={onSubmit}
         className="mt-8 space-y-6 bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl border border-gray-700"
       >
         <div className="space-y-6">