From 04a02439f415f6bb5f691770eb00a386922d1b9c Mon Sep 17 00:00:00 2001
From: Borja Gonzalez <borja@bgon.es>
Date: Fri, 9 Apr 2021 19:18:53 +0200
Subject: [PATCH] Components renamed and little refactor

---
 src/components/AuthButtons.jsx                | 38 ++++++++++++
 .../{Footer.jsx => CalcButtons.jsx}           | 28 +++------
 src/components/Header.jsx                     | 58 ------------------
 src/components/Main.jsx                       | 40 -------------
 src/components/Router.jsx                     |  6 +-
 src/components/pages/Calc.jsx                 | 60 +++++++++++++++++++
 src/components/{ => pages}/Stats.jsx          |  6 +-
 src/constants/routes.js                       |  4 +-
 src/styles/components/Footer.module.css       |  4 --
 src/styles/components/Header.module.css       |  6 --
 src/styles/components/Loading.module.css      | 11 +++-
 src/styles/components/Main.module.css         | 11 ++++
 src/styles/variables.css                      | 10 ----
 13 files changed, 136 insertions(+), 146 deletions(-)
 create mode 100644 src/components/AuthButtons.jsx
 rename src/components/{Footer.jsx => CalcButtons.jsx} (71%)
 delete mode 100644 src/components/Header.jsx
 delete mode 100644 src/components/Main.jsx
 create mode 100644 src/components/pages/Calc.jsx
 rename src/components/{ => pages}/Stats.jsx (87%)
 delete mode 100644 src/styles/components/Footer.module.css
 delete mode 100644 src/styles/components/Header.module.css

diff --git a/src/components/AuthButtons.jsx b/src/components/AuthButtons.jsx
new file mode 100644
index 0000000..841cd45
--- /dev/null
+++ b/src/components/AuthButtons.jsx
@@ -0,0 +1,38 @@
+import { PropTypes } from 'prop-types'
+
+import Button from 'components/Button'
+import { LogInIcon, LogOutIcon } from 'components/icons'
+import Loading from 'components/Loading'
+import { useAuth } from 'contexts/AuthContext'
+import { useModal } from 'contexts/ModalContext'
+
+const AuthButtons = ({ children }) => {
+  const { isAuthed, isLoading, signIn, signOut } = useAuth()
+  const { renderModal } = useModal()
+
+  const handleSignOut = () => renderModal(
+    'Do you want to sign out?',
+    signOut
+  )
+
+  if (isLoading) {
+    return <Button grow secondary><Loading small /></Button>
+  }
+
+  if (!isAuthed) {
+    return <Button grow primary onClick={signIn}><LogInIcon /></Button>
+  }
+
+  return (
+    <>
+      {children}
+      <Button grow secondary onClick={handleSignOut}><LogOutIcon /></Button>
+    </>
+  )
+}
+
+AuthButtons.propTypes = {
+  children: PropTypes.node,
+}
+
+export default AuthButtons
diff --git a/src/components/Footer.jsx b/src/components/CalcButtons.jsx
similarity index 71%
rename from src/components/Footer.jsx
rename to src/components/CalcButtons.jsx
index 11e7146..e74d33a 100644
--- a/src/components/Footer.jsx
+++ b/src/components/CalcButtons.jsx
@@ -6,9 +6,7 @@ import Button from 'components/Button'
 import Loading from 'components/Loading'
 import { CloseIcon, RestartIcon, TickIcon, UndoIcon } from 'components/icons'
 
