Skip to content

Commit af98d29

Browse files
MichaelDeBoeychristianalfoni
authored and
SaraVieira
committed
🔨 Switch TemplateConfig to use useOvermind (#2563)
* 🔨 Switch TemplateConfig to use useOvermind * Fixed missing spread on edittemplate and published type * Fix types Co-authored-by: Christian Alfoni <[email protected]>
1 parent c51c922 commit af98d29

File tree

4 files changed

+127
-119
lines changed

4 files changed

+127
-119
lines changed

‎packages/app/src/app/overmind/namespaces/workspace/actions.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,9 +234,9 @@ export const deleteTemplate: AsyncAction = async ({
234234
}
235235
};
236236

237-
export const editTemplate: AsyncAction<{ template: CustomTemplate }> = async (
237+
export const editTemplate: AsyncAction<CustomTemplate> = async (
238238
{ state, actions, effects },
239-
{ template }
239+
template
240240
) => {
241241
effects.analytics.track('Template - Edited', { source: 'editor' });
242242

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,22 @@ export const Icon: FunctionComponent = () => {
2828
},
2929
} = useOvermind();
3030
const popover = usePopoverState();
31-
32-
const [selectedIcon, setSelectedIcon] = useState(customTemplate.iconUrl);
31+
const [selectedIcon, setSelectedIcon] = useState(
32+
customTemplate.iconUrl || ''
33+
);
3334

3435
const DefaultIcon = getIcon(template);
3536
const defaultColor =
36-
(customTemplate && customTemplate.color) ||
37-
templates.default(template).color();
37+
customTemplate.color || templates.default(template).color();
3838

3939
const setIcon = (key: string) => {
4040
setSelectedIcon(key);
41+
4142
popover.hide();
43+
4244
editTemplate({
43-
template: {
44-
...customTemplate,
45-
iconUrl: key,
46-
},
45+
...customTemplate,
46+
iconUrl: key,
4747
});
4848
};
4949
const TemplateIcon = Icons[selectedIcon];

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

Lines changed: 114 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,127 @@
1-
import React, { useState, useRef } from 'react';
2-
import { inject, hooksObserver } from 'app/componentConnectors';
3-
import { Link } from 'react-router-dom';
4-
import { useClickAway } from 'react-use';
5-
import { SketchPicker } from 'react-color';
6-
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
71
import Switch from '@codesandbox/common/lib/components/Switch';
2+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
83
import * as templates from '@codesandbox/common/lib/templates';
4+
import React, { FunctionComponent, useRef, useState } from 'react';
5+
import { SketchPicker } from 'react-color';
6+
import { Link } from 'react-router-dom';
7+
import { useClickAway } from 'react-use';
8+
9+
import { useOvermind } from 'app/overmind';
10+
11+
import { WorkspaceItem } from '../../WorkspaceItem';
12+
913
import {
14+
Explanation,
15+
Icon as QuestionIcon,
1016
Item,
1117
PropertyName,
1218
PropertyValue,
13-
Explanation,
14-
Icon as QuestionIcon,
1519
} from '../elements';
20+
1621
import { PickColor, PickerContainer, PublicValue } from './elements';
17-
import { WorkspaceItem } from '../../WorkspaceItem';
1822
import { Icon } from './Icon';
1923

20-
export const TemplateConfig = inject('store', 'signals')(
21-
hooksObserver(
22-
({
23-
signals: {
24-
workspace: { editTemplate },
24+
export const TemplateConfig: FunctionComponent = () => {
25+
const {
26+
actions: {
27+
workspace: { editTemplate },
28+
},
29+
state: {
30+
editor: {
31+
currentSandbox: { customTemplate, template },
2532
},
26-
store: {
27-
editor: {
28-
currentSandbox: { template, customTemplate },
29-
},
30-
},
31-
}) => {
32-
const picker = useRef(null);
33-
const defaultColor =
34-
(customTemplate && customTemplate.color) ||
35-
templates.default(template).color();
36-
const [showPicker, setShowPicker] = useState(false);
37-
const [publicTemplate, setPublic] = useState(customTemplate.published);
38-
const [selectedColor, setSelectedColor] = useState(defaultColor);
39-
const colors = Object.keys(templates)
40-
.filter(x => x !== 'default')
41-
.map(t => templates[t])
42-
.map(a => ({ color: a.color(), title: a.niceName }));
43-
44-
useClickAway(picker, () => {
45-
setShowPicker(false);
46-
editTemplate({
47-
template: {
48-
color: selectedColor,
49-
},
50-
});
51-
});
52-
53-
const togglePublic = () => {
54-
editTemplate({
55-
template: {
56-
...customTemplate,
57-
published: !publicTemplate,
58-
},
59-
});
60-
setPublic(!publicTemplate);
61-
};
62-
63-
return (
64-
<WorkspaceItem showOverflow defaultOpen title="Template">
65-
<Explanation style={{ marginTop: 0, marginBottom: '.5rem' }}>
66-
This is a template, you can find more info about templates
67-
<Link target="_blank" to="/docs/templates">
68-
{' '}
69-
here
70-
</Link>
71-
.
72-
</Explanation>
73-
<Item style={{ marginTop: '0.5rem' }}>
74-
<PropertyName>Color</PropertyName>
75-
<PropertyValue relative>
76-
<PickColor
77-
onClick={() => setShowPicker(true)}
33+
},
34+
} = useOvermind();
35+
const picker = useRef(null);
36+
const [showPicker, setShowPicker] = useState(false);
37+
const [publicTemplate, setPublic] = useState(
38+
customTemplate.published || false
39+
);
40+
const [selectedColor, setSelectedColor] = useState(
41+
() => customTemplate.color || templates.default(template).color()
42+
);
43+
44+
const colors = Object.keys(templates)
45+
.filter(x => x !== 'default')
46+
.map(t => templates[t])
47+
.map(a => ({ color: a.color(), title: a.niceName }));
48+
49+
useClickAway(picker, () => {
50+
setShowPicker(false);
51+
52+
editTemplate({
53+
...customTemplate,
54+
color: selectedColor,
55+
});
56+
});
57+
58+
const togglePublic = () => {
59+
editTemplate({
60+
...customTemplate,
61+
published: !publicTemplate,
62+
});
63+
64+
setPublic(!publicTemplate);
65+
};
66+
67+
return (
68+
<WorkspaceItem showOverflow defaultOpen title="Template">
69+
<Explanation style={{ marginTop: 0, marginBottom: '.5rem' }}>
70+
This is a template, you can find more info about templates{' '}
71+
<Link target="_blank" to="/docs/templates">
72+
here
73+
</Link>
74+
.
75+
</Explanation>
76+
77+
<Item style={{ marginTop: '0.5rem' }}>
78+
<PropertyName>Color</PropertyName>
79+
80+
<PropertyValue relative>
81+
<PickColor
82+
onClick={() => setShowPicker(true)}
83+
color={selectedColor}
84+
/>
85+
86+
{showPicker && (
87+
<PickerContainer ref={picker}>
88+
<SketchPicker
89+
disableAlpha
90+
id="color"
91+
onChangeComplete={(color: { hex: string }) =>
92+
setSelectedColor(color.hex)
93+
}
7894
color={selectedColor}
95+
presetColors={[...new Set(colors)]}
7996
/>
80-
{showPicker && (
81-
<PickerContainer ref={picker}>
82-
<SketchPicker
83-
disableAlpha
84-
id="color"
85-
onChangeComplete={(color: { hex: string }) =>
86-
setSelectedColor(color.hex)
87-
}
88-
color={selectedColor}
89-
presetColors={[...new Set(colors)]}
90-
/>
91-
</PickerContainer>
92-
)}
93-
</PropertyValue>
94-
</Item>
95-
<Item>
96-
<PropertyName>
97-
Public
98-
<Tooltip
99-
boundary="viewport"
100-
content="Whether this template will show in our upcoming templates page"
101-
>
102-
<QuestionIcon />
103-
</Tooltip>
104-
</PropertyName>
105-
<PublicValue>
106-
<Switch
107-
small
108-
onClick={togglePublic}
109-
right={publicTemplate}
110-
offMode
111-
secondary
112-
/>
113-
</PublicValue>
114-
</Item>
115-
<Icon />
116-
</WorkspaceItem>
117-
);
118-
}
119-
)
120-
);
97+
</PickerContainer>
98+
)}
99+
</PropertyValue>
100+
</Item>
101+
102+
<Item>
103+
<PropertyName>
104+
Public
105+
<Tooltip
106+
boundary="viewport"
107+
content="Whether this template will show in our upcoming templates page"
108+
>
109+
<QuestionIcon />
110+
</Tooltip>
111+
</PropertyName>
112+
113+
<PublicValue>
114+
<Switch
115+
small
116+
onClick={togglePublic}
117+
right={publicTemplate}
118+
offMode
119+
secondary
120+
/>
121+
</PublicValue>
122+
</Item>
123+
124+
<Icon />
125+
</WorkspaceItem>
126+
);
127+
};

‎packages/common/src/types/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,10 @@ export type CurrentUser = {
129129

130130
export type CustomTemplate = {
131131
color?: string;
132-
title: string;
133-
id: string;
134132
iconUrl?: string;
133+
id: string;
134+
published?: boolean;
135+
title: string;
135136
url: string | null;
136137
};
137138

0 commit comments

Comments
 (0)