From b3bb9e2eb0773b550793d8907655a1fd1085be10 Mon Sep 17 00:00:00 2001 From: Nilesh Patel Date: Wed, 16 Oct 2019 22:39:29 +0530 Subject: [PATCH 1/2] added type definition of react-router-dom --- packages/app/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/app/package.json b/packages/app/package.json index fd64eeef5fe..72797f0531a 100644 --- a/packages/app/package.json +++ b/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", From c160a7e8312fc746b8c1f41569eaeb69aeb4eb04 Mon Sep 17 00:00:00 2001 From: Nilesh Patel Date: Wed, 16 Oct 2019 22:50:17 +0530 Subject: [PATCH 2/2] refactor profile page --- .../app/src/app/components/ConfirmLink.tsx | 2 +- .../Profile/{elements.js => elements.ts} | 0 packages/app/src/app/pages/Profile/index.tsx | 39 +++++++------------ .../common/ErrorBoundary/ErrorBoundary.tsx | 2 +- .../app/pages/common/ErrorBoundary/types.ts | 9 +++-- 5 files changed, 21 insertions(+), 31 deletions(-) rename packages/app/src/app/pages/Profile/{elements.js => elements.ts} (100%) diff --git a/packages/app/src/app/components/ConfirmLink.tsx b/packages/app/src/app/components/ConfirmLink.tsx index baa79af26e4..ef334d22268 100644 --- a/packages/app/src/app/components/ConfirmLink.tsx +++ b/packages/app/src/app/components/ConfirmLink.tsx @@ -13,8 +13,8 @@ export const ConfirmLink: React.FC = ({ ...props }) => ( { - // eslint-disable-next-line if (enabled && !confirm(message)) { e.preventDefault(); e.stopPropagation(); diff --git a/packages/app/src/app/pages/Profile/elements.js b/packages/app/src/app/pages/Profile/elements.ts similarity index 100% rename from packages/app/src/app/pages/Profile/elements.js rename to packages/app/src/app/pages/Profile/elements.ts diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx index 8147c33f56a..87ae39ea443 100644 --- a/packages/app/src/app/pages/Profile/index.tsx +++ b/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 = ({ - match: { - params: { username }, - url, - }, -}) => { +export const Profile: React.FC = ({ match }) => { const { state: { profile: { current: user, notFound }, @@ -36,6 +26,7 @@ const Profile: React.FC = ({ profile: { profileMounted }, }, } = useOvermind(); + const { username } = match.params; useEffect(() => { profileMounted({ username }); @@ -45,9 +36,7 @@ const Profile: React.FC = ({ return ; } - if (!user) { - return
; - } + if (!user) return
; return ( @@ -67,23 +56,25 @@ const Profile: React.FC = ({ - } /> + } /> ( + // eslint-disable-next-line + children={({ match: psMatch }) => ( )} /> ( + // eslint-disable-next-line + children={({ match: plMatch }) => ( )} @@ -93,6 +84,4 @@ const Profile: React.FC = ({ ); -}; - -export default Profile; +}; \ No newline at end of file diff --git a/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx b/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx index ee2a99f70e6..3f84883f455 100644 --- a/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx +++ b/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, diff --git a/packages/app/src/app/pages/common/ErrorBoundary/types.ts b/packages/app/src/app/pages/common/ErrorBoundary/types.ts index 11d632758e5..33807094a05 100644 --- a/packages/app/src/app/pages/common/ErrorBoundary/types.ts +++ b/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; onError?: (error: Error, trace: string) => void; - location?: Location; + // location?: Location; } export interface IErrorBoundaryState { error?: Error; info?: ErrorInfo; - previousLocation?: Location; + previousLocation?: string; }