Skip to content

Commit 03be1c4

Browse files
MichaelDeBoeyCompuIves
MichaelDeBoey
authored and
CompuIves
committed
Observe components that use useStore hook (codesandbox#2181)
1 parent 5d7d67c commit 03be1c4

File tree

23 files changed

+203
-198
lines changed

23 files changed

+203
-198
lines changed

‎packages/app/src/app/pages/CLI/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useSignals, useStore } from 'app/store';
77
import { Container } from './elements';
88
import Prompt from './Prompt';
99

10-
const CLI = () => {
10+
const CLI = observer(() => {
1111
const { cliMounted, signInCliClicked } = useSignals();
1212
const { user, authToken, isLoadingCLI, error } = useStore();
1313

@@ -28,6 +28,6 @@ const CLI = () => {
2828
/>
2929
</Container>
3030
);
31-
};
31+
});
3232

33-
export default observer(CLI);
33+
export default CLI;

‎packages/app/src/app/pages/Curator/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { useSignals, useStore } from 'app/store';
1919
import { Container, Buttons, Heading, PickerWrapper } from './elements';
2020
import SandboxCard from './SandboxCard';
2121

22-
const Curator = () => {
22+
const Curator = observer(() => {
2323
const {
2424
explore: { pickSandboxModal, popularSandboxesMounted },
2525
} = useSignals();
@@ -133,6 +133,6 @@ const Curator = () => {
133133
</Margin>
134134
</MaxWidth>
135135
);
136-
};
136+
});
137137

138-
export default observer(Curator);
138+
export default Curator;

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/NewSandboxModal.tsx‎

Lines changed: 103 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useState } from 'react';
21
import { observer } from 'mobx-react-lite';
2+
import React, { useState } from 'react';
33
import track from '@codesandbox/common/lib/utils/analytics';
44
import Template from '@codesandbox/common/lib/components/Template';
55
import { useStore } from 'app/store';
@@ -23,115 +23,115 @@ interface INewSandboxModalProps {
2323
createSandbox: (params: { shortid: string }) => void;
2424
}
2525

