Components renamed and little refactor

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

src/components/Footer.jsx → 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

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>
   </>
 )
 

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

src/components/Stats.jsx → 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>
     </>
   )

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,
 }

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);
+  }
 }

src/styles/components/Main.module.css

@@ -1,7 +1,18 @@
+.header {
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1;
+}
+
 .canvas {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
+
+.footer {
+  display: flex;
+  z-index: 1;
+}

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);
-  }
 }