Extract Team

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/elements.ts

@@ -0,0 +1,14 @@
+import TeamIconBase from 'react-icons/lib/md/people';
+import styled from 'styled-components';
+
+import { Item as ItemBase } from '../elements';
+
+export const Item = styled(ItemBase)`
+  color: white;
+  display: flex;
+`;
+
+export const TeamIcon = styled(TeamIconBase)`
+  font-size: 1.125em;
+  margin-right: 0.5rem;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/index.tsx

@@ -0,0 +1,28 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item, TeamIcon } from './elements';
+
+export const Team: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: {
+          team: { name },
+        },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Tooltip appendTo="parent" content="This sandbox is owned by this team">
+      <Item>
+        <TeamIcon />
+
+        <div>{name}</div>
+      </Item>
+    </Tooltip>
+  );
+};

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

@@ -7,12 +7,11 @@ import {
   patronUrl,
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { PrivacyStatus } from 'app/components/PrivacyStatus';
-import { Stats } from 'app/pages/common/Stats';
 import React, { ChangeEvent, FunctionComponent } from 'react';
-import TeamIcon from 'react-icons/lib/md/people';
 
+import { PrivacyStatus } from 'app/components/PrivacyStatus';
 import { useOvermind } from 'app/overmind';
+import { Stats } from 'app/pages/common/Stats';
 
 // import { Alias } from './Alias';
 import { Author } from './Author';
@@ -35,12 +34,13 @@ import {
 import { Frozen } from './Frozen';
 import { Keywords } from './Keywords';
 import { SandboxConfig } from './SandboxConfig';
+import { Team } from './Team';
 import { Title } from './Title';
 
 type Props = {
   editable?: boolean;
 };
-export const Project: FunctionComponent<Props> = ({ editable }) => {
+export const Project: FunctionComponent<Props> = ({ editable = false }) => {
   const {
     actions: {
       workspace: { sandboxPrivacyChanged },
@@ -76,15 +76,7 @@ export const Project: FunctionComponent<Props> = ({ editable }) => {
 
       {!team && author && <Author />}
 
-      {team && (
-        <Tooltip appendTo="parent" content="This sandbox is owned by this team">
-          <Item style={{ color: 'white', display: 'flex' }}>
-            <TeamIcon style={{ fontSize: '1.125em', marginRight: '.5rem' }} />
-
-            <div>{team.name}</div>
-          </Item>
-        </Tooltip>
-      )}
+      {team && <Team/>}
 
       {git && (
         <Item>