stuff

sqwatato · Aug 20, 2023 · a9b272e · a9b272e
1 parent 09f2934
commit a9b272e
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 67 deletions.
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -0,0 +1,14 @@
+import Head from 'next/head';
+import Login from '@/components/LoginForm';
+
+export default function LoginPage() {
+  return (
+    <>
+      <Head>
+        <title>Login</title>
+      </Head>
+      <h1>Login</h1>
+      <Login />
+    </>
+  );
+}
diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx
@@ -6,17 +6,24 @@ import api from "@/api";
 import Cookies from 'js-cookie'
 
 interface PetCardProps {
+  type: string;
   name: string;
-  age: number;
   species: string;
   breed: string;
+  age: number;
+  gender: string;
+  size: string;
+  description: string;
+  shelter: string;
+  image: string;
   url: string;
 }
 
 async function fetchData(): Promise<PetCardProps[]> {
   try {
     const response = await api.get('opportunities/');
     const data = response.data;
+    console.log(data)
     return data.results;
   } catch (error) {
     console.error(error);
@@ -34,7 +41,7 @@ export default function Opportunities() {
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
       {pets.map((pet) => (
-        <PetCard key={pet.url} name={pet.name} age={pet.age} species={pet.species} breed={pet.breed} />
+        <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>
   )

diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
@@ -0,0 +1,73 @@
+"use client";
+import api from "@/api";
+import { useState } from "react";
+import Router, { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
+import { RouterContext } from "next/dist/shared/lib/router-context";
+
+interface TokenProps {
+    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: ""};
+    }
+  }
+
+export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const router = useRouter();
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    try {
+      const response = await fetchData(username, password);
+      if (response.token) {
+        const token = response.token;
+        console.log(token);
+        Cookies.set("token", token, { expires: 1 });
+        router.push("/");
+      } else {
+        console.error("Login failed");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="text-gray-500">
+      <label>
+        Username:
+        <input
+          type="text"
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          className="border-2 border-gray-300"
+        />
+      </label>
+      <br />
+      <label>
+        Password:
+        <input
+          type="password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        className="border-2 border-gray-300"
+        />
+      </label>
+      <br />
+      <button type="submit">Login</button>
+    </form>
+  );
+}
diff --git a/components/PetCard.tsx b/components/PetCard.tsx
@@ -2,56 +2,41 @@ import Image from "next/image";
 import ImagePlaceholder from "@/components/ImagePlaceholder";
 
 interface PetCardProps {
+  type: string;
   name: string;
   species: string;
-  age: number;
   breed: string;
+  age: number;
+  gender: string;
+  size: string;
+  description: string;
+  shelter: string;
+  image: string;
 }
 
-const PetCard = ({ name, species, age, breed }: PetCardProps) => {
+const PetCard = ({ type, name, species, breed, age, gender, size, description, shelter, image }: PetCardProps) => {
 
   return (
-    <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-      <a href="#">
-        {/* <Image
-          className="rounded-t-lg"
-          src="/docs/images/blog/image-1.jpg"
-          alt="image"
-          width={200}
-          height={300}
-        /> */}
-        <ImagePlaceholder />
-      </a>
-      <div className="p-5">
-        <a href="#">
-          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-            {name}
-          </h5>
-        </a>
-        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
-          {species} - {age} years old - {breed}
-        </p>
-        <a
-          href="#"
-          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Interested
-          <svg
-            className="w-3.5 h-3.5 ml-2"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 14 10"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M1 5h12m0 0L9 1m4 4L9 9"
-            />
-          </svg>
-        </a>
+    <div className="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+      <div className="max-w-sm rounded-lg overflow-hidden shadow-lg">
+        <img src={image} alt="hero image" />
+        <div className="px-6 py-4">
+          <div className="font-bold text-xl mb-2 text-black">{name}</div>
+          <p className="text-gray-700 text-base">
+            {description.length > 100 ? description.substring(0, 100) + "..." : description}
+          </p>
+        </div>
+        <div className="px-6 pt-4 pb-2">
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{type == 'A' ? 'Adoption' : 'Foster' }</span>
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{age} years old</span>
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{breed}</span>
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{gender}</span>
+        </div>
+        <div className="px-6 py-4">
+          <p className="text-gray-700 text-sm">
+            {shelter}
+          </p>
+        </div>
       </div>
     </div>
   );

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -1,8 +1,36 @@
 'use client'
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
+import api from "@/api";
+import PetCard from "@/components/PetCard";
 
-const Search = (props) => {
+interface PetCardProps {
+  type: string;
+  name: string;
+  species: string;
+  breed: string;
+  age: number;
+  gender: string;
+  size: string;
+  description: string;
+  shelter: string;
+  image: string;
+  url: string;
+}
+
+async function fetchData(): Promise<PetCardProps[]> {
+  try {
+    const response = await api.get('opportunities/');
+    const data = response.data;
+    console.log(data)
+    return data.results;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+const Search = (props: any) => {
   const animalsList = props.animalsToAdopt;
   const dogBreeds = props.dogBreeds;
   const catBreeds = props.catBreeds;
@@ -23,8 +51,13 @@ const Search = (props) => {
   const ageTypes = props.ageTypes;
 
   let [selectedAnimal, setSelectedAnimal] = useState("None");
+  const [pets, setPets] = useState<PetCardProps[]>([]);
+
+  useEffect(() => {
+    fetchData().then((data) => setPets(data));
+  }, []);
 
-  function getBreeds(animal) {
+  function getBreeds(animal: string) {
     switch (animal) {
       case "Dogs":
         return dogBreeds;
@@ -90,8 +123,8 @@ const Search = (props) => {
               <label htmlFor="species" className="sr-only">Species</label>
               <select onChange={(event) => setSelectedAnimal(event.target.value)} id="species" name="species" className="block w-full py-3 pl-3 pr-10 text-base text-gray-900 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
                 {
-                  animalsList.map((animal) => {
-                    return <option>{animal}</option>
+                  animalsList.map((animal: string, index: number) => {
+                    return <option key={index}>{animal}</option>
                   })
                 }
               </select>
@@ -101,7 +134,7 @@ const Search = (props) => {
               <select id="breed" name="breed" className="block w-full py-3 pl-3 pr-10 text-base text-gray-900 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
               {
                 selectedAnimal !== "None" ? (
-                  getBreeds(selectedAnimal).map((breed, index) => (
+                  getBreeds(selectedAnimal).map((breed: string, index: number) => (
                     <option key={index}>{breed}</option>
                   ))
                 ) : (
@@ -123,23 +156,13 @@ const Search = (props) => {
           </form>
         </div>
       </div>
-      <div className="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-        <div className="max-w-sm rounded-lg overflow-hidden shadow-lg h-[50%] w-[50%]">
-          <img src="/images/dog.jpg" alt="hero image" />
-          <div className="px-6 py-4">
-            <div className="font-bold text-xl mb-2 text-black">Title</div>
-            <p className="text-gray-700 text-base">
-              Custom Dog Description
-            </p>
-          </div>
-          <div className="px-6 pt-4 pb-2">
-            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#location</span>
-            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#age</span>
-            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#animal_type</span>
-            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#breed</span>
-          </div>
-        </div>
+      <div className="inline-flex">
+        {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>
+
+
     </section>
   );
 }