From 02c2b2cd9e22629623b918c0878749572ecacaa6 Mon Sep 17 00:00:00 2001 From: pmartin-eb Date: Wed, 10 Jun 2020 12:37:20 -0300 Subject: [PATCH 1/4] lauching with button not implemented re launch on react 16 --- .../routes/LaunchPad/components/LaunchPad.js | 22 +++++++++++++++---- .../components/Rocket/components/Rocket.js | 12 +++++++--- .../Rocket/components/RocketCore.js | 7 +++--- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/rocket-ship/src/routes/LaunchPad/components/LaunchPad.js b/rocket-ship/src/routes/LaunchPad/components/LaunchPad.js index c6d12c59a..93dadf684 100644 --- a/rocket-ship/src/routes/LaunchPad/components/LaunchPad.js +++ b/rocket-ship/src/routes/LaunchPad/components/LaunchPad.js @@ -1,13 +1,27 @@ -import React, { useState } from 'react'; +import React, { useState, useLayoutEffect } from 'react'; import '../styles/_launchpad.scss'; export default function LaunchPad({Rocket}) { const [rerenderCount, triggerRerender] = useState(0); - setTimeout(() => { triggerRerender(rerenderCount + 1); }, 500); + const [start, setStart] = useState(false); + useLayoutEffect(() => { + if (rerenderCount < 10) { + setTimeout(() => { triggerRerender(rerenderCount + 1); }, 500); + } + }, [rerenderCount]) + + function handleLaunch() { + setStart(true); + if (rerenderCount >= 10) { + triggerRerender(0); + } + } + return (
- + +
); -} +} \ No newline at end of file diff --git a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/Rocket.js b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/Rocket.js index ff104115c..125fcf5b8 100644 --- a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/Rocket.js +++ b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/Rocket.js @@ -1,9 +1,15 @@ import React, { useState, Component } from 'react'; import RocketCore from './RocketCore'; -export function FunctionalRocket() { - const [initialLaunchTime] = useState(Date.now()); - +export function FunctionalRocket({start}) { + const [initialLaunchTime, setInitialLaunchTime] = useState(Date.now()); + + React.useLayoutEffect(() => { + if(start) { + setInitialLaunchTime(Date.now()); + } + }, [start]) + return ; } diff --git a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js index 23032e213..e6c8624d2 100644 --- a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js +++ b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js @@ -6,16 +6,17 @@ const MS_TO_TAKEOFF = SECONDS_TO_TAKEOFF * 1000; const FINAL_POSITION_BOTTOM_VAL = 'calc(400px)'; function timeToPositionPercent(startTime) { + console.log('startTime: ', startTime); const now = Date.now(); - const timeDiff = now - startTime; - + let timeDiff = now - startTime; + if (timeDiff >= MS_TO_TAKEOFF) { return FINAL_POSITION_BOTTOM_VAL; } return `calc(300px + ${((timeDiff / MS_TO_TAKEOFF) * 100).toFixed(0)}%)`; } function generateEmptyListEls(quantity) { - return [...Array(quantity)].map(() =>
  • ); + return [...Array(quantity)].map((q, index) =>
  • ); } export default function RocketCore({ initialLaunchTime }) { From 06795933c0bedce1c8b88fa41f9114ab22adf3eb Mon Sep 17 00:00:00 2001 From: pmartin-eb Date: Wed, 10 Jun 2020 12:43:09 -0300 Subject: [PATCH 2/4] removed unncesary code --- .../LaunchPad/components/Rocket/components/RocketCore.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js index e6c8624d2..9b7c212b9 100644 --- a/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js +++ b/rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js @@ -6,9 +6,8 @@ const MS_TO_TAKEOFF = SECONDS_TO_TAKEOFF * 1000; const FINAL_POSITION_BOTTOM_VAL = 'calc(400px)'; function timeToPositionPercent(startTime) { - console.log('startTime: ', startTime); const now = Date.now(); - let timeDiff = now - startTime; + const timeDiff = now - startTime; if (timeDiff >= MS_TO_TAKEOFF) { return FINAL_POSITION_BOTTOM_VAL; } From 55fd8428e2f0b8e34f8bebc47eb39eed093a0f6c Mon Sep 17 00:00:00 2001 From: pmartin-eb Date: Thu, 11 Jun 2020 15:19:16 -0300 Subject: [PATCH 3/4] - implemented theme switcher - Provider to handle the theme state --- dark-mode/src/common/containers/App.js | 31 ++++++++++++++++++++-- dark-mode/src/context.js | 7 +++++ dark-mode/src/reducer.js | 15 +++++++++++ dark-mode/src/routes/App/components/App.js | 23 +++++++++++++--- 4 files changed, 70 insertions(+), 6 deletions(-) create mode 100644 dark-mode/src/context.js create mode 100644 dark-mode/src/reducer.js diff --git a/dark-mode/src/common/containers/App.js b/dark-mode/src/common/containers/App.js index 7b58de6de..3dbc15254 100644 --- a/dark-mode/src/common/containers/App.js +++ b/dark-mode/src/common/containers/App.js @@ -1,5 +1,32 @@ -import React from 'react'; +import React, { useContext, useReducer, useLayoutEffect } from 'react'; +import ThemeContext from '../../context'; + +import themeReducer from '../../reducer'; + +const DARK_MODE_CLASS = 'dark-mode'; export default function App({ children }) { - return children; + const initialState = useContext(ThemeContext); + const [state, dispatch] = useReducer(themeReducer, initialState); + + const { + theme, + } = state; + + useLayoutEffect(() => { + switch (theme) { + case 'dark': + document.body.classList.add(DARK_MODE_CLASS); + break; + default: + document.body.classList.remove(DARK_MODE_CLASS); + break; + } + }, [theme]); + + return ( + + {children} + + ) } diff --git a/dark-mode/src/context.js b/dark-mode/src/context.js new file mode 100644 index 000000000..eea48e75c --- /dev/null +++ b/dark-mode/src/context.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const initialState = {theme: 'light'}; + +const ThemeContext = React.createContext(initialState); + +export default ThemeContext; \ No newline at end of file diff --git a/dark-mode/src/reducer.js b/dark-mode/src/reducer.js new file mode 100644 index 000000000..f0b5ec7e5 --- /dev/null +++ b/dark-mode/src/reducer.js @@ -0,0 +1,15 @@ +const initialState = { + theme: 'light', +}; + +export default function themeReducer({theme}, action) { + switch (action.type) { + case "SET_THEME": + return { + theme: theme === 'light' ? 'dark' : 'light', + }; + + default: + return initialState; + } +} diff --git a/dark-mode/src/routes/App/components/App.js b/dark-mode/src/routes/App/components/App.js index f69fd1260..85f208d04 100644 --- a/dark-mode/src/routes/App/components/App.js +++ b/dark-mode/src/routes/App/components/App.js @@ -1,9 +1,21 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faMoon } from '@fortawesome/free-solid-svg-icons'; +import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; import '../styles/_app.scss'; +import ThemeContext from '../../../context'; + function App() { + const {dispatch, state} = useContext(ThemeContext); + + const { + theme, + } = state; + + const handleThemePicker = () => { + dispatch({type: "SET_THEME"}) + } + return (
    @@ -12,8 +24,11 @@ function App() {
    {/* --The button that should toggle dark mode-- */} -
    From 7c3d4c1ae9e52b65a3a34c311776bd5092a9666f Mon Sep 17 00:00:00 2001 From: pmartin-eb Date: Thu, 11 Jun 2020 15:41:34 -0300 Subject: [PATCH 4/4] - added class to root div - improved handle button switch --- dark-mode/src/common/containers/App.js | 4 ++-- dark-mode/src/routes/App/components/App.js | 14 +++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/dark-mode/src/common/containers/App.js b/dark-mode/src/common/containers/App.js index 3dbc15254..3a6164f95 100644 --- a/dark-mode/src/common/containers/App.js +++ b/dark-mode/src/common/containers/App.js @@ -16,10 +16,10 @@ export default function App({ children }) { useLayoutEffect(() => { switch (theme) { case 'dark': - document.body.classList.add(DARK_MODE_CLASS); + document.getElementById('root').classList.add(DARK_MODE_CLASS); break; default: - document.body.classList.remove(DARK_MODE_CLASS); + document.getElementById('root').classList.remove(DARK_MODE_CLASS); break; } }, [theme]); diff --git a/dark-mode/src/routes/App/components/App.js b/dark-mode/src/routes/App/components/App.js index 85f208d04..d2ffda5be 100644 --- a/dark-mode/src/routes/App/components/App.js +++ b/dark-mode/src/routes/App/components/App.js @@ -5,6 +5,18 @@ import '../styles/_app.scss'; import ThemeContext from '../../../context'; +const themeMap = { + dark: { + color: '#FFA500', + iconType: faSun, + }, + light: { + color: null, + iconType: faMoon, + } +} + + function App() { const {dispatch, state} = useContext(ThemeContext); @@ -28,7 +40,7 @@ function App() { className="app__dark-mode-btn icon level-right" onClick={handleThemePicker} > - +