-import styles from 'styles/components/Footer.module.css'
-
-const Footer = ({
+const CalcButtons = ({
   isCompleted,
   isLoading,
   isSolved,
@@ -26,39 +24,31 @@ const Footer = ({
   }
 
   if (isLoading) {
-    return (
-      <div className={styles.footer}>
-        <Button grow secondary><Loading small /></Button>
-      </div>
-    )
+    return <Button grow secondary><Loading small /></Button>
   }
 
   if (!isSolved) {
     return (
-      <div className={styles.footer}>
+      <>
         <Button grow secondary onClick={handleSolve}>SOLVE</Button>
         <Button primary onClick={undo}><UndoIcon /></Button>
-      </div>
+      </>
     )
   }
 
   if (!isCompleted) {
     return (
-      <div className={styles.footer}>
+      <>
         <Button grow primary onClick={handleAnswer(true)}><TickIcon /></Button>
         <Button grow secondary onClick={handleAnswer(false)}><CloseIcon /></Button>
-      </div>
+      </>
     )
   }
 
-  return (
-    <div className={styles.footer}>
-      <Button grow primary onClick={onRestart}><RestartIcon /></Button>
-    </div>
-  )
+  return <Button grow primary onClick={onRestart}><RestartIcon /></Button>
 }
 
-Footer.propTypes = {
+CalcButtons.propTypes = {
   isCompleted: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   isSolved: PropTypes.bool.isRequired,
@@ -67,4 +57,4 @@ Footer.propTypes = {
   handleSuccess: PropTypes.func.isRequired,
 }
 
-export default Footer
+export default CalcButtons
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
deleted file mode 100644
index 58f7a9d..0000000
--- a/src/components/Header.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useLocation } from 'wouter'
-import { PropTypes } from 'prop-types'
-
-import Button from 'components/Button'
-import { ChartIcon, LogInIcon, LogOutIcon } from 'components/icons'
-import Loading from 'components/Loading'
-import { ROUTE_STATS } from 'constants/routes'
-import { useAuth } from 'contexts/AuthContext'
-import { useModal } from 'contexts/ModalContext'
-
-import styles from 'styles/components/Header.module.css'
-
-const Header = ({ isCompleted }) => {
-  const [, setLocation] = useLocation()
-  const { isAuthed, isLoading, signIn, signOut } = useAuth()
-  const { renderModal } = useModal()
-
-  const handleSignOut = () => renderModal(
-    'Do you want to sign out?',
-    signOut
-  )
-
-  const handleStats = () => isCompleted
-    ? setLocation(ROUTE_STATS)
-    : renderModal(
-      'Numbers will be discarded. Are you sure?',
-      () => setLocation(ROUTE_STATS)
-    )
-
-  if (isLoading) {
-    return (
-      <header className={styles.header}>
-        <Button grow secondary><Loading small /></Button>
-      </header>
-    )
-  }
-
-  if (isAuthed) {
-    return (
-      <header className={styles.header}>
-        <Button grow primary onClick={handleStats}><ChartIcon /></Button>
-        <Button grow secondary onClick={handleSignOut}><LogOutIcon /></Button>
-      </header>
-    )
-  }
-
-  return (
-    <header className={styles.header}>
-      <Button grow primary onClick={signIn}><LogInIcon /></Button>
-    </header>
-  )
-}
-
-Header.propTypes = {
-  isCompleted: PropTypes.bool.isRequired,
-}
-
-export default Header
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
deleted file mode 100644
index 75a38e9..0000000
--- a/src/components/Main.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DrawArea } from 'react-drawarea'
-
-import Footer from 'components/Footer'
-import Header from 'components/Header'
-import Numbers from 'components/Numbers'
-import Result from 'components/Result'
-import { useAttempts } from 'contexts/AttemptsContext'
-import useCalc from 'hooks/useCalc'
-
-import styles from 'styles/components/Main.module.css'
-
-const Main = () => {
-  const { isStoring } = useAttempts()
-  const { isCompleted, isSolved, numbers, result, complete, solve, restart } = useCalc()
-
-  return (
-    <>
-      <Header isCompleted={isCompleted} />
-      <DrawArea
-        className={styles.canvas}
-        thickness={10}
-        color='#ba324f'
-        disabled={isSolved}
-      >
-        {isSolved && <Result value={result} />}
-        <Numbers isSolved={isSolved} numbers={numbers} />
-        <Footer
-          isCompleted={isCompleted}
-          isLoading={isStoring}
-          isSolved={isSolved}
-          handleRestart={restart}
-          handleSolve={solve}
-          handleSuccess={complete}
-        />
-      </DrawArea>
-    </>
-  )
-}
-
-export default Main
diff --git a/src/components/Router.jsx b/src/components/Router.jsx
index d81b52a..40a6424 100644
--- a/src/components/Router.jsx
+++ b/src/components/Router.jsx
@@ -1,13 +1,13 @@
 import { Route } from 'wouter'
 
-import Main from 'components/Main'
-import Stats from 'components/Stats'
+import Calc from 'components/pages/Calc'
+import Stats from 'components/pages/Stats'
 import { ROUTES } from 'constants/routes'
 
 const Router = () => (
   <>
     <Route path={ROUTES.STATS}><Stats /></Route>
-    <Route path={ROUTES.MAIN}><Main /></Route>
+    <Route path={ROUTES.CALC}><Calc /></Route>
   </>
 )
 
diff --git a/src/components/pages/Calc.jsx b/src/components/pages/Calc.jsx
new file mode 100644
index 0000000..82935d4
--- /dev/null
+++ b/src/components/pages/Calc.jsx
@@ -0,0 +1,60 @@
+import { DrawArea } from 'react-drawarea'
+import { useLocation } from 'wouter'
+
+import AuthButtons from 'components/AuthButtons'
+import Button from 'components/Button'
+import CalcButtons from 'components/CalcButtons'
+import { ChartIcon } from 'components/icons'
+import Numbers from 'components/Numbers'
+import Result from 'components/Result'
+import { ROUTE_STATS } from 'constants/routes'
+import { useAttempts } from 'contexts/AttemptsContext'
+import { useModal } from 'contexts/ModalContext'
+import useCalc from 'hooks/useCalc'
+
+import styles from 'styles/components/Main.module.css'
+
+const Calc = () => {
+  const [, setLocation] = useLocation()
+  const { renderModal } = useModal()
+  const { isStoring } = useAttempts()
+  const { isCompleted, isSolved, numbers, result, complete, solve, restart } = useCalc()
+
+  const handleStats = () => isCompleted
+    ? setLocation(ROUTE_STATS)
+    : renderModal(
+      'Numbers will be discarded. Are you sure?',
+      () => setLocation(ROUTE_STATS)
+    )
+
+  return (
+    <>
+      <header className={styles.header}>
+        <AuthButtons>
+          <Button grow primary onClick={handleStats}><ChartIcon /></Button>
+        </AuthButtons>
+      </header>
+      <DrawArea
+        className={styles.canvas}
+        thickness={10}
+        color='#ba324f'
+        disabled={isSolved}
+      >
+        {isSolved && <Result value={result} />}
+        <Numbers isSolved={isSolved} numbers={numbers} />
+        <div className={styles.footer}>
+          <CalcButtons
+            isCompleted={isCompleted}
+            isLoading={isStoring}
+            isSolved={isSolved}
+            handleRestart={restart}
+            handleSolve={solve}
+            handleSuccess={complete}
+          />
+        </div>
+      </DrawArea>
+    </>
+  )
+}
+
+export default Calc
diff --git a/src/components/Stats.jsx b/src/components/pages/Stats.jsx
similarity index 87%
rename from src/components/Stats.jsx
rename to src/components/pages/Stats.jsx
index e8642b3..8cc8162 100644
--- a/src/components/Stats.jsx
+++ b/src/components/pages/Stats.jsx
@@ -6,7 +6,7 @@ import Button from 'components/Button'
 import Calendar from 'components/Calendar'
 import { LeftIcon, RightIcon } from 'components/icons'
 import Loading from 'components/Loading'
-import { ROUTE_MAIN } from 'constants/routes'
+import { ROUTE_CALC } from 'constants/routes'
 import { useAuth } from 'contexts/AuthContext'
 import useCalendar from 'hooks/useCalendar'
 
@@ -18,7 +18,7 @@ const Stats = () => {
   const { data, firstWeekDay, monthTitle, nextMonth, prevMonth } = useCalendar()
 
   useEffect(() => {
-    if (!isLoading && !isAuthed) setLocation(ROUTE_MAIN)
+    if (!isLoading && !isAuthed) setLocation(ROUTE_CALC)
   }, [isAuthed, isLoading, setLocation])
 
   return (
@@ -37,7 +37,7 @@ const Stats = () => {
           </div>
           )}
       <div className={styles.footer}>
-        <Button grow primary onClick={() => setLocation(ROUTE_MAIN)}>BACK</Button>
+        <Button grow primary onClick={() => setLocation(ROUTE_CALC)}>BACK</Button>
       </div>
     </>
   )
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 6abba02..639d59b 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -1,7 +1,7 @@
-export const ROUTE_MAIN = '/'
+export const ROUTE_CALC = '/'
 export const ROUTE_STATS = '/stats'
 
 export const ROUTES = {
-  MAIN: ROUTE_MAIN,
+  CALC: ROUTE_CALC,
   STATS: ROUTE_STATS,
 }
diff --git a/src/styles/components/Footer.module.css b/src/styles/components/Footer.module.css
deleted file mode 100644
index 1034243..0000000
--- a/src/styles/components/Footer.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.footer {
-  display: flex;
-  z-index: 1;
-}
diff --git a/src/styles/components/Header.module.css b/src/styles/components/Header.module.css
deleted file mode 100644
index b874653..0000000
--- a/src/styles/components/Header.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.header {
-  display: flex;
-  justify-content: flex-end;
-  z-index: 1;
-  backgroun: var(--color-white)
-}
diff --git a/src/styles/components/Loading.module.css b/src/styles/components/Loading.module.css
index 5a22f04..f6d3326 100644
--- a/src/styles/components/Loading.module.css
+++ b/src/styles/components/Loading.module.css
@@ -16,7 +16,7 @@
 }
 
 .spinner {
-  animation: var(--animation-spin);
+  animation: spin 1.2s linear infinite;
   height: 15vh;
   width: 15vh;
   border-radius: 50%;
@@ -27,4 +27,13 @@
 .small .spinner {
   height: 5vh;
   width: 5vh;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
\ No newline at end of file
diff --git a/src/styles/components/Main.module.css b/src/styles/components/Main.module.css
index a8b0cef..efbc7dd 100644
--- a/src/styles/components/Main.module.css
+++ b/src/styles/components/Main.module.css
@@ -1,3 +1,9 @@
+.header {
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1;
+}
+
 .canvas {
   position: absolute;
   top: 0;
@@ -5,3 +11,8 @@
   bottom: 0;
   left: 0;
 }
+
+.footer {
+  display: flex;
+  z-index: 1;
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 73adade..dbf68a5 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -6,14 +6,4 @@
   --color-transparent: #f7f9f9e7;
   --color-dark: #254441;
   --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  --animation-spin: spin 1.2s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }