Skip to content

Commit 4a8fc8d

Browse files
christianalfoniSaraVieira
christianalfoni
authored and
SaraVieira
committed
User: refactor live user component (codesandbox#3196)
* refactor live user component * move elements and fix types
1 parent 4cc49a9 commit 4a8fc8d

File tree

4 files changed

+247
-232
lines changed

4 files changed

+247
-232
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx

Lines changed: 23 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,36 @@
1-
import React from 'react';
2-
import styled from 'styled-components';
3-
import { sortBy } from 'lodash-es';
4-
5-
import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
6-
import Input from '@codesandbox/common/lib/components/Input';
71
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
8-
import delay from '@codesandbox/common/lib/utils/animation/delay-effect';
92
import Switch from '@codesandbox/common/lib/components/Switch';
10-
113
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
12-
13-
import AddIcon from 'react-icons/lib/md/add';
14-
import RemoveIcon from 'react-icons/lib/md/remove';
4+
import { RoomInfo } from '@codesandbox/common/lib/types';
5+
import { sortBy } from 'lodash-es';
6+
import React from 'react';
157
import FollowIcon from 'react-icons/lib/io/eye';
168
import UnFollowIcon from 'react-icons/lib/io/eye-disabled';
9+
import AddIcon from 'react-icons/lib/md/add';
10+
import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
11+
import RemoveIcon from 'react-icons/lib/md/remove';
1712

18-
import User from './User';
13+
import { Description, WorkspaceInputContainer } from '../../elements';
1914
import Countdown from './Countdown';
15+
import {
16+
Container,
17+
IconContainer,
18+
Mode,
19+
ModeDetails,
20+
ModeSelect,
21+
ModeSelector,
22+
Preference,
23+
PreferencesContainer,
24+
StyledInput,
25+
SubTitle,
26+
Title,
27+
Users,
28+
} from './elements';
2029
import LiveButton from './LiveButton';
21-
22-
import { Description, WorkspaceInputContainer } from '../../elements';
23-
24-
const Container = styled.div`
25-
${delay()};
26-
color: ${props =>
27-
props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
28-
box-sizing: border-box;
29-
`;
30-
31-
const Title = styled.div`
32-
color: #fd2439fa;
33-
font-weight: 800;
34-
display: flex;
35-
align-items: center;
36-
vertical-align: middle;
37-
38-
padding: 0.5rem 1rem;
39-
padding-top: 0;
40-
41-
svg {
42-
margin-right: 0.25rem;
43-
}
44-
`;
45-
46-
const StyledInput = styled(Input)`
47-
width: calc(100% - 1.5rem);
48-
margin: 0 0.75rem;
49-
font-size: 0.875rem;
50-
`;
51-
52-
const SubTitle = styled.div`
53-
text-transform: uppercase;
54-
font-weight: 700;
55-
color: rgba(255, 255, 255, 0.5);
56-
57-
padding-left: 1rem;
58-
font-size: 0.875rem;
59-
`;
60-
61-
const Users = styled.div`
62-
padding: 0.25rem 1rem;
63-
padding-top: 0;
64-
color: ${props =>
65-
props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
66-
`;
67-
68-
const ModeSelect = styled.div`
69-
position: relative;
70-
margin: 0.5rem 1rem;
71-
`;
72-
73-
interface IModeProps {
74-
selected: boolean;
75-
}
76-
const Mode = styled.button`
77-
display: block;
78-
text-align: left;
79-
transition: 0.3s ease opacity;
80-
padding: 0.5rem 1rem;
81-
color: white;
82-
border-radius: 4px;
83-
width: 100%;
84-
font-size: 1rem;
85-
86-
font-weight: 600;
87-
border: none;
88-
outline: none;
89-
background-color: transparent;
90-
cursor: ${props => (props.onClick ? 'pointer' : 'inherit')};
91-
color: white;
92-
opacity: ${(props: IModeProps) => (props.selected ? 1 : 0.6)};
93-
margin: 0.25rem 0;
94-
95-
z-index: 3;
96-
97-
${props =>
98-
props.onClick &&
99-
`
100-
&:hover {
101-
opacity: 1;
102-
}`};
103-
`;
104-
105-
const ModeDetails = styled.div`
106-
font-size: 0.75rem;
107-
color: ${props =>
108-
props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
109-
margin-top: 0.25rem;
110-
`;
111-
112-
interface IModeSelectorProps {
113-
i: number;
114-
}
115-
const ModeSelector = styled.div`
116-
transition: 0.3s ease transform;
117-
position: absolute;
118-
left: 0;
119-
right: 0;
120-
top: 0;
121-
height: 48px;
122-
123-
border: 2px solid rgba(253, 36, 57, 0.6);
124-
background-color: rgba(253, 36, 57, 0.6);
125-
border-radius: 4px;
126-
z-index: -1;
127-
128-
transform: translateY(${(props: IModeSelectorProps) => props.i * 55}px);
129-
`;
130-
131-
const PreferencesContainer = styled.div`
132-
margin: 1rem;
133-
display: flex;
134-
`;
135-
136-
const Preference = styled.div`
137-
flex: 1;
138-
font-weight: 400;
139-
color: ${props =>
140-
props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
141-
align-items: center;
142-
justify-content: center;
143-
font-size: 0.875rem;
144-
`;
145-
146-
const IconContainer = styled.div`
147-
transition: 0.3s ease color;
148-
color: ${props =>
149-
props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
150-
cursor: pointer;
151-
152-
&:hover {
153-
color: white;
154-
}
155-
`;
156-
157-
interface IRoomInfo {
158-
users: Array<any>;
159-
editorIds: Array<any>;
160-
startTime: number;
161-
roomId: string;
162-
mode: string;
163-
}
30+
import { User } from './User';
16431

16532
interface ILiveInfoProps {
166-
roomInfo: IRoomInfo;
33+
roomInfo: RoomInfo;
16734
isOwner: boolean;
16835
isTeam: boolean;
16936
ownerIds: Array<any>;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.js

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { LiveUser, RoomInfo } from '@codesandbox/common/lib/types';
2+
import { useOvermind } from 'app/overmind';
3+
import React from 'react';
4+
5+
import { ProfileImage, Status, UserContainer, UserName } from './elements';
6+
7+
interface Props {
8+
user: LiveUser;
9+
type: string;
10+
sideView: React.ReactNode;
11+
roomInfo: RoomInfo;
12+
currentUserId: string;
13+
}
14+
15+
export const User: React.FC<Props> = ({
16+
user,
17+
type,
18+
sideView,
19+
roomInfo,
20+
currentUserId,
21+
}) => {
22+
// We need to observe the user and roomInfo
23+
useOvermind();
24+
25+
const metaData = roomInfo.users.find(u => u.id === user.id);
26+
const [r, g, b] = metaData ? metaData.color : [0, 0, 0];
27+
28+
const isCurrentUser = user.id === currentUserId;
29+
30+
return (
31+
<UserContainer isCurrentUser={isCurrentUser}>
32+
<ProfileImage
33+
src={user.avatarUrl}
34+
alt={user.username}
35+
borderColor={`rgba(${r}, ${g}, ${b}, 0.7)`}
36+
/>
37+
<div style={{ flex: 1 }}>
38+
<UserName>{user.username}</UserName>
39+
{type && (
40+
<Status>
41+
{type}
42+
{isCurrentUser && ' (you)'}
43+
</Status>
44+
)}
45+
</div>
46+
{sideView}
47+
</UserContainer>
48+
);
49+
};

0 commit comments

Comments
 (0)