Skip to content

Commit d7dfad2

Browse files
christianalfoniSaraVieira
christianalfoni
authored and
SaraVieira
committed
fix frozen session flip (codesandbox#2462)
* fix frozen session flip * ensure content of modal only mounting when active
1 parent dd685f7 commit d7dfad2

File tree

5 files changed

+128
-132
lines changed

5 files changed

+128
-132
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -683,3 +683,10 @@ export const openDevtoolsTab: Action<{
683683
});
684684
}
685685
};
686+
687+
export const sessionFreezeOverride: Action<{ frozen: boolean }> = (
688+
{ state },
689+
{ frozen }
690+
) => {
691+
state.editor.sessionFrozen = frozen;
692+
};

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -262,10 +262,3 @@ export const addedTemplate: AsyncAction<{
262262
);
263263
}
264264
};
265-
266-
export const sessionFreezeOverride: Action<{ frozen: boolean }> = (
267-
{ state },
268-
{ frozen }
269-
) => {
270-
state.editor.sessionFrozen = frozen;
271-
};

‎packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx‎

Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,74 @@
1-
import { inject, hooksObserver } from 'app/componentConnectors';
2-
import React from 'react';
1+
import { Button } from '@codesandbox/common/lib/components/Button';
32
import Modal from 'app/components/Modal';
3+
import { useOvermind } from 'app/overmind';
4+
import React from 'react';
45
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
5-
import { Button } from '@codesandbox/common/lib/components/Button';
6+
67
import {
8+
Actions,
9+
Close,
710
Container,
11+
Enter,
812
Title,
9-
Close,
10-
Actions,
1113
UnlockButton,
12-
Enter,
1314
} from './elements';
1415

