Skip to content

🔨 Switch Live to use useOvermind #3063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 10, 2019
Merged

🔨 Switch Live to use useOvermind #3063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c25b12
🔨 Switch Live to use useOvermind
MichaelDeBoey Nov 5, 2019
a4904cf
Resolve discussions
MichaelDeBoey Nov 30, 2019
a8c21c2
Fix types
MichaelDeBoey Dec 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/app/src/app/overmind/namespaces/live/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,10 @@ export const roomJoined: AsyncAction<{
state.live.isLoading = false;
});

export const createLiveClicked: AsyncAction<{
sandboxId: string;
}> = async ({ state, effects, actions }, { sandboxId }) => {
export const createLiveClicked: AsyncAction<string> = async (
Copy link
Member

@CompuIves CompuIves Nov 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, wouldn't this be less explicit (eg. I now need to know what's passed by going to the function call) and scalable (what if we want to add another option)? What's your opinion on this @christianalfoni?

Copy link
Contributor Author

@MichaelDeBoey MichaelDeBoey Nov 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did this in recommendation of @christianalfoni in an earlier PR, but can't find it anywhere tho 😕

Copy link
Contributor

@SaraVieira SaraVieira Dec 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I remember this was christian idea in new code as it makes it cleaner

Copy link
Contributor Author

@MichaelDeBoey MichaelDeBoey Dec 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah @christianalfoni said we should defo do it in new code.
But if I wanted, I could refactor them on the go

Can't find the comment where he said that anymore tho.
Too many PRs 😂😇

Copy link
Contributor

@christianalfoni christianalfoni Dec 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yeah, there is no reason to pass an object anymore to actions. It was a requirement in Cerebral.

You could argue that the typing does not explicitly say sandboxId anymore, but payload. I just favour reduced syntax as if you were to write this action from scratch you would type it with string, because of our lazyness as developers 😂

{ actions, effects, state },
sandboxId
) => {
effects.analytics.track('Create Live Session');

const roomId = await effects.api.createLiveRoom(sandboxId);
Expand Down Expand Up @@ -186,9 +187,9 @@ export const onSendChat: Action<{ message: string }> = (
effects.live.sendChat(message);
};

export const onChatEnabledChange: Action<{ enabled: boolean }> = (
export const onChatEnabledChange: Action<boolean> = (
{ effects, state },
{ enabled }
enabled
) => {
effects.analytics.track('Enable Live Chat');

Expand Down
113 changes: 53 additions & 60 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,52 @@
import { useOvermind } from 'app/overmind';
import React, { FunctionComponent } from 'react';

import { useOvermind } from 'app/overmind';

import {
Description,
ErrorDescription,
WorkspaceInputContainer,
WorkspaceSubtitle,
} from '../../elements';

import { More } from '../More';

import LiveButton from './LiveButton';
import LiveInfo from './LiveInfo';

export const Live: FunctionComponent = () => {
const {
actions: {
live: {
createLiveClicked,
onAddEditorClicked,
onChatEnabledChange,
onFollow,
onModeChanged,
onRemoveEditorClicked,
onSessionCloseClicked,
onToggleNotificationsHidden,
},
},
state: {
isLoggedIn,
editor: {
currentSandbox: { id, owned },
isAllModulesSynced,
},
live: {
followingUserId,
isLive,
isLoading,
isOwner,
isTeam,
roomInfo,
liveUserId,
reconnecting,
notificationsHidden,
followingUserId,
isLoading,
},
editor: {
isAllModulesSynced,
currentSandbox: { owned, id },
},
},
actions: {
live: {
onModeChanged,
onAddEditorClicked,
onRemoveEditorClicked,
onSessionCloseClicked,
onToggleNotificationsHidden,
onChatEnabledChange,
onFollow,
createLiveClicked,
reconnecting,
roomInfo,
},
isLoggedIn,
},
} = useOvermind();
const hasUnsyncedModules = !isAllModulesSynced;

const showPlaceHolder = (!isLive && !owned) || !isLoggedIn;

if (showPlaceHolder) {
Expand All @@ -66,26 +67,22 @@ export const Live: FunctionComponent = () => {
<div>
{isLive ? (
<LiveInfo
setMode={onModeChanged}
addEditor={onAddEditorClicked}
removeEditor={onRemoveEditorClicked}
chatEnabled={roomInfo.chatEnabled}
currentUserId={liveUserId}
followingUserId={followingUserId}
isOwner={isOwner}
isTeam={isTeam}
roomInfo={roomInfo}
notificationsHidden={notificationsHidden}
onSessionCloseClicked={onSessionCloseClicked}
ownerIds={roomInfo.ownerIds}
currentUserId={liveUserId}
reconnecting={reconnecting}
onSessionCloseClicked={onSessionCloseClicked}
notificationsHidden={notificationsHidden}
toggleNotificationsHidden={onToggleNotificationsHidden}
chatEnabled={roomInfo.chatEnabled}
toggleChatEnabled={() => {
onChatEnabledChange({
enabled: !roomInfo.chatEnabled,
});
}}
removeEditor={onRemoveEditorClicked}
roomInfo={roomInfo}
setFollowing={onFollow}
followingUserId={followingUserId}
setMode={onModeChanged}
toggleChatEnabled={() => onChatEnabledChange(!roomInfo.chatEnabled)}
toggleNotificationsHidden={onToggleNotificationsHidden}
/>
) : (
<>
Expand All @@ -95,29 +92,25 @@ export const Live: FunctionComponent = () => {
re doing it live!
</Description>

<>
<WorkspaceSubtitle>Create live room</WorkspaceSubtitle>
<Description>
To invite others you need to generate a URL that others can join.
</Description>
<WorkspaceSubtitle>Create live room</WorkspaceSubtitle>

<Description>
To invite others you need to generate a URL that others can join.
</Description>

{!isAllModulesSynced && (
<ErrorDescription>
Save all your files before going live
</ErrorDescription>
)}

{hasUnsyncedModules && (
<ErrorDescription>
Save all your files before going live
</ErrorDescription>
)}
<WorkspaceInputContainer>
<LiveButton
onClick={() => {
createLiveClicked({
sandboxId: id,
});
}}
isLoading={isLoading}
disable={hasUnsyncedModules}
/>
</WorkspaceInputContainer>
</>
<WorkspaceInputContainer>
<LiveButton
disable={!isAllModulesSynced}
isLoading={isLoading}
onClick={() => createLiveClicked(id)}
/>
</WorkspaceInputContainer>
</>
)}
</div>
Expand Down