refactor profile page

Author: NileshPatel17

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

@@ -12,8 +12,8 @@ export const ConfirmLink: React.FC<IConfirmLinkProps> = ({
   ...props
 }) => (
   <Link
+    to=""
     onClick={(e: React.MouseEvent) => {
-      // eslint-disable-next-line
       if (enabled && !confirm(message)) {
         e.preventDefault();
         e.stopPropagation();

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

@@ -0,0 +1,88 @@
+/* @flow */
+import React, { useEffect } from 'react';
+import Helmet from 'react-helmet';
+import { Route, Switch, RouteComponentProps } 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 { useOvermind } from 'app/overmind';
+import { NotFound } from 'app/pages/common/NotFound';
+import Header from './Header';
+import Navigation from './Navigation';
+import Showcase from './Showcase';
+import Sandboxes from './Sandboxes';
+import { Container, Content } from './elements';
+
+interface IProfileProps extends RouteComponentProps<{ username: string }> {}
+
+export const Profile: React.FC<IProfileProps> = ({ match }) => {
+  const {
+    state: {
+      profile: { current: user, notFound },
+    },
+    actions: {
+      profile: { profileMounted },
+    },
+  } = useOvermind();
+  const { username } = match.params;
+
+  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={match.url} exact render={() => <Showcase />} />
+            <Route
+              path={`${profileSandboxesUrl(user.username)}/:page?`}
+              // eslint-disable-next-line
+              children={({ match: psMatch }) => (
+                <Sandboxes
+                  source="currentSandboxes"
+                  page={psMatch.params.page && +psMatch.params.page}
+                  baseUrl={profileSandboxesUrl(user.username)}
+                />
+              )}
+            />
+            <Route
+              path={`${profileLikesUrl(user.username)}/:page?`}
+              // eslint-disable-next-line
+              children={({ match: plMatch }) => (
+                <Sandboxes
+                  source="currentLikedSandboxes"
+                  page={plMatch.params.page && +plMatch.params.page}
+                  baseUrl={profileLikesUrl(user.username)}
+                />
+              )}
+            />
+          </Switch>
+        </Margin>
+      </MaxWidth>
+    </Container>
+  );
+};

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

@@ -18,7 +18,7 @@ export class ErrorBoundary extends Component<
     props: IErrorBoundaryProps,
     state: IErrorBoundaryState
   ) {
-    if (props.location !== state.previousLocation) {
+    if (state.previousLocation && props.location.pathname !== state.previousLocation) {
       return {
         error: null,
         info: null,

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Location } from 'history';
+// import { Location } from 'history';
+import { RouteComponentProps } from 'react-router-dom';
 
 export type ErrorInfo = {
   componentStack: string;
@@ -10,15 +11,15 @@ 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;
+  // location?: Location;
 }
 
 export interface IErrorBoundaryState {
   error?: Error;
   info?: ErrorInfo;
-  previousLocation?: Location;
+  previousLocation?: string;
 }