Refactor | Overmind: Refactor profile/index.js

packages/app/package.json

@@ -239,6 +239,7 @@
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
+    "@types/react-router-dom": "^4.3.1",
     "@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

@@ -13,8 +13,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/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
-import { Route, Switch } from 'react-router-dom';
+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 {
@@ -15,19 +15,9 @@ import Showcase from './Showcase';
 import Sandboxes from './Sandboxes';
 import { Container, Content } from './elements';
 
-interface IProfileProps {
-  match: {
-    params: { username: string };
-    url: string;
-  };
-}
+interface IProfileProps extends RouteComponentProps<{ username: string }> {}
 
-const Profile: React.FC<IProfileProps> = ({
-  match: {
-    params: { username },
-    url,
-  },
-}) => {
+export const Profile: React.FC<IProfileProps> = ({ match }) => {
   const {
     state: {
       profile: { current: user, notFound },
@@ -36,6 +26,7 @@ const Profile: React.FC<IProfileProps> = ({
       profile: { profileMounted },
     },
   } = useOvermind();
+  const { username } = match.params;
 
   useEffect(() => {
     profileMounted({ username });
@@ -45,9 +36,7 @@ const Profile: React.FC<IProfileProps> = ({
     return <NotFound />;
   }
 
-  if (!user) {
-    return <div />;
-  }
+  if (!user) return <div />;
 
   return (
     <Container>
@@ -67,23 +56,25 @@ const Profile: React.FC<IProfileProps> = ({
       <MaxWidth width={1024}>
         <Margin horizontal={2} style={{ minHeight: '60vh' }}>
           <Switch>
-            <Route path={url} exact render={() => <Showcase />} />
+            <Route path={match.url} exact render={() => <Showcase />} />
             <Route
               path={`${profileSandboxesUrl(user.username)}/:page?`}
-              render={({ match }) => (
+              // eslint-disable-next-line
+              children={({ match: psMatch }) => (
                 <Sandboxes
                   source="currentSandboxes"
-                  page={match.params.page && +match.params.page}
+                  page={psMatch.params.page && +psMatch.params.page}
                   baseUrl={profileSandboxesUrl(user.username)}
                 />
               )}
             />
             <Route
               path={`${profileLikesUrl(user.username)}/:page?`}
-              render={({ match }) => (
+              // eslint-disable-next-line
+              children={({ match: plMatch }) => (
                 <Sandboxes
                   source="currentLikedSandboxes"
-                  page={match.params.page && +match.params.page}
+                  page={plMatch.params.page && +plMatch.params.page}
                   baseUrl={profileLikesUrl(user.username)}
                 />
               )}
@@ -93,6 +84,4 @@ const Profile: React.FC<IProfileProps> = ({
       </MaxWidth>
     </Container>
   );
-};
-
-export default Profile;
+};

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

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

@@ -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>;
   onError?: (error: Error, trace: string) => void;
-  location?: Location;
+  // location?: Location;
 }
 
 export interface IErrorBoundaryState {
   error?: Error;
   info?: ErrorInfo;
-  previousLocation?: Location;
+  previousLocation?: string;
 }