15-
export const ForkFrozenSandboxModal = inject('store', 'signals')(
16-
hooksObserver(
17-
({
18-
store: {
19-
modals,
20-
editor: {
21-
currentSandbox: { customTemplate },
22-
},
16+
const ModalContent: React.FC = () => {
17+
const {
18+
state: {
19+
editor: {
20+
currentSandbox: { customTemplate },
2321
},
24-
signals: { modals: modalsActions, editor },
25-
}) => {
26-
const type = customTemplate ? 'template' : 'sandbox';
22+
},
23+
actions: { modals: modalsActions },
24+
} = useOvermind();
25+
const type = customTemplate ? 'template' : 'sandbox';
2726

28-
const unlock = () => {
29-
modalsActions.forkFrozenModal.close('unfreeze');
30-
};
27+
const unlock = () => {
28+
modalsActions.forkFrozenModal.close('unfreeze');
29+
};
3130

32-
const fork = (event?: { defaultPrevented: boolean }) => {
33-
if (event && !event.defaultPrevented) {
34-
modalsActions.forkFrozenModal.close('fork');
35-
}
36-
};
31+
const fork = (event?: { defaultPrevented: boolean }) => {
32+
if (event && !event.defaultPrevented) {
33+
modalsActions.forkFrozenModal.close('fork');
34+
}
35+
};
3736

38-
useKeyPressEvent('Enter', fork);
37+
useKeyPressEvent('Enter', fork);
3938

40-
return (
41-
<Modal
42-
isOpen={modals.forkFrozenModal.isCurrent}
43-
width={450}
44-
onClose={() => modalsActions.forkFrozenModal.close()}
45-
>
46-
<Container>
47-
<Close
48-
onClick={() => modalsActions.forkFrozenModal.close('cancel')}
49-
/>
50-
<Title>Frozen {customTemplate ? 'Template' : 'Sandbox'}</Title>
51-
<p>
52-
This {type} is frozen, which means you can’t make edits without
53-
unfreezing it.
54-
</p>
55-
<p>
56-
Do you want to unfreeze the {type} for this session or make a
57-
fork?
58-
</p>
59-
<Actions>
60-
<UnlockButton onClick={unlock}>Unfreeze</UnlockButton>
61-
<Button small onClick={fork}>
62-
Fork
63-
<Enter />
64-
</Button>
65-
</Actions>
66-
</Container>
67-
</Modal>
68-
);
69-
}
70-
)
71-
);
39+
return (
40+
<Container>
41+
<Close onClick={() => modalsActions.forkFrozenModal.close('cancel')} />
42+
<Title>Frozen {customTemplate ? 'Template' : 'Sandbox'}</Title>
43+
<p>
44+
This {type} is frozen, which means you can’t make edits without
45+
unfreezing it.
46+
</p>
47+
<p>Do you want to unfreeze the {type} for this session or make a fork?</p>
48+
<Actions>
49+
<UnlockButton onClick={unlock}>Unfreeze</UnlockButton>
50+
<Button small onClick={fork}>
51+
Fork
52+
<Enter />
53+
</Button>
54+
</Actions>
55+
</Container>
56+
);
57+
};
58+
59+
export const ForkFrozenSandboxModal: React.FC = () => {
60+
const {
61+
state: { modals },
62+
actions: { modals: modalsActions },
63+
} = useOvermind();
64+
65+
return (
66+
<Modal
67+
isOpen={modals.forkFrozenModal.isCurrent}
68+
width={450}
69+
onClose={() => modalsActions.forkFrozenModal.close('cancel')}
70+
>
71+
<ModalContent />
72+
</Modal>
73+
);
74+
};

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

Lines changed: 55 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,64 @@
11
import React, { useEffect } from 'react';
2-
import { inject, hooksObserver } from 'app/componentConnectors';
2+
33
import Switch from '@codesandbox/common/lib/components/Switch';
44
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
5+
import { useOvermind } from 'app/overmind';
56
import { Item, PropertyValue, PropertyName, Icon } from '../elements';
67
import { FreezeContainer, FrozenWarning } from './elements';
78

8-
interface IFrozenProps {
9-
isFrozen: boolean;
10-
store: any;
11-
signals: any;
12-
}
13-
14-
export const Frozen = inject('store', 'signals')(
15-
hooksObserver(
16-
({
17-
signals: {
18-
editor: { frozenUpdated, sessionFreezeOverride },
19-
},
20-
store: {
21-
editor: {
22-
currentSandbox: { isFrozen, customTemplate },
23-
sessionFrozen,
24-
},
9+
export const Frozen: React.FC = () => {
10+
const {
11+
actions: {
12+
editor: { frozenUpdated, sessionFreezeOverride },
13+
},
14+
state: {
15+
editor: {
16+
currentSandbox: { isFrozen, customTemplate },
17+
sessionFrozen,
2518
},
26-
}: IFrozenProps) => {
27-
useEffect(() => {
28-
// always freeze it on start
29-
if (customTemplate) {
30-
frozenUpdated({ frozen: true });
31-
}
32-
}, [customTemplate, frozenUpdated]);
33-
34-
const updateFrozenState = () => {
35-
if (customTemplate) {
36-
sessionFreezeOverride({ frozen: !isFrozen });
37-
}
38-
frozenUpdated({ frozen: !isFrozen });
39-
};
19+
},
20+
} = useOvermind();
21+
useEffect(() => {
22+
// always freeze it on start
23+
if (customTemplate) {
24+
frozenUpdated({ frozen: true });
25+
}
26+
}, [customTemplate, frozenUpdated]);
4027

41-
return (
42-
<>
43-
<Item>
44-
<PropertyName>
45-
Frozen
46-
<Tooltip
47-
boundary="viewport"
48-
content="Whether we should fork the sandbox on edits"
49-
>
50-
<Icon />
51-
</Tooltip>
52-
</PropertyName>
53-
<PropertyValue>
54-
<FreezeContainer>
55-
<Switch
56-
small
57-
right={customTemplate ? sessionFrozen : isFrozen}
58-
onClick={updateFrozenState}
59-
offMode
60-
secondary
61-
/>
62-
</FreezeContainer>
63-
</PropertyValue>
64-
</Item>
65-
{!sessionFrozen && (
66-
<FrozenWarning>Edits are enabled for this session</FrozenWarning>
67-
)}
68-
</>
69-
);
28+
const updateFrozenState = () => {
29+
if (customTemplate) {
30+
sessionFreezeOverride({ frozen: !isFrozen });
7031
}
71-
)
72-
);
32+
frozenUpdated({ frozen: !isFrozen });
33+
};
34+
35+
return (
36+
<>
37+
<Item>
38+
<PropertyName>
39+
Frozen
40+
<Tooltip
41+
boundary="viewport"
42+
content="Whether we should fork the sandbox on edits"
43+
>
44+
<Icon />
45+
</Tooltip>
46+
</PropertyName>
47+
<PropertyValue>
48+
<FreezeContainer>
49+
<Switch
50+
small
51+
right={customTemplate ? sessionFrozen : isFrozen}
52+
onClick={updateFrozenState}
53+
offMode
54+
secondary
55+
/>
56+
</FreezeContainer>
57+
</PropertyValue>
58+
</Item>
59+
{!sessionFrozen && (
60+
<FrozenWarning>Edits are enabled for this session</FrozenWarning>
61+
)}
62+
</>
63+
);
64+
};

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import Tooltip from '@codesandbox/common/lib/components/Tooltip';
33
import getTemplateDefinition from '@codesandbox/common/lib/templates';
44
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
55
import {
6-
sandboxUrl,
76
githubRepoUrl,
87
patronUrl,
8+
sandboxUrl,
99
} from '@codesandbox/common/lib/utils/url-generator';
10-
import { inject, hooksObserver } from 'app/componentConnectors';
10+
import { hooksObserver, inject } from 'app/componentConnectors';
11+
import { PrivacyStatus } from 'app/components/PrivacyStatus';
12+
import { Stats } from 'app/pages/common/Stats';
1113
import React from 'react';
1214
import TeamIcon from 'react-icons/lib/md/people';
13-
import { Stats } from 'app/pages/common/Stats';
14-
import { PrivacyStatus } from 'app/components/PrivacyStatus';
15+
1516
// import AliasComponent from './Alias';
1617
import { Author } from './Author';
1718
import { Description } from './Description';

0 commit comments

Comments
 (0)