26-
export const NewSandboxModal: React.FunctionComponent<
27-
INewSandboxModalProps
28-
> = observer(({ forking = false, closing = false, createSandbox }) => {
29-
const [selectedTab, setSelectedTab] = useState(0);
30-
const { user } = useStore();
26+
export const NewSandboxModal = observer<INewSandboxModalProps>(
27+
({ forking = false, closing = false, createSandbox }) => {
28+
const { user } = useStore();
29+
const [selectedTab, setSelectedTab] = useState(0);
3130

32-
const selectTemplate = template => {
33-
track('New Sandbox Modal - Select Template', { template });
34-
createSandbox(template);
35-
};
31+
const selectTemplate = template => {
32+
track('New Sandbox Modal - Select Template', { template });
33+
createSandbox(template);
34+
};
3635

37-
return (
38-
<Container closing={closing} forking={forking}>
39-
<TabContainer forking={forking} closing={closing}>
40-
{[
41-
'Overview',
42-
user && 'My Templates',
43-
'Client Templates',
44-
'Container Templates',
45-
'Import',
46-
]
47-
.map((buttonName, index) => ({
48-
name: buttonName,
49-
tabIndex: index,
50-
}))
51-
.filter(({ name }) => Boolean(name))
52-
.map(({ name, tabIndex }) => (
53-
<Button
54-
key={name}
55-
onClick={() => setSelectedTab(tabIndex)}
56-
selected={selectedTab === tabIndex}
57-
>
58-
{name}
59-
</Button>
60-
))}
61-
</TabContainer>
36+
return (
37+
<Container closing={closing} forking={forking}>
38+
<TabContainer forking={forking} closing={closing}>
39+
{[
40+
'Overview',
41+
user && 'My Templates',
42+
'Client Templates',
43+
'Container Templates',
44+
'Import',
45+
]
46+
.map((buttonName, index) => ({
47+
name: buttonName,
48+
tabIndex: index,
49+
}))
50+
.filter(({ name }) => Boolean(name))
51+
.map(({ name, tabIndex }) => (
52+
<Button
53+
key={name}
54+
onClick={() => setSelectedTab(tabIndex)}
55+
selected={selectedTab === tabIndex}
56+
>
57+
{name}
58+
</Button>
59+
))}
60+
</TabContainer>
6261

63-
<InnerContainer forking={forking} closing={closing}>
64-
<Tab visible={selectedTab === 0}>
65-
{user && <MyTemplates selectTemplate={selectTemplate} />}
66-
<Title>Popular Templates</Title>
67-
<Templates>
68-
{popular.map(type =>
69-
type.templates.map(template => (
62+
<InnerContainer forking={forking} closing={closing}>
63+
<Tab visible={selectedTab === 0}>
64+
{user && <MyTemplates selectTemplate={selectTemplate} />}
65+
<Title>Popular Templates</Title>
66+
<Templates>
67+
{popular.map(type =>
68+
type.templates.map(template => (
69+
<Template
70+
key={template.name}
71+
template={template}
72+
selectTemplate={selectTemplate}
73+
small={false}
74+
/>
75+
))
76+
)}
77+
</Templates>
78+
</Tab>
79+
{user && (
80+
<Tab visible={selectedTab === 1}>
81+
<MyTemplatesTab selectTemplate={selectTemplate} />
82+
</Tab>
83+
)}
84+
<Tab visible={selectedTab === 2}>
85+
<Title>Client Templates</Title>
86+
<Templates>
87+
{client.map(template => (
7088
<Template
7189
key={template.name}
7290
template={template}
7391
selectTemplate={selectTemplate}
7492
small={false}
7593
/>
76-
))
77-
)}
78-
</Templates>
79-
</Tab>
80-
{user && (
81-
<Tab visible={selectedTab === 1}>
82-
<MyTemplatesTab selectTemplate={selectTemplate} />
83-
</Tab>
84-
)}
85-
<Tab visible={selectedTab === 2}>
86-
<Title>Client Templates</Title>
87-
<Templates>
88-
{client.map(template => (
89-
<Template
90-
key={template.name}
91-
template={template}
92-
selectTemplate={selectTemplate}
93-
small={false}
94-
/>
95-
))}
96-
</Templates>
97-
{/* TODO: Find a fix for css props
94+
))}
95+
</Templates>
96+
{/* TODO: Find a fix for css props
9897
// @ts-ignore */}
99-
<Title
100-
css={`
101-
margin-top: 1rem;
102-
`}
103-
>
104-
Presets
105-
</Title>
106-
<Templates>
107-
{presets.map(template => (
108-
<Template
109-
key={template.name}
110-
// @ts-ignore
111-
template={template}
112-
selectTemplate={selectTemplate}
113-
small={false}
114-
/>
115-
))}
116-
</Templates>
117-
</Tab>
118-
<Tab visible={selectedTab === 3}>
119-
<Title>Container Templates</Title>
120-
<Templates>
121-
{container.map(template => (
122-
<Template
123-
key={template.name}
124-
template={template}
125-
selectTemplate={selectTemplate}
126-
small={false}
127-
/>
128-
))}
129-
</Templates>
130-
</Tab>
131-
<Tab visible={selectedTab === 4}>
132-
<ImportTab username={user ? user.username : undefined} />
133-
</Tab>
134-
</InnerContainer>
135-
</Container>
136-
);
137-
});
98+
<Title
99+
css={`
100+
margin-top: 1rem;
101+
`}
102+
>
103+
Presets
104+
</Title>
105+
<Templates>
106+
{presets.map(template => (
107+
<Template
108+
key={template.name}
109+
// @ts-ignore
110+
template={template}
111+
selectTemplate={selectTemplate}
112+
small={false}
113+
/>
114+
))}
115+
</Templates>
116+
</Tab>
117+
<Tab visible={selectedTab === 3}>
118+
<Title>Container Templates</Title>
119+
<Templates>
120+
{container.map(template => (
121+
<Template
122+
key={template.name}
123+
template={template}
124+
selectTemplate={selectTemplate}
125+
small={false}
126+
/>
127+
))}
128+
</Templates>
129+
</Tab>
130+
<Tab visible={selectedTab === 4}>
131+
<ImportTab username={user ? user.username : undefined} />
132+
</Tab>
133+
</InnerContainer>
134+
</Container>
135+
);
136+
}
137+
);

‎packages/app/src/app/pages/Patron/PricingModal/PricingChoice/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface Props {
2424
badge: 'patron-1' | 'patron-2' | 'patron-3' | 'patron-4';
2525
}
2626

27-
const PricingChoice = ({ badge }: Props) => {
27+
const PricingChoice = observer<Props>(({ badge }) => {
2828
const {
2929
patron: {
3030
priceChanged,
@@ -101,6 +101,6 @@ const PricingChoice = ({ badge }: Props) => {
101101
</Centered>
102102
</Container>
103103
);
104-
};
104+
});
105105

106-
export default observer(PricingChoice);
106+
export default PricingChoice;

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,22 @@ type ForkButtonProps = ButtonProps & {
4545
isForking: boolean;
4646
};
4747

48-
const LikeButton = ({
49-
style,
50-
likeCount,
51-
}: ButtonProps & { likeCount: string }) => {
52-
const { editor } = useStore();
48+
const LikeButton = observer(
49+
({ style, likeCount }: ButtonProps & { likeCount: string }) => {
50+
const { editor } = useStore();
5351

54-
return (
55-
<LikeHeart
56-
colorless
57-
style={style}
58-
text={likeCount}
59-
sandbox={editor.currentSandbox}
60-
disableTooltip
61-
highlightHover
62-
/>
63-
);
64-
};
52+
return (
53+
<LikeHeart
54+
colorless
55+
style={style}
56+
text={likeCount}
57+
sandbox={editor.currentSandbox}
58+
disableTooltip
59+
highlightHover
60+
/>
61+
);
62+
}
63+
);
6564

6665
const ForkButton = ({ secondary, isForking, style }: ForkButtonProps) => {
6766
const { editor } = useSignals();
@@ -82,7 +81,7 @@ const ForkButton = ({ secondary, isForking, style }: ForkButtonProps) => {
8281
);
8382
};
8483

85-
const PickButton = ({ secondary, style }: ButtonProps) => {
84+
const PickButton = observer(({ secondary, style }: ButtonProps) => {
8685
const { editor } = useStore();
8786
const { id, title, description } = editor.currentSandbox;
8887
const { explore } = useSignals();
@@ -105,7 +104,7 @@ const PickButton = ({ secondary, style }: ButtonProps) => {
105104
Pick
106105
</Button>
107106
);
108-
};
107+
});
109108

110109
const ShareButton = ({ secondary, style }: ButtonProps) => {
111110
const { modalOpened } = useSignals();

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ExternalResource from './ExternalResource';
1414

1515
import { ErrorMessage } from './elements';
1616

17-
const Dependencies = () => {
17+
const Dependencies = observer(() => {
1818
const { editor } = useStore();
1919
const { workspace, editor: editorSignals } = useSignals();
2020
const sandbox = editor.currentSandbox;
@@ -104,6 +104,6 @@ const Dependencies = () => {
104104
)}
105105
</div>
106106
);
107-
};
107+
});
108108

109-
export default observer(Dependencies);
109+
export default Dependencies;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type IAliasProps = {
1313
editable: boolean;
1414
};
1515

16-
export const Alias = observer(({ editable }: IAliasProps) => {
16+
export const Alias = observer<IAliasProps>(({ editable }) => {
1717
const [editing, setEditing] = useState(false);
1818
const {
1919
workspace: { sandboxInfoUpdated, valueChanged },

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface IDescriptionProps {
99
editable: boolean;
1010
}
1111

12-
export const Description = observer(({ editable }: IDescriptionProps) => {
12+
export const Description = observer<IDescriptionProps>(({ editable }) => {
1313
const [editing, setEditing] = useState(false);
1414
const {
1515
workspace: { sandboxInfoUpdated, valueChanged },

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface IFrozenProps {
1010
isFrozen: boolean;
1111
}
1212

13-
export const Frozen = observer(({ isFrozen }: IFrozenProps) => {
13+
export const Frozen = observer<IFrozenProps>(({ isFrozen }) => {
1414
const {
1515
editor: { frozenUpdated, sessionFreezeOverride },
1616
} = useSignals();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface IKeywordsProps {
1010
editable?: boolean;
1111
}
1212

13-
export const Keywords = observer(({ editable }: IKeywordsProps) => {
13+
export const Keywords = observer<IKeywordsProps>(({ editable }) => {
1414
const {
1515
editor: {
1616
currentSandbox: { template, tags },

0 commit comments

Comments
 (0)