Fix dashboard navigation (codesandbox#3184)

CompuIves · web-flow · commit c3f36805fe44 · 2019-12-11T15:43:12.000+01:00
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/NavigationLink.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/NavigationLink.tsx
@@ -8,17 +8,30 @@ import { NavigationLink as StyledLink } from './elements';
 
 interface ICollectedProps {
   connectDropTarget: ConnectDropTarget;
+  isOver: boolean;
 }
 
 interface IOwnProps {
   teamId?: string;
   name: string;
   path: string;
+  splittedPath: string[];
+  i: number;
+  // We need this to make drag & drop work
+  selectedSandboxes: string[];
 }
 
 type Props = ICollectedProps & IOwnProps;
 
-const Link: React.FC<Props> = ({ teamId, name, path, connectDropTarget }) =>
+const Link: React.FC<Props> = ({
+  teamId,
+  name,
+  path,
+  isOver,
+  splittedPath,
+  i,
+  connectDropTarget,
+}) =>
   connectDropTarget(
     <div>
       <StyledLink
@@ -27,6 +40,9 @@ const Link: React.FC<Props> = ({ teamId, name, path, connectDropTarget }) =>
             ? `/dashboard/teams/${teamId}/sandboxes${path}`
             : `/dashboard/sandboxes${path}`
         }
+        last={i === splittedPath.length - 1 ? 'true' : undefined}
+        first={i === 0 ? 'true' : undefined}
+        style={isOver ? { color: 'white' } : {}}
       >
         {name}
       </StyledLink>
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.ts b/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
@@ -9,7 +9,7 @@ export const Container = styled.div`
 
 // TODO: Use withoutProps utility from common once Follow Templates is merged
 //       to remove the DOM error for teamId prop
-export const NavigationLink = styled(Link)`
+export const NavigationLink = styled(Link)<{ first?: string; last?: string }>`
   transition: 0.3s ease color;
   margin-right: 0.5rem;
   text-decoration: none;
@@ -23,19 +23,24 @@ export const NavigationLink = styled(Link)`
     margin-right: 0;
   }
 
-  margin-left: 0.5rem;
-  &:first-of-type {
-    margin-left: 0;
-  }
-
-  &:last-of-type {
-    color: white;
-  }
+  ${props =>
+    props.first
+      ? css`
+          margin-left: 0;
+        `
+      : css`
+          margin-left: 0.5rem;
+        `};
 
-  &::after {
-    content: '›';
-  }
-  &:last-of-type::after {
-    content: none;
-  }
+  ${props =>
+    props.last
+      ? css`
+          color: white;
+        `
+      : css`
+          &::after {
+            content: '›';
+            margin-left: 0.5rem;
+          }
+        `};
 `;
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/index.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { join } from 'path';
 
+import { useOvermind } from 'app/overmind';
 import { Container } from './elements';
 import { NavigationLink } from './NavigationLink';
 
@@ -10,25 +11,33 @@ interface INavigationProps {
 }
 
 export const Navigation: React.FC<INavigationProps> = ({ path, teamId }) => {
+  const { state } = useOvermind();
+
   const splittedPath = path === '/' ? [''] : path.split('/');
 
-  const paths: Array<{ url: string; name: string }> = splittedPath.reduce(
-    (bases, next) => {
-      if (next === '') {
-        return [{ url: '/', name: teamId ? 'Team Sandboxes' : 'My Sandboxes' }];
-      }
+  const paths = splittedPath.reduce((bases, next) => {
+    if (next === '') {
+      return [{ url: '/', name: teamId ? 'Team Sandboxes' : 'My Sandboxes' }];
+    }
 
-      const baseUrl = bases[bases.length - 1].url;
-      bases.push({ url: join(baseUrl, next), name: next });
-      return bases;
-    },
-    []
-  );
+    const baseUrl = bases[bases.length - 1].url;
+    bases.push({ url: join(baseUrl, next), name: next });
+    return bases;
+  }, []);
 
   return (
     <Container>
-      {paths.map(({ name, url }) => (
-        <NavigationLink teamId={teamId} name={name} path={url} key={url} />
+      {paths.map(({ name, url }, i) => (
+        <NavigationLink
+          teamId={teamId}
+          name={name}
+          path={url}
+          splittedPath={splittedPath}
+          i={i}
+          key={url}
+          // Give this prop to make drag & drop work
+          selectedSandboxes={state.dashboard.selectedSandboxes}
+        />
       ))}
     </Container>
   );
