Skip to content

Commit be9eeea

Browse files
kalaivanan-muthusamykalaivanan-muthusamy
committed
Overmind Refactor for \app\pages\Sandbox\Editor\Workspace\Project\Project.tsx
1 parent f3dd9a4 commit be9eeea

File tree

1 file changed

+138
-150
lines changed
  • packages/app/src/app/pages/Sandbox/Editor/Workspace/Project

1 file changed

+138
-150
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx‎

Lines changed: 138 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {
77
patronUrl,
88
sandboxUrl,
99
} from '@codesandbox/common/lib/utils/url-generator';
10-
import { hooksObserver, inject } from 'app/componentConnectors';
1110
import { PrivacyStatus } from 'app/components/PrivacyStatus';
1211
import { Stats } from 'app/pages/common/Stats';
1312
import React from 'react';
1413
import TeamIcon from 'react-icons/lib/md/people';
14+
import { useOvermind } from 'app/overmind';
1515

1616
// import AliasComponent from './Alias';
1717
import { Author } from './Author';
@@ -38,157 +38,145 @@ import { Title } from './Title';
3838

3939
interface IProjectProps {
4040
editable?: boolean;
41-
store: any;
42-
signals: any;
4341
}
4442

45-
export const Project = inject('store', 'signals')(
46-
hooksObserver(
47-
({
48-
editable,
49-
store: { editor, isPatron },
50-
signals: {
51-
workspace: { sandboxPrivacyChanged },
52-
},
53-
}: IProjectProps) => {
54-
const sandbox = editor.currentSandbox;
55-
const template = getTemplateDefinition(sandbox.template);
56-
const { isServer } = template;
57-
58-
return (
59-
<Container>
60-
<BasicInfo>
61-
<Title editable={editable} />
62-
<Description editable={editable} />
63-
{/* Disable until we also moved SSE over */}
64-
{/* <Alias editable={editable} /> */}
65-
</BasicInfo>
66-
67-
{!sandbox.team && sandbox.author && (
68-
<Author author={sandbox.author} />
69-
)}
70-
71-
{sandbox.team && (
43+
export const Project: React.FunctionComponent<IProjectProps> = ({
44+
editable,
45+
}) => {
46+
const {
47+
state: {
48+
editor: { currentSandbox: sandbox },
49+
isPatron,
50+
},
51+
actions: {
52+
workspace: { sandboxPrivacyChanged },
53+
},
54+
} = useOvermind();
55+
56+
const template = getTemplateDefinition(sandbox.template);
57+
const { isServer } = template;
58+
59+
return (
60+
<Container>
61+
<BasicInfo>
62+
<Title editable={editable} />
63+
<Description editable={editable} />
64+
{/* Disable until we also moved SSE over */}
65+
{/* <Alias editable={editable} /> */}
66+
</BasicInfo>
67+
68+
{!sandbox.team && sandbox.author && <Author author={sandbox.author} />}
69+
70+
{sandbox.team && (
71+
<Tooltip appendTo="parent" content="This sandbox is owned by this team">
72+
<Item style={{ color: 'white', display: 'flex' }}>
73+
<TeamIcon style={{ fontSize: '1.125em', marginRight: '.5rem' }} />
74+
<div>{sandbox.team.name}</div>
75+
</Item>
76+
</Tooltip>
77+
)}
78+
79+
{sandbox.git && (
80+
<Item>
81+
<GithubBadge
82+
url={githubRepoUrl(sandbox.git)}
83+
username={sandbox.git.username}
84+
repo={sandbox.git.repo}
85+
branch={sandbox.git.branch}
86+
/>
87+
</Item>
88+
)}
89+
90+
<StatsContainer>
91+
<Stats sandbox={sandbox} />
92+
</StatsContainer>
93+
94+
<Keywords editable={editable} />
95+
96+
<Group>
97+
<Item>
98+
<PropertyName>Privacy</PropertyName>
99+
<PropertyValue>
100+
<PrivacyContainer>
101+
{editable ? (
102+
<>
103+
<PrivacySelect
104+
value={sandbox.privacy}
105+
disabled={!isPatron}
106+
onChange={event =>
107+
sandboxPrivacyChanged({
108+
privacy: Number(event.target.value) as 0 | 1 | 2,
109+
})
110+
}
111+
>
112+
<option value={0}>Public</option>
113+
{isPatron && (
114+
<option value={1}>
115+
Unlisted (only available by url)
116+
</option>
117+
)}
118+
{!isServer && isPatron && (
119+
<option value={2}>Private</option>
120+
)}
121+
</PrivacySelect>
122+
</>
123+
) : (
124+
<PrivacyStatus privacy={sandbox.privacy} />
125+
)}
126+
</PrivacyContainer>
127+
</PropertyValue>
128+
</Item>
129+
130+
{!isPatron && (
131+
<Explanation style={{ marginTop: '-1rem' }}>
132+
You can change privacy of a sandbox as a{' '}
133+
<a href={patronUrl()} rel="noopener noreferrer" target="_blank">
134+
patron
135+
</a>
136+
.
137+
</Explanation>
138+
)}
139+
140+
{editable && <Frozen />}
141+
142+
{sandbox.forkedFromSandbox && (
143+
<Item>
144+
<PropertyName>Forked From</PropertyName>
145+
<PropertyValue>
146+
<TemplateStyledLink to={sandboxUrl(sandbox.forkedFromSandbox)}>
147+
{getSandboxName(sandbox.forkedFromSandbox)}
148+
</TemplateStyledLink>
149+
</PropertyValue>
150+
</Item>
151+
)}
152+
153+
<Item>
154+
<PropertyName>
155+
Environment{' '}
72156
<Tooltip
73-
appendTo="parent"
74-
content="This sandbox is owned by this team"
157+
boundary="viewport"
158+
interactive
159+
content={
160+
<>
161+
The environment determines how a sandbox is executed, you can
162+
find more info{' '}
163+
<a target="_blank" href="/docs/environment">
164+
here
165+
</a>
166+
.
167+
</>
168+
}
75169
>
76-
<Item style={{ color: 'white', display: 'flex' }}>
77-
<TeamIcon
78-
style={{ fontSize: '1.125em', marginRight: '.5rem' }}
79-
/>
80-
<div>{sandbox.team.name}</div>
81-
</Item>
170+
<Icon />
82171
</Tooltip>
83-
)}
84-
85-
{sandbox.git && (
86-
<Item>
87-
<GithubBadge
88-
url={githubRepoUrl(sandbox.git)}
89-
username={sandbox.git.username}
90-
repo={sandbox.git.repo}
91-
branch={sandbox.git.branch}
92-
/>
93-
</Item>
94-
)}
95-
96-
<StatsContainer>
97-
<Stats sandbox={sandbox} />
98-
</StatsContainer>
99-
100-
<Keywords editable={editable} />
101-
102-
<Group>
103-
<Item>
104-
<PropertyName>Privacy</PropertyName>
105-
<PropertyValue>
106-
<PrivacyContainer>
107-
{editable ? (
108-
<>
109-
<PrivacySelect
110-
value={sandbox.privacy}
111-
disabled={!isPatron}
112-
onChange={event =>
113-
sandboxPrivacyChanged({
114-
privacy: Number(event.target.value),
115-
})
116-
}
117-
>
118-
<option value={0}>Public</option>
119-
{isPatron && (
120-
<option value={1}>
121-
Unlisted (only available by url)
122-
</option>
123-
)}
124-
{!isServer && isPatron && (
125-
<option value={2}>Private</option>
126-
)}
127-
</PrivacySelect>
128-
</>
129-
) : (
130-
<PrivacyStatus privacy={sandbox.privacy} />
131-
)}
132-
</PrivacyContainer>
133-
</PropertyValue>
134-
</Item>
135-
136-
{!isPatron && (
137-
<Explanation style={{ marginTop: '-1rem' }}>
138-
You can change privacy of a sandbox as a{' '}
139-
<a href={patronUrl()} rel="noopener noreferrer" target="_blank">
140-
patron
141-
</a>
142-
.
143-
</Explanation>
144-
)}
145-
146-
{editable && <Frozen />}
147-
148-
{sandbox.forkedFromSandbox && (
149-
<Item>
150-
<PropertyName>Forked From</PropertyName>
151-
<PropertyValue>
152-
<TemplateStyledLink
153-
to={sandboxUrl(sandbox.forkedFromSandbox)}
154-
>
155-
{getSandboxName(sandbox.forkedFromSandbox)}
156-
</TemplateStyledLink>
157-
</PropertyValue>
158-
</Item>
159-
)}
160-
161-
<Item>
162-
<PropertyName>
163-
Environment{' '}
164-
<Tooltip
165-
boundary="viewport"
166-
interactive
167-
content={
168-
<>
169-
The environment determines how a sandbox is executed, you
170-
can find more info{' '}
171-
<a target="_blank" href="/docs/environment">
172-
here
173-
</a>
174-
.
175-
</>
176-
}
177-
>
178-
<Icon />
179-
</Tooltip>
180-
</PropertyName>
181-
<PropertyValue>
182-
<BundlerLink href={template.url}>
183-
{sandbox.template}
184-
</BundlerLink>
185-
</PropertyValue>
186-
</Item>
187-
</Group>
188-
189-
{editable && <SandboxConfig />}
190-
</Container>
191-
);
192-
}
193-
)
194-
);
172+
</PropertyName>
173+
<PropertyValue>
174+
<BundlerLink href={template.url}>{sandbox.template}</BundlerLink>
175+
</PropertyValue>
176+
</Item>
177+
</Group>
178+
179+
{editable && <SandboxConfig />}
180+
</Container>
181+
);
182+
};

0 commit comments

Comments
 (0)