Skip to content

Commit 60c9a8e

Browse files
MichaelDeBoeyMichaelDeBoey
committed
Extract Privacy
1 parent 5020497 commit 60c9a8e

File tree

4 files changed

+89
-71
lines changed

4 files changed

+89
-71
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/elements.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const PrivacyContainer = styled.span`
4+
${({ theme }) => css`
5+
margin-bottom: 1rem;
6+
color: ${theme.templateColor};
7+
font-size: 0.875rem;
8+
`}
9+
`;
10+
11+
export const PrivacySelect = styled.select`
12+
${({ theme }) => css`
13+
width: 100%;
14+
/* Same size as other items */
15+
height: 20px;
16+
border: none;
17+
border-radius: 4px;
18+
background-color: ${theme[`dropdown.background`] || 'rgba(0, 0, 0, 0.3)'};
19+
box-sizing: border-box;
20+
color: ${theme[`dropdown.foreground`] ||
21+
(theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)')};
22+
23+
&:disabled {
24+
opacity: 0.5;
25+
}
26+
`}
27+
`;

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { ChangeEvent, FunctionComponent } from 'react';
2+
3+
import { PrivacyStatus } from 'app/components/PrivacyStatus';
4+
import { useOvermind } from 'app/overmind';
5+
6+
import { Item, PropertyName, PropertyValue } from '../elements';
7+
8+
import { PrivacyContainer, PrivacySelect } from './elements';
9+
10+
type Props = {
11+
editable: boolean;
12+
};
13+
export const Privacy: FunctionComponent<Props> = ({ editable }) => {
14+
const {
15+
actions: {
16+
workspace: { sandboxPrivacyChanged },
17+
},
18+
state: {
19+
editor: {
20+
currentSandbox: { privacy },
21+
},
22+
isPatron,
23+
},
24+
} = useOvermind();
25+
26+
return (
27+
<Item>
28+
<PropertyName>Privacy</PropertyName>
29+
30+
<PropertyValue>
31+
<PrivacyContainer>
32+
{editable ? (
33+
<PrivacySelect
34+
disabled={!isPatron}
35+
onChange={({
36+
target: { value },
37+
}: ChangeEvent<HTMLSelectElement>) =>
38+
sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
39+
}
40+
value={privacy}
41+
>
42+
<option value={0}>Public</option>
43+
44+
{isPatron && (
45+
<option value={1}>Unlisted (only available by url)</option>
46+
)}
47+
48+
{isPatron && <option value={2}>Private</option>}
49+
</PrivacySelect>
50+
) : (
51+
<PrivacyStatus privacy={privacy} />
52+
)}
53+
</PrivacyContainer>
54+
</PropertyValue>
55+
</Item>
56+
);
57+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,6 @@ export const PropertyValue = styled.span<{ relative?: boolean }>`
4747
`}
4848
`;
4949

50-
export const PrivacySelect = styled.select`
51-
${({ theme }) => css`
52-
width: 100%;
53-
/* Same size as other items */
54-
height: 20px;
55-
border: none;
56-
border-radius: 4px;
57-
background-color: ${theme[`dropdown.background`] ||
58-
css`rgba(0, 0, 0, 0.3)`};
59-
box-sizing: border-box;
60-
color: ${theme[`dropdown.foreground`] ||
61-
(theme.light ? css`rgba(0, 0, 0, 0.8)` : css`rgba(255, 255, 255, 0.8)`)};
62-
63-
&:disabled {
64-
opacity: 0.5;
65-
}
66-
`}
67-
`;
68-
6950
export const StatsContainer = styled(Item)`
7051
${({ theme }) => css`
7152
height: 1.5rem;
@@ -78,14 +59,6 @@ export const StatsContainer = styled(Item)`
7859
`}
7960
`;
8061

81-
export const PrivacyContainer = styled.span`
82-
${({ theme }) => css`
83-
margin-bottom: 1rem;
84-
color: ${theme.templateColor};
85-
font-size: 0.875rem;
86-
`}
87-
`;
88-
8962
export const EditPen = styled(EditPenIcon)`
9063
${({ theme }) => css`
9164
margin-left: 0.5rem;

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

Lines changed: 5 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
patronUrl,
66
sandboxUrl,
77
} from '@codesandbox/common/lib/utils/url-generator';
8-
import React, { ChangeEvent, FunctionComponent } from 'react';
9-
import { PrivacyStatus } from 'app/components/PrivacyStatus';
8+
import React, { FunctionComponent } from 'react';
9+
1010
import { useOvermind } from 'app/overmind';
1111
import { Stats } from 'app/pages/common/Stats';
1212

@@ -21,8 +21,6 @@ import {
2121
Group,
2222
Icon,
2323
Item,
24-
PrivacyContainer,
25-
PrivacySelect,
2624
PropertyName,
2725
PropertyValue,
2826
StatsContainer,
@@ -31,6 +29,7 @@ import {
3129
import { Frozen } from './Frozen';
3230
import { Git } from './Git';
3331
import { Keywords } from './Keywords';
32+
import { Privacy } from './Privacy';
3433
import { SandboxConfig } from './SandboxConfig';
3534
import { Team } from './Team';
3635
import { Title } from './Title';
@@ -40,20 +39,10 @@ type Props = {
4039
};
4140
export const Project: FunctionComponent<Props> = ({ editable = false }) => {
4241
const {
43-
actions: {
44-
workspace: { sandboxPrivacyChanged },
45-
},
4642
state: {
4743
editor: {
4844
currentSandbox,
49-
currentSandbox: {
50-
author,
51-
forkedFromSandbox,
52-
git,
53-
privacy,
54-
team,
55-
template,
56-
},
45+
currentSandbox: { author, forkedFromSandbox, git, team, template },
5746
},
5847
isPatron,
5948
},
@@ -84,35 +73,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
8473
<Keywords editable={editable} />
8574

8675
<Group>
87-
<Item>
88-
<PropertyName>Privacy</PropertyName>
89-
90-
<PropertyValue>
91-
<PrivacyContainer>
92-
{editable ? (
93-
<PrivacySelect
94-
disabled={!isPatron}
95-
onChange={({
96-
target: { value },
97-
}: ChangeEvent<HTMLSelectElement>) =>
98-
sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
99-
}
100-
value={privacy}
101-
>
102-
<option value={0}>Public</option>
103-
104-
{isPatron && (
105-
<option value={1}>Unlisted (only available by url)</option>
106-
)}
107-
108-
{isPatron && <option value={2}>Private</option>}
109-
</PrivacySelect>
110-
) : (
111-
<PrivacyStatus privacy={privacy} />
112-
)}
113-
</PrivacyContainer>
114-
</PropertyValue>
115-
</Item>
76+
<Privacy editable={editable} />
11677

11778
{!isPatron && (
11879
<Explanation style={{ marginTop: '-1rem' }}>

0 commit comments

Comments
 (0)