From a48880f102d4e844c898db7fd1a7fc1c0a4146ad Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 14:19:28 +0300 Subject: [PATCH 1/6] feat: updated seo tags --- public/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 491e034..4a3f1e5 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,10 @@ - My app + + + + Sorting Algorithm Visualizer
From 9a9797ca60c5fbc66f8167d768970173078b7f38 Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 14:20:26 +0300 Subject: [PATCH 2/6] fix: lint warnings --- src/App.tsx | 2 -- src/components/Algorithms/SideMenu.tsx | 8 +++---- src/components/Home/Bar.tsx | 10 ++------ src/components/Home/LegendContainer.tsx | 9 +++---- src/components/Home/OptionContainer.tsx | 10 +++----- src/components/shared/Dropdown/index.tsx | 30 ++++++++++-------------- src/components/shared/Header/index.tsx | 2 +- src/hooks/useSort.tsx | 7 ++---- 8 files changed, 27 insertions(+), 51 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5a524ab..68a2202 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,8 @@ import React, { useEffect } 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' diff --git a/src/components/Algorithms/SideMenu.tsx b/src/components/Algorithms/SideMenu.tsx index 92eaf45..718dd76 100644 --- 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 = ({ diff --git a/src/components/Home/Bar.tsx b/src/components/Home/Bar.tsx index eb7ce56..5ff8d5d 100644 --- 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 = ({ value, status }: IProps) => { height: value * 2, backgroundColor: `var(--${status})` } - // const renderCount = useRef(0) - return ( -
- {/* {renderCount.current++} */} -
- ) + return (
) } export default React.memo(Bar) diff --git a/src/components/Home/LegendContainer.tsx b/src/components/Home/LegendContainer.tsx index 3d91b3d..55fb68b 100644 --- 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/OptionContainer.tsx b/src/components/Home/OptionContainer.tsx index 5e26553..4a5c6df 100644 --- 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 = () => { /> ))} - {/* {rerender.current++} */}
) }, [handleChangeEvent, options]) diff --git a/src/components/shared/Dropdown/index.tsx b/src/components/shared/Dropdown/index.tsx index 3b4cdfe..181c32a 100644 --- 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 = ({ name, options, onChange, value }) => { - // const ref = useRef(0) return ( - <> - - {/* {ref.current++} */} - + ) } diff --git a/src/components/shared/Header/index.tsx b/src/components/shared/Header/index.tsx index d7fcf83..e675cfe 100644 --- 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/hooks/useSort.tsx b/src/hooks/useSort.tsx index 1a214ea..95f295b 100644 --- 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]) From 2e1468b9c5ba5ef0d0d6dd31c4b432b95d7a8b37 Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 14:25:06 +0300 Subject: [PATCH 3/6] fix: removed import group comments --- src/components/Algorithms/ContentContainer.tsx | 2 -- src/components/Algorithms/Section.tsx | 5 +---- src/components/Home/BarContainer.tsx | 5 +---- src/components/Home/Legend.tsx | 1 - src/components/Home/MainPanel.tsx | 2 -- src/components/Home/SidePanel.tsx | 3 ++- src/components/shared/NavBar/index.tsx | 1 - src/index.tsx | 6 ++---- src/pages/Algorithms/index.tsx | 6 ++---- src/pages/Home/index.tsx | 8 +------- src/store/slice/sorting.ts | 1 - src/utils/Steps.ts | 1 - src/utils/changeStatusOfElement.ts | 1 - src/utils/interface.ts | 1 - src/utils/randomArrayGenerator.ts | 1 - src/utils/swapElements.ts | 1 - 16 files changed, 9 insertions(+), 36 deletions(-) diff --git a/src/components/Algorithms/ContentContainer.tsx b/src/components/Algorithms/ContentContainer.tsx index 2a830da..b340899 100644 --- 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 index f6234c5..13974f8 100644 --- 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/Home/BarContainer.tsx b/src/components/Home/BarContainer.tsx index d3a190f..fbbab7d 100644 --- 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 index 5b47f44..9989a35 100644 --- 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/MainPanel.tsx b/src/components/Home/MainPanel.tsx index 2bf9403..d5826b1 100644 --- 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/SidePanel.tsx b/src/components/Home/SidePanel.tsx index d3c5977..bcfed7e 100644 --- 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/NavBar/index.tsx b/src/components/shared/NavBar/index.tsx index 1aa248c..dd7f279 100644 --- 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/index.tsx b/src/index.tsx index e178332..c2ca384 100644 --- 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( diff --git a/src/pages/Algorithms/index.tsx b/src/pages/Algorithms/index.tsx index daf91e1..681b851 100644 --- 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 }, { diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index e7dc344..416640c 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,16 +1,10 @@ import React from 'react' -// components -import { - BottomPanel, - MainPanel - // ,SidePanel, -} from '../../components/Home' +import { BottomPanel, MainPanel } from '../../components/Home' const Home: React.FC = () => { return (
- {/* */}
diff --git a/src/store/slice/sorting.ts b/src/store/slice/sorting.ts index 86db01d..130fc3b 100644 --- a/src/store/slice/sorting.ts +++ b/src/store/slice/sorting.ts @@ -1,6 +1,5 @@ import { createSlice } from '@reduxjs/toolkit' -// js import { RootState } from '../' import { Bar, diff --git a/src/utils/Steps.ts b/src/utils/Steps.ts index 0606be3..bf1273a 100644 --- a/src/utils/Steps.ts +++ b/src/utils/Steps.ts @@ -1,4 +1,3 @@ -// utils import { Bar } from './' export default class Steps { diff --git a/src/utils/changeStatusOfElement.ts b/src/utils/changeStatusOfElement.ts index 00cc3a2..d845950 100644 --- a/src/utils/changeStatusOfElement.ts +++ b/src/utils/changeStatusOfElement.ts @@ -1,4 +1,3 @@ -// utils import { Bar, BarStatus } from './' const changeStatusOfElement = ( diff --git a/src/utils/interface.ts b/src/utils/interface.ts index 6b6e60d..66bbb71 100644 --- a/src/utils/interface.ts +++ b/src/utils/interface.ts @@ -1,6 +1,5 @@ import React from 'react' -// utils import { Bar } from './' export interface IAlgorithm { diff --git a/src/utils/randomArrayGenerator.ts b/src/utils/randomArrayGenerator.ts index fc508a9..736e720 100644 --- a/src/utils/randomArrayGenerator.ts +++ b/src/utils/randomArrayGenerator.ts @@ -1,4 +1,3 @@ -// utils import { Bar, BarStatus } from './' const generateRandomSetOfNumbers = (sizeOfArray: number): Set => { diff --git a/src/utils/swapElements.ts b/src/utils/swapElements.ts index 8fbdf51..be9ce29 100644 --- a/src/utils/swapElements.ts +++ b/src/utils/swapElements.ts @@ -1,4 +1,3 @@ -// utils import { Bar } from './' const getIndexOfElement = (arr: Bar[], ele: Bar): number => From 73de064a10fd664009bfd423f75e9b816fe8c9bc Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 15:00:03 +0300 Subject: [PATCH 4/6] feat: added Modal component --- src/App.tsx | 23 +++++----------- src/components/shared/Modal.tsx | 42 ++++++++++++++++++++++++++++ src/components/shared/index.ts | 1 + src/styles/common/index.scss | 1 + src/styles/common/modal.scss | 49 +++++++++++++++++++++++++++++++++ 5 files changed, 100 insertions(+), 16 deletions(-) create mode 100644 src/components/shared/Modal.tsx create mode 100644 src/styles/common/modal.scss diff --git a/src/App.tsx b/src/App.tsx index 68a2202..14f7f0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,13 @@ -import React, { useEffect } from 'react' +import React from 'react' import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' import './styles/app.scss' 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 (
@@ -19,19 +15,14 @@ const App: React.FC = () => { ALGORITHMS ABOUT + - - - - - - - - - + + + -
+
) } diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx new file mode 100644 index 0000000..b265ee3 --- /dev/null +++ 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(); + + useEffect(() => { + if (window) { + const localStorageValue = localStorage.getItem(localStorageKey) + if (!localStorageValue) { + setShow(true) + localStorage.setItem(localStorageKey, 'true') + } + } + }, []); + + const handleModalClose = (): void => { + setShow(false) + } + + if (!show) { + return null + } + + return
+
+
+ Caution! +
+
+

