From 78b8732924813c7e5624fb7028eba59ec8ef86cc Mon Sep 17 00:00:00 2001
From: Katy Huang <katyhuang360166@gmail.com>
Date: Sat, 27 May 2023 22:47:29 -0700
Subject: [PATCH] redirect link

---
 src/components/Home/Home.jsx | 140 ++++++++++++++++++-----------------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 45f3ff9..4d14ee3 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from "react";
-import Map from "../Map/Map";
-import "./Home.css";
-import Filter from "../Filter/Filter";
-import ResultsBar from "../ResultsBar/ResultsBar";
-import { auth } from "../../firebase";
-import { signOut } from "firebase/auth";
+import React, { useState, useEffect } from 'react'
+import Map from '../Map/Map'
+import './Home.css'
+import Filter from '../Filter/Filter'
+import ResultsBar from '../ResultsBar/ResultsBar'
+import { auth } from '../../firebase'
+import { signOut } from 'firebase/auth'
 // import { Search2Icon } from "@chakra-ui/icons";
-import { AuthContext } from "../../context/AuthContext";
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import fakeData from "../../fakeData";
-import CreateModal from "../CreateModal/CreateModal";
-import { onSnapshot, collection, orderBy, query } from "firebase/firestore";
-import { db } from "../../firebase";
+import { AuthContext } from '../../context/AuthContext'
+import { useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import fakeData from '../../fakeData'
+import CreateModal from '../CreateModal/CreateModal'
+import { onSnapshot, collection, orderBy, query } from 'firebase/firestore'
+import { db } from '../../firebase'
 
-import instagram from "../../assets/logos/instagram.svg";
+import instagram from '../../assets/logos/instagram.svg'
 
 import {
   Input,
@@ -25,96 +25,98 @@ import {
   HStack,
   Stack,
   Text,
-  Image,
-} from "@chakra-ui/react";
-import logo from "../../assets/images/small_logo.png";
-export default function Home() {
-  const [search, setSearch] = useState("");
-  const [data, setData] = useState([]);
+  Image
+} from '@chakra-ui/react'
+import logo from '../../assets/images/small_logo.png'
+export default function Home () {
+  const [search, setSearch] = useState('')
+  const [data, setData] = useState([])
 
   const [findFilter, setFindFilter] = useState({
-    type: "everything",
+    type: 'everything',
     isFound: true,
     isLost: true,
-    uploadDate: "",
-  });
+    uploadDate: ''
+  })
 
-  console.log(fakeData);
+  console.log(fakeData)
 
-  const { dispatch } = useContext(AuthContext);
-  const [isEdit, setIsEdit] = React.useState(false);
-  const [image, setImage] = React.useState("");
-  const [type, setType] = React.useState("");
-  const [isLost, setIsLost] = React.useState(true);
-  const [name, setName] = React.useState("");
-  const [description, setDescription] = React.useState("");
-  const navigate = useNavigate();
+  const { dispatch } = useContext(AuthContext)
+  const [isEdit, setIsEdit] = React.useState(false)
+  const [image, setImage] = React.useState('')
+  const [type, setType] = React.useState('')
+  const [isLost, setIsLost] = React.useState(true)
+  const [name, setName] = React.useState('')
+  const [description, setDescription] = React.useState('')
+  const navigate = useNavigate()
 
-  const currentUser = JSON.parse(localStorage.getItem("user"));
+  const currentUser = JSON.parse(localStorage.getItem('user'))
 
-  const handleLogout = (e) => {
-    e.preventDefault();
+  const handleLogout = e => {
+    e.preventDefault()
     signOut(auth)
       .then(() => {
         // // Sign-out successful.
-        dispatch({ type: "LOGOUT" });
-        navigate("/");
+        dispatch({ type: 'LOGOUT' })
+        navigate('/')
       })
-      .catch((error) => {
+      .catch(error => {
         // An error happened.
-      });
-  };
+      })
+  }
 
   useEffect(() => {
-    const collectionRef = collection(db, "items");
-    const q = query(collectionRef, orderBy("date"));
-    const unsub = onSnapshot(q, (snapshot) => {
-      setData(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
-    });
-  }, []);
+    const collectionRef = collection(db, 'items')
+    const q = query(collectionRef, orderBy('date'))
+    const unsub = onSnapshot(q, snapshot => {
+      setData(snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })))
+    })
+  }, [])
 
-  console.log(data);
+  console.log(data)
 
   return (
     <div>
-      <Flex justifyContent="space-between" shadow="md" alignItems="center">
-        <Flex alignItems="center" w="10%">
-          <Image boxSize="100" src={logo} mb="3%" mt="3%" ml="10%" />
-          <Text fontSize="xl" fontWeight="500">
-            @zotnfound&nbsp;
+      <Flex justifyContent='space-between' shadow='md' alignItems='center'>
+        <Flex alignItems='center' w='10%'>
+          <Image boxSize='100' src={logo} mb='3%' mt='3%' ml='10%' />
+          <Text fontSize='xl' fontWeight='500'>
+            <a href='https://www.instagram.com/zotnfound/' target='_blank'>
+              @zotnfound&nbsp;
+            </a>
           </Text>
-          <Image boxSize="30px" src={instagram} />
+          <Image boxSize='30px' src={instagram} />
           {/* <Image boxSize='50' src={instagram} /> */}
         </Flex>
-        <HStack w="60%">
-          <InputGroup ml="12%" mt="1%" size="lg" mb="1%">
-            <InputLeftAddon children="🔎" />
+        <HStack w='60%'>
+          <InputGroup ml='12%' mt='1%' size='lg' mb='1%'>
+            <InputLeftAddon children='🔎' />
             <Input
-              type="teal"
-              placeholder="Search Items ..."
-              onChange={(e) => setSearch(e.target.value)}
+              type='teal'
+              placeholder='Search Items ...'
+              onChange={e => setSearch(e.target.value)}
             />
           </InputGroup>
         </HStack>
 
-        <HStack mr="1%">
-          <Text fontSize="xl" fontWeight="500" mr="4%">
+        <HStack mr='1%'>
+          <Text fontSize='xl' fontWeight='500' mr='4%'>
             {currentUser?.email}
           </Text>
           <Button
-            colorScheme="blue"
-            size="lg"
-            mt="2%"
-            mr="5%"
+            colorScheme='blue'
+            size='lg'
+            mt='2%'
+            mr='5%'
             onClick={handleLogout}
           >
             Logout
           </Button>
         </HStack>
       </Flex>
-      <div className="home">
+      <div className='home'>
         {/* <CreateModal /> */}
-        <Flex alignItems="center" display="block">
+        <Flex alignItems='center' display='block'>
           <Filter setFindFilter={setFindFilter} />
           <CreateModal
             setImage={setImage}
@@ -147,5 +149,5 @@ export default function Home() {
         <ResultsBar data={data} search={search} findFilter={findFilter} />
       </div>
     </div>
-  );
+  )
 }