From b70036a86915db6420540033873a57ed5261f8d5 Mon Sep 17 00:00:00 2001 From: Malachi Willey Date: Thu, 10 Oct 2019 20:45:44 -0500 Subject: [PATCH] Refactor profile page component to use TS/hooks/Overmind. --- packages/app/package.json | 2 + .../app/src/app/components/ConfirmLink.tsx | 1 + .../Content/routes/Templates/Templates.tsx | 2 +- packages/app/src/app/pages/Patron/index.tsx | 2 +- packages/app/src/app/pages/Profile/index.js | 105 ------------------ packages/app/src/app/pages/Profile/index.tsx | 98 ++++++++++++++++ .../common/ErrorBoundary/ErrorBoundary.tsx | 6 +- .../app/pages/common/ErrorBoundary/types.ts | 6 +- yarn.lock | 87 +++++---------- 9 files changed, 135 insertions(+), 174 deletions(-) delete mode 100644 packages/app/src/app/pages/Profile/index.js create mode 100644 packages/app/src/app/pages/Profile/index.tsx diff --git a/packages/app/package.json b/packages/app/package.json index b1bfcd08d43..91b1dca1d2c 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/app/components/ConfirmLink.tsx b/packages/app/src/app/components/ConfirmLink.tsx index 268c233fa9f..baa79af26e4 100644 --- a/packages/app/src/app/components/ConfirmLink.tsx +++ b/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 = ({ diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx index b61ed73c705..2ef4c7f634d 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx +++ b/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'; diff --git a/packages/app/src/app/pages/Patron/index.tsx b/packages/app/src/app/pages/Patron/index.tsx index a36c32bd1b5..68450ae689e 100644 --- a/packages/app/src/app/pages/Patron/index.tsx +++ b/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'; diff --git a/packages/app/src/app/pages/Profile/index.js b/packages/app/src/app/pages/Profile/index.js deleted file mode 100644 index 3bc831a7ff3..00000000000 --- a/packages/app/src/app/pages/Profile/index.js +++ /dev/null @@ -1,105 +0,0 @@ -/* @flow */ -import React 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 { inject, observer } from 'app/componentConnectors'; -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'; - -type Props = { - match: { - params: { username: string }, - url: string, - }, - signals: any, - store: any, -}; - -class Profile extends React.Component { - componentDidMount() { - const { username } = this.props.match.params; - - this.props.signals.profile.profileMounted({ username }); - } - - componentDidUpdate(prevProps) { - const prevUsername = prevProps.match.params.username; - const { username } = this.props.match.params; - - if (prevUsername !== username) { - this.props.signals.profile.profileMounted({ username }); - } - } - - render() { - const { store, match } = this.props; - - if (store.profile.notFound) { - return ; - } - - if (!store.profile.current) return
; - - const user = store.profile.current; - - return ( - - - {user.name || user.username} - CodeSandbox - -
- - - - - - - - - } /> - ( - - )} - /> - ( - - )} - /> - - - - - ); - } -} - -// eslint-disable-next-line import/no-default-export -export default inject('signals', 'store')(observer(Profile)); diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx new file mode 100644 index 00000000000..8147c33f56a --- /dev/null +++ b/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 = ({ + match: { + params: { username }, + url, + }, +}) => { + const { + state: { + profile: { current: user, notFound }, + }, + actions: { + profile: { profileMounted }, + }, + } = useOvermind(); + + useEffect(() => { + profileMounted({ username }); + }, [profileMounted, username]); + + if (notFound) { + return ; + } + + if (!user) { + return
; + } + + return ( + + + {user.name || user.username} - CodeSandbox + +
+ + + + + + + + + } /> + ( + + )} + /> + ( + + )} + /> + + + + + ); +}; + +export default Profile; diff --git a/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx b/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx index e661b63f436..ee2a99f70e6 100644 --- a/packages/app/src/app/pages/common/ErrorBoundary/ErrorBoundary.tsx +++ b/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 ? ( diff --git a/packages/app/src/app/pages/common/ErrorBoundary/types.ts b/packages/app/src/app/pages/common/ErrorBoundary/types.ts index 3f227e50774..1488bdc9b1f 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 { 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; + FallbackComponent?: React.ComponentType; onError?: (error: Error, trace: string) => void; - location?: Location; } export interface IErrorBoundaryState { diff --git a/yarn.lock b/yarn.lock index fc15515c206..33e4887f342 100644 --- a/yarn.lock +++ b/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" @@ -5028,7 +5052,7 @@ ansi-escapes@^3.0.0, ansi-escapes@^3.2.0: resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b" integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ== -ansi-escapes@^4.1.0, ansi-escapes@^4.2.1: +ansi-escapes@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228" integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q== @@ -7551,13 +7575,6 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0: dependencies: restore-cursor "^2.0.0" -cli-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307" - integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw== - dependencies: - restore-cursor "^3.1.0" - cli-spinners@^1.0.0, cli-spinners@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a" @@ -9853,11 +9870,6 @@ emoji-regex@^7.0.1, emoji-regex@^7.0.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA== -emoji-regex@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" - integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== - emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" @@ -14021,9 +14033,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" @@ -14315,8 +14324,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" @@ -14530,11 +14537,6 @@ is-fullwidth-code-point@^2.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8= -is-fullwidth-code-point@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" - integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== - is-function@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" @@ -15810,8 +15812,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" @@ -16068,9 +16068,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" lie@3.1.1, lie@~3.1.0: version "3.1.1" @@ -16603,7 +16600,7 @@ lodash@4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" -"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: +"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -17615,7 +17612,7 @@ mute-stream@0.0.7: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab" integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s= -mute-stream@0.0.8, mute-stream@~0.0.4: +mute-stream@~0.0.4: version "0.0.8" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== @@ -19234,10 +19231,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" @@ -19250,8 +19243,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" @@ -22106,7 +22097,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== @@ -22588,14 +22579,6 @@ restore-cursor@^2.0.0: onetime "^2.0.0" signal-exit "^3.0.2" -restore-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e" - integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA== - dependencies: - onetime "^5.1.0" - signal-exit "^3.0.2" - ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" @@ -24217,15 +24200,6 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string-width@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff" - integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^5.2.0" - string.prototype.matchall@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.1.tgz#5a9e0b64bcbeb336aa4814820237c2006985646d" @@ -25041,11 +25015,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"