op form

sqwatato · Aug 21, 2023 · 02a807f · 02a807f
1 parent 2d8848f
commit 02a807f
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 71 deletions.
diff --git a/api.ts b/api.ts
@@ -2,7 +2,8 @@ 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://jaydenl.pythonanywhere.com/api/', // Replace with the URL of your Django API
+  baseURL: 'http://127.0.0.1:8000/api/',
   headers: {
     'Content-Type': 'application/json',
   },

diff --git a/app/create-op/pages.tsx b/app/create-op/pages.tsx
@@ -0,0 +1,15 @@
+import Head from 'next/head';
+import Login from '@/components/OpportunityForm';
+import Opportunities from '../opportunities/page';
+
+export default function LoginPage() {
+  return (
+    <>
+      <Head>
+        <title>Create Opportunity</title>
+      </Head>
+      <h1>Create Opportunity</h1>
+      <Opportunities />
+    </>
+  );
+}
diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx
@@ -4,32 +4,12 @@ import PetCard from '@/components/PetCard';
 import Image from "next/image";
 import api from "@/api";
 import Cookies from 'js-cookie'
-interface ShelterProp {
-  url: string;
-  name: string;
-  address: string;
-  city: string;
-  state: string;
-  zip_code: string;
-  phone_number: string;
-}
-interface PetCardProps {
-  type: string;
-  name: string;
-  species: string;
-  breed: string;
-  age: number;
-  gender: string;
-  size: string;
-  description: string;
-  shelter: ShelterProp;
-  image: string;
-  url: string;
-}
+import { PetCardProps, ShelterProp } from "@/components/Props";
+import Form from '@/components/OpportunityForm';
 
