chore: Merge IFilterState interface into IFilterData

src/interfaces/IFilterData.ts

@@ -5,4 +5,7 @@ export interface IFilterData {
     startsWith?: string[];
     twinNames?: boolean;
     religion?: Religion;
+    startsWithMode: 'none' | 'auto' | 'manual';
+    tob: string;
+    tz: string;
 }

src/interfaces/index.ts

@@ -1,5 +1,4 @@
 export * from './IFilterData';
-export * from './IFilterState';
 export * from './IName';
 export * from './IResponseData';
 export * from './ITwinName';

src/pages/Filters/Filters.tsx

@@ -36,6 +36,9 @@ export const Filters: React.FC = () => {
     const [startsWithMode, setStartsWithMode] =
         useFilterState('startsWithMode');
 
+    const [tob] = useFilterState('tob');
+    const [tz] = useFilterState('tz');
+
     const onTwinNamesClick = (
         e: React.MouseEvent<HTMLButtonElement, MouseEvent>
     ) => {
@@ -102,6 +105,9 @@ export const Filters: React.FC = () => {
                         startsWith,
                         twinNames,
                         religion,
+                        startsWithMode,
+                        tob,
+                        tz,
                     },
                     { headers: { token } }
                 )

src/pages/Names/Names.tsx

@@ -22,11 +22,10 @@ export const Names: React.FC = () => {
     const page = Number(searchParams.get('page'));
     const limit = Number(searchParams.get('limit'));
 
-    const [filters, setFilters] = useState<IFilterData>({});
+    const [filters, setFilters] = useState<IFilterData>({} as IFilterData);
     const [total, setTotal] = useState(0);
     const [data, setData] = useState<IName[] | ITwinName[]>([]);
     const [loading, setLoading] = useState(false);
-    const [exporting, setExporting] = useState(false);
 
     useEffect(() => {
         setLoading(true);

src/utils/Common.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 
-import { IFilterState } from '../interfaces';
+import { IFilterData } from '../interfaces';
 import { getDefaultTimezone } from './Timezone';
 import { getLunarMansion, getLunarMansionIndex } from './astro';
 
@@ -10,23 +10,23 @@ const sentenseCase = (str: string) => {
 
 export const getStateFromParams = (params: URLSearchParams) => {
     return {
-        gender: (params.get('gender') as IFilterState['gender']) || undefined,
+        gender: (params.get('gender') as IFilterData['gender']) || undefined,
         startsWith:
             (params
                 .get('startsWith')
-                ?.split(',') as IFilterState['startsWith']) || undefined,
+                ?.split(',') as IFilterData['startsWith']) || undefined,
         twinNames: params.get('twinNames') === 'true',
         religion:
-            (params.get('religion') as IFilterState['religion']) || undefined,
+            (params.get('religion') as IFilterData['religion']) || undefined,
         startsWithMode:
-            (params.get('startsWithMode') as IFilterState['startsWithMode']) ||
+            (params.get('startsWithMode') as IFilterData['startsWithMode']) ||
             'none',
         tob: params.get('tob') || dayjs().format('YYYY-MM-DDTHH:mm'),
         tz: params.get('tz') || getDefaultTimezone(),
     };
 };
 
-export const getDocumentTitleByFilter = (filter: IFilterState) => {
+export const getDocumentTitleByFilter = (filter: IFilterData) => {
     let documentTitle = [];
 
     if (filter.twinNames) {

src/utils/FilterState.tsx

@@ -10,17 +10,17 @@ import React, {
 } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { IFilterState } from '../interfaces';
+import { IFilterData } from '../interfaces';
 import { getDocumentTitleByFilter, getStateFromParams } from './Common';
 
-const FilterStateContext = createContext<IFilterState>({} as IFilterState);
+const FilterStateContext = createContext<IFilterData>({} as IFilterData);
 
 export const FilterStateProvider: React.FC<PropsWithChildren> = ({
     children,
 }) => {
     const [searchParams] = useSearchParams();
 
-    const state = useMemo<IFilterState>(
+    const state = useMemo<IFilterData>(
         () => getStateFromParams(searchParams),
         [searchParams]
     );
@@ -36,18 +36,18 @@ export const FilterStateProvider: React.FC<PropsWithChildren> = ({
     );
 };
 
-export const useFilterState = <K extends keyof IFilterState>(
+export const useFilterState = <K extends keyof IFilterData>(
     key: K
-): [IFilterState[K], Dispatch<SetStateAction<IFilterState[K]>>] => {
+): [IFilterData[K], Dispatch<SetStateAction<IFilterData[K]>>] => {
     const [_, setSearchParams] = useSearchParams();
 
     const state = useContext(FilterStateContext);
 
     const setFilterState = useCallback(
         (
             value:
-                | IFilterState[K]
-                | ((prevState: IFilterState[K]) => IFilterState[K])
+                | IFilterData[K]
+                | ((prevState: IFilterData[K]) => IFilterData[K])
         ) => {
             const newValue =
                 value instanceof Function ? value(state[key]) : value;