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

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.tsx

@@ -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/common/ErrorBoundary/ErrorBoundary.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/types.ts

@@ -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 {

yarn.lock

@@ -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"