form progress

sqwatato · Aug 22, 2023 · a51b54f · a51b54f
1 parent 5da6e2b
commit a51b54f
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 105 deletions.
diff --git a/apiform.ts b/apiform.ts
@@ -0,0 +1,20 @@
+import axios from 'axios'
+import Cookies from 'js-cookie'
+
+const api = axios.create({
+  // baseURL: 'http://jaydenl.pythonanywhere.com/api/', // Replace with the URL of your Django API
+  baseURL: 'http://127.0.0.1:8000/api/',
+  headers: {
+    "Content-Type": "multipart/form-data",
+    "Authorization": "Token 043ac7dda62905f56ca9d0029ccf9dff922dd54d"
+  },
+})
+api.interceptors.request.use((config) => {
+  const token = Cookies.get('token')
+  if (token) {
+    config.headers['Authorization'] = `Token ${token}`
+  }
+  return config
+})
+
+export default api
diff --git a/app/create-op/page.tsx b/app/create-op/page.tsx
@@ -1,15 +1,35 @@
-import Head from 'next/head';
-import Login from '@/components/OpportunityForm';
-import Opportunities from '../opportunities/page';
+"use client"
+import React, { useState, useEffect } from 'react';
+import PetCard from '@/components/PetCard';
+import Image from "next/image";
+import api from "@/api";
+import Cookies from 'js-cookie'
+import { PetCardProps, ShelterProp } from "@/components/Props";
+import Form from '@/components/OpportunityForm';
+
+async function fetchData(): Promise<ShelterProp[]> {
+  try {
+    const response = await api.get('shelters/');
+    const data = response.data;
+    console.log(data)
+    console.log(response)
+    return data.results;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+export default function Opportunities() {
+  const [shelters, setShelters] = useState<ShelterProp[]>([]);
+
+  useEffect(() => {
+    fetchData().then((data) => setShelters(data));
+  }, []);
 
-export default function LoginPage() {
   return (
-    <>
-      <Head>
-        <title>Create Opportunity</title>
-      </Head>
-      <h1>Create Opportunity</h1>
-      <Opportunities />
-    </>
-  );
+    <div className="bg-gray-50 rounded shadow p-4 w-full max-w-lg mx-auto">
+      <Form shelters={shelters} />
+    </div>
+  )
 }
diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx
diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
@@ -6,22 +6,25 @@ import Cookies from "js-cookie";
 import { RouterContext } from "next/dist/shared/lib/router-context";
 
 interface TokenProps {
-    token: string;
+  token: string;
 }
 
-async function fetchData(username: string, password: string): Promise<TokenProps> {
-    try {
-      const response = await api.post('api-token-auth/', {
-        "username": username,
-        "password": password
-      });
-      const data = response.data;
-      return data;
-    } catch (error) {
-      console.error(error);
-      return {token: ""};
-    }
+async function fetchData(
+  username: string,
+  password: string
+): Promise<TokenProps> {
+  try {
+    const response = await api.post("api-token-auth/", {
+      username: username,
+      password: password,
+    });
+    const data = response.data;
+    return data;
+  } catch (error) {
+    console.error(error);
+    return { token: "" };
   }
+}
 
 export default function Login() {
   const [username, setUsername] = useState("");
@@ -53,9 +56,17 @@ export default function Login() {
         </label>
         <div className="relative">
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
-              <path d="M13.5 13.5l4.5 4.5"/>
+            <svg
+              className="w-5 h-5 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"
+              />
+              <path d="M13.5 13.5l4.5 4.5" />
             </svg>
           </div>
           <input
@@ -73,9 +84,17 @@ export default function Login() {
         </label>
         <div className="relative">
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
-              <path d="M13.5 13.5l4.5 4.5"/>
+            <svg
+              className="w-5 h-5 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"
+              />
+              <path d="M13.5 13.5l4.5 4.5" />
             </svg>
           </div>
           <input

diff --git a/components/OpportunityForm.tsx b/components/OpportunityForm.tsx
@@ -1,16 +1,29 @@
 import { useEffect, useState } from "react";
 import { PetCardProps, ShelterProp } from "./Props";
+import api from "@/api";
+import formapi from "@/apiform";
+
+function extractNumber(url: string): number {
+    const match = /(\d+)/.exec(url);
+    if (match === null) {
+      return -1;
+    }
+    return Number(match[1]);
+  }
+
 export default function Form({ shelters }: { shelters: ShelterProp[] }) {
   const [formData, setFormData] = useState({} as PetCardProps);
 
-  const handleImageChange = (event:any) => {
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files[0]) {
       const reader = new FileReader();
       reader.onload = (e) => {
-        setFormData({
-          ...formData,
-          image: e.target.result,
-        });
+        if (e.target && typeof e.target.result === "string") {
+          setFormData({
+            ...formData,
+            image: e.target.result,
+          });
+        }
       };
       reader.readAsDataURL(event.target.files[0]);
     }
@@ -22,18 +35,55 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
       [event.target.name]: event.target.value,
     });
   };
+//   async function fetchData(username: string, password: string): Promise<TokenProps> {
+//     try {
+//       const response = await api.post('api-token-auth/', {
+//         "username": username,
+//         "password": password
+//       });
+//       const data = response.data;
+//       return data;
+//     } catch (error) {
+//       console.error(error);
+//       return {token: ""};
+//     }
+//   }
 
-  const handleSubmit = (event: any) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    console.log(formData);
+
+    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
+    }
+    console.log("formData", formData);
+    formapi.post("opportunities/", formData).then((response) => {
+      console.log(response);
+    })
   };
 
   useEffect(() => {
     console.log(shelters);
   }, []);
 
   return (
-    <form onSubmit={handleSubmit} className="p-4 bg-white rounded shadow">
+    <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">
           <label
@@ -54,14 +104,16 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
         <label htmlFor="type" className="block text-gray-700 font-medium mb-2">
           Type
         </label>
-        <input
-          type="text"
+        <select
           name="type"
           id="type"
           value={formData.type}
           onChange={handleChange}
           className="w-full border border-gray-300 rounded p-2"
-        />
+        >
+          <option value="A">Adoption</option>
+          <option value="F">Foster</option>
+        </select>
       </div>
       <div className="mb-4">
         <label htmlFor="name" className="block text-gray-700 font-medium mb-2">
@@ -119,33 +171,35 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
         />
       </div>
       <div className="mb-4">
-        <label
-          htmlFor="gender"
-          className="block text-gray-700 font-medium mb-2"
-        >
+        <label htmlFor="gender" className="block text-gray-700 font-medium mb-2">
           Gender
         </label>
-        <input
-          type="text"
-          name="gender"
-          id="gender"
-          value={formData.gender}
-          onChange={handleChange}
-          className="w-full border border-gray-300 rounded p-2"
-        />
+        <select
+            name="gender"
+            id="gender"
+            value={formData.gender}
+            onChange={handleChange}
+            className="w-full border border-gray-300 rounded p-2"
+        >
+            <option value="Male">Male</option>
+            <option value="Female">Female</option>
+        </select>
       </div>
       <div className="mb-4">
         <label htmlFor="size" className="block text-gray-700 font-medium mb-2">
           Size
         </label>
-        <input
-          type="text"
+        <select
           name="size"
           id="size"
           value={formData.size}
           onChange={handleChange}
           className="w-full border border-gray-300 rounded p-2"
-        />
+        >
+          <option value="Small">Small</option>
+          <option value="Medium">Medium</option>
+          <option value="Large">Large</option>
+        </select>
       </div>
       <div className="mb-4">
         <label
@@ -176,7 +230,8 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) {
           className="w-full border border-gray-300 rounded p-2"
         >
           {shelters.map((shelter) => (
-            <option key={shelter.id} value={shelter.id}>
+            // extract number from url
+            <option key={extractNumber(shelter.url)} value={extractNumber(shelter.url)}>
               {shelter.name}
             </option>
           ))}

diff --git a/components/Props.tsx b/components/Props.tsx
@@ -6,10 +6,11 @@ export interface ShelterProp {
   state: string;
   zip_code: string;
   phone_number: string;
-  id: number;
+  id: any;
 }
 
 export interface PetCardProps {
+  url: string;
   type: string;
   name: string;
   species: string;
@@ -20,5 +21,5 @@ export interface PetCardProps {
   description: string;
   shelter: ShelterProp;
   image: string;
-  id: number;
+  id: any;
 }
diff --git a/components/react-heart.d.ts b/components/react-heart.d.ts