From 0a0c950d53b0a199ec7602f961cbcb088e4f54cc Mon Sep 17 00:00:00 2001 From: avin_kumar Date: Sun, 20 Oct 2019 21:37:18 +0530 Subject: [PATCH 1/5] refactored to functional component --- .../app/src/app/pages/common/Modals/index.js | 95 +++++++++---------- 1 file changed, 45 insertions(+), 50 deletions(-) diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js index 7fc97268c69..a2f8ed84737 100644 --- a/packages/app/src/app/pages/common/Modals/index.js +++ b/packages/app/src/app/pages/common/Modals/index.js @@ -5,7 +5,7 @@ import Modal from 'app/components/Modal'; import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme'; import Loadable from 'app/utils/Loadable'; import { templateColor } from 'app/utils/template-color'; -import React, { Component } from 'react'; +import React, { useReducer, useEffect, useCallback } from 'react'; import { ThemeProvider } from 'styled-components'; import CommitModal from './CommitModal'; @@ -140,68 +140,63 @@ const modals = { }, }; -class Modals extends Component { - state = { +const Modals = props => { + const [state, setState] = useReducer((s, a) => ({ ...s, ...a }), { theme: { colors: {}, vscodeTheme: codesandbox, }, - customVSCodeTheme: this.props.store.preferences.settings.customVSCodeTheme, - }; - - componentDidMount() { - this.loadTheme(); - } - - componentDidUpdate() { - if ( - this.props.store.preferences.settings.customVSCodeTheme !== - this.state.customVSCodeTheme - ) { - this.loadTheme(); - } - } - - loadTheme = async () => { - const { customVSCodeTheme } = this.props.store.preferences.settings; + customVSCodeTheme: props.store.preferences.settings.customVSCodeTheme, + }); + const { customVSCodeTheme } = props.store.preferences.settings; + const loadTheme = useCallback(async () => { try { const theme = await getVSCodeTheme('', customVSCodeTheme); - this.setState({ theme, customVSCodeTheme }); + setState({ theme, customVSCodeTheme }); } catch (e) { console.error(e); } - }; + }, [customVSCodeTheme]); - render() { - const { signals, store } = this.props; - const sandbox = store.editor.currentSandbox; - const templateDef = sandbox && getTemplateDefinition(sandbox.template); + useEffect(() => loadTheme(), [loadTheme]); - const modal = store.currentModal && modals[store.currentModal]; + useEffect(() => { + if ( + props.store.preferences.settings.customVSCodeTheme !== + state.customVSCodeTheme + ) { + loadTheme(); + } + }); - return ( - + signals.modalClosed({ isKeyDown })} > - signals.modalClosed({ isKeyDown })} - > - {modal - ? React.createElement(modal.Component, { - closeModal: () => signals.modalClosed({ isKeyDown: false }), - }) - : null} - - - ); - } -} + {modal + ? React.createElement(modal.Component, { + closeModal: () => signals.modalClosed({ isKeyDown: false }), + }) + : null} + + + ); +}; export default inject('store', 'signals')(observer(Modals)); From bf7303441e69f9faad916e24999d780a9070ff3d Mon Sep 17 00:00:00 2001 From: avin_kumar Date: Tue, 22 Oct 2019 01:10:23 +0530 Subject: [PATCH 2/5] useEffect bug fixed --- .../app/src/app/pages/common/Modals/index.js | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js index a2f8ed84737..e8e74796b89 100644 --- a/packages/app/src/app/pages/common/Modals/index.js +++ b/packages/app/src/app/pages/common/Modals/index.js @@ -1,11 +1,11 @@ import getTemplateDefinition from '@codesandbox/common/lib/templates'; import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json'; -import { inject, observer } from 'app/componentConnectors'; import Modal from 'app/components/Modal'; import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme'; import Loadable from 'app/utils/Loadable'; import { templateColor } from 'app/utils/template-color'; import React, { useReducer, useEffect, useCallback } from 'react'; +import { useOvermind } from 'app/overmind'; import { ThemeProvider } from 'styled-components'; import CommitModal from './CommitModal'; @@ -140,16 +140,26 @@ const modals = { }, }; -const Modals = props => { +const Modals = () => { + const { + actions: { modalClosed }, + state: { + editor: { currentSandbox }, + preferences: { + settings: { customVSCodeTheme }, + }, + currentModal, + }, + } = useOvermind(); + const [state, setState] = useReducer((s, a) => ({ ...s, ...a }), { theme: { colors: {}, vscodeTheme: codesandbox, }, - customVSCodeTheme: props.store.preferences.settings.customVSCodeTheme, + customVSCodeTheme, }); - const { customVSCodeTheme } = props.store.preferences.settings; const loadTheme = useCallback(async () => { try { const theme = await getVSCodeTheme('', customVSCodeTheme); @@ -159,22 +169,20 @@ const Modals = props => { } }, [customVSCodeTheme]); - useEffect(() => loadTheme(), [loadTheme]); + useEffect(() => { + loadTheme(); + }, [loadTheme]); useEffect(() => { - if ( - props.store.preferences.settings.customVSCodeTheme !== - state.customVSCodeTheme - ) { + if (customVSCodeTheme !== state.customVSCodeTheme) { loadTheme(); } }); - const { signals, store } = props; - const sandbox = store.editor.currentSandbox; + const sandbox = currentSandbox; const templateDef = sandbox && getTemplateDefinition(sandbox.template); - const modal = store.currentModal && modals[store.currentModal]; + const modal = currentModal && modals[currentModal]; return ( { signals.modalClosed({ isKeyDown })} + onClose={isKeyDown => modalClosed({ isKeyDown })} > {modal ? React.createElement(modal.Component, { - closeModal: () => signals.modalClosed({ isKeyDown: false }), + closeModal: () => modalClosed({ isKeyDown: false }), }) : null} ); }; - -export default inject('store', 'signals')(observer(Modals)); +export default Modals; +// export default inject('store', 'signals')(observer(Modals)); From bc3926e2dad4c7cf4df65c5689021a183840e000 Mon Sep 17 00:00:00 2001 From: avin_kumar Date: Sat, 26 Oct 2019 03:02:33 +0530 Subject: [PATCH 3/5] types safety added --- packages/app/src/app/overmind/actions.ts | 2 +- .../app/pages/common/Modals/{index.js => index.tsx} | 11 +++++------ packages/app/src/app/pages/index.tsx | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) rename packages/app/src/app/pages/common/Modals/{index.js => index.tsx} (95%) diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts index bc3611f8f7c..5230df30a47 100755 --- a/packages/app/src/app/overmind/actions.ts +++ b/packages/app/src/app/overmind/actions.ts @@ -85,7 +85,7 @@ export const modalOpened: Action<{ modal: ModalName; message?: string }> = ( state.currentModal = modal; }; -export const modalClosed: Action = ({ state, effects }) => { +export const modalClosed: Action = ({ state, effects }) => { // We just start it whenever it closes, if already started nothing happens if (state.currentModal === 'preferences') { effects.keybindingManager.start(); diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.tsx similarity index 95% rename from packages/app/src/app/pages/common/Modals/index.js rename to packages/app/src/app/pages/common/Modals/index.tsx index e8e74796b89..5cc99b1e598 100644 --- a/packages/app/src/app/pages/common/Modals/index.js +++ b/packages/app/src/app/pages/common/Modals/index.tsx @@ -140,9 +140,9 @@ const modals = { }, }; -const Modals = () => { +const Modals: React.FC = () => { const { - actions: { modalClosed }, + actions, state: { editor: { currentSandbox }, preferences: { @@ -195,16 +195,15 @@ const Modals = () => { modalClosed({ isKeyDown })} + onClose={isKeyDown => actions.modalClosed({ isKeyDown })} > {modal ? React.createElement(modal.Component, { - closeModal: () => modalClosed({ isKeyDown: false }), + closeModal: () => actions.modalClosed({ isKeyDown: false }), }) : null} ); }; -export default Modals; -// export default inject('store', 'signals')(observer(Modals)); +export { Modals }; diff --git a/packages/app/src/app/pages/index.tsx b/packages/app/src/app/pages/index.tsx index d58c5122575..df9b4aed7f8 100644 --- a/packages/app/src/app/pages/index.tsx +++ b/packages/app/src/app/pages/index.tsx @@ -11,7 +11,7 @@ import Loadable from 'app/utils/Loadable'; import { useOvermind } from 'app/overmind'; import { ErrorBoundary } from './common/ErrorBoundary'; import HTML5Backend from './common/HTML5BackendWithFolderSupport'; -import Modals from './common/Modals'; +import { Modals } from './common/Modals'; import Sandbox from './Sandbox'; import { NewSandbox } from './NewSandbox'; import Dashboard from './Dashboard'; From 32b239666cc5cf90a1f190817dbe0a284c86606d Mon Sep 17 00:00:00 2001 From: avin_kumar Date: Sat, 26 Oct 2019 04:09:46 +0530 Subject: [PATCH 4/5] fixed tempalate issue for typechecking --- packages/app/src/app/utils/template-color.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/app/src/app/utils/template-color.ts b/packages/app/src/app/utils/template-color.ts index b8f0532c998..df8e68719f0 100644 --- a/packages/app/src/app/utils/template-color.ts +++ b/packages/app/src/app/utils/template-color.ts @@ -1,7 +1,11 @@ import { decorateSelector } from '@codesandbox/common/lib/theme'; import { Sandbox, Template } from '@codesandbox/common/lib/types'; +import TEMPLATE from '@codesandbox/common/lib/templates/template'; -export const templateColor = (sandbox: Sandbox, templateDef: Template) => { +export const templateColor = ( + sandbox: Sandbox, + templateDef: Template | TEMPLATE +) => { if (sandbox && sandbox.customTemplate) { return decorateSelector(() => sandbox.customTemplate.color); } From d3f864591216a4f9108f46f0793d0043467bd609 Mon Sep 17 00:00:00 2001 From: avin_kumar Date: Wed, 30 Oct 2019 23:40:45 +0530 Subject: [PATCH 5/5] fixed ts errors for modal acrtions --- packages/app/src/app/overmind/actions.ts | 3 ++- packages/app/src/app/pages/common/Modals/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts index 5230df30a47..f21773d3ae2 100755 --- a/packages/app/src/app/overmind/actions.ts +++ b/packages/app/src/app/overmind/actions.ts @@ -76,6 +76,7 @@ type ModalName = | 'share' | 'searchDependencies' | 'signInForTemplates'; + export const modalOpened: Action<{ modal: ModalName; message?: string }> = ( { state, effects }, { modal, message } @@ -85,7 +86,7 @@ export const modalOpened: Action<{ modal: ModalName; message?: string }> = ( state.currentModal = modal; }; -export const modalClosed: Action = ({ state, effects }) => { +export const modalClosed: Action = ({ state, effects }) => { // We just start it whenever it closes, if already started nothing happens if (state.currentModal === 'preferences') { effects.keybindingManager.start(); diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx index c564320f0b7..e000730b716 100644 --- a/packages/app/src/app/pages/common/Modals/index.tsx +++ b/packages/app/src/app/pages/common/Modals/index.tsx @@ -195,11 +195,11 @@ const Modals: React.FC = () => { actions.modalClosed({ isKeyDown })} + onClose={isKeyDown => actions.modalClosed()} > {modal ? React.createElement(modal.Component, { - closeModal: () => actions.modalClosed({ isKeyDown: false }), + closeModal: () => actions.modalClosed(), }) : null}