feat: add search panel for subscribe page

BGmi · Jul 4, 2024 · 25481ba · 25481ba
1 parent 9084052
commit 25481ba
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/src/components/calendar-tab/index.tsx b/src/components/calendar-tab/index.tsx
@@ -8,6 +8,7 @@ interface Props {
   tabListItems: CalendarDataKey[];
   tabListProps?: TabListProps;
   boxProps?: BoxProps;
+  type?: 'subscribe';
 }
 
 export default function CalendarTab({
@@ -16,6 +17,7 @@ export default function CalendarTab({
   tabListItems,
   tabListProps,
   boxProps,
+  type,
   ...props
 }: Props & TabsProps) {
   const engToZh: Record<CalendarDataKey, string> = {
@@ -40,6 +42,11 @@ export default function CalendarTab({
             {engToZh[week]}
           </Tab>
         ))}
+        {type === 'subscribe' ? (
+          <Tab whiteSpace="nowrap" mb="-2px" key="search">
+            搜索
+          </Tab>
+        ) : null}
       </TabList>
       <Box top="46.5px" borderBottom="2px solid" mt="-2.5px" borderBottomColor="inherit" {...boxProps} />
 

diff --git a/src/pages/subscribe/index.tsx b/src/pages/subscribe/index.tsx
@@ -1,16 +1,16 @@
-import { useMemo, useReducer } from 'react';
+import { useMemo, useReducer, useState } from 'react';
 
 import { CiFilter } from 'react-icons/ci';
-import { Button, Flex, Menu, MenuButton, MenuItem, MenuList, Spinner } from '@chakra-ui/react';
+import { Box, Button, Flex, Input, Menu, MenuButton, MenuItem, MenuList, Spinner, TabPanel } from '@chakra-ui/react';
 
 import { useCalendar } from '~/hooks/use-calendar';
 import { useColorMode } from '~/hooks/use-color-mode';
 
+import Auth from '~/components/auth';
 import CalendarTab from '~/components/calendar-tab';
 import SubscribePanel from '~/components/subscribe-panel';
-import Auth from '~/components/auth';
 
-import type { Calendar, CalendarDataEntries, CalendarDataKey } from '~/types/calendar';
+import type { Calendar, CalendarDataEntries, CalendarDataKey, WeekCalendar } from '~/types/calendar';
 
 interface FilterOptionsState {
   subscribed: boolean;
@@ -122,6 +122,8 @@ export default function Subscribe() {
   const tabListItems = useMemo(() => Object.keys(calendarData ?? []) as CalendarDataKey[], [calendarData]);
   const tabPanelsItems = useMemo(() => Object.entries(calendarData ?? []) as CalendarDataEntries, [calendarData]);
 
+  const searchData = useMemo(() => tabPanelsItems.flatMap(([_, bangumis]) => bangumis ?? []), [tabPanelsItems]);
+
   if (!calendarData || tabListItems.length === 0 || tabPanelsItems.length === 0) {
     return (
       <Flex justifyContent="center" alignContent="center" mt="44">
@@ -137,11 +139,39 @@ export default function Subscribe() {
         tabListItems={tabListItems}
         tabListProps={{ mr: '16' }}
         boxProps={{ mr: '16' }}
+        type="subscribe"
       >
         {tabPanelsItems.map(([week, bangumis]) => (
           <SubscribePanel key={week} bangumis={bangumis} />
         ))}
+        <TabPanel mt="6">
+          <SearchPanel data={searchData} />
+        </TabPanel>
       </CalendarTab>
     </Auth>
   );
 }
+
+function SearchPanel({ data }: { data: WeekCalendar[] }) {
+  const [key, setKey] = useState('');
+
+  const filterData = useMemo(() => {
+    return data.sort(b => (!b.status ? 1 : -1)).filter(_d => _d.name.includes(key));
+  }, [data, key]);
+
+  return (
+    <>
+      <Input
+        placeholder="搜索动画片"
+        maxW="96"
+        value={key}
+        display="block"
+        mx="auto"
+        onChange={e => setKey(e.target.value)}
+      />
+      <Box mt="8">
+        <SubscribePanel bangumis={filterData} />
+      </Box>
+    </>
+  );
+}