Skip to content

Commit 7d2f267

Browse files
MichaelDeBoeyCompuIves
MichaelDeBoey
authored and
CompuIves
committed
🔨 Switch SandboxName to use useOvermind (codesandbox#2544)
* 🔨 Switch SandboxName to use useOvermind * Fix types * Fix types * Fix types
1 parent 1e9da33 commit 7d2f267

File tree

2 files changed

+144
-138
lines changed

2 files changed

+144
-138
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx‎

Lines changed: 137 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@ import Tooltip from '@codesandbox/common/lib/components/Tooltip';
22
import track from '@codesandbox/common/lib/utils/analytics';
33
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
44
import { ESC } from '@codesandbox/common/lib/utils/keycodes';
5-
import { inject, hooksObserver } from 'app/componentConnectors';
65
import { basename } from 'path';
7-
import React, { useState } from 'react';
6+
import React, {
7+
ChangeEvent,
8+
FunctionComponent,
9+
KeyboardEvent,
10+
useState,
11+
} from 'react';
812
import { Link } from 'react-router-dom';
913
import { useSpring, animated } from 'react-spring';
1014

15+
import { useOvermind } from 'app/overmind';
16+
1117
import {
1218
Container,
1319
Folder,
@@ -19,136 +25,133 @@ import {
1925
Main,
2026
} from './elements';
2127

22-
export const SandboxName = inject('store', 'signals')(
23-
hooksObserver(
24-
({
25-
store: {
26-
isLoggedIn,
27-
editor: { currentSandbox },
28-
},
29-
signals: {
30-
modalOpened,
31-
workspace: { sandboxInfoUpdated, valueChanged },
32-
},
33-
}) => {
34-
const [updatingName, setUpdatingName] = useState(false);
35-
const [name, setName] = useState('');
36-
37-
const sandboxName = getSandboxName(currentSandbox) || 'Untitled';
38-
39-
const updateSandboxInfo = () => {
40-
sandboxInfoUpdated();
41-
setUpdatingName(false);
42-
};
43-
44-
const submitNameChange = (e: React.ChangeEvent<HTMLFormElement>) => {
45-
e.preventDefault();
46-
updateSandboxInfo();
47-
track('Change Sandbox Name From Header');
48-
};
49-
50-
const handleNameClick = () => {
51-
setUpdatingName(true);
52-
setName(sandboxName);
53-
};
54-
55-
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
56-
if (e.keyCode === ESC) {
57-
updateSandboxInfo();
58-
}
59-
};
60-
61-
const handleBlur = () => {
62-
updateSandboxInfo();
63-
};
64-
65-
const handleInputUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
66-
valueChanged({
67-
field: 'title',
68-
value: e.target.value,
69-
});
70-
71-
setName(e.target.value);
72-
};
73-
74-
const value = name !== 'Untitled' && updatingName ? name : '';
75-
76-
const folderName = currentSandbox.collection
77-
? basename(currentSandbox.collection.path) ||
78-
(currentSandbox.team ? currentSandbox.team.name : 'My Sandboxes')
79-
: 'My Sandboxes';
80-
81-
const template = currentSandbox.customTemplate && !updatingName;
82-
const spring = useSpring({
83-
opacity: updatingName ? 0 : 1,
84-
pointerEvents: updatingName ? 'none' : 'initial',
85-
});
86-
const { customTemplate, owned } = currentSandbox;
87-
88-
return (
89-
<Main>
90-
<Container>
91-
{!customTemplate && owned && (
92-
<animated.div style={spring}>
93-
<Folder>
94-
{isLoggedIn ? (
95-
<FolderName
96-
onClick={() => modalOpened({ modal: 'moveSandbox' })}
97-
>
98-
{folderName}
99-
</FolderName>
100-
) : (
101-
'Anonymous '
102-
)}
103-
/{' '}
104-
</Folder>
105-
</animated.div>
106-
)}
107-
{updatingName ? (
108-
<Form onSubmit={submitNameChange}>
109-
<NameInput
110-
autoFocus
111-
innerRef={(el: HTMLInputElement) => {
112-
if (el) {
113-
el.focus();
114-
}
115-
}}
116-
onKeyUp={handleKeyUp}
117-
onBlur={handleBlur}
118-
onChange={handleInputUpdate}
119-
placeholder={name}
120-
value={value}
121-
/>
122-
</Form>
123-
) : (
124-
<Name owned={owned} onClick={owned ? handleNameClick : null}>
125-
{sandboxName}
126-
</Name>
127-
)}
128-
{template ? (
129-
<Tooltip
130-
interactive
131-
delay={0}
132-
placement="bottom"
133-
content={
134-
<>
135-
This sandbox is a template, you can learn about templates in
136-
the{' '}
137-
<Link target="_blank" to="/docs/templates">
138-
docs
139-
</Link>
140-
.
141-
</>
142-
}
143-
>
144-
<TemplateBadge color={customTemplate.color}>
145-
Template
146-
</TemplateBadge>
147-
</Tooltip>
148-
) : null}
149-
</Container>
150-
</Main>
151-
);
28+
const noop = () => undefined;
29+
export const SandboxName: FunctionComponent = () => {
30+
const {
31+
actions: {
32+
modalOpened,
33+
workspace: { sandboxInfoUpdated, valueChanged },
34+
},
35+
state: {
36+
editor: { currentSandbox },
37+
isLoggedIn,
38+
},
39+
} = useOvermind();
40+
const [updatingName, setUpdatingName] = useState(false);
41+
const [name, setName] = useState('');
42+
43+
const sandboxName = getSandboxName(currentSandbox) || 'Untitled';
44+
45+
const updateSandboxInfo = () => {
46+
sandboxInfoUpdated();
47+
setUpdatingName(false);
48+
};
49+
50+
const submitNameChange = (e: ChangeEvent<HTMLFormElement>) => {
51+
e.preventDefault();
52+
updateSandboxInfo();
53+
track('Change Sandbox Name From Header');
54+
};
55+
56+
const handleNameClick = () => {
57+
setUpdatingName(true);
58+
setName(sandboxName);
59+
};
60+
61+
const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
62+
if (e.keyCode === ESC) {
63+
updateSandboxInfo();
15264
}
153-
)
154-
);
65+
};
66+
67+
const handleBlur = () => {
68+
updateSandboxInfo();
69+
};
70+
71+
const handleInputUpdate = (e: ChangeEvent<HTMLInputElement>) => {
72+
valueChanged({
73+
field: 'title',
74+
value: e.target.value,
75+
});
76+
77+
setName(e.target.value);
78+
};
79+
80+
const value = name !== 'Untitled' && updatingName ? name : '';
81+
82+
const folderName = currentSandbox.collection
83+
? basename(currentSandbox.collection.path) ||
84+
(currentSandbox.team ? currentSandbox.team.name : 'My Sandboxes')
85+
: 'My Sandboxes';
86+
87+
const template = currentSandbox.customTemplate && !updatingName;
88+
const spring = useSpring({
89+
opacity: updatingName ? 0 : 1,
90+
pointerEvents: updatingName ? 'none' : 'initial',
91+
});
92+
const { customTemplate, owned } = currentSandbox;
93+
94+
return (
95+
<Main>
96+
<Container>
97+
{!customTemplate && owned && (
98+
<animated.div style={spring}>
99+
<Folder>
100+
{isLoggedIn ? (
101+
<FolderName
102+
onClick={() => modalOpened({ modal: 'moveSandbox' })}
103+
>
104+
{folderName}
105+
</FolderName>
106+
) : (
107+
'Anonymous '
108+
)}
109+
/{' '}
110+
</Folder>
111+
</animated.div>
112+
)}
113+
114+
{updatingName ? (
115+
<Form onSubmit={submitNameChange}>
116+
<NameInput
117+
autoFocus
118+
innerRef={(el: HTMLInputElement) => {
119+
if (el) {
120+
el.focus();
121+
}
122+
}}
123+
onBlur={handleBlur}
124+
onChange={handleInputUpdate}
125+
onKeyUp={handleKeyUp}
126+
placeholder={name}
127+
value={value}
128+
/>
129+
</Form>
130+
) : (
131+
<Name onClick={owned ? handleNameClick : noop} owned={owned}>
132+
{sandboxName}
133+
</Name>
134+
)}
135+
136+
{template ? (
137+
<Tooltip
138+
content={
139+
<>
140+
This sandbox is a template, you can learn about templates in the{' '}
141+
<Link target="_blank" to="/docs/templates">
142+
docs
143+
</Link>
144+
.
145+
</>
146+
}
147+
delay={0}
148+
interactive
149+
placement="bottom"
150+
>
151+
<TemplateBadge color={customTemplate.color}>Template</TemplateBadge>
152+
</Tooltip>
153+
) : null}
154+
</Container>
155+
</Main>
156+
);
157+
};

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,18 +278,21 @@ export type Sandbox = {
278278
likeCount: number;
279279
forkCount: number;
280280
userLiked: boolean;
281-
modules: Array<Module>;
282-
directories: Array<Directory>;
283-
collection: boolean;
281+
modules: Module[];
282+
directories: Directory[];
283+
collection?: {
284+
path: string;
285+
};
284286
owned: boolean;
285287
npmDependencies: {
286288
[dep: string]: string;
287289
};
288290
customTemplate: CustomTemplate | null;
289291
forkedTemplate: CustomTemplate | null;
290292
externalResources: string[];
291-
team: {
293+
team?: {
292294
id: string;
295+
name: string;
293296
};
294297
roomId: string;
295298
privacy: 0 | 1 | 2;

0 commit comments

Comments
 (0)