From c508e79b291ff5eb6a4c1b11e52c2fc7abc30822 Mon Sep 17 00:00:00 2001 From: jyotiarora2610 Date: Wed, 16 Oct 2019 22:09:40 +0530 Subject: [PATCH 1/3] QuickActions refactoring --- packages/app/src/app/pages/Live/index.js | 2 +- .../{index.js => QuickActions.tsx} | 57 +++++++++++-------- packages/app/src/app/pages/Sandbox/index.js | 2 +- 3 files changed, 35 insertions(+), 26 deletions(-) rename packages/app/src/app/pages/Sandbox/QuickActions/{index.js => QuickActions.tsx} (80%) diff --git a/packages/app/src/app/pages/Live/index.js b/packages/app/src/app/pages/Live/index.js index 4935676cb27..252cafa200f 100644 --- a/packages/app/src/app/pages/Live/index.js +++ b/packages/app/src/app/pages/Live/index.js @@ -11,7 +11,7 @@ import { SubTitle } from 'app/components/SubTitle'; import { Skeleton } from 'app/components/Skeleton'; import { Navigation } from 'app/pages/common/Navigation'; import { SignInButton } from 'app/pages/common/SignInButton'; -import { QuickActions } from 'app/pages/Sandbox/QuickActions'; +import { QuickActions } from 'app/pages/Sandbox/QuickActions/QuickActions'; import { hasAuthToken } from 'app/utils/user'; import Editor from '../Sandbox/Editor'; import { BlinkingDot } from './BlinkingDot'; diff --git a/packages/app/src/app/pages/Sandbox/QuickActions/index.js b/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx similarity index 80% rename from packages/app/src/app/pages/Sandbox/QuickActions/index.js rename to packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx index ba8fd690f65..99c6cbd1700 100644 --- a/packages/app/src/app/pages/Sandbox/QuickActions/index.js +++ b/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { inject, observer } from 'app/componentConnectors'; import Downshift from 'downshift'; import genie from 'geniejs'; +import { useOvermind } from 'app/overmind'; + import { ESC } from '@codesandbox/common/lib/utils/keycodes'; import Input from '@codesandbox/common/lib/components/Input'; @@ -17,32 +18,35 @@ import { Keybindings, } from './elements'; -class QuickActionsComponent extends React.Component { +export class QuickActions extends React.Component { // we'll just keep track of what the user changes the inputValue to be // so when the user makes a wish we can provide that info to genie inputValue = ''; updateGenie = () => { - const { keybindings } = this.props.store.preferences; - const { signals } = this.props; + const { + state, + state: { preferences: keybindings }, + actions, + } = useOvermind(); Object.keys(keybindings).forEach(bindingKey => { - const quickAction = keybindings[bindingKey]; + const { + quickAction: { type, title, signal, payload }, + } = keybindings[bindingKey]; genie({ - magicWords: `${quickAction.type}: ${quickAction.title}`, + magicWords: `${type}: ${title}`, id: bindingKey, action: () => { - const signalPath = quickAction.signal.split('.'); - const signal = signalPath.reduce( + const signalPath = signal.split('.'); + const signalFn = signalPath.reduce( (currentSignal, key) => currentSignal[key], - signals + actions ); - const payload = - typeof quickAction.payload === 'function' - ? quickAction.payload(this.props.store) - : quickAction.payload || {}; - signal(payload); + const payloadVal = + typeof payload === 'function' ? payload(state) : payload || {}; + signalFn(payloadVal); }, }); }); @@ -66,7 +70,10 @@ class QuickActionsComponent extends React.Component { }; closeQuickActions = () => { - this.props.signals.editor.quickActionsClosed(); + const { + actions: { editor }, + } = useOvermind(); + editor.quickActionsClosed(); }; onChange = item => { @@ -97,11 +104,17 @@ class QuickActionsComponent extends React.Component { itemToString = item => item && item.magicWords.join(', '); render() { - if (!this.props.store.editor.quickActionsOpen) { + const { + state: { + preferences, + editor: { quickActionsOpen }, + }, + } = useOvermind(); + if (!quickActionsOpen) { return null; } - const { keybindings } = this.props.store.preferences; + const { keybindings } = preferences; return ( @@ -119,14 +132,14 @@ class QuickActionsComponent extends React.Component { highlightedIndex, }) => { const inputProps = getInputProps({ - onChange: ev => { + onChange: (ev: React.ChangeEvent) => { this.inputValue = ev.target.value; }, - innerRef: el => el && el.focus(), + innerRef: (el: any) => el && el.focus(), onKeyUp: this.handleKeyUp, // Timeout so the fuzzy handler can still select the module onBlur: () => setTimeout(this.closeQuickActions, 100), - }); + } as any); return (
@@ -176,7 +189,3 @@ class QuickActionsComponent extends React.Component { ); } } - -export const QuickActions = inject('signals', 'store')( - observer(QuickActionsComponent) -); diff --git a/packages/app/src/app/pages/Sandbox/index.js b/packages/app/src/app/pages/Sandbox/index.js index 38ddc405850..25b485f86e5 100644 --- a/packages/app/src/app/pages/Sandbox/index.js +++ b/packages/app/src/app/pages/Sandbox/index.js @@ -9,7 +9,7 @@ import Padding from '@codesandbox/common/lib/components/spacing/Padding'; import { inject, observer } from 'app/componentConnectors'; import { Title } from 'app/components/Title'; import { Skeleton } from 'app/components/Skeleton'; -import { QuickActions } from 'app/pages/Sandbox/QuickActions'; +import { QuickActions } from 'app/pages/Sandbox/QuickActions/QuickActions'; import { NotFound } from 'app/pages/common/NotFound'; import { Navigation } from 'app/pages/common/Navigation'; import { GithubIntegration } from 'app/pages/common/GithubIntegration'; From edc60861b5b57fdd97d51dca18a933f163d3ac5f Mon Sep 17 00:00:00 2001 From: jyotiarora2610 Date: Thu, 17 Oct 2019 22:29:57 +0530 Subject: [PATCH 2/3] refactoring to functional components --- .../Sandbox/QuickActions/QuickActions.tsx | 257 +++++++++--------- 1 file changed, 122 insertions(+), 135 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx b/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx index 99c6cbd1700..fa757432301 100644 --- a/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx +++ b/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useCallback } from 'react'; import Downshift from 'downshift'; import genie from 'geniejs'; @@ -18,18 +18,32 @@ import { Keybindings, } from './elements'; -export class QuickActions extends React.Component { - // we'll just keep track of what the user changes the inputValue to be - // so when the user makes a wish we can provide that info to genie - inputValue = ''; - - updateGenie = () => { - const { - state, - state: { preferences: keybindings }, - actions, - } = useOvermind(); +export const QuickActions: React.FunctionComponent = () => { + const { + state, + state: { + preferences: { keybindings }, + editor: { quickActionsOpen }, + }, + actions, + actions: { editor }, + } = useOvermind(); + + const loadGenie = useCallback(() => { + try { + const { enteredMagicWords } = JSON.parse( + window.localStorage.getItem('genie') + ); + genie.options({ enteredMagicWords }); + } catch (error) { + // it may not exist in localStorage yet, or the JSON was malformed somehow + // so we'll persist it to update localStorage so it doesn't throw an error + // next time the page is loaded. + persistGenie(); + } + }, []); + const updateGenie = useCallback(() => { Object.keys(keybindings).forEach(bindingKey => { const { quickAction: { type, title, signal, payload }, @@ -50,142 +64,115 @@ export class QuickActions extends React.Component { }, }); }); - }; + }, [actions, keybindings, state]); - componentDidMount() { - this.updateGenie(); - this.loadGenie(); - } + useEffect(() => { + updateGenie(); + loadGenie(); + }, [loadGenie, updateGenie]); - componentDidUpdate() { - this.updateGenie(); + useEffect(() => { + updateGenie(); + }, [keybindings, updateGenie]); + + if (!quickActionsOpen) { + return null; } - getItems = value => genie.getMatchingWishes(value); + const getItems = value => genie.getMatchingWishes(value); - handleKeyUp = e => { + const handleKeyUp = e => { if (e.keyCode === ESC) { - this.closeQuickActions(); + closeQuickActions(); } }; - closeQuickActions = () => { - const { - actions: { editor }, - } = useOvermind(); + const closeQuickActions = () => { editor.quickActionsClosed(); }; - onChange = item => { - genie.makeWish(item, this.inputValue); - this.persistGenie(); - this.closeQuickActions(); - }; - - persistGenie() { + const persistGenie = () => { const { enteredMagicWords } = genie.options(); window.localStorage.setItem('genie', JSON.stringify({ enteredMagicWords })); - } - - loadGenie() { - try { - const { enteredMagicWords } = JSON.parse( - window.localStorage.getItem('genie') - ); - genie.options({ enteredMagicWords }); - } catch (error) { - // it may not exist in localStorage yet, or the JSON was malformed somehow - // so we'll persist it to update localStorage so it doesn't throw an error - // next time the page is loaded. - this.persistGenie(); - } - } + }; - itemToString = item => item && item.magicWords.join(', '); - - render() { - const { - state: { - preferences, - editor: { quickActionsOpen }, - }, - } = useOvermind(); - if (!quickActionsOpen) { - return null; - } + let inputVal = ''; + const onChange = item => { + genie.makeWish(item, inputVal); + persistGenie(); + closeQuickActions(); + }; - const { keybindings } = preferences; - - return ( - - - {({ - getInputProps, - getItemProps, - selectedItem, - inputValue, - highlightedIndex, - }) => { - const inputProps = getInputProps({ - onChange: (ev: React.ChangeEvent) => { - this.inputValue = ev.target.value; - }, - innerRef: (el: any) => el && el.focus(), - onKeyUp: this.handleKeyUp, - // Timeout so the fuzzy handler can still select the module - onBlur: () => setTimeout(this.closeQuickActions, 100), - } as any); - return ( -
- - - - - - {this.getItems(inputValue).map((item, index) => ( - - - {keybindings[item.id].type}:{' '} - {keybindings[item.id].title} - - - {keybindings[item.id].bindings && - keybindings[item.id].bindings[0] && ( - - - {keybindings[item.id].bindings.length === 2 && - keybindings[item.id].bindings[1] && - keybindings[item.id].bindings[1].length && ( - <> - {' - '} - - - )} - - )} - - ))} - -
- ); - }} - - - ); - } -} + const itemToString = item => item && item.magicWords.join(', '); + + return ( + + + {({ + getInputProps, + getItemProps, + selectedItem, + inputValue, + highlightedIndex, + }) => { + const inputProps = getInputProps({ + onChange: (ev: React.ChangeEvent) => { + inputVal = ev.target.value; + }, + innerRef: (el: any) => el && el.focus(), + onKeyUp: handleKeyUp, + // Timeout so the fuzzy handler can still select the module + onBlur: () => setTimeout(closeQuickActions, 100), + } as any); + return ( +
+ + + + + + {getItems(inputValue).map((item, index) => ( + + + {keybindings[item.id].type}: {keybindings[item.id].title} + + + {keybindings[item.id].bindings && + keybindings[item.id].bindings[0] && ( + + + {keybindings[item.id].bindings.length === 2 && + keybindings[item.id].bindings[1] && + keybindings[item.id].bindings[1].length && ( + <> + {' - '} + + + )} + + )} + + ))} + +
+ ); + }} + + + ); +}; From e7e28bd5e3ccd12f0a94cd9fe38bacdb6e405035 Mon Sep 17 00:00:00 2001 From: jyotiarora2610 Date: Thu, 17 Oct 2019 22:34:38 +0530 Subject: [PATCH 3/3] renamed quickactions to index and fixed imports --- packages/app/src/app/pages/Live/index.js | 2 +- .../pages/Sandbox/QuickActions/{QuickActions.tsx => index.tsx} | 0 packages/app/src/app/pages/Sandbox/index.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/app/src/app/pages/Sandbox/QuickActions/{QuickActions.tsx => index.tsx} (100%) diff --git a/packages/app/src/app/pages/Live/index.js b/packages/app/src/app/pages/Live/index.js index 252cafa200f..4935676cb27 100644 --- a/packages/app/src/app/pages/Live/index.js +++ b/packages/app/src/app/pages/Live/index.js @@ -11,7 +11,7 @@ import { SubTitle } from 'app/components/SubTitle'; import { Skeleton } from 'app/components/Skeleton'; import { Navigation } from 'app/pages/common/Navigation'; import { SignInButton } from 'app/pages/common/SignInButton'; -import { QuickActions } from 'app/pages/Sandbox/QuickActions/QuickActions'; +import { QuickActions } from 'app/pages/Sandbox/QuickActions'; import { hasAuthToken } from 'app/utils/user'; import Editor from '../Sandbox/Editor'; import { BlinkingDot } from './BlinkingDot'; diff --git a/packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx b/packages/app/src/app/pages/Sandbox/QuickActions/index.tsx similarity index 100% rename from packages/app/src/app/pages/Sandbox/QuickActions/QuickActions.tsx rename to packages/app/src/app/pages/Sandbox/QuickActions/index.tsx diff --git a/packages/app/src/app/pages/Sandbox/index.js b/packages/app/src/app/pages/Sandbox/index.js index 25b485f86e5..38ddc405850 100644 --- a/packages/app/src/app/pages/Sandbox/index.js +++ b/packages/app/src/app/pages/Sandbox/index.js @@ -9,7 +9,7 @@ import Padding from '@codesandbox/common/lib/components/spacing/Padding'; import { inject, observer } from 'app/componentConnectors'; import { Title } from 'app/components/Title'; import { Skeleton } from 'app/components/Skeleton'; -import { QuickActions } from 'app/pages/Sandbox/QuickActions/QuickActions'; +import { QuickActions } from 'app/pages/Sandbox/QuickActions'; import { NotFound } from 'app/pages/common/NotFound'; import { Navigation } from 'app/pages/common/Navigation'; import { GithubIntegration } from 'app/pages/common/GithubIntegration';