diff --git a/apiform.ts b/apiform.ts new file mode 100644 index 0000000..0b59703 --- /dev/null +++ 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 index ff3edd4..98439a0 100644 --- 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 { + 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([]); + + useEffect(() => { + fetchData().then((data) => setShelters(data)); + }, []); -export default function LoginPage() { return ( - <> - - Create Opportunity - -

Create Opportunity

- - - ); +
+
+
+ ) } diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx deleted file mode 100644 index 9ca939e..0000000 --- a/app/opportunities/page.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"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 { - try { - const response = await api.get('shelters/'); - const data = response.data; - console.log(data) - return data.results; - } catch (error) { - console.error(error); - return []; - } -} - -export default function Opportunities() { - const [shelters, setShelters] = useState([]); - - useEffect(() => { - fetchData().then((data) => setShelters(data)); - }, []); - - return ( - - ) -} diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx index 5574435..5aca975 100644 --- 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 { - 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 { + 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() {
- - - + + +
- - - + + +
{ + const handleImageChange = (event: React.ChangeEvent) => { 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,10 +35,43 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) { [event.target.name]: event.target.value, }); }; +// async function fetchData(username: string, password: string): Promise { +// 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) => { 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(() => { @@ -33,7 +79,11 @@ export default function Form({ shelters }: { shelters: ShelterProp[] }) { }, []); return ( - +
- + > + + +
-
- + > + + + +