From 4a2364cb7b3b628c6e46010c5419e538940c297a Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Tue, 4 Apr 2023 20:33:42 -0300
Subject: [PATCH] integration of ChartJS and refactors

---
 package.json                            |  2 ++
 src/App.tsx                             | 16 ++++++++++++++--
 src/components/PieCircle.tsx            | 22 ++++++++++++++++++++++
 src/components/index.ts                 |  1 +
 src/constants.ts                        |  2 ++
 src/screens/Header/Header.tsx           | 10 +++-------
 src/screens/Header/data.ts              |  7 ++++---
 src/screens/SpendScreen/SpendScreen.tsx | 10 ++++++++++
 src/screens/SpendScreen/index.ts        |  1 +
 src/screens/index.ts                    |  1 +
 src/{screens/Header => }/types.d.ts     |  0
 11 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 src/components/PieCircle.tsx
 create mode 100644 src/components/index.ts
 create mode 100644 src/constants.ts
 create mode 100644 src/screens/SpendScreen/SpendScreen.tsx
 create mode 100644 src/screens/SpendScreen/index.ts
 rename src/{screens/Header => }/types.d.ts (100%)

diff --git a/package.json b/package.json
index 3a02113..a33a2af 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 5ef54b7..999ba37 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
diff --git a/src/components/PieCircle.tsx b/src/components/PieCircle.tsx
new file mode 100644
index 0000000..8e531b4
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..7a627b7
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './PieCircle';
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..032b107
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,2 @@
+export const SPEND_SCREEN_ID = 'spend-screen';
+export const SPEND_SCREEN_NAME = 'Spend';
diff --git a/src/screens/Header/Header.tsx b/src/screens/Header/Header.tsx
index a6b1898..53a4570 100644
--- a/src/screens/Header/Header.tsx
+++ b/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) => (
diff --git a/src/screens/Header/data.ts b/src/screens/Header/data.ts
index 925d155..8c31935 100644
--- a/src/screens/Header/data.ts
+++ b/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',
-    title: 'Tab 2',
+    id: SPEND_SCREEN_ID,
+    title: SPEND_SCREEN_NAME,
   },
   {
     id: 'tab-3',
diff --git a/src/screens/SpendScreen/SpendScreen.tsx b/src/screens/SpendScreen/SpendScreen.tsx
new file mode 100644
index 0000000..4152b6c
--- /dev/null
+++ b/src/screens/SpendScreen/SpendScreen.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { PieCircle } from '../../components';
+
+export const SpendScreen = (): JSX.Element => {
+  return (
+    <>
+      <PieCircle />
+    </>
+  );
+};
diff --git a/src/screens/SpendScreen/index.ts b/src/screens/SpendScreen/index.ts
new file mode 100644
index 0000000..70b10be
--- /dev/null
+++ b/src/screens/SpendScreen/index.ts
@@ -0,0 +1 @@
+export * from './SpendScreen';
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 266dec8..ad78166 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1 +1,2 @@
 export * from './Header';
+export * from './SpendScreen';
diff --git a/src/screens/Header/types.d.ts b/src/types.d.ts
similarity index 100%
rename from src/screens/Header/types.d.ts
rename to src/types.d.ts