integration of ChartJS and refactors

package.json

@@ -10,7 +10,9 @@
     "husky-prepare": "husky install"
   },
   "dependencies": {
+    "chart.js": "^4.2.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.9"
   },

src/App.tsx

@@ -1,12 +1,24 @@
 import React, { useState } from 'react';
-import { Header } from './screens';
+import { Header, SpendScreen } from './screens';
+import { type Tab } from './types';
+import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from './constants';
+
+const appRender = ({ tab }: { tab: Tab }): JSX.Element => {
+  switch (tab.id) {
+    case SPEND_SCREEN_ID:
+      return <SpendScreen />;
+    default:
+      return <></>;
+  }
+};
 
 function App(): JSX.Element {
-  const [tab, setTab] = useState({});
+  const [tab, setTab] = useState({ id: SPEND_SCREEN_ID, title: SPEND_SCREEN_NAME });
 
   return (
     <div>
       <Header tab={tab} setTab={setTab} />
+      {appRender({ tab })}
     </div>
   );
 }

src/components/PieCircle.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Pie } from 'react-chartjs-2';
+
+export const PieCircle = (): JSX.Element => {
+  ChartJS.register(ArcElement, Tooltip, Legend);
+  return (
+    <Pie
+      data={{
+        datasets: [
+          {
+            backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
+            data: [300, 50, 100],
+            hoverOffset: 4,
+            label: 'My First Dataset',
+          },
+        ],
+        labels: ['Red', 'Blue', 'Yellow'],
+      }}
+    ></Pie>
+  );
+};

src/components/index.ts

@@ -0,0 +1 @@
+export * from './PieCircle';

src/constants.ts

@@ -0,0 +1,2 @@
+export const SPEND_SCREEN_ID = 'spend-screen';
+export const SPEND_SCREEN_NAME = 'Spend';

src/screens/Header/Header.tsx

@@ -1,19 +1,15 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { tabs } from './data';
-import { type Tab } from './types';
+import { type Tab } from '../../types';
 import styled from 'styled-components';
 
 export const Header = ({
   tab,
   setTab,
 }: {
-  tab: Tab | Record<string, unknown>;
+  tab: Tab;
   setTab: React.Dispatch<React.SetStateAction<Tab>>;
 }): JSX.Element => {
-  useEffect(() => {
-    setTab(tabs[0]);
-  }, []);
-
   return (
     <TabsContainer>
       {tabs.map((tabData) => (

src/screens/Header/data.ts

@@ -1,4 +1,5 @@
-import { type Tab } from './types';
+import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '../../constants';
+import { type Tab } from '../../types';
 
 export const tabs: Tab[] = [
   {
@@ -6,8 +7,8 @@ export const tabs: Tab[] = [
     title: 'Tab 1',
   },
   {
-    id: 'tab-2',
+    id: SPEND_SCREEN_ID,
-    title: 'Tab 2',
+    title: SPEND_SCREEN_NAME,
   },
   {
     id: 'tab-3',

src/screens/SpendScreen/SpendScreen.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PieCircle } from '../../components';
+
+export const SpendScreen = (): JSX.Element => {
+  return (
+    <>
+      <PieCircle />
+    </>
+  );
+};

src/screens/SpendScreen/index.ts

@@ -0,0 +1 @@
+export * from './SpendScreen';

src/screens/index.ts

@@ -1 +1,2 @@
 export * from './Header';
+export * from './SpendScreen';