From be9eeeadc2f98d1b14dce0c965cad62bcc7881b8 Mon Sep 17 00:00:00 2001 From: Kalaivanan Date: Tue, 15 Oct 2019 00:59:32 +0530 Subject: [PATCH] Overmind Refactor for \app\pages\Sandbox\Editor\Workspace\Project\Project.tsx --- .../Editor/Workspace/Project/Project.tsx | 288 +++++++++--------- 1 file changed, 138 insertions(+), 150 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx index 2b4cf0662c9..5de4dff829b 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx @@ -7,11 +7,11 @@ import { patronUrl, sandboxUrl, } from '@codesandbox/common/lib/utils/url-generator'; -import { hooksObserver, inject } from 'app/componentConnectors'; import { PrivacyStatus } from 'app/components/PrivacyStatus'; import { Stats } from 'app/pages/common/Stats'; import React from 'react'; import TeamIcon from 'react-icons/lib/md/people'; +import { useOvermind } from 'app/overmind'; // import AliasComponent from './Alias'; import { Author } from './Author'; @@ -38,157 +38,145 @@ import { Title } from './Title'; interface IProjectProps { editable?: boolean; - store: any; - signals: any; } -export const Project = inject('store', 'signals')( - hooksObserver( - ({ - editable, - store: { editor, isPatron }, - signals: { - workspace: { sandboxPrivacyChanged }, - }, - }: IProjectProps) => { - const sandbox = editor.currentSandbox; - const template = getTemplateDefinition(sandbox.template); - const { isServer } = template; - - return ( - - - - <Description editable={editable} /> - {/* Disable until we also moved SSE over */} - {/* <Alias editable={editable} /> */} - </BasicInfo> - - {!sandbox.team && sandbox.author && ( - <Author author={sandbox.author} /> - )} - - {sandbox.team && ( +export const Project: React.FunctionComponent<IProjectProps> = ({ + editable, +}) => { + const { + state: { + editor: { currentSandbox: sandbox }, + isPatron, + }, + actions: { + workspace: { sandboxPrivacyChanged }, + }, + } = useOvermind(); + + const template = getTemplateDefinition(sandbox.template); + const { isServer } = template; + + return ( + <Container> + <BasicInfo> + <Title editable={editable} /> + <Description editable={editable} /> + {/* Disable until we also moved SSE over */} + {/* <Alias editable={editable} /> */} + </BasicInfo> + + {!sandbox.team && sandbox.author && <Author author={sandbox.author} />} + + {sandbox.team && ( + <Tooltip appendTo="parent" content="This sandbox is owned by this team"> + <Item style={{ color: 'white', display: 'flex' }}> + <TeamIcon style={{ fontSize: '1.125em', marginRight: '.5rem' }} /> + <div>{sandbox.team.name}</div> + </Item> + </Tooltip> + )} + + {sandbox.git && ( + <Item> + <GithubBadge + url={githubRepoUrl(sandbox.git)} + username={sandbox.git.username} + repo={sandbox.git.repo} + branch={sandbox.git.branch} + /> + </Item> + )} + + <StatsContainer> + <Stats sandbox={sandbox} /> + </StatsContainer> + + <Keywords editable={editable} /> + + <Group> + <Item> + <PropertyName>Privacy</PropertyName> + <PropertyValue> + <PrivacyContainer> + {editable ? ( + <> + <PrivacySelect + value={sandbox.privacy} + disabled={!isPatron} + onChange={event => + sandboxPrivacyChanged({ + privacy: Number(event.target.value) as 0 | 1 | 2, + }) + } + > + <option value={0}>Public</option> + {isPatron && ( + <option value={1}> + Unlisted (only available by url) + </option> + )} + {!isServer && isPatron && ( + <option value={2}>Private</option> + )} + </PrivacySelect> + </> + ) : ( + <PrivacyStatus privacy={sandbox.privacy} /> + )} + </PrivacyContainer> + </PropertyValue> + </Item> + + {!isPatron && ( + <Explanation style={{ marginTop: '-1rem' }}> + You can change privacy of a sandbox as a{' '} + <a href={patronUrl()} rel="noopener noreferrer" target="_blank"> + patron + </a> + . + </Explanation> + )} + + {editable && <Frozen />} + + {sandbox.forkedFromSandbox && ( + <Item> + <PropertyName>Forked From</PropertyName> + <PropertyValue> + <TemplateStyledLink to={sandboxUrl(sandbox.forkedFromSandbox)}> + {getSandboxName(sandbox.forkedFromSandbox)} + </TemplateStyledLink> + </PropertyValue> + </Item> + )} + + <Item> + <PropertyName> + Environment{' '} <Tooltip - appendTo="parent" - content="This sandbox is owned by this team" + boundary="viewport" + interactive + content={ + <> + The environment determines how a sandbox is executed, you can + find more info{' '} + <a target="_blank" href="/docs/environment"> + here + </a> + . + </> + } > - <Item style={{ color: 'white', display: 'flex' }}> - <TeamIcon - style={{ fontSize: '1.125em', marginRight: '.5rem' }} - /> - <div>{sandbox.team.name}</div> - </Item> + <Icon /> </Tooltip> - )} - - {sandbox.git && ( - <Item> - <GithubBadge - url={githubRepoUrl(sandbox.git)} - username={sandbox.git.username} - repo={sandbox.git.repo} - branch={sandbox.git.branch} - /> - </Item> - )} - - <StatsContainer> - <Stats sandbox={sandbox} /> - </StatsContainer> - - <Keywords editable={editable} /> - - <Group> - <Item> - <PropertyName>Privacy</PropertyName> - <PropertyValue> - <PrivacyContainer> - {editable ? ( - <> - <PrivacySelect - value={sandbox.privacy} - disabled={!isPatron} - onChange={event => - sandboxPrivacyChanged({ - privacy: Number(event.target.value), - }) - } - > - <option value={0}>Public</option> - {isPatron && ( - <option value={1}> - Unlisted (only available by url) - </option> - )} - {!isServer && isPatron && ( - <option value={2}>Private</option> - )} - </PrivacySelect> - </> - ) : ( - <PrivacyStatus privacy={sandbox.privacy} /> - )} - </PrivacyContainer> - </PropertyValue> - </Item> - - {!isPatron && ( - <Explanation style={{ marginTop: '-1rem' }}> - You can change privacy of a sandbox as a{' '} - <a href={patronUrl()} rel="noopener noreferrer" target="_blank"> - patron - </a> - . - </Explanation> - )} - - {editable && <Frozen />} - - {sandbox.forkedFromSandbox && ( - <Item> - <PropertyName>Forked From</PropertyName> - <PropertyValue> - <TemplateStyledLink - to={sandboxUrl(sandbox.forkedFromSandbox)} - > - {getSandboxName(sandbox.forkedFromSandbox)} - </TemplateStyledLink> - </PropertyValue> - </Item> - )} - - <Item> - <PropertyName> - Environment{' '} - <Tooltip - boundary="viewport" - interactive - content={ - <> - The environment determines how a sandbox is executed, you - can find more info{' '} - <a target="_blank" href="/docs/environment"> - here - </a> - . - </> - } - > - <Icon /> - </Tooltip> - </PropertyName> - <PropertyValue> - <BundlerLink href={template.url}> - {sandbox.template} - </BundlerLink> - </PropertyValue> - </Item> - </Group> - - {editable && <SandboxConfig />} - </Container> - ); - } - ) -); + </PropertyName> + <PropertyValue> + <BundlerLink href={template.url}>{sandbox.template}</BundlerLink> + </PropertyValue> + </Item> + </Group> + + {editable && <SandboxConfig />} + </Container> + ); +};