added Returned filter

NwinNwin · Sep 25, 2023 · 9ea09a8 · 9ea09a8
1 parent c5658fc
commit 9ea09a8
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 11 deletions.
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
@@ -18,9 +18,11 @@ import {
   Button,
 } from "@chakra-ui/react";
 import "./Filter.css";
+import { UserAuth } from "../../context/AuthContext";
 
 export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
   const [value, setValue] = useState("everything");
+  const { user } = UserAuth();
 
   useEffect(() => {
     /* eslint-disable react-hooks/exhaustive-deps */
@@ -70,20 +72,42 @@ export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
                     Found
                   </Text>
                 </Flex>
+                <Flex mb="20px">
+                  <Switch
+                    colorScheme="yellow"
+                    size="lg"
+                    onChange={() => {
+                      setFindFilter((prev) => ({
+                        ...prev,
+                        isShowReturned: !prev.isShowReturned,
+                      }));
+                    }}
+                    defaultChecked={findFilter.isShowReturned}
+                  />
+                  <Text mb="0px" ml="50px" fontSize="xl">
+                    Returned
+                  </Text>
+                </Flex>
 
                 <Flex mb="15px">
                   <Switch
                     colorScheme="blue"
                     size="lg"
                     defaultChecked={findFilter.isYourPosts}
+                    isDisabled={!user}
                     onChange={() => {
                       setFindFilter((prev) => ({
                         ...prev,
                         isYourPosts: !prev.isYourPosts,
                       }));
                     }}
                   />
-                  <Text mb="0px" ml="50px" fontSize="xl">
+                  <Text
+                    mb="0px"
+                    ml="50px"
+                    fontSize="xl"
+                    color={!user && "gray"}
+                  >
                     Your Posts
                   </Text>
                 </Flex>
@@ -124,6 +148,9 @@ export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
                     </Stack>
                   </RadioGroup>
                 </Box>
+                <Text fontSize="xl" fontWeight="bold" mt="15px">
+                  Found/Lost Date:
+                </Text>
                 <Input
                   onChange={(e) => {
                     setFindFilter((prev) => ({
@@ -149,6 +176,8 @@ export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
                   isFound: true,
                   islost: true,
                   uploadDate: "",
+                  isYourPosts: false,
+                  isShowReturned: true,
                 });
                 onClose();
               }}

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -75,6 +75,7 @@ export default function Home() {
     islost: true,
     uploadDate: "",
     isYourPosts: false,
+    isShowReturned: true,
   });
 
   function isFilterOff() {
@@ -84,7 +85,8 @@ export default function Home() {
       findFilter.islost === true &&
       findFilter.uploadDate === "" &&
       search === "" &&
-      !findFilter.isYourPosts
+      !findFilter.isYourPosts &&
+      findFilter.isShowReturned === true
     );
   }
 

diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx
@@ -57,7 +57,11 @@ export default function InfoModal({
       >
         <ModalOverlay />
         <ModalContent>
-          <ModalCloseButton size="lg" />
+          <ModalCloseButton
+            size="lg"
+            border={"4px green solid"}
+            background={"white"}
+          />
 
           <Flex
             justifyContent={{ base: "center", md: "space-around" }}
@@ -118,9 +122,9 @@ export default function InfoModal({
                   Description:
                 </Text>
                 {props.islost ? (
-                  <Text color={"gray.500"}>Lost on {props.itemDate}</Text>
+                  <Text color={"gray.500"}>Lost on {props.itemdate}</Text>
                 ) : (
-                  <Text color={"gray.500"}> Found on {props.itemDate}</Text>
+                  <Text color={"gray.500"}> Found on {props.itemdate}</Text>
                 )}
                 <Text
                   fontSize={"md"}

diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
@@ -87,7 +87,8 @@ export default function Map({
         (findFilter.uploadDate === "" ||
           (item.itemdate && item.itemdate.includes(findFilter.uploadDate))) &&
         (!findFilter.isYourPosts ||
-          (findFilter.isYourPosts && item.email === user.email))
+          (findFilter.isYourPosts && item.email === user.email)) &&
+        (findFilter.isShowReturned || !item.isresolved)
       );
     })
     .map((item) => {

diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx
@@ -24,10 +24,10 @@ export default function ResultsBar({
           findFilter.isFound === !item.islost) &&
         (findFilter.type === "everything" || findFilter.type === item.type) &&
         (findFilter.uploadDate === "" ||
-          !item.itemdate ||
           (item.itemdate && item.itemdate.includes(findFilter.uploadDate))) &&
         (!findFilter.isYourPosts ||
-          (findFilter.isYourPosts && item.email === user.email))
+          (findFilter.isYourPosts && item.email === user.email)) &&
+        (findFilter.isShowReturned || !item.isresolved)
       );
     })
     .map((item) => {

diff --git a/src/components/Type/TypeCard.jsx b/src/components/Type/TypeCard.jsx
@@ -19,15 +19,20 @@ export default function TypeCard({
       backgroundColor={newAddedItem.type === type ? "#787092" : "white"}
       variant="outline"
       border="5px rgb(166, 152, 216) solid"
-      w={{ md: "7vw", base: "13vh" }}
-      h={{ md: "7vw", base: "13vh" }}
+      minW={{ md: "7vw", base: "13vh" }}
+      minH={{ md: "7vw", base: "13vh" }}
       borderRadius="20px"
       alignItems={"center"}
       justifyContent={"center"}
       flexDir={"column"}
       onClick={handleOnClick}
     >
-      <Text as="b" mb="5%" color={newAddedItem.type === type && "white"}>
+      <Text
+        as="b"
+        mb="5%"
+        color={newAddedItem.type === type && "white"}
+        fontSize={{ base: "sm", md: "md" }}
+      >
         {type.toUpperCase()}
       </Text>
       <Image