Refactor nav (codesandbox#3171)

* Refactor src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements to Typescript

* Refactor src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/NavigationLink to Typescript

* Refactor src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/index to Typescript

* Refactor styled component NavigationLink to use fist/last-of-type instead of passing props


Co-authored-by: null <[email protected]>

Author: SaraVieira

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/NavigationLink.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { DropTarget, ConnectDropTarget } from 'react-dnd';
+import {
+  entryTarget,
+  collectTarget,
+} from '../../../../Sidebar/SandboxesItem/folder-drop-target';
+import { NavigationLink as StyledLink } from './elements';
+
+interface ICollectedProps {
+  connectDropTarget: ConnectDropTarget;
+}
+
+interface IOwnProps {
+  teamId?: string;
+  name: string;
+  path: string;
+}
+
+type Props = ICollectedProps & IOwnProps;
+
+const Link: React.FC<Props> = ({ teamId, name, path, connectDropTarget }) =>
+  connectDropTarget(
+    <div>
+      <StyledLink
+        to={
+          teamId
+            ? `/dashboard/teams/${teamId}/sandboxes${path}`
+            : `/dashboard/sandboxes${path}`
+        }
+      >
+        {name}
+      </StyledLink>
+    </div>
+  );
+
+// TODO: remove generic when entryTarget(DropTargetSpec) and collectTarget(DropTargetCollector) are typed
+export const NavigationLink = DropTarget<IOwnProps, ICollectedProps>(
+  'SANDBOX',
+  entryTarget,
+  collectTarget
+)(Link);

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/NavigationLink.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
@@ -23,24 +23,19 @@ export const NavigationLink = styled(Link)`
     margin-right: 0;
   }
 
-  ${props =>
-    props.first
-      ? css`
-          margin-left: 0;
-        `
-      : css`
-          margin-left: 0.5rem;
-        `};
+  margin-left: 0.5rem;
+  &:first-of-type {
+    margin-left: 0;
+  }
+
+  &:last-of-type {
+    color: white;
+  }
 
-  ${props =>
-    props.last
-      ? css`
-          color: white;
-        `
-      : css`
-          &::after {
-            content: '›';
-            margin-left: 0.5rem;
-          }
-        `};
+  &::after {
+    content: '›';
+  }
+  &:last-of-type::after {
+    content: none;
+  }
 `;

…s/PathedSandboxes/Navigation/elements.js …s/PathedSandboxes/Navigation/elements.tspackages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.ts packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Navigation/elements.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { join } from 'path';
+
+import { Container } from './elements';
+import { NavigationLink } from './NavigationLink';
+
+interface INavigationProps {
+  path: string;
+  teamId?: string;
+}
+
+export const Navigation: React.FC<INavigationProps> = ({ path, teamId }) => {
+  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 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} />
+      ))}
+    </Container>
+  );
+};