Extract ForkedFrom

Author: MichaelDeBoey

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

@@ -0,0 +1,8 @@
+import { Link as LinkBase } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const Link = styled(LinkBase)`
+  ${({ theme }) => css`
+    color: ${theme.templateColor} !important;
+  `}
+`;

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

@@ -0,0 +1,31 @@
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item, PropertyName, PropertyValue } from '../elements';
+
+import { Link } from './elements';
+
+export const ForkedFrom: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: { forkedFromSandbox },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <PropertyName>Forked From</PropertyName>
+
+      <PropertyValue>
+        <Link to={sandboxUrl(forkedFromSandbox)}>
+          {getSandboxName(forkedFromSandbox)}
+        </Link>
+      </PropertyValue>
+    </Item>
+  );
+};

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

@@ -1,6 +1,5 @@
 import Question from 'react-icons/lib/go/question';
 import EditPenIcon from 'react-icons/lib/md/create';
-import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
@@ -82,12 +81,6 @@ export const Icon = styled(Question)`
   cursor: pointer;
 `;
 
-export const TemplateStyledLink = styled(Link)`
-  ${({ theme }) => css`
-    color: ${theme.templateColor} !important;
-  `}
-`;
-
 export const BundlerLink = styled.a.attrs({
   target: '_blank',
   rel: 'noreferrer noopener',

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

@@ -1,7 +1,5 @@
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -20,8 +18,8 @@ import {
   PropertyName,
   PropertyValue,
   StatsContainer,
-  TemplateStyledLink,
 } from './elements';
+import { ForkedFrom } from './ForkedFrom';
 import { Frozen } from './Frozen';
 import { Git } from './Git';
 import { Keywords } from './Keywords';
@@ -76,17 +74,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
 
         {editable && <Frozen />}
 
-        {forkedFromSandbox && (
-          <Item>
-            <PropertyName>Forked From</PropertyName>
-
-            <PropertyValue>
-              <TemplateStyledLink to={sandboxUrl(forkedFromSandbox)}>
-                {getSandboxName(forkedFromSandbox)}
-              </TemplateStyledLink>
-            </PropertyValue>
-          </Item>
-        )}
+        {forkedFromSandbox && <ForkedFrom />}
 
         <Item>
           <PropertyName>