Use mobx-react-lite & new useSignals hook (codesandbox#1961)

Author: MichaelDeBoey

packages/app/src/app/pages/CLI/index.js

@@ -1,18 +1,15 @@
-import { inject, observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
+import { useSignals } from 'app/store';
 
 import { Container } from './elements';
 import Prompt from './Prompt';
 
-const CLI = ({
-  authToken,
-  error,
-  isLoadingCLI,
-  signals: { cliMounted, signInCliClicked },
-  user,
-}) => {
+const CLI = ({ authToken, error, isLoadingCLI, user }) => {
+  const { cliMounted, signInCliClicked } = useSignals();
+
   useEffect(() => {
     cliMounted();
   }, [cliMounted]);
@@ -32,4 +29,4 @@ const CLI = ({
   );
 };
 
-export default inject('store', 'signals')(observer(CLI));
+export default observer(CLI);

packages/app/src/app/pages/CliInstructions/index.js

@@ -1,15 +1,17 @@
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { inject } from 'mobx-react';
 import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
 import SubTitle from 'app/components/SubTitle';
 import Title from 'app/components/Title';
+import { useSignals } from 'app/store';
 
 import { Container, Content, Code } from './elements';
 
-const CLIInstructions = ({ signals: { cliInstructionsMounted } }) => {
+const CLIInstructions = () => {
+  const { cliInstructionsMounted } = useSignals();
+
   useEffect(() => {
     cliInstructionsMounted();
   }, [cliInstructionsMounted]);
@@ -41,4 +43,4 @@ const CLIInstructions = ({ signals: { cliInstructionsMounted } }) => {
   );
 };
 
-export default inject(['signals'])(CLIInstructions);
+export default CLIInstructions;

packages/app/src/app/pages/GitHub/index.js

@@ -6,12 +6,12 @@ import {
   protocolAndHost,
   gitHubRepoPattern,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { inject } from 'mobx-react';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
 import Title from 'app/components/Title';
 import SubTitle from 'app/components/SubTitle';
+import { useSignals } from 'app/store';
 
 import {
   Container,
@@ -25,7 +25,9 @@ import {
 const getFullGitHubUrl = url =>
   `${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
 
-const GitHub = ({ signals: { githubPageMounted } }) => {
+const GitHub = () => {
+  const { githubPageMounted } = useSignals();
+
   const [error, setError] = useState(null);
   const [transformedUrl, setTransformedUrl] = useState('');
   const [url, setUrl] = useState('');
@@ -106,4 +108,4 @@ const GitHub = ({ signals: { githubPageMounted } }) => {
   );
 };
 
-export default inject(['signals'])(GitHub);
+export default GitHub;

packages/app/src/app/pages/NewSandbox/index.js

@@ -2,10 +2,10 @@ import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { inject } from 'mobx-react';
 import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
+import { useSignals } from 'app/store';
 import history from 'app/utils/history';
 
 import NewSandboxModal from '../Dashboard/Content/CreateNewSandbox/Modal';
@@ -14,7 +14,9 @@ const createSandbox = template => {
   history.push(sandboxUrl({ id: template.shortid }));
 };
 
-const NewSandbox = ({ signals: { sandboxPageMounted } }) => {
+const NewSandbox = () => {
+  const { sandboxPageMounted } = useSignals();
+
   useEffect(() => {
     sandboxPageMounted();
   }, [sandboxPageMounted]);
@@ -36,4 +38,4 @@ const NewSandbox = ({ signals: { sandboxPageMounted } }) => {
   );
 };
 
-export default inject('signals')(NewSandbox);
+export default NewSandbox;

packages/app/src/app/pages/Search/index.js

@@ -1,4 +1,10 @@
-import { inject } from 'mobx-react';
+import {
+  ALGOLIA_API_KEY,
+  ALGOLIA_APPLICATION_ID,
+  ALGOLIA_DEFAULT_INDEX,
+} from '@codesandbox/common/lib/utils/config';
+import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import qs from 'qs';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -8,19 +14,12 @@ import {
   Configure,
 } from 'react-instantsearch/dom';
 
-import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-
 import Navigation from 'app/pages/common/Navigation';
-import {
-  ALGOLIA_API_KEY,
-  ALGOLIA_APPLICATION_ID,
-  ALGOLIA_DEFAULT_INDEX,
-} from '@codesandbox/common/lib/utils/config';
+import { useSignals } from 'app/store';
 
 import 'instantsearch.css/themes/reset.css';
 
-import { Container, Content, StyledTitle, Main } from './elements';
+import { Container, Content, Main, StyledTitle } from './elements';
 import Filters from './Filters';
 import Results from './Results';
 import Styles from './search';
@@ -32,7 +31,9 @@ const createURL = state => `?${qs.stringify(state)}`;
 const searchStateToUrl = (location, searchState) =>
   searchState ? `${location.pathname}${createURL(searchState)}` : '';
 
-const Search = ({ history, location, signals }) => {
+const Search = ({ history, location }) => {
+  const { searchMounted } = useSignals();
+
   const [searchState, setSearchState] = useState(
     qs.parse(location.search.slice(1))
   );
@@ -43,8 +44,8 @@ const Search = ({ history, location, signals }) => {
   }, []);
 
   useEffect(() => {
-    signals.searchMounted();
-  }, [signals]);
+    searchMounted();
+  }, [searchMounted]);
 
   useEffect(() => {
     const unlisten = history.listen((loc, action) => {
@@ -115,4 +116,4 @@ const Search = ({ history, location, signals }) => {
   );
 };
 
-export default inject('signals')(Search);
+export default Search;