🔨 Refactored 🧠 Overmind Hacktober | /app/pages/Profile/index.js

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 {