Update embed url to go to relevant git sandbox

Author: Ives van Hoorne

src/embed/components/EditorLink.js

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import Logo from 'app/components/Logo';
 
+import { sandboxUrl } from 'app/utils/url-generator';
+
 type Props = {
   id: string,
   small: boolean,
@@ -24,16 +26,13 @@ const Text = styled.span`
   }
 `;
 
-export default ({ id, small }: Props) => (
+export default ({ sandbox, small }: Props) =>
   <EditText
     small={small}
     target="_blank"
     rel="noopener noreferrer"
-    href={`/s/${id}`}
+    href={sandboxUrl(sandbox) + document.location.search}
   >
-    <Text small={small}>
-      Edit on CodeSandbox
-    </Text>
+    <Text small={small}>Edit on CodeSandbox</Text>
     <Logo />
-  </EditText>
-);
+  </EditText>;

src/embed/components/EditorLink.test.js

@@ -4,6 +4,6 @@ import EditorLink from './EditorLink';
 
 describe('EditorLink', () => {
   it('renders', () => {
-    testRender(<EditorLink />);
+    testRender(<EditorLink sandbox={{}} />);
   });
 });

src/embed/components/Header.js

@@ -37,11 +37,7 @@ const RightAligned = styled.div`
   justify-content: center;
 `;
 
-const Title = styled.div`
-  @media (max-width: 450px) {
-    display: none;
-  }
-`;
+const Title = styled.div`@media (max-width: 450px) {display: none;}`;
 
 type Props = {
   sandbox: Sandbox,
@@ -69,7 +65,9 @@ export default class Header extends React.PureComponent {
     return (
       <Container>
         <MenuIcon onClick={toggleSidebar} />
-        <Title>{sandbox.title || sandbox.id}</Title>
+        <Title>
+          {sandbox.title || sandbox.id}
+        </Title>
         <ModeIcons
           showEditor={showEditor}
           showPreview={showPreview}
@@ -78,7 +76,7 @@ export default class Header extends React.PureComponent {
           setMixedView={setMixedView}
         />
         <RightAligned>
-          <EditorLink small id={sandbox.id} />
+          <EditorLink small sandbox={sandbox} />
         </RightAligned>
       </Container>
     );

src/embed/components/Sidebar.js

@@ -5,8 +5,7 @@ import type { Sandbox } from 'common/types';
 
 import EditorLink from './EditorLink';
 import Files from './Files';
-import EntryContainer
-  from '../../app/pages/Sandbox/Editor/Workspace/EntryContainer';
+import EntryContainer from '../../app/pages/Sandbox/Editor/Workspace/EntryContainer';
 import Padding from '../../app/components/spacing/Padding';
 
 const Container = styled.div`
@@ -44,7 +43,8 @@ const Description = styled.p`
 
 const Item = styled.div`
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  ${({ hover, theme }) => hover && `&:hover { background-color: ${theme.background.darken(0.3)()};}`}
+  ${({ hover, theme }) =>
+    hover && `&:hover { background-color: ${theme.background.darken(0.3)()};}`};
 `;
 
 const Version = styled.div`
@@ -82,13 +82,20 @@ type Props = {
   currentModule: string,
 };
 
-export default ({ sandbox, setCurrentModule, currentModule }: Props) => (
+export default ({ sandbox, setCurrentModule, currentModule }: Props) =>
   <Container>
     <Item>
-      <Title>{sandbox.title || sandbox.id}</Title>
+      <Title>
+        {sandbox.title || sandbox.id}
+      </Title>
       {sandbox.author &&
-        <Author>Made by <strong>{sandbox.author.username}</strong></Author>}
-      {sandbox.description && <Description>{sandbox.description}</Description>}
+        <Author>
+          Made by <strong>{sandbox.author.username}</strong>
+        </Author>}
+      {sandbox.description &&
+        <Description>
+          {sandbox.description}
+        </Description>}
     </Item>
 
     <Item>
@@ -106,27 +113,28 @@ export default ({ sandbox, setCurrentModule, currentModule }: Props) => (
       <Title>Dependencies</Title>
 
       <Subtitle>NPM Dependencies</Subtitle>
-      {Object.keys(sandbox.npmDependencies).map(dep => (
+      {Object.keys(sandbox.npmDependencies).map(dep =>
         <EntryContainer key={dep}>
           {dep}
-          <Version>{sandbox.npmDependencies[dep]}</Version>
-        </EntryContainer>
-      ))}
+          <Version>
+            {sandbox.npmDependencies[dep]}
+          </Version>
+        </EntryContainer>,
+      )}
 
       <Subtitle>External Resources</Subtitle>
-      {sandbox.externalResources.map(dep => (
+      {sandbox.externalResources.map(dep =>
         <EntryContainer key={dep}>
           <a href={dep} rel="nofollow noopener noreferrer" target="_blank">
             {getName(dep)}
           </a>
-        </EntryContainer>
-      ))}
+        </EntryContainer>,
+      )}
     </Item>
 
     <Item hover>
       <Padding margin={1}>
-        <EditorLink id={sandbox.id} />
+        <EditorLink sandbox={sandbox} />
       </Padding>
     </Item>
-  </Container>
-);
+  </Container>;

src/homepage/index.html

@@ -152,7 +152,7 @@ <h3>Example Projects</h3>
       <a href="/s/mZRjw05yp" class="project">
         Redux Form
       </a>
-      <a href="/s/github/faceyspacey/redux-first-router-codesandbox" class="project">
+      <a href="/s/github/faceyspacey/redux-first-router-codesandbox?module=rJHWLQms2rZ" class="project">
         Redux-First Router
       </a>
       <a href="/s/nZ26kGMD" class="project">