Fix TypeScript errors

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/index.tsx

@@ -10,7 +10,7 @@ import {
 } from './elements';
 
 type Props = {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   title: string;
   keepState?: boolean;
   disabled?: boolean;

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

@@ -1,10 +1,12 @@
-import * as React from 'react';
-import { inject, observer } from 'mobx-react';
-
 import VERSION from '@codesandbox/common/lib/version';
+import { observer } from 'mobx-react-lite';
+import * as React from 'react';
+//  Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878)
+import {} from 'styled-components/cssprop'; // eslint-disable-line
 
-import getWorkspaceItems from 'app/store/modules/workspace/items';
 import SocialInfo from 'app/components/SocialInfo';
+import { useStore } from 'app/store';
+import getWorkspaceItems from 'app/store/modules/workspace/items';
 
 import Files from './items/Files';
 import ProjectInfo from './items/ProjectInfo';
@@ -16,11 +18,11 @@ import Deployment from './items/Deployment';
 import ConfigurationFiles from './items/ConfigurationFiles';
 import NotOwnedSandboxInfo from './items/NotOwnedSandboxInfo';
 
-import ConnectionNotice from './ConnectionNotice';
 import Advertisement from './Advertisement';
-import WorkspaceItem from './WorkspaceItem';
 import Chat from './Chat';
+import { ConnectionNotice } from './ConnectionNotice';
 import { SSEDownNotice } from './SSEDownNotice';
+import WorkspaceItem from './WorkspaceItem';
 
 import {
   Container,
@@ -41,45 +43,62 @@ const idToItem = {
   more: More,
 };
 
-function Workspace({ store }) {
-  const sandbox = store.editor.currentSandbox;
-  const preferences = store.preferences;
-
-  const currentItem = store.workspace.openedWorkspaceItem;
+const Workspace = () => {
+  const store = useStore();
+  const {
+    editor: {
+      currentSandbox: { owned },
+    },
+    isPatron,
+    live: {
+      isLive,
+      roomInfo: { chatEnabled },
+    },
+    preferences: {
+      settings: { zenMode },
+    },
+    workspace: { openedWorkspaceItem: currentItem },
+  } = store;
 
   if (!currentItem) {
     return null;
   }
 
   const Component = idToItem[currentItem];
+  const item = getWorkspaceItems(store).find(({ id }) => id === currentItem);
 
-  const item = getWorkspaceItems(store).find(i => i.id === currentItem);
   return (
     <Container>
       {item && !item.hasCustomHeader && <ItemTitle>{item.name}</ItemTitle>}
       <div style={{ flex: 1, overflowY: 'auto' }}>
         <Component />
       </div>
-      {store.live.isLive && store.live.roomInfo.chatEnabled && (
+
+      {isLive && chatEnabled && (
         <WorkspaceItem defaultOpen title="Chat">
           <Chat />
         </WorkspaceItem>
       )}
-      {!preferences.settings.zenMode && (
+
+      {!zenMode && (
         <div>
-          {!store.isPatron && !sandbox.owned && <Advertisement />}
+          {!(isPatron || owned) && <Advertisement />}
+
           <ContactContainer>
             <SocialInfo style={{ display: 'inline-block' }} />
+
             <VersionContainer className="codesandbox-version">
               {VERSION}
             </VersionContainer>
           </ContactContainer>
+
           <SSEDownNotice />
+
           <ConnectionNotice />
         </div>
       )}
     </Container>
   );
-}
+};
 
-export default inject('signals', 'store')(observer(Workspace));
+export default observer(Workspace);

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/CreateRepo/CreateRepo.tsx

@@ -13,7 +13,7 @@ import { useSignals, useStore } from 'app/store';
 import { Error } from './elements';
 
 type Props = {
-  style: React.CSSProperties;
+  style?: React.CSSProperties;
 };
 export const CreateRepo = observer(({ style }: Props) => {
   const {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Git.tsx

@@ -47,7 +47,7 @@ export const Git = observer(() => {
   }: React.ChangeEvent<HTMLInputElement>) => subjectChanged({ subject: value });
   const changeDescription = ({
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
+  }: React.ChangeEvent<HTMLTextAreaElement>) =>
     descriptionChanged({ description: value });
 
   const modulesNotSaved = !isAllModulesSynced;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/GitHub.tsx

@@ -38,7 +38,12 @@ export const GitHub = observer(() => {
     )
   ) : (
     <>
-      <Description margin={1} top={0}>
+      <Description
+        css={`
+          margin: 1;
+          top: 0;
+        `}
+      >
         You can create commits and open pull requests if you add GitHub to your
         integrations.
       </Description>

packages/app/src/app/pages/common/GithubIntegration/index.js

@@ -1,22 +1,35 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { inject, observer } from 'mobx-react';
 import GithubLogo from 'react-icons/lib/go/mark-github';
+
 import Integration from 'app/components/Integration';
+import { useSignals, useStore } from 'app/store';
+
+type Props = {
+  small?: boolean,
+};
+const GithubIntegration = ({ small = false }: Props) => {
+  const { signInGithubClicked, signOutGithubIntegration } = useSignals();
+  const {
+    isLoadingGithub,
+    signOutGithubIntegration: {
+      integrations: { github },
+    },
+  } = useStore();
 
-function GithubIntegration({ store, signals, small }) {
   return (
     <Integration
-      name="GitHub"
       color="#4078c0"
       description={small ? 'Commits & PRs' : 'Committing & Pull Requests'}
       Icon={GithubLogo}
+      loading={isLoadingGithub}
+      name="GitHub"
+      signIn={() => signInGithubClicked({ useExtraScopes: true })}
+      signOut={signOutGithubIntegration}
       small={small}
-      userInfo={store.user.integrations.github}
-      signOut={() => signals.signOutGithubIntegration()}
-      signIn={() => signals.signInGithubClicked({ useExtraScopes: true })}
-      loading={store.isLoadingGithub}
+      userInfo={github}
     />
   );
-}
+};
 
-export default inject('store', 'signals')(observer(GithubIntegration));
+export default observer(GithubIntegration);