moar ts (codesandbox#2061)

* moar ts

* more ts

* more ts

* pr fixeas

* Update packages/app/src/app/pages/common/Navigation/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* fix rebase

* remove unsuded type

* fix typecheck

* Update packages/app/src/app/pages/common/SignInButton/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/common/UserMenu/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/common/UserMenu/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* pr fixes

* move props

* Update packages/app/src/app/pages/common/Stats/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

Author: 2 people

…app/src/app/pages/CLI/Prompt/elements.js …app/src/app/pages/CLI/Prompt/elements.tspackages/app/src/app/pages/CLI/Prompt/elements.js renamed to packages/app/src/app/pages/CLI/Prompt/elements.ts packages/app/src/app/pages/CLI/Prompt/elements.js renamed to packages/app/src/app/pages/CLI/Prompt/elements.ts

@@ -6,9 +6,17 @@ import { Button } from '@codesandbox/common/lib/components/Button';
 
 import { Container, Buttons, TokenContainer } from './elements';
 
-const select = ({ target }) => target.select();
+interface Props {
+  error: string;
+  token: string;
+  loading: boolean;
+  username: string;
+  signIn: () => void;
+}
 
-const Prompt = ({ error, token, loading, username, signIn }) => {
+const select = ({ target }: { target: any }) => target.select();
+
+const Prompt = ({ error, token, loading, username, signIn }: Props) => {
   if (error) {
     return (
       <Container>

…es/app/src/app/pages/CLI/Prompt/index.js …s/app/src/app/pages/CLI/Prompt/index.tsxpackages/app/src/app/pages/CLI/Prompt/index.js renamed to packages/app/src/app/pages/CLI/Prompt/index.tsx packages/app/src/app/pages/CLI/Prompt/index.js renamed to packages/app/src/app/pages/CLI/Prompt/index.tsx

@@ -13,7 +13,7 @@ export const Content = styled(Centered)`
   margin-top: 10%;
 `;
 
-export const Code = styled.pre`
+export const Code = styled.pre<{ theme: any }>`
   margin-bottom: 1rem;
   color: ${props =>
     props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};

…ckages/app/src/app/pages/CLI/elements.js …ckages/app/src/app/pages/CLI/elements.tspackages/app/src/app/pages/CLI/elements.js renamed to packages/app/src/app/pages/CLI/elements.ts packages/app/src/app/pages/CLI/elements.js renamed to packages/app/src/app/pages/CLI/elements.ts

@@ -5,16 +5,12 @@ import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 const blink = keyframes`
   // @ts-ignore;
   0% {color: ${(props: { theme: { light: boolean } }) =>
-    props.theme.light
-      ? css`rgba(0, 0, 0, 0.7)`
-      : css`rgba(255, 255, 255, 0.7)`}};
+    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}};
 
 	50% {color: rgba(255, 255, 255, 1);}
 
 	100% {color: ${(props: { theme: { light: boolean } }) =>
-    props.theme.light
-      ? css`rgba(0, 0, 0, 0.7)`
-      : css`rgba(255, 255, 255, 0.7)`}};
+    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}};
 
 `;
 

packages/app/src/app/pages/CLI/index.js packages/app/src/app/pages/CLI/index.tsxpackages/app/src/app/pages/CLI/index.js renamed to packages/app/src/app/pages/CLI/index.tsx

@@ -63,8 +63,6 @@ const LikeButton = ({
     style={style}
     text={likeCount}
     sandbox={store.editor.currentSandbox}
-    store={store}
-    signals={signals}
     disableTooltip
     highlightHover
   />
@@ -284,7 +282,7 @@ const Header = ({ store, signals, zenMode }: Props) => {
                 marginRight: 0,
               }}
             >
-              <UserMenu store={store} signals={signals} />
+              <UserMenu />
             </div>
           ) : (
             <SignInButton style={{ fontSize: '.75rem' }} />

…rc/app/pages/CliInstructions/elements.js …rc/app/pages/CliInstructions/elements.tspackages/app/src/app/pages/CliInstructions/elements.js renamed to packages/app/src/app/pages/CliInstructions/elements.ts packages/app/src/app/pages/CliInstructions/elements.js renamed to packages/app/src/app/pages/CliInstructions/elements.ts

@@ -6,7 +6,7 @@ import Integration from 'app/components/Integration';
 import { useSignals, useStore } from 'app/store';
 
 type Props = {
-  small?: boolean,
+  small?: boolean;
 };
 const GithubIntegration = ({ small = false }: Props) => {
   const { signInGithubClicked, signOutGithubIntegration } = useSignals();

…p/src/app/pages/CliInstructions/index.js …/src/app/pages/CliInstructions/index.tsxpackages/app/src/app/pages/CliInstructions/index.js renamed to packages/app/src/app/pages/CliInstructions/index.tsx packages/app/src/app/pages/CliInstructions/index.js renamed to packages/app/src/app/pages/CliInstructions/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { inject, observer } from 'mobx-react';
-
+import { observer } from 'mobx-react-lite';
+import noop from 'lodash/noop';
 // @ts-ignore
 import HeartIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/heart-open.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 // @ts-ignore
@@ -10,6 +10,7 @@ import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
 import { Container } from './elements';
 import { Sandbox } from '@codesandbox/common/lib/types';
+import { useStore, useSignals } from 'app/store';
 
 const MaybeTooltip = ({ loggedIn, disableTooltip, title, children }) =>
   loggedIn && !disableTooltip ? (
@@ -20,8 +21,6 @@ const MaybeTooltip = ({ loggedIn, disableTooltip, title, children }) =>
 
 interface Props {
   sandbox: Sandbox;
-  store: any;
-  signals: any;
   className?: string;
   colorless?: boolean;
   text?: string;
@@ -32,31 +31,30 @@ interface Props {
 
 function LikeHeart({
   sandbox,
-  store,
-  signals,
   className,
   colorless,
   text,
   style,
   disableTooltip,
   highlightHover,
 }: Props) {
+  const { isLoggedIn } = useStore();
+  const { editor } = useSignals();
+
   return (
     <Container
       style={style}
       hasText={text !== undefined}
-      loggedIn={store.isLoggedIn}
+      loggedIn={isLoggedIn}
       liked={sandbox.userLiked}
       className={className}
       highlightHover={highlightHover}
       onClick={
-        store.isLoggedIn
-          ? () => signals.editor.likeSandboxToggled({ id: sandbox.id })
-          : null
+        isLoggedIn ? () => editor.likeSandboxToggled({ id: sandbox.id }) : noop
       }
     >
       <MaybeTooltip
-        loggedIn={store.isLoggedIn}
+        loggedIn={isLoggedIn}
         disableTooltip={disableTooltip}
         title={sandbox.userLiked ? 'Undo like' : 'Like'}
       >
@@ -72,4 +70,4 @@ function LikeHeart({
   );
 }
 
-export default inject('signals', 'store')(observer(LikeHeart));
+export default observer(LikeHeart);