bkrmadtya · bkrmadtya · May 1, 2022 · May 1, 2022 · May 1, 2022 · May 1, 2022
diff --git a/public/index.html b/public/index.html
@@ -2,10 +2,12 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="og:title" property="og:title" content="Sorting Algorithms Visualier">
+    <meta name="og:title" property="og:title" content="Sorting Algorithm Visualizer">
+    <meta name="site" content="Sorting Algorithm Visualizer" />
+    <meta name="author" content="Bikram Karki" />
     <title>Sorting Algorithms Visualier</title>
   </head>
   <body>
     <div id="root"></div>
   </body>
-</html>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,39 +1,28 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
 
-// style
 import './styles/app.scss'
 
-// components
 import { NavBar } from './components/shared'
 import { Home, Algorithms, About } from './pages'
+import Modal from './components/shared/Modal'
 
 const App: React.FC = () => {
-  useEffect(() => {
-    alert(
-      `Caution!\nThe application shows flashing colors.\n Please, use it in color mode 'off' if you are affected by it.`
-    )
-  }, [])
   return (
     <div className='app'>
       <Router>
         <NavBar>
           <Link to='/algorithms'>ALGORITHMS</Link>
           <Link to='/about'>ABOUT</Link>
         </NavBar>
+        <Modal />
         <Switch>
-          <Route path='/algorithms'>
-            <Algorithms />
-          </Route>
-          <Route path='/about'>
-            <About />
-          </Route>
-          <Route path='/'>
-            <Home />
-          </Route>
+          <Route exact path='/algorithms' component={Algorithms} />
+          <Route exact path='/about' component={About} />
+          <Route exact path='/' component={Home} />
         </Switch>
       </Router>
-    </div>
+    </div >
   )
 }
 

diff --git a/src/components/Algorithms/ContentContainer.tsx b/src/components/Algorithms/ContentContainer.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 
-// components
 import Section from './Section'
 
