From e7149f53fffb2428a197639de8ed2088b2398bf3 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Tue, 4 Apr 2023 23:31:21 -0300
Subject: [PATCH] integration of zustand

---
 lib/storage.ts            | 16 ++++++++++++++++
 package.json              |  3 ++-
 pages/index.tsx           | 11 +++++------
 screens/Header/Header.tsx | 15 ++++++---------
 tsconfig.json             |  2 +-
 5 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 lib/storage.ts

diff --git a/lib/storage.ts b/lib/storage.ts
new file mode 100644
index 0000000..90339dd
--- /dev/null
+++ b/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 },
+}));
diff --git a/package.json b/package.json
index fa342a0..f5673d4 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.tsx b/pages/index.tsx
index 556c522..77ae094 100644
--- a/pages/index.tsx
+++ b/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 })}
     </>
   );
diff --git a/screens/Header/Header.tsx b/screens/Header/Header.tsx
index b98fc08..e1d8f22 100644
--- a/screens/Header/Header.tsx
+++ b/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) => (
diff --git a/tsconfig.json b/tsconfig.json
index 436bb83..6dc728a 100644
--- a/tsconfig.json
+++ b/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"