feat(app): add sort option when viewing schedules and source materials

src/components/PageAccordion.jsx

@@ -1,18 +1,35 @@
 import { useEffect, useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useTranslation } from 'react-i18next';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import Box from '@mui/material/Box';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { yearsListState } from '../states/sourceMaterial';
+import { refreshWeeksListState, yearsListState } from '../states/sourceMaterial';
 import { SchedulesByYear } from '../features/schedules';
 import { SourcesByYear } from '../features/sourceMaterial';
 
+const iconButtonStyles = {
+  borderRadius: '8px',
+  '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+    borderRadius: 0,
+    backgroundColor: 'rgba(23, 32, 42, .3)',
+  },
+  border: '1px outset',
+  marginLeft: '10px',
+};
+
 const PageAccordion = ({ page }) => {
   const { t } = useTranslation('ui');
+
+  const setRefreshWeekList = useSetRecoilState(refreshWeeksListState);
+
   const yearsList = useRecoilValue(yearsListState);
 
   const [yearsExpanded, setYearsExpanded] = useState([]);
@@ -31,6 +48,22 @@ const PageAccordion = ({ page }) => {
     localStorage.setItem(localStorageItem, JSON.stringify(newList));
   };
 
+  const handleYearAscending = (e) => {
+    e.stopPropagation();
+    localStorage.setItem('monthSort', 'asc');
+    setRefreshWeekList((prev) => {
+      return !prev;
+    });
+  };
+
+  const handleYearDescending = (e) => {
+    e.stopPropagation();
+    localStorage.setItem('monthSort', 'desc');
+    setRefreshWeekList((prev) => {
+      return !prev;
+    });
+  };
+
   useEffect(() => {
     const list = localStorage.getItem(localStorageItem) ? JSON.parse(localStorage.getItem(localStorageItem)) : [];
     setYearsExpanded(list);
@@ -45,9 +78,21 @@ const PageAccordion = ({ page }) => {
       {yearsList.map((year) => (
         <Accordion key={year.value} onChange={handleChange(year.value)} expanded={yearsExpanded.includes(year.value)}>
           <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
-            <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
-              {year.label}
-            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+              <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                {year.label}
+              </Typography>
+              {yearsExpanded.includes(year.value) && (
+                <Stack direction="row" spacing={1}>
+                  <IconButton onClick={handleYearAscending} sx={iconButtonStyles}>
+                    <ArrowUpwardIcon />
+                  </IconButton>
+                  <IconButton onClick={handleYearDescending} sx={iconButtonStyles}>
+                    <ArrowDownwardIcon />
+                  </IconButton>
+                </Stack>
+              )}
+            </Box>
           </AccordionSummary>
           <AccordionDetails>
             {page === 'schedule' && <SchedulesByYear year={year.label} />}

src/features/schedules/SchedulesByYear.jsx

@@ -4,14 +4,18 @@ import Box from '@mui/material/Box';
 import { dbGetScheduleListByYear } from '../../indexedDb/dbSourceMaterial';
 import { ScheduleCard } from './';
 import { monthNamesState } from '../../states/main';
+import { refreshWeeksListState } from '../../states/sourceMaterial';
 
 const SchedulesByYear = ({ year }) => {
   const monthNames = useRecoilValue(monthNamesState);
+  const refreshWeekList = useRecoilValue(refreshWeeksListState);
 
   const [schedules, setSchedules] = useState([]);
 
   const getMonthlySchedules = useCallback(async () => {
-    const data = await dbGetScheduleListByYear(year);
+    const userSort = localStorage.getItem('monthSort');
+
+    const data = await dbGetScheduleListByYear(year, userSort);
     let newData = [];
     for (const item of data) {
       const obj = {};
@@ -25,7 +29,7 @@ const SchedulesByYear = ({ year }) => {
 
   useEffect(() => {
     getMonthlySchedules();
-  }, [getMonthlySchedules]);
+  }, [getMonthlySchedules, refreshWeekList]);
 
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '15px', padding: '5px' }}>

src/features/sourceMaterial/SourcesByYear.jsx

@@ -13,7 +13,9 @@ const SourcesByYear = ({ year }) => {
   const [sources, setSources] = useState([]);
 
   const getMonthlySources = useCallback(async () => {
-    const data = await dbGetScheduleListByYear(year);
+    const userSort = localStorage.getItem('monthSort');
+
+    const data = await dbGetScheduleListByYear(year, userSort);
     let newData = [];
     for (const item of data) {
       const obj = {};

src/indexedDb/dbSourceMaterial.js

@@ -583,10 +583,19 @@ export const dbGetYearList = async () => {
   return allYear;
 };
 
-export const dbGetScheduleListByYear = async (varYear) => {
+export const dbGetScheduleListByYear = async (varYear, userSort = 'desc') => {
   const allSchedules = [];
+  let appData = [];
 
-  const appData = await appDb.table('src').reverse().sortBy('weekOf');
+  if (userSort === null) userSort = 'desc';
+
+  if (userSort === 'asc') {
+    appData = await appDb.src.reverse().reverse().sortBy('weekOf');
+  }
+
+  if (userSort === 'desc') {
+    appData = await appDb.src.reverse().sortBy('weekOf');
+  }
 
   for (let i = 0; i < appData.length; i++) {
     const weekDate = appData[i].weekOf;