commit last changes

src/App.css

@@ -59,4 +59,10 @@ main {
 .voting-buttons-section :nth-child(2) {
   margin-left: 40px;
   margin-right: 40px;
+}
+
+.flex p {
+  display: inline;
+  margin: 8px;
+  font-size: 20px;
 }

src/App.tsx

@@ -8,10 +8,12 @@ import UploadCat from './components/cat/UploadCat';
 import Rules from './components/rules/Rules';
 import { UserProvider } from './components/context/UserContext';
 import Vote from './components/cat/Vote';
+import CatReview from './components/cat/CatReview';
 
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.css";
 
+
 function App() {
   return (
     <div className="App">
@@ -26,6 +28,7 @@ function App() {
               <Route path="/upload-cat" element={<UploadCat />} />
               <Route path="/rules" element={<Rules />} />
               <Route path="/vote" element={<Vote />} />
+              <Route path="/cat-review" element={<CatReview />} />
             </Routes>
           </main>
           <Footer />

src/components/cat/CatReview.tsx

@@ -0,0 +1,78 @@
+import React, { useContext, useEffect, useState } from "react"
+import { HOST_URL } from "../common/urls"
+import { UserContext } from "../context/UserContext"
+
+interface CatInfo {
+    photo_url: string;
+    name: string;
+    breed: string;
+    microchip_id: string;
+    passport_id: string;
+    create_on: string
+}
+
+const catInfoInitialState = {
+    photo_url: "",
+    name: "",
+    breed: "",
+    microchip_id: "",
+    passport_id: "",
+    create_on: ""
+}
+
+const CatReview: React.FC = () => {
+    const [catInfo, setCatInfo] = useState<CatInfo>(catInfoInitialState)
+
+    const { user } = useContext(UserContext)
+
+    console.log(user.token)
+
+    const fetchCatInfo = () => {
+        if (!user.token) return
+        fetch(`${HOST_URL}/cat`, {
+            headers: {
+                "Authorization": `Bearer ${user.token}`
+            }
+        })
+            .then(resp => resp.json())
+            .then(json => {
+                console.log(json)
+                setCatInfo(json)
+            })
+    }
+
+    useEffect(fetchCatInfo, [user.token])
+
+    return (
+        <div>
+            <h2>Review</h2>
+            <section className="voting-image-section">
+                <img src={catInfo.photo_url} alt="" />
+            </section>
+            <section>
+                <article className="flex">
+                    <p>Name:</p>
+                    <p>{catInfo.name}</p>
+                </article>
+                <article className="flex">
+                    <p>Breed:</p>
+                    <p>{catInfo.breed}</p>
+                </article>
+                <article className="flex">
+                    <p>Microchip ID:</p>
+                    <p>{catInfo.microchip_id}</p>
+                </article>
+                <article className="flex">
+                    <p>Passport ID:</p>
+                    <p>{catInfo.passport_id}</p>
+                </article>
+                <article className="flex">
+                    <p>Added on:</p>
+                    <p>{catInfo.create_on}</p>
+                </article>
+            </section>
+        </div>
+    )
+}
+
+export default CatReview;

src/components/cat/UploadCat.tsx

@@ -3,6 +3,7 @@ import { Form, Button, Container, Row, Col } from "react-bootstrap";
 import FormGroupRow from "../common/FormGroupRow";
 import { HOST_URL } from "../common/urls";
 import { UserContext } from "../context/UserContext";
+import { useNavigate } from "react-router-dom";
 
 interface CatInfo {
     name: string;
@@ -32,6 +33,7 @@ const UploadCat: React.FC = () => {
   const [catInfo, setCatInfo] = useState<CatInfo>(initialCatInfoState);
 
   const { user } = useContext(UserContext)
+  const navigate = useNavigate()
 
   const postCat = () => {
     const catPostData: CatPostData = {
@@ -52,7 +54,11 @@ const UploadCat: React.FC = () => {
         }
         return resp.json()
       })
-      .then(json => console.log(json))
+      .then(json => {
+        console.log(json)
+        localStorage.setItem("catExist", "true");
+        navigate("/cat-review")
+      })
       .catch(() => alert("Problem occured during uploading the photo!"))
   };
 

src/components/common/urls.ts

@@ -1,5 +1,5 @@
-// const LOCAL_HOST = "http://127.0.0.1:5000"
+const LOCAL_HOST = "http://127.0.0.1:5000"
 
-const AZURE_HOST = "https://cat-of-the-day-back-end.azurewebsites.net/"
+// const AZURE_HOST = "https://cat-of-the-day-back-end.azurewebsites.net/"
 
-export const HOST_URL = AZURE_HOST
+export const HOST_URL = LOCAL_HOST

src/components/context/CatExistsContext.tsx

@@ -0,0 +1,5 @@
+import React, { createContext } from "react";
+
+type CatExists = boolean
+
+export const CatExistsContext: React.Context<boolean> = createContext<boolean>(false)

src/components/footer/Footer.tsx

@@ -10,7 +10,7 @@ const Footer = () => (
         </Col>
         <Col xs={12} md={4}>
           <h4>Contact Us</h4>
-          <p>Email: contact@example.com</p>
+          <p>Email: inspirationalcode@gmail.com</p>
           <p>Phone: 123-456-7890</p>
         </Col>
         <Col xs={12} md={4}>