From 1a1fa851dcfc2226dce0353926113f4f14ede9ff Mon Sep 17 00:00:00 2001 From: Gobinath Manokaran <> Date: Sat, 19 Oct 2019 12:15:06 +0530 Subject: [PATCH 1/3] #2621 Refactored /app/pages/Sandbox/Editor/Header/index.tsx --- .../app/pages/Sandbox/Editor/Header/index.tsx | 167 +++++++++--------- 1 file changed, 86 insertions(+), 81 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx index d8d38ab730d..039a2eab0a5 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx @@ -7,7 +7,6 @@ import { dashboardUrl, patronUrl, } from '@codesandbox/common/lib/utils/url-generator'; -import { hooksObserver, inject } from 'app/componentConnectors'; import { LikeHeart } from 'app/pages/common/LikeHeart'; import { SignInButton } from 'app/pages/common/SignInButton'; import { UserMenu } from 'app/pages/common/UserMenu'; @@ -19,6 +18,7 @@ import Fork from 'react-icons/lib/go/repo-forked'; import SaveIcon from 'react-icons/lib/md/save'; import SettingsIcon from 'react-icons/lib/md/settings'; import ShareIcon from 'react-icons/lib/md/share'; +import {useOvermind} from "app/overmind"; import PatronBadge from '-!svg-react-loader!@codesandbox/common/lib/utils/badges/svg/patron-4.svg'; import { Action } from './Buttons/Action'; @@ -35,42 +35,42 @@ import { Logo } from './Logo'; import { MenuBar } from './MenuBar'; import UpdateFound from './UpdateFound'; -type ButtonProps = { +interface IButtonProps { style: React.CSSProperties; secondary?: boolean; }; -type ForkButtonProps = ButtonProps & { +interface ILikeButtonProps extends IButtonProps{ + likeCount: number; +} +interface IForkButtonProps extends IButtonProps { isForking: boolean; }; -const LikeButton = inject('store')( - hooksObserver( - ({ - style, - likeCount, - store: { editor }, - }: ButtonProps & { likeCount: string; store: any }) => ( - - ) +const LikeButton : React.FC = ({ style, likeCount }) => { + const { + state : { + editor + } + } = useOvermind(); + return ( + ) -); - -const ForkButton = inject('signals')( - hooksObserver( - ({ - secondary, - isForking, - style, - signals: { editor }, - }: ForkButtonProps & { signals: any }) => ( +} +const ForkButton : React.FC = ({ secondary, style, isForking } ) => { + const { + actions: { + editor + } + } = useOvermind(); + return ( ) - ) -); - -const PickButton = inject('store', 'signals')( - hooksObserver( - ({ - secondary, - style, - store: { editor }, - signals: { explore }, - }: ButtonProps & { store: any; signals: any }) => { - const { id, title, description } = editor.currentSandbox; +} - return ( +const PickButton : React.FC = ({ style, secondary }) => { + const { + state: { + editor + }, + actions: { + explore + } + } = useOvermind(); + const { id, title, description } = editor.currentSandbox; + return ( ); +} +const ShareButton : React.FC = ({ secondary, style}) => { + const { + actions:{ + modalOpened } - ) -); - -const ShareButton = inject('signals')( - hooksObserver( - ({ - secondary, - style, - signals: { modalOpened }, - }: ButtonProps & { signals: any }) => ( - ) - ) -); +} -interface Props { - store: any; - signals: any; +interface IProps { zenMode: boolean; } -const HeaderComponent = ({ zenMode, store, signals }: Props) => { - const sandbox = store.editor.currentSandbox; - const vscode = store.preferences.settings.experimentVSCode; +const HeaderComponent : React.FC = ({ zenMode }) => { + const { + state: { + editor, + preferences, + hasLogIn, + isLoggedIn, + updateStatus, + user, + isPatron + }, + actions: { + modalOpened + } + } = useOvermind(); + const sandbox = editor.currentSandbox; + const vscode = preferences.settings.experimentVSCode; return ( - {store.hasLogIn ? ( + {hasLogIn ? ( @@ -169,16 +176,16 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { { saveAllModules(store, signals) + : () => saveAllModules() } placeholder={ - store.editor.isAllModulesSynced + editor.isAllModulesSynced ? 'All modules are saved' : false } - blink={store.editor.changedModuleShortids.length > 2} + blink={editor.changedModuleShortids.length > 2} title="Save" Icon={SaveIcon} /> @@ -190,7 +197,7 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { {sandbox.owned && ( @@ -198,7 +205,7 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { )} - {store.updateStatus === 'available' && ( + {updateStatus === 'available' && ( document.location.reload()} Icon={UpdateFound} @@ -206,8 +213,8 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { /> )} - {!store.isLoggedIn || - (!store.isPatron && ( + {!isLoggedIn || + (!isPatron && ( { /> ))} - {!store.isLoggedIn && ( + {!isLoggedIn && ( - signals.modalOpened({ + modalOpened({ modal: 'preferences', }) } @@ -234,7 +241,7 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { - signals.modalOpened({ + modalOpened({ modal: 'newSandbox', }) } @@ -242,15 +249,15 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { Icon={PlusIcon} /> - {store.isLoggedIn && ( + {isLoggedIn && ( )} - {store.user && store.user.curatorAt && ( + {user && user.curatorAt && ( { @@ -278,7 +285,7 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => { left={1} right={1} > - {store.isLoggedIn ? ( + {isLoggedIn ? (
{ ); }; -export const Header = inject('signals', 'store')( - hooksObserver(HeaderComponent) -); +export default HeaderComponent From 4c7742bbd060d7d46ca07b24ab61fd0aa5edbf0f Mon Sep 17 00:00:00 2001 From: Gobinath Manokaran <> Date: Sat, 19 Oct 2019 12:26:21 +0530 Subject: [PATCH 2/3] added contributor --- .all-contributorsrc | 9 +++++++++ README.md | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 927d61efac7..c0113d186d1 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1394,6 +1394,15 @@ "contributions": [ "code" ] + }, + { + "login": "Gobinath-Manokaran", + "name": "Gobinath-Manokaran", + "avatar_url": "https://avatars2.githubusercontent.com/u/6711914?v=4", + "profile": "https://github.com/Gobinath-Manokaran", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 830a3d1f75e..d259dcf6fad 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-148-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) +# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-149-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors) @@ -232,10 +232,10 @@ Thanks goes to these wonderful people Chinmay Chaudhary
Chinmay Chaudhary
💻 Sakthivel Sengodan Sapient
Sakthivel Sengodan Sapient
💻 vanya829
vanya829
💻 - lakhansamani
Lakhan Samani
💻 Het Patel
Het Patel
💻 + Gobinath-Manokaran
Gobinath-Manokaran
💻 From a15f75a3617c14e29d1058ab6916c48f2c9c72f8 Mon Sep 17 00:00:00 2001 From: Gobinath Manokaran <> Date: Sat, 19 Oct 2019 13:53:40 +0530 Subject: [PATCH 3/3] Changed from type to interface for component props --- .../app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx index 14df92521df..edd46bc12ca 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx @@ -8,10 +8,10 @@ import { useOvermind } from 'app/overmind'; import { Item } from './elements'; -type Props = { +interface IKeywordsProps { editable?: boolean; }; -export const Keywords: FunctionComponent = ({ editable }) => { +export const Keywords: FunctionComponent = ({ editable }) => { const { actions: { workspace: { tagChanged, tagsChanged },