Merge branch 'main' of https://github.com/sqwatato/PetBoundToy-Web

sqwatato · Aug 24, 2023 · 16f5d77 · 16f5d77
2 parents 0bb2f87 + 60b120b
commit 16f5d77
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 36 deletions.
diff --git a/apiform.ts b/apiform.ts
@@ -6,7 +6,8 @@ const api = axios.create({
   baseURL: 'http://127.0.0.1:8000/api/',
   headers: {
     "Content-Type": "multipart/form-data",
-    "Authorization": "Token 043ac7dda62905f56ca9d0029ccf9dff922dd54d"
+    "Authorization": "Token 043ac7dda62905f56ca9d0029ccf9dff922dd54d",
+    "Accept": "application/json",
   },
 })
 api.interceptors.request.use((config) => {

diff --git a/components/OpportunityForm.tsx b/components/OpportunityForm.tsx
@@ -12,29 +12,31 @@ function extractNumber(url: string): number {
   }
 
 export default function Form({ shelters }: { shelters: ShelterProp[] }) {
-  const [formData, setFormData] = useState({} as PetCardProps);
-
-  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files[0]) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target && typeof e.target.result === "string") {
-          setFormData({
-            ...formData,
-            image: e.target.result,
-          });
-        }
-      };
-      reader.readAsDataURL(event.target.files[0]);
-    }
-  };
+  const [formData, setFormData] = useState({
+    type: "",
+    name: "",
+    species: "",
+    breed: "",
+    age: "",
+    gender: "",
+    size: "",
+    description: "",
+    shelter: 0,
+  });
 
   const handleChange = (event: any) => {
     setFormData({
       ...formData,
       [event.target.name]: event.target.value,
     });
   };
+
+  const handleFileChange = (event: any) => {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.files[0],
+    });
+  }
 //   async function fetchData(username: string, password: string): Promise<TokenProps> {
 //     try {
 //       const response = await api.post('api-token-auth/', {
@@ -49,27 +51,30 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
 //     }
 //   }
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: any) => {
     event.preventDefault();
 
+    const config = {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        "Authorization": "Token 043ac7dda62905f56ca9d0029ccf9dff922dd54d",
+        "Accept": "application/json",
+      },
+    }
+
     const form = event.target;
     console.log("event", form);
 
-    const formData = {
-      image: form.image.files[0], 
-      type: form.type.value,
-      name: form.name.value,
-      species: form.species.value,
-      breed: form.breed.value,
-      age: form.age.value,
-      gender: form.gender.value,
-      size: form.size.value,
-      description: form.description.value,
-      shelter: Number(form.shelter.value),
-      // and so on for other fields
+    const data = new FormData();
+
+    // check if form is filled
+    if (!form.name.value || !form.species.value || !form.breed.value || !form.age.value || !form.gender.value || !form.size.value || !form.description.value || !form.shelter.value) {
+      return;
     }
+
     console.log("formData", formData);
-    formapi.post("opportunities/", formData).then((response) => {
+    formData.shelter = Number(formData.shelter);
+    formapi.post("opportunities/", formData, config).then((response) => {
       console.log(response);
     })
   };
@@ -82,7 +87,6 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
     <form
       onSubmit={handleSubmit}
       className="p-4 bg-white rounded shadow w-full max-w-lg mx-aut text-black"
-      encType="multipart/form-data"
     >
       <div className="mb-4">
         <div className="mb-4">
@@ -97,7 +101,7 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
             name="image"
             id="image"
             accept="image/*"
-            onChange={handleImageChange}
+            onChange={handleFileChange}
             className="w-full border border-gray-300 rounded p-2"
           />
         </div>
@@ -107,10 +111,11 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
         <select
           name="type"
           id="type"
-          value={formData.type}
           onChange={handleChange}
           className="w-full border border-gray-300 rounded p-2"
+          required
         >
+          <option hidden disabled selected value="tmp"> -- select an option -- </option>
           <option value="A">Adoption</option>
           <option value="F">Foster</option>
         </select>
@@ -177,10 +182,11 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
         <select
             name="gender"
             id="gender"
-            value={formData.gender}
             onChange={handleChange}
             className="w-full border border-gray-300 rounded p-2"
+            required
         >
+            <option hidden disabled selected value="tmp"> -- select an option -- </option>
             <option value="Male">Male</option>
             <option value="Female">Female</option>
         </select>
@@ -192,10 +198,11 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
         <select
           name="size"
           id="size"
-          value={formData.size}
           onChange={handleChange}
           className="w-full border border-gray-300 rounded p-2"
+          required
         >
+          <option hidden disabled selected value="tmp"> -- select an option -- </option>
           <option value="Small">Small</option>
           <option value="Medium">Medium</option>
           <option value="Large">Large</option>
@@ -228,7 +235,9 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
           id="shelter"
           onChange={handleChange}
           className="w-full border border-gray-300 rounded p-2"
+          required
         >
+          <option hidden disabled selected value="tmp"> -- select an option -- </option>
           {shelters.map((shelter) => (
             // extract number from url
             <option key={extractNumber(shelter.url)} value={extractNumber(shelter.url)}>