Merge branch 'lusan-dashboard-sandbox-indexpage'

Author: SaraVieira

…/app/pages/Dashboard/Sidebar/elements.js …/app/pages/Dashboard/Sidebar/elements.tspackages/app/src/app/pages/Dashboard/Sidebar/elements.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/elements.ts packages/app/src/app/pages/Dashboard/Sidebar/elements.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/elements.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+import history from 'app/utils/history';
+import { useOvermind } from 'app/overmind';
+import { withRouter, Route } from 'react-router-dom';
+import { Query } from 'react-apollo';
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import PeopleIcon from 'react-icons/lib/md/people';
+import { teamOverviewUrl } from '@codesandbox/common/lib/utils/url-generator';
+import DashboardIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/dashboard.svg';
+
+import { Item } from './Item';
+import { SandboxesItem } from './SandboxesItem';
+import { TrashItem } from './TrashItem';
+import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements';
+import { TEAMS_QUERY } from '../queries';
+import { TemplateItem } from './TemplateItem';
+
+const SidebarComponent = () => {
+  const {
+    state: { dashboard: dashboardState },
+    actions: { dashboard: dashboardAction },
+  } = useOvermind();
+
+  const handleSearchFocus = () => {
+    history.push('/dashboard/search', { from: 'sandboxSearchFocused' });
+  };
+
+  const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    dashboardAction.searchChanged({ search: e.target.value });
+  };
+
+  return (
+    <SidebarStyled>
+      <InputWrapper>
+        <Input
+          onFocus={handleSearchFocus}
+          block
+          value={dashboardState.filters.search}
+          onChange={handleSearchChange}
+          placeholder="Search my sandboxes"
+        />
+      </InputWrapper>
+
+      <Route
+        path={[
+          '/dashboard/sandboxes/:path*',
+          '/dashboard/teams/:teamId/sandboxes/:path*',
+          '/',
+        ]}
+      >
+        {({ location, match }) => {
+          const testRegex = /\/dashboard.*?sandboxes/;
+
+          const path = location.pathname.replace(testRegex, '');
+          const currentTeamId = match ? match.params.teamId : undefined;
+
+          return (
+            <>
+              <Items style={{ marginBottom: '1rem' }}>
+                <Item
+                  Icon={DashboardIcon}
+                  path="/dashboard/recent"
+                  name="Overview"
+                />
+
+                <SandboxesItem
+                  selectedSandboxes={dashboardState.selectedSandboxes}
+                  currentPath={path}
+                  currentTeamId={currentTeamId}
+                  openByDefault
+                />
+
+                <TemplateItem currentPath={path} />
+
+                <TrashItem currentPath={path} />
+              </Items>
+
+              <Query query={TEAMS_QUERY}>
+                {({ loading, data, error }) => {
+                  if (loading || error || !data.me || !(data && data.me)) {
+                    return null;
+                  }
+
+                  const { teams = [] } = data.me;
+
+                  return teams.map(({ id, name }) => (
+                    <div key={id}>
+                      <Items>
+                        <CategoryHeader>{name}</CategoryHeader>
+                        <Item
+                          Icon={PeopleIcon}
+                          path={teamOverviewUrl(id)}
+                          name="Team Overview"
+                        />
+
+                        <SandboxesItem
+                          selectedSandboxes={dashboardState.selectedSandboxes}
+                          currentPath={path}
+                          currentTeamId={currentTeamId}
+                          teamId={id}
+                        />
+
+                        <TemplateItem currentPath={path} teamId={id} />
+                      </Items>
+                    </div>
+                  ));
+                }}
+              </Query>
+            </>
+          );
+        }}
+      </Route>
+
+      <div style={{ margin: '2rem', fontSize: '.875rem' }}>
+        <Button
+          style={{ display: 'block' }}
+          to="/dashboard/teams/new"
+          small
+          block
+        >
+          Create Team
+        </Button>
+      </div>
+    </SidebarStyled>
+  );
+};
+export const Sidebar = withRouter(SidebarComponent);

packages/app/src/app/pages/Dashboard/Sidebar/index.js

@@ -7,12 +7,12 @@ import { Navigation } from 'app/pages/common/Navigation';
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { client } from 'app/graphql/client';
 
-import SidebarContents from './Sidebar';
+import { Sidebar } from './Sidebar';
 import Content from './Content';
 import {
   Container,
   Content as ContentContainer,
-  Sidebar,
+  Sidebar as SidebarStyled,
   ShowSidebarButton,
 } from './elements';
 
@@ -52,16 +52,16 @@ const Dashboard = props => {
 
   const DashboardContent = (
     <>
-      <Sidebar active={showSidebar}>
-        <SidebarContents />
+      <SidebarStyled active={showSidebar}>
+        <Sidebar />
         <ShowSidebarButton onClick={toggleSidebar}>
           {showSidebar ? (
             <LeftIcon style={{ color: 'white' }} />
           ) : (
             <RightIcon style={{ color: 'white' }} />
           )}
         </ShowSidebarButton>
-      </Sidebar>
+      </SidebarStyled>
 
       <ContentContainer>
         <Content />