🔨 Switch Profile to use useOvermind (#3352)

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/profile/actions.ts

@@ -2,28 +2,28 @@ import { Sandbox } from '@codesandbox/common/lib/types';
 import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
 
-export const profileMounted: AsyncAction<{
-  username: string;
-}> = withLoadApp(async ({ state, effects }, { username }) => {
-  state.profile.isLoadingProfile = true;
-  state.profile.notFound = false;
-
-  const profile = await effects.api.getProfile(username);
-
-  state.profile.profiles[profile.id] = profile;
-  state.profile.currentProfileId = profile.id;
+export const profileMounted: AsyncAction<string> = withLoadApp(
+  async ({ effects, state }, username) => {
+    state.profile.isLoadingProfile = true;
+    state.profile.notFound = false;
+
+    const profile = await effects.api.getProfile(username);
+
+    state.profile.profiles[profile.id] = profile;
+    state.profile.currentProfileId = profile.id;
+
+    if (
+      profile.showcasedSandboxShortid &&
+      !state.editor.sandboxes[profile.showcasedSandboxShortid]
+    ) {
+      state.editor.sandboxes[
+        profile.showcasedSandboxShortid
+      ] = await effects.api.getSandbox(profile.showcasedSandboxShortid);
+    }
 
-  if (
-    profile.showcasedSandboxShortid &&
-    !state.editor.sandboxes[profile.showcasedSandboxShortid]
-  ) {
-    state.editor.sandboxes[
-      profile.showcasedSandboxShortid
-    ] = await effects.api.getSandbox(profile.showcasedSandboxShortid);
+    state.profile.isLoadingProfile = false;
   }
-
-  state.profile.isLoadingProfile = false;
-});
+);
 
 export const sandboxesPageChanged: AsyncAction<{
   page: number;

packages/app/src/app/pages/Profile/elements.js renamed to packages/app/src/app/pages/Profile/elements.ts

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
+import MarginBase from '@codesandbox/common/lib/components/spacing/Margin';
+import styled, { css } from 'styled-components';
 
 export const Container = styled(Fullscreen)`
   color: white;
@@ -11,6 +12,12 @@ export const Container = styled(Fullscreen)`
 `;
 
 export const Content = styled(Fullscreen)`
-  border-top: 1px solid ${props => props.theme.background3};
-  flex: 0 0 70px;
+  ${({ theme }) => css`
+    border-top: 1px solid ${theme.background3};
+    flex: 0 0 70px;
+  `};
+`;
+
+export const Margin = styled(MarginBase)`
+  min-height: 60vh;
 `;

packages/app/src/app/pages/Profile/index.tsx

@@ -1,91 +1,90 @@
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import {
   profileLikesUrl,
   profileSandboxesUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+
 import { useOvermind } from 'app/overmind';
 import { NotFound } from 'app/pages/common/NotFound';
-import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
-import { Route, Switch } from 'react-router-dom';
 
-import { Container, Content } from './elements';
+import { Container, Content, Margin } from './elements';
 import Header from './Header';
 import Navigation from './Navigation';
 import { Sandboxes } from './Sandboxes';
 import { Showcase } from './Showcase';
 
-interface IProfileProps {
-  match: {
-    params: { username: string };
-    url: string;
-  };
-}
-
-const Profile: React.FC<IProfileProps> = ({
+type Props = RouteComponentProps<{ username: string }>;
+export const Profile: FunctionComponent<Props> = ({
   match: {
     params: { username },
     url,
   },
 }) => {
   const {
-    state: {
-      profile: { current: user, notFound },
-    },
     actions: {
       profile: { profileMounted },
     },
+    state: {
+      profile: { current: user, notFound },
+    },
   } = useOvermind();
 
   useEffect(() => {
-    profileMounted({ username });
+    profileMounted(username);
   }, [profileMounted, username]);
 
   if (notFound) {
     return <NotFound />;
   }
 
   if (!user) {
-    return <div />;
+    return null;
   }
 
   return (
     <Container>
       <Helmet>
         <title>{user.name || user.username} - CodeSandbox</title>
       </Helmet>
+
       <Header user={user} />
+
       <Content>
         <MaxWidth>
           <Navigation
-            username={user.username}
-            sandboxCount={user.sandboxCount}
             likeCount={user.givenLikeCount}
+            sandboxCount={user.sandboxCount}
+            username={user.username}
           />
         </MaxWidth>
       </Content>
+
       <MaxWidth width={1024}>
-        <Margin horizontal={2} style={{ minHeight: '60vh' }}>
+        <Margin horizontal={2}>
           <Switch>
-            <Route path={url} exact render={() => <Showcase />} />
+            <Route component={Showcase} exact path={url} />
+
             <Route
               path={`${profileSandboxesUrl(user.username)}/:page?`}
-              render={({ match }) => (
+              render={({ match }: RouteComponentProps<{ page?: string }>) => (
                 <Sandboxes
-                  source="currentSandboxes"
-                  page={match.params.page && +match.params.page}
                   baseUrl={profileSandboxesUrl(user.username)}
+                  page={Number(match.params.page) || 1}
+                  source="currentSandboxes"
                 />
               )}
             />
+
             <Route
               path={`${profileLikesUrl(user.username)}/:page?`}
-              render={({ match }) => (
+              render={({ match }: RouteComponentProps<{ page?: string }>) => (
                 <Sandboxes
-                  source="currentLikedSandboxes"
-                  page={match.params.page && +match.params.page}
                   baseUrl={profileLikesUrl(user.username)}
+                  page={Number(match.params.page) || 1}
+                  source="currentLikedSandboxes"
                 />
               )}
             />
@@ -95,5 +94,3 @@ const Profile: React.FC<IProfileProps> = ({
     </Container>
   );
 };
-
-export default Profile;

packages/app/src/app/pages/index.tsx

@@ -40,7 +40,9 @@ const NotFound = Loadable(() =>
   import(/* webpackChunkName: 'page-not-found' */ './common/NotFound')
 );
 const Profile = Loadable(() =>
-  import(/* webpackChunkName: 'page-profile' */ './Profile')
+  import(/* webpackChunkName: 'page-profile' */ './Profile').then(module => ({
+    default: module.Profile,
+  }))
 );
 const Search = Loadable(() =>
   import(/* webpackChunkName: 'page-search' */ './Search').then(module => ({