Extract Privacy

Author: MichaelDeBoey

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

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+
+export const PrivacyContainer = styled.span`
+  ${({ theme }) => css`
+    margin-bottom: 1rem;
+    color: ${theme.templateColor};
+    font-size: 0.875rem;
+  `}
+`;
+
+export const PrivacySelect = styled.select`
+  ${({ theme }) => css`
+    width: 100%;
+    /* Same size as other items */
+    height: 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: ${theme[`dropdown.background`] || 'rgba(0, 0, 0, 0.3)'};
+    box-sizing: border-box;
+    color: ${theme[`dropdown.foreground`] ||
+      (theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)')};
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  `}
+`;

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

@@ -0,0 +1,57 @@
+import React, { ChangeEvent, FunctionComponent } from 'react';
+
+import { PrivacyStatus } from 'app/components/PrivacyStatus';
+import { useOvermind } from 'app/overmind';
+
+import { Item, PropertyName, PropertyValue } from '../elements';
+
+import { PrivacyContainer, PrivacySelect } from './elements';
+
+type Props = {
+  editable: boolean;
+};
+export const Privacy: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxPrivacyChanged },
+    },
+    state: {
+      editor: {
+        currentSandbox: { privacy },
+      },
+      isPatron,
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <PropertyName>Privacy</PropertyName>
+
+      <PropertyValue>
+        <PrivacyContainer>
+          {editable ? (
+            <PrivacySelect
+              disabled={!isPatron}
+              onChange={({
+                target: { value },
+              }: ChangeEvent<HTMLSelectElement>) =>
+                sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
+              }
+              value={privacy}
+            >
+              <option value={0}>Public</option>
+
+              {isPatron && (
+                <option value={1}>Unlisted (only available by url)</option>
+              )}
+
+              {isPatron && <option value={2}>Private</option>}
+            </PrivacySelect>
+          ) : (
+            <PrivacyStatus privacy={privacy} />
+          )}
+        </PrivacyContainer>
+      </PropertyValue>
+    </Item>
+  );
+};

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

@@ -47,25 +47,6 @@ export const PropertyValue = styled.span<{ relative?: boolean }>`
   `}
 `;
 
-export const PrivacySelect = styled.select`
-  ${({ theme }) => css`
-    width: 100%;
-    /* Same size as other items */
-    height: 20px;
-    border: none;
-    border-radius: 4px;
-    background-color: ${theme[`dropdown.background`] ||
-      css`rgba(0, 0, 0, 0.3)`};
-    box-sizing: border-box;
-    color: ${theme[`dropdown.foreground`] ||
-      (theme.light ? css`rgba(0, 0, 0, 0.8)` : css`rgba(255, 255, 255, 0.8)`)};
-
-    &:disabled {
-      opacity: 0.5;
-    }
-  `}
-`;
-
 export const StatsContainer = styled(Item)`
   ${({ theme }) => css`
     height: 1.5rem;
@@ -78,14 +59,6 @@ export const StatsContainer = styled(Item)`
   `}
 `;
 
-export const PrivacyContainer = styled.span`
-  ${({ theme }) => css`
-    margin-bottom: 1rem;
-    color: ${theme.templateColor};
-    font-size: 0.875rem;
-  `}
-`;
-
 export const EditPen = styled(EditPenIcon)`
   ${({ theme }) => css`
     margin-left: 0.5rem;

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

@@ -5,9 +5,8 @@ import {
   patronUrl,
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 
-import { PrivacyStatus } from 'app/components/PrivacyStatus';
 import { useOvermind } from 'app/overmind';
 import { Stats } from 'app/pages/common/Stats';
 
@@ -22,8 +21,6 @@ import {
   Group,
   Icon,
   Item,
-  PrivacyContainer,
-  PrivacySelect,
   PropertyName,
   PropertyValue,
   StatsContainer,
@@ -32,6 +29,7 @@ import {
 import { Frozen } from './Frozen';
 import { Git } from './Git';
 import { Keywords } from './Keywords';
+import { Privacy } from './Privacy';
 import { SandboxConfig } from './SandboxConfig';
 import { Team } from './Team';
 import { Title } from './Title';
@@ -41,9 +39,6 @@ type Props = {
 };
 export const Project: FunctionComponent<Props> = ({ editable = false }) => {
   const {
-    actions: {
-      workspace: { sandboxPrivacyChanged },
-    },
     state: {
       editor: {
         currentSandbox,
@@ -52,7 +47,6 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
           forkedFromSandbox,
           forkedTemplateSandbox,
           git,
-          privacy,
           team,
           template,
         },
@@ -86,35 +80,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
       <Keywords editable={editable} />
 
       <Group>
-        <Item>
-          <PropertyName>Privacy</PropertyName>
-
-          <PropertyValue>
-            <PrivacyContainer>
-              {editable ? (
-                <PrivacySelect
-                  disabled={!isPatron}
-                  onChange={({
-                    target: { value },
-                  }: ChangeEvent<HTMLSelectElement>) =>
-                    sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
-                  }
-                  value={privacy}
-                >
-                  <option value={0}>Public</option>
-
-                  {isPatron && (
-                    <option value={1}>Unlisted (only available by url)</option>
-                  )}
-
-                  {isPatron && <option value={2}>Private</option>}
-                </PrivacySelect>
-              ) : (
-                <PrivacyStatus privacy={privacy} />
-              )}
-            </PrivacyContainer>
-          </PropertyValue>
-        </Item>
+        <Privacy editable={editable} />
 
         {!isPatron && (
           <Explanation style={{ marginTop: '-1rem' }}>