Commit 73de064

committed

feat: added Modal component

1 parent 2e1468b commit 73de064Copy full SHA for 73de064

File tree

+100

-16

lines changed

+100

-16

lines changed

Lines changed: 7 additions & 16 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,37 +1,28 @@`
`1`		`-import React,{useEffect} from 'react'`
	`1`	`+import React from 'react'`
`2`	`2`	`import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'`
`3`	`3`
`4`	`4`	`import './styles/app.scss'`
`5`	`5`
`6`	`6`	`import { NavBar } from './components/shared'`
`7`	`7`	`import { Home, Algorithms, About } from './pages'`
	`8`	`+import Modal from './components/shared/Modal'`
`8`	`9`
`9`	`10`	`const App: React.FC = () => {`
`10`		`- useEffect(() => {`
`11`		`- alert(`
`12`		- `Caution!\nThe application shows flashing colors.\n Please, use it in color mode 'off' if you are affected by it.`
`13`		`- )`
`14`		`- }, [])`
`15`	`11`	`return (`
`16`	`12`	`<div className='app'>`
`17`	`13`	`<Router>`
`18`	`14`	`<NavBar>`
`19`	`15`	`<Link to='/algorithms'>ALGORITHMS</Link>`
`20`	`16`	`<Link to='/about'>ABOUT</Link>`
`21`	`17`	`</NavBar>`
	`18`	`+ <Modal />`
`22`	`19`	`<Switch>`
`23`		`- <Route path='/algorithms'>`
`24`		`- <Algorithms />`
`25`		`- </Route>`
`26`		`- <Route path='/about'>`
`27`		`- <About />`
`28`		`- </Route>`
`29`		`- <Route path='/'>`
`30`		`- <Home />`
`31`		`- </Route>`
	`20`	`+ <Route exact path='/algorithms' component={Algorithms} />`
	`21`	`+ <Route exact path='/about' component={About} />`
	`22`	`+ <Route exact path='/' component={Home} />`
`32`	`23`	`</Switch>`
`33`	`24`	`</Router>`
`34`		`- </div>`
	`25`	`+ </div>`
`35`	`26`	`)`
`36`	`27`	`}`
`37`	`28`

Lines changed: 42 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,42 @@`
	`1`	`+import React, { FC, useEffect, useState } from 'react';`
	`2`	`+`
	`3`	`+const localStorageKey = 'modal-has-been-shown'`
	`4`	`+`
	`5`	`+const Modal: FC = () => {`
	`6`	`+ const [show, setShow] = useState<boolean>();`
	`7`	`+`
	`8`	`+ useEffect(() => {`
	`9`	`+ if (window) {`
	`10`	`+ const localStorageValue = localStorage.getItem(localStorageKey)`
	`11`	`+ if (!localStorageValue) {`
	`12`	`+ setShow(true)`
	`13`	`+ localStorage.setItem(localStorageKey, 'true')`
	`14`	`+ }`
	`15`	`+ }`
	`16`	`+ }, []);`
	`17`	`+`
	`18`	`+ const handleModalClose = (): void => {`
	`19`	`+ setShow(false)`
	`20`	`+ }`
	`21`	`+`
	`22`	`+ if (!show) {`
	`23`	`+ return null`
	`24`	`+ }`
	`25`	`+`
	`26`	`+ return <div className='modal'>`
	`27`	`+ <div className='modal__content'>`
	`28`	`+ <div className='modal__content__header'>`
	`29`	`+ <strong>Caution!</strong>`
	`30`	`+ </div>`
	`31`	`+ <div className='modal__content__content'>`
	`32`	`+ <p>The application shows flashing colors.</p>`
	`33`	`+ <p>Please, keep the color mode "off", if you are affected by it.</p>`
	`34`	`+ </div>`
	`35`	`+ <div className='modal__content__footer'>`
	`36`	`+ <button type="button" onClick={handleModalClose}>Close</button>`
	`37`	`+ </div>`
	`38`	`+ </div>`
	`39`	`+ </div>`
	`40`	`+}`
	`41`	`+`
	`42`	`+export default Modal;`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`export { default as Header } from './Header'`
`2`	`2`	`export { default as NavBar } from './NavBar'`
`3`	`3`	`export { default as Dropdown } from './Dropdown'`
	`4`	`+export { default as Modal } from './Modal'`

Lines changed: 1 addition & 0 deletions

Lines changed: 49 additions & 0 deletions

Comments

(0)