Merge pull request #340 from Aar-if/renameDelete

Issue #PS-926 feat: [FRONTEND] Apply Retention in the overall App

package.json

@@ -44,7 +44,8 @@
     "react-ga4": "^2.1.0",
     "react-joyride": "^2.8.2",
     "react-toastify": "^10.0.5",
-    "sharp": "^0.33.3"
+    "sharp": "^0.33.3",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",

src/components/DateRangePopup.tsx

@@ -24,6 +24,7 @@ import WestIcon from '@mui/icons-material/West';
 import checkMark from '../assets/images/checkMark.svg';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import useStore from '@/store/store';
 
 const modalStyle = {
   position: 'absolute',
@@ -79,7 +80,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isCalendarModalOpen, setIsCalenderModalOpen] = useState(false);
   const [selectedRangeArray, setSelectedRangeArray] = useState(null);
-
+  const store = useStore();
   const [dateRangeArray, setDateRangeArray] = useState<any[]>([]);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
   const [displayCalendarFromDate, setDisplayCalendarFromDate] = React.useState(
@@ -140,7 +141,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
-      const storedDates = localStorage.getItem('selectedRangeArray');
+      const storedDates = store.value
       if (storedDates) {
         try {
           const dateArray = JSON.parse(storedDates);

src/components/MonthCalender.tsx

@@ -11,6 +11,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import Value from 'react-calendar';
 import { shortDateFormat } from '@/utils/Helper';
 import useDeterminePathColor from '../hooks/useDeterminePathColor';
+import useStore from '../store/store';
 
 interface CalendarWithAttendanceProps {
   formattedAttendanceData?: FormattedAttendanceData;
@@ -42,6 +43,8 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
   selectionType,
   selectedRangeRetention,
 }) => {
+  const store = useStore();
+  const setValue = useStore((state) => state.setValue);
   const [date, setDate] = useState<
     Date | null | undefined | [Date | null, Date | null]
   >(() => {
@@ -279,7 +282,7 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
     };
     setDate(newDate);
     if (newDate !== undefined) {
-      localStorage.setItem('selectedRangeArray', JSON.stringify(newDate));
+      setValue(JSON.stringify(newDate));
     } else {
       console.error('newDate is undefined');
     }

src/store/store.js

@@ -0,0 +1,13 @@
+
+import {create} from 'zustand';
+import { persist } from 'zustand/middleware';
+
+const useStore = create(persist((set) => ({
+    value: '',
+    setValue: (newValue) => set((state) => ({ value: newValue })),
+}), {
+name: 'teacherApp',
+getStorage: () => localStorage,
+}));
+
+export default useStore ;