From 70a0b1432cd55a31022d34155a347b1be54273d8 Mon Sep 17 00:00:00 2001 From: Ganesh R Date: Sun, 13 Oct 2019 22:50:35 +0530 Subject: [PATCH 1/4] Refactor `/app/pages/Profile/Sandboxes/index.js` to `/app/pages/Profile/Sandboxes/index.tsx` --- .../components/SandboxList/SandboxList.tsx | 2 +- .../src/app/pages/Profile/Sandboxes/index.js | 146 ---------------- .../src/app/pages/Profile/Sandboxes/index.tsx | 157 ++++++++++++++++++ 3 files changed, 158 insertions(+), 147 deletions(-) delete mode 100644 packages/app/src/app/pages/Profile/Sandboxes/index.js create mode 100644 packages/app/src/app/pages/Profile/Sandboxes/index.tsx diff --git a/packages/app/src/app/components/SandboxList/SandboxList.tsx b/packages/app/src/app/components/SandboxList/SandboxList.tsx index d3e44b19c93..363c1385b16 100644 --- a/packages/app/src/app/components/SandboxList/SandboxList.tsx +++ b/packages/app/src/app/components/SandboxList/SandboxList.tsx @@ -23,7 +23,7 @@ import { interface ISandboxListProps { sandboxes: SmallSandbox[]; isCurrentUser: boolean; - onDelete: () => void; + onDelete: (id: any) => void; } export const SandboxList: React.FC = ({ diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.js b/packages/app/src/app/pages/Profile/Sandboxes/index.js deleted file mode 100644 index e49197ec6e6..00000000000 --- a/packages/app/src/app/pages/Profile/Sandboxes/index.js +++ /dev/null @@ -1,146 +0,0 @@ -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { Button } from '@codesandbox/common/lib/components/Button'; -import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator'; -import { inject, observer } from 'app/componentConnectors'; -import { SandboxList } from 'app/components/SandboxList'; -import { Navigation, Notice, NoSandboxes } from './elements'; - -const PER_PAGE_COUNT = 15; - -class Sandboxes extends React.Component { - static defaultProps = { - page: 1, - }; - - getPage(source, page) { - if (!source) { - return undefined; - } - return source.get ? source.get(page) : source[page]; - } - - fetch(force = false) { - const { signals, source, store, page } = this.props; - - if (store.profile.isLoadingSandboxes) { - return; - } - - if ( - force || - !store.profile[source] || - !this.getPage(store.profile[source], page) - ) { - switch (source) { - case 'currentSandboxes': - signals.profile.sandboxesPageChanged({ page }); - break; - case 'currentLikedSandboxes': - signals.profile.likedSandboxesPageChanged({ page }); - break; - default: - } - } - } - - componentDidMount() { - this.fetch(); - } - - componentDidUpdate(prevProps) { - if ( - prevProps.page !== this.props.page || - prevProps.source !== this.props.source - ) { - this.fetch(); - } - } - - getSandboxesByPage(sandboxes, page) { - return sandboxes.get ? sandboxes.get(page) : sandboxes[page]; - } - - getLastPage = () => { - if (this.props.source === 'currentSandboxes') { - const { sandboxCount } = this.props.store.profile.current; - - return Math.ceil(sandboxCount / PER_PAGE_COUNT); - } - - const { givenLikeCount } = this.props.store.profile.current; - - return Math.ceil(givenLikeCount / PER_PAGE_COUNT); - }; - - deleteSandbox = id => { - this.props.signals.profile.deleteSandboxClicked({ id }); - }; - - render() { - const { store, source, page, baseUrl } = this.props; - const { isProfileCurrentUser } = store.profile; - const { isLoadingSandboxes } = store.profile; - const sandboxes = store.profile[source]; - - if ( - isLoadingSandboxes || - !sandboxes || - !this.getSandboxesByPage(sandboxes, page) - ) { - return
; - } - - const sandboxesPage = this.getSandboxesByPage(sandboxes, page); - - if (sandboxesPage.length === 0) - return ( - - ); - - return ( -
- {isProfileCurrentUser && ( - - You - {"'"} - re viewing your own profile, so you can see your private and - unlisted sandboxes. Others can - {"'"} - t. To manage your sandboxes you can go to your dashboard{' '} - here. - - )} - - -
- {page > 1 && ( - - )} - {this.getLastPage() !== page && ( - - )} -
- -
- ); - } -} - -export default inject('signals', 'store')(observer(Sandboxes)); diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx new file mode 100644 index 00000000000..bd1ee454bec --- /dev/null +++ b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx @@ -0,0 +1,157 @@ +import React, { useEffect, useCallback } from 'react'; +import { Link } from 'react-router-dom'; +import { Button } from '@codesandbox/common/lib/components/Button'; +import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator'; +import { useOvermind } from 'app/overmind'; +import { SandboxList } from 'app/components/SandboxList'; +import { Navigation, Notice, NoSandboxes } from './elements'; + +const PER_PAGE_COUNT = 15; + +interface iProps { + source: string; + page: number; + baseUrl: string; +} + +export const Sandboxes: React.FC = ({ source, page, baseUrl }) => { + const { + state: { profile }, + actions: { + profile: { + sandboxesPageChanged, + likedSandboxesPageChanged, + deleteSandboxClicked, + }, + }, + } = useOvermind(); + const { isProfileCurrentUser, isLoadingSandboxes } = profile; + const sandboxes = profile[source]; + + const sandboxesPageChangedCallback = useCallback(sandboxesPageChanged, [ + page, + ]); + + const likedSandboxesPageChangedCallback = useCallback( + likedSandboxesPageChanged, + [page] + ); + + useEffect(() => { + const fetch = (force = false) => { + if (isLoadingSandboxes) { + return; + } + + if (force || !sandboxes || !getPage(sandboxes, page)) { + switch (source) { + case 'currentSandboxes': + sandboxesPageChangedCallback({ page, force }); + break; + case 'currentLikedSandboxes': + likedSandboxesPageChangedCallback({ page }); + break; + default: + } + } + }; + fetch(); + }, [ + page, + source, + isLoadingSandboxes, + sandboxes, + sandboxesPageChangedCallback, + likedSandboxesPageChangedCallback, + ]); + + // eslint-disable-next-line + const getPage = (source, page) => { + if (!source) { + return undefined; + } + return source.get ? source.get(page) : source[page]; + }; + + // eslint-disable-next-line + const getSandboxesByPage = (sandboxes, page) => + sandboxes.get ? sandboxes.get(page) : sandboxes[page]; + + // Get Last Page + const getLastPage = () => { + if (source === 'currentSandboxes') { + const { sandboxCount } = profile.current; + + return Math.ceil(sandboxCount / PER_PAGE_COUNT); + } + + const { givenLikeCount } = profile.current; + + return Math.ceil(givenLikeCount / PER_PAGE_COUNT); + }; + + // Delete Sandbox + const deleteSandbox = id => { + deleteSandboxClicked({ id }); + }; + + if ( + isLoadingSandboxes || + !sandboxes || + !getSandboxesByPage(sandboxes, page) + ) { + return
; + } + + const sandboxesPage = getSandboxesByPage(sandboxes, page); + + if (sandboxesPage.length === 0) + return ; + + return ( +
+ {isProfileCurrentUser && ( + + You + {"'"} + re viewing your own profile, so you can see your private and unlisted + sandboxes. Others can + {"'"} + t. To manage your sandboxes you can go to your dashboard{' '} + here. + + )} + + +
+ {page > 1 && ( + + )} + {getLastPage() !== page && ( + + )} +
+ +
+ ); +}; + +Sandboxes.defaultProps = { + page: 1, +}; From b132d6ec023a89210a5d05401453702ec2dfc15d Mon Sep 17 00:00:00 2001 From: "R.Ganesh" Date: Mon, 21 Oct 2019 22:22:32 +0530 Subject: [PATCH 2/4] change iProps to ISandboxesProps Co-Authored-By: Drake Costa --- packages/app/src/app/pages/Profile/Sandboxes/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx index bd1ee454bec..58a7e7947f2 100644 --- a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx +++ b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx @@ -8,13 +8,13 @@ import { Navigation, Notice, NoSandboxes } from './elements'; const PER_PAGE_COUNT = 15; -interface iProps { +interface ISandboxesProps { source: string; page: number; baseUrl: string; } -export const Sandboxes: React.FC = ({ source, page, baseUrl }) => { +export const Sandboxes: React.FC = ({ source, page, baseUrl }) => { const { state: { profile }, actions: { From 5d3ba204bcaac8625cf037a1fcca0013ecd43917 Mon Sep 17 00:00:00 2001 From: Drake Costa Date: Thu, 24 Oct 2019 05:35:04 -0700 Subject: [PATCH 3/4] Cleaned up default props, made page prop optional --- packages/app/src/app/pages/Profile/Sandboxes/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx index 58a7e7947f2..e3a9ad76140 100644 --- a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx +++ b/packages/app/src/app/pages/Profile/Sandboxes/index.tsx @@ -10,11 +10,11 @@ const PER_PAGE_COUNT = 15; interface ISandboxesProps { source: string; - page: number; + page?: number; baseUrl: string; } -export const Sandboxes: React.FC = ({ source, page, baseUrl }) => { +export const Sandboxes: React.FC = ({ source, page = 1, baseUrl }) => { const { state: { profile }, actions: { @@ -151,7 +151,3 @@ export const Sandboxes: React.FC = ({ source, page, baseUrl })
); }; - -Sandboxes.defaultProps = { - page: 1, -}; From 20b1922cfeed80fef47b18d90cf61f21be96e061 Mon Sep 17 00:00:00 2001 From: Drake Costa Date: Thu, 24 Oct 2019 06:48:47 -0700 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A7=B9=20Apply=20Coding=20Conventions?= =?UTF-8?q?,=20Update=20Import=20References?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SandboxList/SandboxList.tsx | 2 +- .../{elements.js => NoSandboxes.tsx} | 28 ++----------- .../Sandboxes/{index.tsx => Sandboxes.tsx} | 40 +++++++------------ .../app/pages/Profile/Sandboxes/elements.ts | 32 +++++++++++++++ .../src/app/pages/Profile/Sandboxes/index.ts | 1 + packages/app/src/app/pages/Profile/index.js | 2 +- 6 files changed, 53 insertions(+), 52 deletions(-) rename packages/app/src/app/pages/Profile/Sandboxes/{elements.js => NoSandboxes.tsx} (52%) rename packages/app/src/app/pages/Profile/Sandboxes/{index.tsx => Sandboxes.tsx} (76%) create mode 100644 packages/app/src/app/pages/Profile/Sandboxes/elements.ts create mode 100644 packages/app/src/app/pages/Profile/Sandboxes/index.ts diff --git a/packages/app/src/app/components/SandboxList/SandboxList.tsx b/packages/app/src/app/components/SandboxList/SandboxList.tsx index 363c1385b16..4ed53eda179 100644 --- a/packages/app/src/app/components/SandboxList/SandboxList.tsx +++ b/packages/app/src/app/components/SandboxList/SandboxList.tsx @@ -23,7 +23,7 @@ import { interface ISandboxListProps { sandboxes: SmallSandbox[]; isCurrentUser: boolean; - onDelete: (id: any) => void; + onDelete: (id: string) => void; } export const SandboxList: React.FC = ({ diff --git a/packages/app/src/app/pages/Profile/Sandboxes/elements.js b/packages/app/src/app/pages/Profile/Sandboxes/NoSandboxes.tsx similarity index 52% rename from packages/app/src/app/pages/Profile/Sandboxes/elements.js rename to packages/app/src/app/pages/Profile/Sandboxes/NoSandboxes.tsx index 5e24bc59f88..18056cce410 100644 --- a/packages/app/src/app/pages/Profile/Sandboxes/elements.js +++ b/packages/app/src/app/pages/Profile/Sandboxes/NoSandboxes.tsx @@ -1,35 +1,13 @@ -import * as React from 'react'; -import styled from 'styled-components'; - +import React from 'react'; import Centered from '@codesandbox/common/lib/components/flex/Centered'; import Margin from '@codesandbox/common/lib/components/spacing/Margin'; +import { ErrorTitle } from './elements'; -export const Navigation = styled.div` - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - padding-bottom: 2rem; -`; - -export const Notice = styled.div` - color: rgba(255, 255, 255, 0.5); - padding: 2rem 0; - padding-bottom: 0; - - margin-bottom: 2rem; -`; - -const ErrorTitle = styled.div` - font-size: 1.25rem; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; -`; const prefix = { currentSandboxes: ["You don't have", "This user doesn't have"], currentLikedSandboxes: ["You haven't liked", "This user didn't like"], }; + export const NoSandboxes = ({ source, isCurrentUser }) => ( diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx b/packages/app/src/app/pages/Profile/Sandboxes/Sandboxes.tsx similarity index 76% rename from packages/app/src/app/pages/Profile/Sandboxes/index.tsx rename to packages/app/src/app/pages/Profile/Sandboxes/Sandboxes.tsx index e3a9ad76140..6c0b8e457b0 100644 --- a/packages/app/src/app/pages/Profile/Sandboxes/index.tsx +++ b/packages/app/src/app/pages/Profile/Sandboxes/Sandboxes.tsx @@ -1,10 +1,10 @@ import React, { useEffect, useCallback } from 'react'; import { Link } from 'react-router-dom'; -import { Button } from '@codesandbox/common/lib/components/Button'; import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator'; import { useOvermind } from 'app/overmind'; import { SandboxList } from 'app/components/SandboxList'; -import { Navigation, Notice, NoSandboxes } from './elements'; +import { NoSandboxes } from './NoSandboxes'; +import { Navigation, NavButton, Notice } from './elements'; const PER_PAGE_COUNT = 15; @@ -14,7 +14,11 @@ interface ISandboxesProps { baseUrl: string; } -export const Sandboxes: React.FC = ({ source, page = 1, baseUrl }) => { +export const Sandboxes: React.FC = ({ + source, + page = 1, + baseUrl, +}) => { const { state: { profile }, actions: { @@ -65,17 +69,15 @@ export const Sandboxes: React.FC = ({ source, page = 1, baseUrl likedSandboxesPageChangedCallback, ]); - // eslint-disable-next-line - const getPage = (source, page) => { - if (!source) { + const getPage = (sourcePage: any, pageNumber: number) => { + if (!sourcePage) { return undefined; } - return source.get ? source.get(page) : source[page]; + return sourcePage.get ? sourcePage.get(pageNumber) : sourcePage[pageNumber]; }; - // eslint-disable-next-line - const getSandboxesByPage = (sandboxes, page) => - sandboxes.get ? sandboxes.get(page) : sandboxes[page]; + const getSandboxesByPage = (allSandboxes: any, pageNumber: number) => + allSandboxes.get ? allSandboxes.get(pageNumber) : allSandboxes[pageNumber]; // Get Last Page const getLastPage = () => { @@ -91,7 +93,7 @@ export const Sandboxes: React.FC = ({ source, page = 1, baseUrl }; // Delete Sandbox - const deleteSandbox = id => { + const deleteSandbox = (id: string) => { deleteSandboxClicked({ id }); }; @@ -129,22 +131,10 @@ export const Sandboxes: React.FC = ({ source, page = 1, baseUrl
{page > 1 && ( - + {'<'} )} {getLastPage() !== page && ( - + {'>'} )}
diff --git a/packages/app/src/app/pages/Profile/Sandboxes/elements.ts b/packages/app/src/app/pages/Profile/Sandboxes/elements.ts new file mode 100644 index 00000000000..989f176c8a6 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Sandboxes/elements.ts @@ -0,0 +1,32 @@ +import styled, { css } from 'styled-components'; +import { Button } from '@codesandbox/common/lib/components/Button'; + +export const Navigation = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding-bottom: 2rem; +`; + +export const NavButton = styled(Button).attrs({ + small: true, +})` + margin: 0 0.5rem; +`; + +export const Notice = styled.div` + padding: 2rem 0; + padding-bottom: 0; + margin-bottom: 2rem; + color: rgba(255, 255, 255, 0.5); +`; + +export const ErrorTitle = styled.div` + ${({ theme }) => css` + color: ${theme.light + ? css`rgba(0, 0, 0, 0.7)` + : css`rgba(255, 255, 255, 0.7)`}; + font-size: 1.25rem; + `} +`; diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.ts b/packages/app/src/app/pages/Profile/Sandboxes/index.ts new file mode 100644 index 00000000000..ac8837a20a7 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Sandboxes/index.ts @@ -0,0 +1 @@ +export { Sandboxes } from './Sandboxes'; diff --git a/packages/app/src/app/pages/Profile/index.js b/packages/app/src/app/pages/Profile/index.js index 3bc831a7ff3..f1064608b85 100644 --- a/packages/app/src/app/pages/Profile/index.js +++ b/packages/app/src/app/pages/Profile/index.js @@ -13,7 +13,7 @@ import { NotFound } from 'app/pages/common/NotFound'; import Header from './Header'; import Navigation from './Navigation'; import Showcase from './Showcase'; -import Sandboxes from './Sandboxes'; +import { Sandboxes } from './Sandboxes'; import { Container, Content } from './elements'; type Props = {