-// utils
 import { ITableOfContent } from '../../utils'
 
 interface IProps {

diff --git a/src/components/Algorithms/Section.tsx b/src/components/Algorithms/Section.tsx
@@ -1,11 +1,8 @@
 import React from 'react'
 
-// components
-import { Header } from '../shared'
-
-// utils
 import { ITableOfContent } from '../../utils'
 
+import { Header } from '../shared'
 interface IProps {
   content: ITableOfContent
 }

diff --git a/src/components/Algorithms/SideMenu.tsx b/src/components/Algorithms/SideMenu.tsx
@@ -1,15 +1,13 @@
 import React from 'react'
 
-// components
-import { Header } from '../shared'
-
-// utils
 import { ITableOfContent } from '../../utils'
 
+import { Header } from '../shared'
+
 interface IProps {
   tableOfContent: ITableOfContent[]
   selected: string
-  onClick: (name: string) => any
+  onClick: (name: string) => void
 }
 
 const AlgorithmsTabs: React.FC<IProps> = ({

diff --git a/src/components/Home/Bar.tsx b/src/components/Home/Bar.tsx
@@ -1,6 +1,5 @@
-import React, { useRef } from 'react'
+import React from 'react'
 
-// utils
 import { BarStatus } from '../../utils'
 
 interface IProps {
@@ -13,12 +12,7 @@ const Bar: React.FC<IProps> = ({ value, status }: IProps) => {
     height: value * 2,
     backgroundColor: `var(--${status})`
   }
-  // const renderCount = useRef(0)
-  return (
-    <div className='bar' style={barStyle}>
-      {/* {renderCount.current++} */}
-    </div>
-  )
+  return (<div className='bar' style={barStyle} />)
 }
 
 export default React.memo(Bar)
diff --git a/src/components/Home/BarContainer.tsx b/src/components/Home/BarContainer.tsx
@@ -1,11 +1,8 @@
 import React from 'react'
 
-// components
-import BarComponent from './Bar'
-
-// utils
 import { Bar } from '../../utils'
 
+import BarComponent from './Bar'
 interface IProps {
   step: Bar[]
 }

diff --git a/src/components/Home/Legend.tsx b/src/components/Home/Legend.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 
-// utils
 import { BarStatus } from 'src/utils'
 
 const Legend: React.FC<{ type: BarStatus }> = ({ type }) => {

diff --git a/src/components/Home/LegendContainer.tsx b/src/components/Home/LegendContainer.tsx
@@ -1,14 +1,11 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo } from 'react'
 import { useSelector } from 'react-redux'
 
-// components
-import Legend from './Legend'
-import { Header } from '../shared'
-
-// utils
 import { BarStatus } from '../../utils'
 import { getColorMode } from '../../store/slice/sorting'
 
+import Legend from './Legend'
+import { Header } from '../shared'
 
 const getLegends = (colorMode: boolean) => {
   if (colorMode) {

diff --git a/src/components/Home/MainPanel.tsx b/src/components/Home/MainPanel.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 
-// hooks'
 import useSort from '../../hooks/useSort'
 
-// components
 import BarContainer from './BarContainer'
 import Controls from './Controls'
 import LegendContainer from './LegendContainer'

diff --git a/src/components/Home/OptionContainer.tsx b/src/components/Home/OptionContainer.tsx
@@ -1,10 +1,6 @@
-import React, { ReactEventHandler, useCallback, useMemo, useRef } from 'react'
+import React, { ReactEventHandler, useCallback, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-// components
-import { Header, Dropdown } from '../shared'
-
-// js
 import {
   changeAlgorithm,
   changeAnimationSpeed,
@@ -13,6 +9,8 @@ import {
 } from '../../store/slice/sorting'
 import { RootState } from '../../store'
 
+import { Header, Dropdown } from '../shared'
+
 const SizeOption = 'Size'
 const AlgorithmOption = 'Algorithm'
 const ModeOption = 'Color mode'
@@ -93,7 +91,6 @@ const OptionContainer: React.FC = () => {
     },
     [dispatch]
   )
-  // const rerender = useRef(0)
 
   const options = useMemo(() => {
     return getMenuOptions(allAlgorithms)
@@ -113,7 +110,6 @@ const OptionContainer: React.FC = () => {
             />
           </Header>
         ))}
-        {/* {rerender.current++} */}
       </div>
     )
   }, [handleChangeEvent, options])

diff --git a/src/components/Home/SidePanel.tsx b/src/components/Home/SidePanel.tsx
@@ -1,10 +1,11 @@
 import React, { ReactEventHandler, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
-
 import { changeAlgorithm } from '../../store/slice/sorting'
 import { Header, Dropdown } from '../shared'
 
+// WIP
+
 const bubbleSortCode = `
 let bubbleSort = (inputArr) => {
   let len = inputArr.length;

diff --git a/src/components/shared/Dropdown/index.tsx b/src/components/shared/Dropdown/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React from 'react'
 
 type IProps = {
   name?: string
@@ -11,23 +11,19 @@ type IProps = {
 }
 
 const Dropdown: React.FC<IProps> = ({ name, options, onChange, value }) => {
-  // const ref = useRef(0)
   return (
-    <>
-      <select
-        name={name}
-        className='dropdown'
-        onChange={onChange}
-        defaultValue={value}
-      >
-        {options.map(({ key, value }) => (
-          <option key={key} value={value}>
-            {key}
-          </option>
-        ))}
-      </select>
-      {/* {ref.current++} */}
-    </>
+    <select
+      name={name}
+      className='dropdown'
+      onChange={onChange}
+      defaultValue={value}
+    >
+      {options.map(({ key, value }) => (
+        <option key={key} value={value}>
+          {key}
+        </option>
+      ))}
+    </select>
   )
 }
 

diff --git a/src/components/shared/Header/index.tsx b/src/components/shared/Header/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface IProps {
-  children: any
+  children: React.ReactNode
   className?: string
 }
 

diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useEffect, useState } from 'react';
+
+const localStorageKey = 'modal-has-been-shown'
+
+const Modal: FC = () => {
+  const [show, setShow] = useState<boolean>();
+
+  useEffect(() => {
+    if (window) {
+      const localStorageValue = localStorage.getItem(localStorageKey)
+      if (!localStorageValue) {
+        setShow(true)
+      }
+    }
+  }, []);
+
+  const handleModalClose = (): void => {
+    setShow(false)
+    localStorage.setItem(localStorageKey, 'true')
+  }
+
+  if (!show) {
+    return null
+  }
+
+  return <div className='modal'>
+    <div className='modal__content'>
+      <div className='modal__content__header'>
+        <strong>Caution!</strong>
+      </div>
+      <div className='modal__content__content'>
+        <p>The application shows flashing colors.</p>
+        <p>Please, keep the color mode option <strong>&quot;off&quot;</strong> if you are affected by it.</p>
+      </div>
+      <div className='modal__content__footer'>
+        <button type="button" onClick={handleModalClose}>Close</button>
+      </div>
+    </div>
+  </div>
+}
+
+export default Modal;
diff --git a/src/components/shared/NavBar/index.tsx b/src/components/shared/NavBar/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-// components
 import { Header } from '..'
 
 interface IProps {

diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts
@@ -1,3 +1,4 @@
 export { default as Header } from './Header'
 export { default as NavBar } from './NavBar'
 export { default as Dropdown } from './Dropdown'
+export { default as Modal } from './Modal'
diff --git a/src/hooks/useSort.tsx b/src/hooks/useSort.tsx
@@ -1,9 +1,6 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable no-console */
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-// utils
 import { Bar } from '../utils/Bar'
 import { RootState } from '../store'
 import {
@@ -44,7 +41,7 @@ const useSort = (): {
     if (currentStep > 0) {
       sort()
     }
-    return pause
+    return sort
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animationSpeed])
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,12 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 
-// components
-import App from './App'
-
-// store
 import store from './store'
 
+import App from './App'
+
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>

diff --git a/src/pages/Algorithms/index.tsx b/src/pages/Algorithms/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
-// components
+import { ITableOfContent } from '../../utils'
+
 import {
   Algorithm,
   ContentContainer,
@@ -9,9 +10,6 @@ import {
   Visualization
 } from '../../components/Algorithms'
 
-// utils
-import { ITableOfContent } from '../../utils'
-
 const tableOfContent: ITableOfContent[] = [
   { id: 'algorithm', title: 'Algorithm', component: Algorithm },
   {