diff --git a/public/index.html b/public/index.html
index 9dc80fe..6a51935 100644
--- a/public/index.html
+++ b/public/index.html
@@ -49,7 +49,10 @@
property="twitter:description"
content="A platform for UCI students to effortlessly locate and recover lost or found items."
/>
-
+
diff --git a/src/components/Home/DateRangeFilter.jsx b/src/components/Home/DateRangeFilter.jsx
new file mode 100644
index 0000000..9191ec5
--- /dev/null
+++ b/src/components/Home/DateRangeFilter.jsx
@@ -0,0 +1,74 @@
+import { Button, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";
+import { useState, useContext } from "react";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import DataContext from "../../context/DataContext";
+
+import {
+ retrieveItemsAllTime,
+ retrieveItemsWithinMonth,
+ retrieveItemsWithinTwoWeeks,
+ retrieveItemsWithinWeek,
+ retrieveItemsWithinYear,
+} from "../../utils/HomeUtils";
+
+export default function DateRangeFilter() {
+ const [DateRangeFilter, setDateRangeFilter] = useState("Date Range Filter");
+ const { setLoading, setData } = useContext(DataContext);
+
+ return (
+
+ );
+}
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 6320d9a..fb57a40 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -1,15 +1,9 @@
import React, { useState, useEffect, useRef } from "react";
-import Map from "../Map/Map";
-import "./Home.css";
-import Filter from "../Filter/Filter";
-import ResultsBar from "../ResultsBar/ResultsBar";
-import CreateModal from "../CreateModal/CreateModal";
-import LoginModal from "../LoginModal/LoginModal";
-import Leaderboard from "./Leaderboard";
+import axios from "axios";
-import instagram from "../../assets/logos/instagram.svg";
import { UserAuth } from "../../context/AuthContext";
import DataContext from "../../context/DataContext";
+
import { Spinner, useToast } from "@chakra-ui/react";
import {
Input,
@@ -37,8 +31,7 @@ import {
AlertIcon,
AlertTitle,
} from "@chakra-ui/react";
-import { SettingsIcon, ChevronDownIcon, StarIcon } from "@chakra-ui/icons";
-import logo from "../../assets/images/small_logo.png";
+import { SettingsIcon, StarIcon } from "@chakra-ui/icons";
import upload from "../../assets/images/download.png";
import logout from "../../assets/logos/logout.svg";
@@ -47,7 +40,15 @@ import userlogo from "../../assets/logos/userlogo.svg";
import yourposts from "../../assets/logos/yourposts.svg";
import cookie from "../../assets/images/cookie.svg";
-import axios from "axios";
+import Map from "../Map/Map";
+import "./Home.css";
+import Filter from "../Filter/Filter";
+import ResultsBar from "../ResultsBar/ResultsBar";
+import CreateModal from "../CreateModal/CreateModal";
+import LoginModal from "../LoginModal/LoginModal";
+import Leaderboard from "./Leaderboard";
+import ZotNFoundLogoText from "./ZotNFoundLogoText";
+import DateRangeFilter from "./DateRangeFilter";
export default function Home() {
const [search, setSearch] = useState("");
@@ -111,9 +112,7 @@ export default function Home() {
const centerPosition = [33.6461, -117.8427];
const [position, setPosition] = useState(centerPosition);
const [focusLocation, setFocusLocation] = useState();
- const [screenWidth, setScreenWidth] = useState(window.screen.width);
const [uploadImg, setUploadImg] = useState("");
-
// LOGIN MODAL
const {
isOpen: isLoginModalOpen,
@@ -139,7 +138,7 @@ export default function Home() {
console.log(result);
toast({
title: "Succesfully Unsubscribed!",
- description: "You have been unsubscribed from the ZotnFound Newsletter",
+ description: "You have been unsubscribed from the ZotNFound Newsletter",
status: "success",
duration: 5000,
isClosable: true,
@@ -253,14 +252,11 @@ export default function Home() {
}
}, [user]);
- window.onresize = () => {
- setScreenWidth(window.screen.width);
- };
-
return (
-
-
-
-
+ {/* SEARCH BAR */}
) : (
- <>
+
+
+
+
)}
@@ -652,7 +590,6 @@ export default function Home() {
setIsEdit={setIsEdit}
search={search}
findFilter={findFilter}
- setData={setData}
setIsCreate={setIsCreate}
isCreate={isCreate}
centerPosition={centerPosition}
@@ -675,7 +612,6 @@ export default function Home() {
diff --git a/src/components/Home/ZotNFoundLogoText.jsx b/src/components/Home/ZotNFoundLogoText.jsx
new file mode 100644
index 0000000..25f4153
--- /dev/null
+++ b/src/components/Home/ZotNFoundLogoText.jsx
@@ -0,0 +1,88 @@
+import {
+ Button,
+ Flex,
+ Image,
+ Menu,
+ MenuButton,
+ MenuList,
+ MenuItem,
+} from "@chakra-ui/react";
+
+import { useState } from "react";
+import logo from "../../assets/images/small_logo.png";
+import instagram from "../../assets/logos/instagram.svg";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+
+export default function ZotNFoundLogoText() {
+ const [screenWidth, setScreenWidth] = useState(window.screen.width);
+
+ window.onresize = () => {
+ setScreenWidth(window.screen.width);
+ };
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/ImageContainer/ImageContainer.jsx b/src/components/ImageContainer/ImageContainer.jsx
index e65226a..c40e873 100644
--- a/src/components/ImageContainer/ImageContainer.jsx
+++ b/src/components/ImageContainer/ImageContainer.jsx
@@ -3,8 +3,8 @@ import { Image, Flex, Text } from "@chakra-ui/react";
export default function ImageContainer({ image, isresolved }) {
return (
@@ -16,7 +16,7 @@ export default function ImageContainer({ image, isresolved }) {
alignItems={"center"}
marginTop={30}
flexDir={"column"}
- w={{ base: "100vw", md: 450 }}
+ w={{ base: "100vw", md: 300 }}
>
RETURNED
@@ -26,7 +26,14 @@ export default function ImageContainer({ image, isresolved }) {
)}
-
+
);
}
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
index 87b9a2b..3e66bb0 100644
--- a/src/components/Map/Map.jsx
+++ b/src/components/Map/Map.jsx
@@ -53,7 +53,6 @@ export default function Map({
search,
findFilter,
setIsCreate,
- setData,
isCreate,
centerPosition,
position,
@@ -65,7 +64,7 @@ export default function Map({
}) {
// Contexts
const { user } = UserAuth();
- const { data, setLoading, token } = useContext(DataContext);
+ const { data, setLoading, token, setData } = useContext(DataContext);
// State: isOpen - if InfoModal is open
const { isOpen, onOpen, onClose } = useDisclosure();
diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx
index e624b02..f79872a 100644
--- a/src/components/ResultsBar/ResultsBar.jsx
+++ b/src/components/ResultsBar/ResultsBar.jsx
@@ -7,70 +7,76 @@ import { UserAuth } from "../../context/AuthContext";
export default function ResultsBar({
search,
findFilter,
- setData,
setFocusLocation,
onResultsBarClose,
setLeaderboard,
}) {
- const { data } = useContext(DataContext);
+ const { data, setData } = useContext(DataContext);
const { user } = UserAuth();
// Define callback function to return filtered items (filtered according to search bar and filter markers)
- const filterItem = useCallback((item) => {
- return (
- (search.toLowerCase() === "" ||
- item.name.toLowerCase().includes(search)) &&
- (findFilter.islost === item.islost ||
- findFilter.isFound === !item.islost) &&
- (findFilter.type === "everything" || findFilter.type === item.type) &&
- (findFilter.uploadDate === "" ||
- (item.itemdate && item.itemdate.includes(findFilter.uploadDate))) &&
- (!findFilter.isYourPosts ||
- (findFilter.isYourPosts && item.email === user.email)) &&
- (findFilter.isShowReturned || !item.isresolved)
+ const filterItem = useCallback(
+ (item) => {
+ return (
+ (search.toLowerCase() === "" ||
+ item.name.toLowerCase().includes(search)) &&
+ (findFilter.islost === item.islost ||
+ findFilter.isFound === !item.islost) &&
+ (findFilter.type === "everything" || findFilter.type === item.type) &&
+ (findFilter.uploadDate === "" ||
+ (item.itemdate && item.itemdate.includes(findFilter.uploadDate))) &&
+ (!findFilter.isYourPosts ||
+ (findFilter.isYourPosts && item.email === user.email)) &&
+ (findFilter.isShowReturned || !item.isresolved)
+ );
+ },
+ [
+ search,
+ findFilter.isFound,
+ findFilter.isShowReturned,
+ findFilter.isYourPosts,
+ findFilter.islost,
+ findFilter.type,
+ findFilter.uploadDate,
+ user,
+ ]
);
-}, [search, findFilter.isFound, findFilter.isShowReturned, findFilter.isYourPosts, findFilter.islost, findFilter.type, findFilter.uploadDate, user]);
+ // Define callback function to display filtered items as individual result cards in the results bar
+ const mapItem = useCallback(
+ (item) => {
+ return (
+ {
+ setFocusLocation(item.location);
+ }}
+ _hover={{
+ transform: "scale(0.99)",
+ }}
+ >
+
+
+ );
+ },
+ [setFocusLocation, onResultsBarClose, setData, setLeaderboard]
+ );
-// Define callback function to display filtered items as individual result cards in the results bar
- const mapItem = useCallback((item) => {
- return (
- {
- setFocusLocation(item.location);
- }}
- _hover={{
- transform: "scale(0.99)",
- }}
- >
-
-
- );
- }, [setFocusLocation, onResultsBarClose, setData, setLeaderboard]);
-
- const allResults = data
- .filter(filterItem)
- .map(mapItem);
+ const allResults = data.filter(filterItem).map(mapItem);
-// Define JSX for empty results bar (no result cards)
+ // Define JSX for empty results bar (no result cards)
const noResults = (
-
+
No Items
- )
+ );
return (
{}, // set data
isLoginModalOpen: false,
onLoginModalOpen: () => {},
onLoginModalClose: () => {},
diff --git a/src/utils/HomeUtils.js b/src/utils/HomeUtils.js
new file mode 100644
index 0000000..cb01dd4
--- /dev/null
+++ b/src/utils/HomeUtils.js
@@ -0,0 +1,109 @@
+import axios from "axios";
+
+// retrieve a list of items ALL TIME
+const retrieveItemsAllTime = async (
+ setData,
+ setDateRangeFilter,
+ setLoading
+) => {
+ try {
+ setLoading(false);
+ const response = await axios.get(
+ `${process.env.REACT_APP_AWS_BACKEND_URL}/items/`
+ );
+ setData(response.data.map((item) => ({ ...item, id: item.id })));
+ setDateRangeFilter("All");
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setLoading(true);
+ }
+};
+
+// retrieve a list of items from the last 7 days
+const retrieveItemsWithinWeek = async (
+ setData,
+ setDateRangeFilter,
+ setLoading
+) => {
+ try {
+ setLoading(false);
+ const response = await axios.get(
+ `${process.env.REACT_APP_AWS_BACKEND_URL}/items/week`
+ );
+ setData(response.data.map((item) => ({ ...item, id: item.id })));
+ setDateRangeFilter("Last 7 Days");
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setLoading(true);
+ }
+};
+
+// retrieve a list of items from the last 2 weeks
+const retrieveItemsWithinTwoWeeks = async (
+ setData,
+ setDateRangeFilter,
+ setLoading
+) => {
+ try {
+ setLoading(false);
+ const response = await axios.get(
+ `${process.env.REACT_APP_AWS_BACKEND_URL}/items/two_weeks`
+ );
+ setData(response.data.map((item) => ({ ...item, id: item.id })));
+ setDateRangeFilter("Last 14 Days");
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setLoading(true);
+ }
+};
+
+// retrieve a list of items from the last month
+const retrieveItemsWithinMonth = async (
+ setData,
+ setDateRangeFilter,
+ setLoading
+) => {
+ try {
+ setLoading(false);
+ const response = await axios.get(
+ `${process.env.REACT_APP_AWS_BACKEND_URL}/items/month`
+ );
+ setData(response.data.map((item) => ({ ...item, id: item.id })));
+ setDateRangeFilter("Last 30 Days");
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setLoading(true);
+ }
+};
+
+// retrieve a list of items from the last year
+const retrieveItemsWithinYear = async (
+ setData,
+ setDateRangeFilter,
+ setLoading
+) => {
+ try {
+ setLoading(false);
+ const response = await axios.get(
+ `${process.env.REACT_APP_AWS_BACKEND_URL}/items/year`
+ );
+ setData(response.data.map((item) => ({ ...item, id: item.id })));
+ setDateRangeFilter("This Year");
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setLoading(true);
+ }
+};
+
+export {
+ retrieveItemsAllTime,
+ retrieveItemsWithinWeek,
+ retrieveItemsWithinTwoWeeks,
+ retrieveItemsWithinMonth,
+ retrieveItemsWithinYear,
+};