integration of zustand

lib/storage.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { create } from 'zustand';
+import { type Tab } from '@/lib/types';
+import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '@/lib/constants';
+
+interface appStore {
+  tab: Tab;
+  setTab: (props: Tab) => void;
+}
+
+export const useAppStore = create<appStore>((set) => ({
+  setTab: (props: Tab) => {
+    set(() => ({ tab: props }));
+  },
+  tab: { id: SPEND_SCREEN_ID, title: SPEND_SCREEN_NAME },
+}));

package.json

@@ -21,7 +21,8 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.9"
+    "styled-components": "^5.3.9",
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
     "@types/node": "18.15.11",

pages/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Header, SpendScreen } from '@/screens';
 import { type Tab } from '@/lib/types';
-import { APP_NAME, SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '@/lib/constants';
-
+import { APP_NAME, SPEND_SCREEN_ID } from '@/lib/constants';
 import Head from 'next/head';
+import { useAppStore } from '@/lib/storage';
 
 const HeadIndex = (): JSX.Element => {
   return (
@@ -26,12 +26,11 @@ const appRender = ({ tab }: { tab: Tab }): JSX.Element => {
 };
 
 function App(): JSX.Element {
-  const [tab, setTab] = useState({ id: SPEND_SCREEN_ID, title: SPEND_SCREEN_NAME });
-
+  const tab = useAppStore((state) => state.tab);
   return (
     <>
       <HeadIndex />
-      <Header tab={tab} setTab={setTab} />
+      <Header />
       {appRender({ tab })}
     </>
   );

screens/Header/Header.tsx

@@ -1,15 +1,12 @@
+/* eslint-disable no-empty-pattern */
 import React from 'react';
-import { tabs } from './data';
-import { type Tab } from '@/lib/types';
 import styled from 'styled-components';
+import { useAppStore } from '@/lib/storage';
+import { tabs } from './data';
 
-export const Header = ({
-  tab,
-  setTab,
-}: {
-  tab: Tab;
-  setTab: React.Dispatch<React.SetStateAction<Tab>>;
-}): JSX.Element => {
+export const Header = (): JSX.Element => {
+  const tab = useAppStore((state) => state.tab);
+  const setTab = useAppStore((state) => state.setTab);
   return (
     <TabsContainer>
       {tabs.map((tabData) => (

tsconfig.json

@@ -21,7 +21,7 @@
       "@/*": ["*"]
     }
   },
-  "include": ["next-env.d.ts", "pages", "components", "screens", "lib/constants.ts", "lib/types.d.ts"],
+  "include": ["next-env.d.ts", "pages", "components", "screens", "lib"],
   "references": [
     {
       "path": "./tsconfig.node.json"