refactor: filter

habralab · Jan 25, 2024 · 95f32fa · 95f32fa
1 parent f86fa7c
commit 95f32fa
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 38 deletions.
diff --git a/src/pages/filter/Filter.tsx b/src/pages/filter/Filter.tsx
@@ -7,53 +7,79 @@ import {
   Heading,
   Icon,
   IconButton,
+  Stack,
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import { FiChevronLeft } from 'react-icons/fi';
 
+import { useFilterStore } from '~/entities/project';
 import { useGetSpecsGroups } from '~/entities/storage';
 
 import { SearchInput } from '~/shared/ui/SearchInput';
 
 import { GroupItem } from './GroupItem';
 
 export const Filter = () => {
+  const { filter, updateFilter } = useFilterStore();
   const [searchText, setSearchText] = useState('');
   const { data: specs } = useGetSpecsGroups();
 
   return (
-    <Container maxW="md">
-      <Box bg="bg" position="sticky" top="0" zIndex={1} pt={3} pb={4}>
-        <Flex justifyContent="space-between" mb={3}>
-          <Flex alignItems="center">
-            <IconButton
-              variant="ghost"
-              aria-label="Close"
-              minW="fit-content"
-              mr={2}
-              icon={<Icon as={FiChevronLeft} fontSize="2xl" />}
-            />
-            <Heading variant="h2" mb={0}>
-              Специализация
-            </Heading>
+    <>
+      <Container maxW="md">
+        <Box bg="bg" position="sticky" top="0" zIndex={1} pt={3} pb={4}>
+          <Flex justifyContent="space-between" mb={3}>
+            <Flex alignItems="center">
+              <IconButton
+                variant="ghost"
+                aria-label="Close"
+                minW="fit-content"
+                mr={2}
+                icon={<Icon as={FiChevronLeft} fontSize="2xl" />}
+              />
+              <Heading variant="h2" mb={0}>
+                Специализация
+              </Heading>
+            </Flex>
+            <Button variant="flat" fontSize="sm" fontWeight="500" colorScheme="purple">
+              Сбросить
+            </Button>
           </Flex>
-          <Button variant="flat" fontSize="sm" fontWeight="500" colorScheme="purple">
-            Сбросить
-          </Button>
-        </Flex>
-        <SearchInput
-          placeholder="Найти специальность"
-          onChange={(value) => {
-            setSearchText(value);
-          }}
-          value={searchText}
-        />
-      </Box>
-      <Accordion allowMultiple bg="white" borderRadius="2xl">
-        {specs?.map((group) => (
-          <GroupItem key={group.id} id={group.id} name={group.name} />
-        ))}
-      </Accordion>
-    </Container>
+          <SearchInput
+            placeholder="Найти специальность"
+            onChange={(value) => {
+              setSearchText(value);
+            }}
+            value={searchText}
+          />
+        </Box>
+        <Accordion allowMultiple bg="white" borderRadius="2xl">
+          {specs?.map((group) => (
+            <GroupItem
+              key={group.id}
+              id={group.id}
+              name={group.name}
+              tempSpec={filter.specs}
+            />
+          ))}
+        </Accordion>
+        <Container maxW="md" py={5} bg="bg" position="sticky" bottom={16}>
+          {filter.specs.length > 0 && (
+            <Button
+              onClick={() => {
+                updateFilter({ specs: filter.specs });
+                // changeVisible(false);
+                setSearchText('');
+              }}
+              fontSize="sm"
+              fontWeight="600"
+              w="full"
+            >
+              Применить
+            </Button>
+          )}
+        </Container>
+      </Container>
+    </>
   );
 };
diff --git a/src/pages/filter/GroupItem.tsx b/src/pages/filter/GroupItem.tsx
@@ -7,14 +7,17 @@ import {
   Heading,
 } from '@chakra-ui/react';
 
+import { useFilterStore } from '~/entities/project';
+
 import { SpecsGroups } from './SpecsGroups';
 
 interface GroupItemProps {
   name: string | null;
   id: string;
+  tempSpec: string[];
 }
 
-export const GroupItem = ({ name, id }: GroupItemProps) => {
+export const GroupItem = ({ name, id, tempSpec }: GroupItemProps) => {
   return (
     <AccordionItem>
       {({ isExpanded }) => (
@@ -27,7 +30,9 @@ export const GroupItem = ({ name, id }: GroupItemProps) => {
             </Flex>
             <AccordionIcon />
           </AccordionButton>
-          <AccordionPanel pb={3}>{isExpanded && <SpecsGroups id={id} />}</AccordionPanel>
+          <AccordionPanel pb={3}>
+            {isExpanded && <SpecsGroups id={id} tempSpec={tempSpec} />}
+          </AccordionPanel>
         </>
       )}
     </AccordionItem>

diff --git a/src/pages/filter/SpecItem.tsx b/src/pages/filter/SpecItem.tsx
@@ -1,13 +1,38 @@
 import { Checkbox, Text } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { useFilterStore } from '~/entities/project';
 
 interface SpecItemProps {
   id: string;
   name: string | null;
+  tempSpec: string[];
 }
 
-export const SpecItem = ({ id, name }: SpecItemProps) => {
+export const SpecItem = ({ id, name, tempSpec }: SpecItemProps) => {
+  const [_, setCheckboxChange] = useState(false);
+
+  const changeValue = () => {
+    if (tempSpec.includes(id)) {
+      const existingId = tempSpec.indexOf(id);
+      tempSpec.splice(existingId, 1);
+      setCheckboxChange((prev) => !prev);
+      console.log(tempSpec);
+      return;
+    }
+    setCheckboxChange((prev) => !prev);
+    tempSpec.push(id);
+    console.log(tempSpec);
+  };
   return (
-    <Checkbox p={4} w="full" py={2} value={id}>
+    <Checkbox
+      p={4}
+      w="full"
+      py={2}
+      value={id}
+      isChecked={tempSpec.includes(id)}
+      onChange={changeValue}
+    >
       <Text fontWeight="medium" fontSize="sm">
         {name}
       </Text>

diff --git a/src/pages/filter/SpecsGroups.tsx b/src/pages/filter/SpecsGroups.tsx
@@ -6,9 +6,10 @@ import { SpecItem } from './SpecItem';
 
 interface SpecsGroupsProps {
   id: string;
+  tempSpec: string[];
 }
 
-export const SpecsGroups = ({ id }: SpecsGroupsProps) => {
+export const SpecsGroups = ({ id, tempSpec }: SpecsGroupsProps) => {
   const { data: specs, isLoading } = useGetSpecs({ group_id: id });
 
   return isLoading ? (
@@ -17,7 +18,9 @@ export const SpecsGroups = ({ id }: SpecsGroupsProps) => {
       <Skeleton height="17.5px" borderRadius="md" w="full" />
     </HStack>
   ) : (
-    specs?.map((spec) => <SpecItem id={spec.id} name={spec.name} key={spec.id} />)
+    specs?.map((spec) => (
+      <SpecItem id={spec.id} name={spec.name} key={spec.id} tempSpec={tempSpec} />
+    ))
   );
 };