The application shows flashing colors.

+

Please, keep the color mode "off", if you are affected by it.

+
+
+ +
+
+
+} + +export default Modal; \ No newline at end of file diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts index 72d8cb2..c3c71e2 100644 --- 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/styles/common/index.scss b/src/styles/common/index.scss index 804de8b..f435f01 100644 --- a/src/styles/common/index.scss +++ b/src/styles/common/index.scss @@ -1,5 +1,6 @@ @import './navbar.scss'; @import './dropdown.scss'; +@import './modal.scss'; a { text-decoration: none; diff --git a/src/styles/common/modal.scss b/src/styles/common/modal.scss new file mode 100644 index 0000000..18a534f --- /dev/null +++ b/src/styles/common/modal.scss @@ -0,0 +1,49 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + + &__content { + width: 50rem; + height: 20rem; + background: rgb(243, 243, 243); + border-radius: 0.5rem; + padding: 2rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + &__header { + font-style: normal; + font-weight: bold; + font-size: 2rem; + line-height: 1.6rem; + margin-bottom: 2rem; + color: rgb(215, 98, 98); + } + + &__content { + font-size: 1.5rem; + } + + &__footer { + & button { + margin-top: 2rem; + padding: 0.5rem 1rem; + color: white; + background-color: orange; + cursor: pointer; + } + } + } +} \ No newline at end of file From b15b79cbf9017548ab7478f83e725356f9fb46a8 Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 15:09:58 +0300 Subject: [PATCH 5/6] feat: modal style update --- src/components/shared/Modal.tsx | 2 +- src/styles/common/modal.scss | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx index b265ee3..81900d3 100644 --- a/src/components/shared/Modal.tsx +++ b/src/components/shared/Modal.tsx @@ -30,7 +30,7 @@ const Modal: FC = () => {

The application shows flashing colors.

-

Please, keep the color mode "off", if you are affected by it.

+

Please, keep the color mode option "off" if you are affected by it.

diff --git a/src/styles/common/modal.scss b/src/styles/common/modal.scss index 18a534f..46d2f73 100644 --- a/src/styles/common/modal.scss +++ b/src/styles/common/modal.scss @@ -41,8 +41,18 @@ margin-top: 2rem; padding: 0.5rem 1rem; color: white; - background-color: orange; - cursor: pointer; + background-color: rgb(215, 98, 98); + border: 1px solid rgb(195, 87, 87); + border-radius: 0.5rem; + cursor: pointer; + + &:hover{ + opacity: 0.9; + } + + &:active { + opacity: 0.7; + } } } } From eeab90e801783cad9dae5598043ba3e04bf8fde3 Mon Sep 17 00:00:00 2001 From: bkrmadtya Date: Sun, 1 May 2022 15:12:12 +0300 Subject: [PATCH 6/6] fix: update local storage after the modal is closed --- src/components/shared/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx index 81900d3..3e0a080 100644 --- a/src/components/shared/Modal.tsx +++ b/src/components/shared/Modal.tsx @@ -10,13 +10,13 @@ const Modal: FC = () => { const localStorageValue = localStorage.getItem(localStorageKey) if (!localStorageValue) { setShow(true) - localStorage.setItem(localStorageKey, 'true') } } }, []); const handleModalClose = (): void => { setShow(false) + localStorage.setItem(localStorageKey, 'true') } if (!show) {