refactor: refactor components

Author: mmrosadev

package.json

@@ -40,10 +40,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@eslint/js": "^9.17.0",
     "eslint": "^9.17.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.37.3",
     "globals": "^15.14.0"
   }
-}
+}

src/fonts/source-sans-pro-v11-latin-regular.eot renamed to public/fonts/source-sans-pro-v11-latin-regular.eot

@@ -1,51 +1,63 @@
 import React, { useState } from 'react'
 import { Header, TextArea, ChartPlot, Footer } from './components'
 import { preparDataChart } from '../src/util/TreadUserInput'
-import './App.css'
+import { ErrorContainer } from './styles'
 
 export default function App() {
 
+    const [value, setValue] = useState('')
     const [chartProperties, setChartProperties] = useState({
-        value: '',
         categories: null,
         series: null,
     })
+    const [showError, setShowError] = useState(false)
+    const [showChart, setShowChart] = useState(false)
 
     const handleClick = () => {
-        let temp = chartProperties.value !== null ? preparDataChart(chartProperties.value) : false
 
-        if (temp !== false) {
+        setChartProperties({
+            categories: null,
+            series: null,
+        })
+
+        setShowChart(false)
+        setShowError(false)
+
+        const temp = value !== null ? preparDataChart(value) : false
+
+        if (temp !== false && temp?.series && temp?.series?.length > 0) {
             setChartProperties({
                 categories: temp.categories,
                 series: temp.series,
-                value: '',
             })
+            setShowChart(true)
+        } else {
+            setShowError(true)
         }
-    }
 
-    const handleChange = (event) => {
-        setChartProperties((prevState) => ({
-            ...prevState,
-            value: event.target.value
-        }))
+        setValue('')
     }
 
+    const { categories, series } = chartProperties
 
     return (
-        <div className="app">
+        <div>
             <Header />
             <TextArea
-                value={chartProperties.value}
-                handleChange={handleChange}
+                value={value}
+                handleChange={(event) => setValue(event.target.value)}
             />
-            {chartProperties.categories !== null && chartProperties.series !== null ? (
+            {!!showChart && (
                 <ChartPlot
-                    categories={chartProperties.categories}
-                    series={chartProperties.series}
+                    categories={categories}
+                    series={series}
                 />
-            ) : (
-                <React.Fragment />
             )}
+
+            {!!showError && (
+                <ErrorContainer>Opps... Dados de entrada inválidos</ErrorContainer>
+            )}
+
             <Footer handleClick={handleClick} />
         </div>
     )

src/fonts/source-sans-pro-v11-latin-regular.svg renamed to public/fonts/source-sans-pro-v11-latin-regular.svg

@@ -0,0 +1,42 @@
+import { createGlobalStyle } from 'styled-components'
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* scrollbar style */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgb(10, 18, 42);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgb(102, 102, 102);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgb(102, 102, 102);
+  }
+
+  /* import google fonts */
+  @font-face {
+    font-family: "Source Sans Pro";
+    font-style: normal;
+    font-weight: 400;
+    src: url("./fonts/source-sans-pro-v11-latin-regular.eot");
+    /* IE9 Compat Modes */
+    src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+      url("/fonts/source-sans-pro-v11-latin-regular.eot?#iefix") format("embedded-opentype"),
+      url("/fonts/source-sans-pro-v11-latin-regular.woff2") format("woff2"),
+      url("/fonts/source-sans-pro-v11-latin-regular.woff") format("woff"),
+      url("/fonts/source-sans-pro-v11-latin-regular.ttf") format("truetype"),
+      url("/fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro") format("svg");
+  }
+`
+
+export default GlobalStyle

src/fonts/source-sans-pro-v11-latin-regular.ttf renamed to public/fonts/source-sans-pro-v11-latin-regular.ttf

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Container } from './styles'
 
-export function Footer(handleClick) {
+export function Footer({ handleClick }) {
     return (
         <Container>
             <Button