Refactor profile page component to use TS/hooks/Overmind. (#2729)

Author: malwilley

packages/app/package.json

@@ -237,7 +237,9 @@
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
     "@types/react-dom": "^16.8.3",
+    "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
+    "@types/react-router-dom": "^5.1.0",
     "@types/react-stripe-elements": "^1.3.2",
     "@types/resolve": "^0.0.8",
     "@types/socket.io-client": "^1.4.32",

packages/app/src/app/components/ConfirmLink.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 interface IConfirmLinkProps {
   enabled: boolean;
   message: string;
+  to: string;
 }
 
 export const ConfirmLink: React.FC<IConfirmLinkProps> = ({

packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { sortBy } from 'lodash-es';
 import { useQuery } from '@apollo/react-hooks';
 import track from '@codesandbox/common/lib/utils/analytics';

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';

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

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+import { Route, Switch } from 'react-router-dom';
+import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import {
+  profileSandboxesUrl,
+  profileLikesUrl,
+} from '@codesandbox/common/lib/utils/url-generator';
+import { NotFound } from 'app/pages/common/NotFound';
+import { useOvermind } from 'app/overmind';
+import Header from './Header';
+import Navigation from './Navigation';
+import Showcase from './Showcase';
+import Sandboxes from './Sandboxes';
+import { Container, Content } from './elements';
+
+interface IProfileProps {
+  match: {
+    params: { username: string };
+    url: string;
+  };
+}
+
+const Profile: React.FC<IProfileProps> = ({
+  match: {
+    params: { username },
+    url,
+  },
+}) => {
+  const {
+    state: {
+      profile: { current: user, notFound },
+    },
+    actions: {
+      profile: { profileMounted },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    profileMounted({ username });
+  }, [profileMounted, username]);
+
+  if (notFound) {
+    return <NotFound />;
+  }
+
+  if (!user) {
+    return <div />;
+  }
+
+  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}
+          />
+        </MaxWidth>
+      </Content>
+      <MaxWidth width={1024}>
+        <Margin horizontal={2} style={{ minHeight: '60vh' }}>
+          <Switch>
+            <Route path={url} exact render={() => <Showcase />} />
+            <Route
+              path={`${profileSandboxesUrl(user.username)}/:page?`}
+              render={({ match }) => (
+                <Sandboxes
+                  source="currentSandboxes"
+                  page={match.params.page && +match.params.page}
+                  baseUrl={profileSandboxesUrl(user.username)}
+                />
+              )}
+            />
+            <Route
+              path={`${profileLikesUrl(user.username)}/:page?`}
+              render={({ match }) => (
+                <Sandboxes
+                  source="currentLikedSandboxes"
+                  page={match.params.page && +match.params.page}
+                  baseUrl={profileLikesUrl(user.username)}
+                />
+              )}
+            />
+          </Switch>
+        </Margin>
+      </MaxWidth>
+    </Container>
+  );
+};
+
+export default Profile;

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

@@ -6,10 +6,6 @@ export class ErrorBoundary extends Component<
   IErrorBoundaryProps,
   IErrorBoundaryState
 > {
-  static defaultProps = {
-    FallbackComponent: CodeSadbox,
-  };
-
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
@@ -48,7 +44,7 @@ export class ErrorBoundary extends Component<
   }
 
   render() {
-    const { children, FallbackComponent } = this.props;
+    const { children, FallbackComponent = CodeSadbox } = this.props;
     const { error, info } = this.state;
 
     return error !== null ? (

packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Location } from 'history';
+import { RouteComponentProps } from 'react-router';
 
 export type ErrorInfo = {
   componentStack: string;
@@ -10,11 +11,10 @@ export interface IFallbackComponentProps {
   trace?: string;
 }
 
-export interface IErrorBoundaryProps {
+export interface IErrorBoundaryProps extends RouteComponentProps {
   children?: React.ReactNode;
-  FallbackComponent: React.ComponentType<IFallbackComponentProps>;
+  FallbackComponent?: React.ComponentType<IFallbackComponentProps>;
   onError?: (error: Error, trace: string) => void;
-  location?: Location;
 }
 
 export interface IErrorBoundaryState {

packages/app/src/app/pages/common/ErrorBoundary/types.ts

@@ -4097,6 +4097,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^5.0.11":
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.11.tgz#d2642af4658e7b97accb46ea8b00d6dc614c99fa"
+  integrity sha512-id9DjHp/+Cm+x3etN+EWs5OP76PPpz8jXw+iN9xcXltssF0KHNjAzlan///ASXegEewaItlw5FhFnoLxRUJQ9g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-icon-base@*":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@types/react-icon-base/-/react-icon-base-2.1.3.tgz#0faf840b854a9dbc3fa6fe1935c7c40eb4153114"
@@ -4120,6 +4127,23 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
+"@types/react-router-dom@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.0.tgz#8baa84a7fa8c8e7797fb3650ca51f93038cb4caf"
+  integrity sha512-YCh8r71pL5p8qDwQf59IU13hFy/41fDQG/GeOI3y+xmD4o0w3vEPxE8uBe+dvOgMoDl0W1WUZsWH0pxc1mcZyQ==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.1.tgz#e0b827556abc70da3473d05daf074c839d6852aa"
+  integrity sha512-S7SlFAPb7ZKr6HHMW0kLHGcz8pyJSL0UdM+JtlWthDqKUWwr7E6oPXuHgkofDI8dKCm16slg8K8VCf5pZJquaA==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-stripe-elements@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/react-stripe-elements/-/react-stripe-elements-1.3.2.tgz#02ed6802b16366b4ebc6b85b8bd3e8befa553b79"
@@ -14004,9 +14028,6 @@ inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
 
 inherits@1:
   version "1.0.2"
@@ -14298,8 +14319,6 @@ is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
   integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
 
 is-accessor-descriptor@^1.0.0:
   version "1.0.0"
@@ -15788,8 +15807,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  dependencies:
-    jsonify "~0.0.0"
 
 json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
@@ -16046,9 +16063,6 @@ levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
   integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
 
 [email protected], lie@~3.1.0:
   version "3.1.1"
@@ -19212,10 +19226,6 @@ path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
   integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
-  dependencies:
-    graceful-fs "^4.1.2"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
 
 path-type@^2.0.0:
   version "2.0.0"
@@ -19228,8 +19238,6 @@ path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
   integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
 
 path-type@^4.0.0:
   version "4.0.0"
@@ -22084,7 +22092,7 @@ regex-cache@^0.4.2:
   dependencies:
     is-equal-shallow "^0.1.3"
 
-regex-not@^1.0.0, regex-not@^1.0.2:
+regex-not@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
   integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
@@ -25002,11 +25010,6 @@ to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
   integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
 
 toggle-selection@^1.0.6:
   version "1.0.6"