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) [](https://spectrum.chat/codesandbox) [](#contributors-) [](https://circleci.com/gh/codesandbox/codesandbox-client) [](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [](http://makeapullrequest.com) [](http://www.firsttimersonly.com/) [](https://lerna.js.org/)
+# [CodeSandbox](https://codesandbox.io) [](https://spectrum.chat/codesandbox) [](#contributors-) [](https://circleci.com/gh/codesandbox/codesandbox-client) [](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [](http://makeapullrequest.com) [](http://www.firsttimersonly.com/) [](https://lerna.js.org/)
[](#backers)
[](#sponsors)
@@ -232,10 +232,10 @@ Thanks goes to these wonderful people
 Chinmay Chaudhary 💻 |
 Sakthivel Sengodan Sapient 💻 |
 vanya829 💻 |
-  Lakhan Samani 💻 |
 Het Patel 💻 |
+  Gobinath-Manokaran 💻 |
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
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 },