Skip to content

Commit 2ed733f

Browse files
SaerisSaraVieira
Saeris
authored and
SaraVieira
committed
🔨 Switch Git to useOvermind (codesandbox#2520)
* 🔨 Switch Git to useOvermind * fix types * fix types
1 parent d64c40e commit 2ed733f

File tree

1 file changed

+135
-144
lines changed
  • packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git

1 file changed

+135
-144
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Git.tsx‎

Lines changed: 135 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,154 @@
1+
import React, { useEffect } from 'react';
12
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
23
import { Button } from '@codesandbox/common/lib/components/Button';
34
import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
45
import Input, { TextArea } from '@codesandbox/common/lib/components/Input';
56
import Notice from '@codesandbox/common/lib/components/Notice';
67
import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator';
7-
import { inject, hooksObserver } from 'app/componentConnectors';
8-
import React, { useEffect } from 'react';
9-
8+
import { useOvermind } from 'app/overmind';
109
import { WorkspaceSubtitle, WorkspaceInputContainer } from '../../../elements';
11-
1210
import { Container, Buttons, ErrorMessage, NoChanges } from './elements';
1311
import { TotalChanges } from './TotalChanges';
1412

15-
const hasWriteAccess = (rights: 'none' | 'read' | 'write' | 'admin') =>
16-
['admin', 'write'].includes(rights);
17-
18-
export const Git = inject('store', 'signals')(
19-
hooksObserver(
20-
({
21-
signals: {
22-
git: {
23-
createCommitClicked,
24-
createPrClicked,
25-
descriptionChanged,
26-
gitMounted,
27-
subjectChanged,
28-
},
13+
const hasWriteAccess = (rights: string) => ['admin', 'write'].includes(rights);
14+
15+
export const Git = () => {
16+
const {
17+
state: {
18+
editor: {
19+
currentSandbox: { originalGit },
20+
isAllModulesSynced,
2921
},
30-
store: {
31-
editor: {
32-
currentSandbox: { originalGit },
33-
isAllModulesSynced,
34-
},
35-
git: {
36-
description,
37-
isFetching,
38-
originalGitChanges: gitChanges,
39-
subject,
40-
},
22+
git: { description, isFetching, originalGitChanges: gitChanges, subject },
23+
},
24+
actions: {
25+
git: {
26+
createCommitClicked,
27+
createPrClicked,
28+
descriptionChanged,
29+
gitMounted,
30+
subjectChanged,
4131
},
42-
}) => {
43-
useEffect(() => {
44-
gitMounted();
45-
}, [gitMounted]);
46-
47-
const createCommit = () => createCommitClicked();
48-
const createPR = () => createPrClicked();
49-
const changeSubject = ({
50-
target: { value },
51-
}: React.ChangeEvent<HTMLInputElement>) =>
52-
subjectChanged({ subject: value });
53-
const changeDescription = ({
54-
target: { value },
55-
}: React.ChangeEvent<HTMLTextAreaElement>) =>
56-
descriptionChanged({ description: value });
57-
58-
const modulesNotSaved = !isAllModulesSynced;
59-
const changeCount = gitChanges
60-
? gitChanges.added.length +
61-
gitChanges.modified.length +
62-
gitChanges.deleted.length
63-
: 0;
64-
65-
return (
66-
<Container>
67-
<Notice>beta</Notice>
68-
69-
<WorkspaceSubtitle>GitHub Repository</WorkspaceSubtitle>
70-
71-
<Margin margin={1}>
72-
<GithubBadge
73-
branch={originalGit.branch}
74-
repo={originalGit.repo}
75-
url={githubRepoUrl(originalGit)}
76-
username={originalGit.username}
77-
/>
78-
</Margin>
79-
80-
<Margin bottom={0}>
81-
<WorkspaceSubtitle>
82-
Changes ({isFetching ? '...' : changeCount})
83-
</WorkspaceSubtitle>
84-
85-
{!isFetching ? (
32+
},
33+
} = useOvermind();
34+
35+
useEffect(() => {
36+
gitMounted();
37+
}, [gitMounted]);
38+
39+
const createCommit = () => createCommitClicked();
40+
const createPR = () => createPrClicked();
41+
42+
const changeSubject = ({
43+
target: { value },
44+
}: React.ChangeEvent<HTMLInputElement>) => subjectChanged({ subject: value });
45+
46+
const changeDescription = ({
47+
target: { value },
48+
}: React.ChangeEvent<HTMLTextAreaElement>) =>
49+
descriptionChanged({ description: value });
50+
51+
const modulesNotSaved = !isAllModulesSynced;
52+
const changeCount = gitChanges
53+
? gitChanges.added.length +
54+
gitChanges.modified.length +
55+
gitChanges.deleted.length
56+
: 0;
57+
58+
return (
59+
<Container>
60+
<Notice>beta</Notice>
61+
62+
<WorkspaceSubtitle>GitHub Repository</WorkspaceSubtitle>
63+
64+
<Margin margin={1}>
65+
<GithubBadge
66+
branch={originalGit.branch}
67+
repo={originalGit.repo}
68+
url={githubRepoUrl(originalGit)}
69+
username={originalGit.username}
70+
/>
71+
</Margin>
72+
73+
<Margin bottom={0}>
74+
<WorkspaceSubtitle>
75+
Changes ({isFetching ? '...' : changeCount})
76+
</WorkspaceSubtitle>
77+
78+
{!isFetching ? (
79+
<Margin top={1}>
80+
<TotalChanges gitChanges={gitChanges || {}} />
81+
82+
{changeCount > 0 ? (
8683
<Margin top={1}>
87-
<TotalChanges gitChanges={gitChanges || {}} />
88-
89-
{changeCount > 0 ? (
90-
<Margin top={1}>
91-
<WorkspaceSubtitle>Commit Info</WorkspaceSubtitle>
92-
{modulesNotSaved && (
93-
<ErrorMessage>
94-
You need to save all modules before you can commit
95-
</ErrorMessage>
96-
)}
97-
98-
<WorkspaceSubtitle
99-
style={{
100-
color: subject.length > 72 ? `#F27777` : `#556362`,
101-
textAlign: 'right',
102-
}}
103-
>
104-
{`${subject.length}/72`}
105-
</WorkspaceSubtitle>
106-
107-
<WorkspaceInputContainer>
108-
<Input
109-
block
110-
onChange={changeSubject}
111-
placeholder="Subject"
112-
value={subject}
113-
/>
114-
</WorkspaceInputContainer>
115-
116-
<WorkspaceInputContainer>
117-
<TextArea
118-
block
119-
onChange={changeDescription}
120-
placeholder="Description"
121-
value={description}
122-
/>
123-
</WorkspaceInputContainer>
124-
125-
<Buttons>
126-
{hasWriteAccess(gitChanges.rights) && (
127-
<Button
128-
block
129-
disabled={!subject || modulesNotSaved}
130-
onClick={createCommit}
131-
small
132-
>
133-
Commit
134-
</Button>
135-
)}
136-
137-
<Button
138-
block
139-
disabled={!subject || modulesNotSaved}
140-
onClick={createPR}
141-
small
142-
>
143-
Open PR
144-
</Button>
145-
</Buttons>
146-
</Margin>
147-
) : (
148-
<Margin bottom={1} horizontal={1}>
149-
<NoChanges>There are no changes</NoChanges>
150-
</Margin>
84+
<WorkspaceSubtitle>Commit Info</WorkspaceSubtitle>
85+
{modulesNotSaved && (
86+
<ErrorMessage>
87+
You need to save all modules before you can commit
88+
</ErrorMessage>
15189
)}
90+
91+
<WorkspaceSubtitle
92+
style={{
93+
color: subject.length > 72 ? `#F27777` : `#556362`,
94+
textAlign: 'right',
95+
}}
96+
>
97+
{`${subject.length}/72`}
98+
</WorkspaceSubtitle>
99+
100+
<WorkspaceInputContainer>
101+
<Input
102+
block
103+
onChange={changeSubject}
104+
placeholder="Subject"
105+
value={subject}
106+
/>
107+
</WorkspaceInputContainer>
108+
109+
<WorkspaceInputContainer>
110+
<TextArea
111+
block
112+
onChange={changeDescription}
113+
placeholder="Description"
114+
value={description}
115+
/>
116+
</WorkspaceInputContainer>
117+
118+
<Buttons>
119+
{hasWriteAccess(gitChanges.rights) && (
120+
<Button
121+
block
122+
disabled={!subject || modulesNotSaved}
123+
onClick={createCommit}
124+
small
125+
>
126+
Commit
127+
</Button>
128+
)}
129+
130+
<Button
131+
block
132+
disabled={!subject || modulesNotSaved}
133+
onClick={createPR}
134+
small
135+
>
136+
Open PR
137+
</Button>
138+
</Buttons>
152139
</Margin>
153140
) : (
154-
<Margin margin={1}>
155-
<div>Fetching changes...</div>
141+
<Margin bottom={1} horizontal={1}>
142+
<NoChanges>There are no changes</NoChanges>
156143
</Margin>
157144
)}
158145
</Margin>
159-
</Container>
160-
);
161-
}
162-
)
163-
);
146+
) : (
147+
<Margin margin={1}>
148+
<div>Fetching changes...</div>
149+
</Margin>
150+
)}
151+
</Margin>
152+
</Container>
153+
);
154+
};

0 commit comments

Comments
 (0)