-async function fetchData(): Promise<PetCardProps[]> {
+async function fetchData(): Promise<ShelterProp[]> {
   try {
-    const response = await api.get('opportunities/');
+    const response = await api.get('shelters/');
     const data = response.data;
     console.log(data)
     return data.results;
@@ -40,17 +20,13 @@ async function fetchData(): Promise<PetCardProps[]> {
 }
 
 export default function Opportunities() {
-  const [pets, setPets] = useState<PetCardProps[]>([]);
+  const [shelters, setShelters] = useState<ShelterProp[]>([]);
 
   useEffect(() => {
-    fetchData().then((data) => setPets(data));
+    fetchData().then((data) => setShelters(data));
   }, []);
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-      {pets.map((pet) => (
-        <PetCard key={pet.url} type={pet.type} name={pet.name} age={pet.age} species={pet.species} breed={pet.breed} gender={pet.gender} size={pet.size} description={pet.description} shelter={pet.shelter} image={pet.image} />
-      ))}
-    </div>
+    <Form {...shelters} />
   )
 }
diff --git a/components/OpportunityForm.tsx b/components/OpportunityForm.tsx
@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { PetCardProps, ShelterProp } from "./Props";
+export default function Form(shelters: ShelterProp[]) {
+  const [formData, setFormData] = useState({} as PetCardProps);
+
+  const handleChange = (event: any) => {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    console.log(formData)
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4 bg-white rounded shadow">
+      <div className="mb-4">
+        <label htmlFor="type" className="block text-gray-700 font-medium mb-2">
+          Type
+        </label>
+        <input
+          type="text"
+          name="type"
+          id="type"
+          value={formData.type}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label htmlFor="name" className="block text-gray-700 font-medium mb-2">
+          Name
+        </label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          value={formData.name}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="species"
+          className="block text-gray-700 font-medium mb-2"
+        >
+          Species
+        </label>
+        <input
+          type="text"
+          name="species"
+          id="species"
+          value={formData.species}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label htmlFor="breed" className="block text-gray-700 font-medium mb-2">
+          Breed
+        </label>
+        <input
+          type="text"
+          name="breed"
+          id="breed"
+          value={formData.breed}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label htmlFor="age" className="block text-gray-700 font-medium mb-2">
+          Age
+        </label>
+        <input
+          type="number"
+          name="age"
+          id="age"
+          value={formData.age}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <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"
+        />
+      </div>
+      <div className="mb-4">
+        <label htmlFor="size" className="block text-gray-700 font-medium mb-2">
+          Size
+        </label>
+        <input
+          type="text"
+          name="size"
+          id="size"
+          value={formData.size}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="description"
+          className="block text-gray-700 font-medium mb-2"
+        >
+          Description
+        </label>
+        <textarea
+          name="description"
+          id="description"
+          value={formData.description}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="shelter"
+          className="block text-gray-700 font-medium mb-2"
+        >
+          Shelter
+        </label>
+        <select
+          name="shelter"
+          id="shelter"
+          value={formData.shelter.id}
+          onChange={handleChange}
+          className="w-full border border-gray-300 rounded p-2"
+        >
+          {shelters.map((shelter) => (
+            <option key={shelter.id} value={shelter.id}>
+              {shelter.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <button
+        type="submit"
+        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+      >
+        Submit
+      </button>
+    </form>
+  );
+}
diff --git a/components/PetCard.tsx b/components/PetCard.tsx
@@ -1,28 +1,6 @@
 import Image from "next/image";
 import ImagePlaceholder from "@/components/ImagePlaceholder";
-
-interface ShelterProp {
-  url: string;
-  name: string;
-  address: string;
-  city: string;
-  state: string;
-  zip_code: string;
-  phone_number: string;
-}
-
-interface PetCardProps {
-  type: string;
-  name: string;
-  species: string;
-  breed: string;
-  age: number;
-  gender: string;
-  size: string;
-  description: string;
-  shelter: ShelterProp;
-  image: string;
-}
+import { PetCardProps } from "@/components/Props";
 
 const PetCard = ({ type, name, species, breed, age, gender, size, description, shelter, image }: PetCardProps) => {
 

diff --git a/components/Props.tsx b/components/Props.tsx
@@ -0,0 +1,24 @@
+export interface ShelterProp {
+  url: string;
+  name: string;
+  address: string;
+  city: string;
+  state: string;
+  zip_code: string;
+  phone_number: string;
+  id: number;
+}
+
+export interface PetCardProps {
+  type: string;
+  name: string;
+  species: string;
+  breed: string;
+  age: number;
+  gender: string;
+  size: string;
+  description: string;
+  shelter: ShelterProp;
+  image: string;
+  id: number;
+}
diff --git a/components/Search.tsx b/components/Search.tsx
@@ -3,20 +3,7 @@ import { useState, useEffect } from "react";
 import Image from "next/image";
 import api from "@/api";
 import PetCard from "@/components/PetCard";
-
-interface PetCardProps {
-  type: string;
-  name: string;
-  species: string;
-  breed: string;
-  age: number;
-  gender: string;
-  size: string;
-  description: string;
-  shelter: string;
-  image: string;
-  url: string;
-}
+import { PetCardProps } from "@/components/Props";
 
 async function fetchData(): Promise<PetCardProps[]> {
   try {
@@ -97,7 +84,7 @@ const Search = (props: any) => {
     }
   }
 
-  function sortPets(pet) {
+  function sortPets(pet: PetCardProps) {
     //Testing Statements
     // console.log("Selected Animal: " + selectedAnimal + " | Pet Species: " + pet.species);
     // console.log("Selected Breed: " + selectedBreed + " | Pet Breed: " + pet.breed);
@@ -118,7 +105,7 @@ const Search = (props: any) => {
     ) {
       return (
         <PetCard
-          key={pet.url}
+          key={pet.id}
           type={pet.type}
           name={pet.name}
           age={pet.age}
@@ -129,6 +116,7 @@ const Search = (props: any) => {
           description={pet.description}
           shelter={pet.shelter}
           image={pet.image}
+          id={pet.id}
         />
       );
     }