User: refactor live user component (codesandbox#3196)

* refactor live user component

* move elements and fix types

Author: christianalfoni

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

@@ -1,169 +1,36 @@
-import React from 'react';
-import styled from 'styled-components';
-import { sortBy } from 'lodash-es';
-
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
-import Input from '@codesandbox/common/lib/components/Input';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import delay from '@codesandbox/common/lib/utils/animation/delay-effect';
 import Switch from '@codesandbox/common/lib/components/Switch';
-
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-
-import AddIcon from 'react-icons/lib/md/add';
-import RemoveIcon from 'react-icons/lib/md/remove';
+import { RoomInfo } from '@codesandbox/common/lib/types';
+import { sortBy } from 'lodash-es';
+import React from 'react';
 import FollowIcon from 'react-icons/lib/io/eye';
 import UnFollowIcon from 'react-icons/lib/io/eye-disabled';
+import AddIcon from 'react-icons/lib/md/add';
+import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+import RemoveIcon from 'react-icons/lib/md/remove';
 
-import User from './User';
+import { Description, WorkspaceInputContainer } from '../../elements';
 import Countdown from './Countdown';
+import {
+  Container,
+  IconContainer,
+  Mode,
+  ModeDetails,
+  ModeSelect,
+  ModeSelector,
+  Preference,
+  PreferencesContainer,
+  StyledInput,
+  SubTitle,
+  Title,
+  Users,
+} from './elements';
 import LiveButton from './LiveButton';
-
-import { Description, WorkspaceInputContainer } from '../../elements';
-
-const Container = styled.div`
-  ${delay()};
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  box-sizing: border-box;
-`;
-
-const Title = styled.div`
-  color: #fd2439fa;
-  font-weight: 800;
-  display: flex;
-  align-items: center;
-  vertical-align: middle;
-
-  padding: 0.5rem 1rem;
-  padding-top: 0;
-
-  svg {
-    margin-right: 0.25rem;
-  }
-`;
-
-const StyledInput = styled(Input)`
-  width: calc(100% - 1.5rem);
-  margin: 0 0.75rem;
-  font-size: 0.875rem;
-`;
-
-const SubTitle = styled.div`
-  text-transform: uppercase;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
-
-  padding-left: 1rem;
-  font-size: 0.875rem;
-`;
-
-const Users = styled.div`
-  padding: 0.25rem 1rem;
-  padding-top: 0;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-`;
-
-const ModeSelect = styled.div`
-  position: relative;
-  margin: 0.5rem 1rem;
-`;
-
-interface IModeProps {
-  selected: boolean;
-}
-const Mode = styled.button`
-  display: block;
-  text-align: left;
-  transition: 0.3s ease opacity;
-  padding: 0.5rem 1rem;
-  color: white;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 1rem;
-
-  font-weight: 600;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: ${props => (props.onClick ? 'pointer' : 'inherit')};
-  color: white;
-  opacity: ${(props: IModeProps) => (props.selected ? 1 : 0.6)};
-  margin: 0.25rem 0;
-
-  z-index: 3;
-
-  ${props =>
-    props.onClick &&
-    `
-  &:hover {
-    opacity: 1;
-  }`};
-`;
-
-const ModeDetails = styled.div`
-  font-size: 0.75rem;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  margin-top: 0.25rem;
-`;
-
-interface IModeSelectorProps {
-  i: number;
-}
-const ModeSelector = styled.div`
-  transition: 0.3s ease transform;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 48px;
-
-  border: 2px solid rgba(253, 36, 57, 0.6);
-  background-color: rgba(253, 36, 57, 0.6);
-  border-radius: 4px;
-  z-index: -1;
-
-  transform: translateY(${(props: IModeSelectorProps) => props.i * 55}px);
-`;
-
-const PreferencesContainer = styled.div`
-  margin: 1rem;
-  display: flex;
-`;
-
-const Preference = styled.div`
-  flex: 1;
-  font-weight: 400;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-`;
-
-const IconContainer = styled.div`
-  transition: 0.3s ease color;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-  cursor: pointer;
-
-  &:hover {
-    color: white;
-  }
-`;
-
-interface IRoomInfo {
-  users: Array<any>;
-  editorIds: Array<any>;
-  startTime: number;
-  roomId: string;
-  mode: string;
-}
+import { User } from './User';
 
 interface ILiveInfoProps {
-  roomInfo: IRoomInfo;
+  roomInfo: RoomInfo;
   isOwner: boolean;
   isTeam: boolean;
   ownerIds: Array<any>;

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

@@ -0,0 +1,49 @@
+import { LiveUser, RoomInfo } from '@codesandbox/common/lib/types';
+import { useOvermind } from 'app/overmind';
+import React from 'react';
+
+import { ProfileImage, Status, UserContainer, UserName } from './elements';
+
+interface Props {
+  user: LiveUser;
+  type: string;
+  sideView: React.ReactNode;
+  roomInfo: RoomInfo;
+  currentUserId: string;
+}
+
+export const User: React.FC<Props> = ({
+  user,
+  type,
+  sideView,
+  roomInfo,
+  currentUserId,
+}) => {
+  // We need to observe the user and roomInfo
+  useOvermind();
+
+  const metaData = roomInfo.users.find(u => u.id === user.id);
+  const [r, g, b] = metaData ? metaData.color : [0, 0, 0];
+
+  const isCurrentUser = user.id === currentUserId;
+
+  return (
+    <UserContainer isCurrentUser={isCurrentUser}>
+      <ProfileImage
+        src={user.avatarUrl}
+        alt={user.username}
+        borderColor={`rgba(${r}, ${g}, ${b}, 0.7)`}
+      />
+      <div style={{ flex: 1 }}>
+        <UserName>{user.username}</UserName>
+        {type && (
+          <Status>
+            {type}
+            {isCurrentUser && ' (you)'}
+          </Status>
+        )}
+      </div>
+      {sideView}
+    </UserContainer>
+  );
+};