Drafts Skeleton

packages/app/src/app/pages/NewDashboard/Components/Filters/FilterOptions/Option.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Element, Checkbox, Text } from '@codesandbox/components';
+
+interface Props {
+  color: string;
+  id: string;
+  style?: React.CSSProperties;
+  niceName: string;
+  selected: boolean;
+  toggleTemplate: (name: string, selected: boolean) => void;
+}
+
+export const Option = ({
+  color,
+  id,
+  style,
+  niceName,
+  selected,
+  toggleTemplate,
+}: Props) => {
+  const checkBoxName = `${id}-checkbox`;
+  return (
+    <Element
+      // selected={selected}
+      onClick={e => {
+        e.preventDefault();
+        toggleTemplate(id, !selected);
+      }}
+      onMouseDown={e => {
+        e.preventDefault();
+      }}
+      style={style}
+    >
+      <label htmlFor={checkBoxName} style={{ display: 'none' }}>
+        {checkBoxName}
+      </label>
+      <Checkbox id={checkBoxName} color={color} checked={selected} />
+      <Text>{niceName}</Text>
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/FilterOptions/index.tsx

@@ -0,0 +1,109 @@
+import { orderBy } from 'lodash-es';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+import { Overlay as OverlayComponent } from 'app/components/Overlay';
+import { Element, Text } from '@codesandbox/components';
+import { Option } from './Option';
+
+type Template = {
+  id: string;
+  name: string;
+  color: string;
+  niceName: string;
+};
+type Props = {
+  possibleTemplates?: Template[];
+};
+export const FilterOptions: FunctionComponent<Props> = ({
+  possibleTemplates = [],
+}) => {
+  const {
+    actions: {
+      dashboard: {
+        blacklistedTemplateAdded,
+        blacklistedTemplateRemoved,
+        blacklistedTemplatesChanged,
+        blacklistedTemplatesCleared,
+      },
+    },
+    state: {
+      dashboard: {
+        filters: { blacklistedTemplates },
+        isTemplateSelected,
+      },
+    },
+  } = useOvermind();
+
+  const toggleTemplate = (name: string, select: boolean) =>
+    select ? blacklistedTemplateRemoved(name) : blacklistedTemplateAdded(name);
+  const allSelected = possibleTemplates.every(({ id }) =>
+    isTemplateSelected(id)
+  );
+
+  const Overlay = () => (
+    <Element>
+      {possibleTemplates.length > 0 ? (
+        <>
+          {orderBy(possibleTemplates, 'niceName').map(
+            ({ color, id, name, niceName }) => {
+              const selected = isTemplateSelected(id);
+
+              return (
+                <Option
+                  color={color}
+                  id={id}
+                  key={name}
+                  niceName={niceName || name}
+                  selected={selected}
+                  toggleTemplate={toggleTemplate}
+                />
+              );
+            }
+          )}
+
+          <Option
+            color="#374140"
+            id="all"
+            niceName="Select All"
+            selected={allSelected}
+            style={{ marginTop: '1rem' }}
+            toggleTemplate={() => {
+              if (allSelected) {
+                return blacklistedTemplatesChanged(
+                  possibleTemplates.map(({ id }) => id)
+                );
+              }
+
+              return blacklistedTemplatesCleared();
+            }}
+          />
+        </>
+      ) : (
+        'No environments found'
+      )}
+    </Element>
+  );
+
+  const templateCount = possibleTemplates.length - blacklistedTemplates.length;
+  const templateMessage =
+    templateCount === possibleTemplates.length && templateCount > 0
+      ? 'all environments'
+      : `${Math.max(0, templateCount)} ${
+          templateCount === 1 ? 'environment' : 'environments'
+        }`;
+
+  return (
+    <OverlayComponent
+      width={200}
+      content={Overlay}
+      event="Dashboard - Order By"
+    >
+      {open => (
+        <Element>
+          Showing <Text onClick={open}>{templateMessage}</Text>
+        </Element>
+      )}
+    </OverlayComponent>
+  );
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/SortOptions/FieldToName.ts

@@ -0,0 +1,5 @@
+export const FIELD_TO_NAME = {
+  insertedAt: 'Last Created',
+  updatedAt: 'Last Modified',
+  title: 'Name',
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/SortOptions/Overlay/Option/index.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import Check from 'react-icons/lib/md/check';
+import { Element } from '@codesandbox/components';
+
+type Props = {
+  currentField: string;
+  field: string;
+  name: string;
+  setField: (field: string) => void;
+};
+export const Option: FunctionComponent<Props> = ({
+  currentField,
+  field,
+  name,
+  setField,
+}) => {
+  const selected = field === currentField;
+
+  return (
+    <Element
+      onClick={() => setField(field)}
+      // selected={selected}
+    >
+      <Element>{selected && <Check />}</Element> {name}
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/SortOptions/Overlay/index.tsx

@@ -0,0 +1,46 @@
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+import { Element } from '@codesandbox/components';
+import { FIELD_TO_NAME } from '../FieldToName';
+import { Option } from './Option';
+
+export const Overlay: FunctionComponent = () => {
+  const {
+    actions: {
+      dashboard: { orderByChanged },
+    },
+    state: {
+      dashboard: {
+        orderBy: { field: currentField, order },
+      },
+    },
+  } = useOvermind();
+
+  const setField = (field: string) => orderByChanged({ field, order });
+
+  return (
+    <Element>
+      <Option
+        currentField={currentField}
+        field="title"
+        name={FIELD_TO_NAME.title}
+        setField={setField}
+      />
+
+      <Option
+        currentField={currentField}
+        field="insertedAt"
+        name={FIELD_TO_NAME.insertedAt}
+        setField={setField}
+      />
+
+      <Option
+        currentField={currentField}
+        field="updatedAt"
+        name={FIELD_TO_NAME.updatedAt}
+        setField={setField}
+      />
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/SortOptions/index.tsx

@@ -0,0 +1,54 @@
+import React, { FunctionComponent } from 'react';
+import ArrowDown from 'react-icons/lib/md/arrow-downward';
+import ArrowUp from 'react-icons/lib/md/arrow-upward';
+import { Overlay as OverlayComponent } from 'app/components/Overlay';
+import { useOvermind } from 'app/overmind';
+import { Element, Button } from '@codesandbox/components';
+import css from '@styled-system/css';
+import { FIELD_TO_NAME } from './FieldToName';
+import { Overlay } from './Overlay';
+
+export const SortOptions: FunctionComponent = () => {
+  const {
+    actions: {
+      dashboard: { orderByChanged },
+    },
+    state: {
+      dashboard: {
+        orderBy: { field, order },
+      },
+    },
+  } = useOvermind();
+
+  const toggleSort = event => {
+    event.preventDefault();
+
+    orderByChanged({
+      field,
+      order: order === 'asc' ? 'desc' : 'asc',
+    });
+  };
+
+  return (
+    <OverlayComponent
+      width={200}
+      content={Overlay}
+      event="Dashboard - Order By"
+    >
+      {open => (
+        <Element>
+          Sort by <Element onClick={open}>{FIELD_TO_NAME[field]}</Element>
+          <Button
+            variant="link"
+            css={css({
+              width: 'auto',
+            })}
+            onClick={toggleSort}
+          >
+            {order === 'desc' ? <ArrowDown /> : <ArrowUp />}
+          </Button>
+        </Element>
+      )}
+    </OverlayComponent>
+  );
+};

packages/app/src/app/pages/NewDashboard/Components/Filters/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Element } from '@codesandbox/components';
+import { FilterOptions } from './FilterOptions';
+import { SortOptions } from './SortOptions';
+
+export const Filters = ({ possibleTemplates }) => (
+  <Element>
+    <FilterOptions possibleTemplates={possibleTemplates} />
+
+    <SortOptions />
+  </Element>
+);

packages/app/src/app/pages/NewDashboard/Content/index.tsx

@@ -13,6 +13,7 @@ import css from '@styled-system/css';
 import { StartSandboxes } from './routes/StartSandboxes';
 import { Templates } from './routes/Templates';
 import { Deleted } from './routes/Deleted';
+import { Drafts } from './routes/Drafts';
 
 const ContentComponent = () => (
   <Element
@@ -28,6 +29,7 @@ const ContentComponent = () => (
       <Route path="/new-dashboard/start" component={StartSandboxes} />
       <Route path="/new-dashboard/templates" component={Templates} />
       <Route path="/new-dashboard/deleted" component={Deleted} />
+      <Route path="/new-dashboard/drafts" component={Drafts} />
       {/* <Route path="/dashboard/trash" component={DeletedSandboxes} />
     <Route path="/dashboard/templates" exact component={Templates} />
     <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />

packages/app/src/app/pages/NewDashboard/Content/routes/Drafts/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Element, Text } from '@codesandbox/components';
+import { useQuery } from '@apollo/react-hooks';
+import {
+  PathedSandboxesQueryVariables,
+  PathedSandboxesQuery,
+} from 'app/graphql/types';
+import { PATHED_SANDBOXES_CONTENT_QUERY } from 'app/pages/NewDashboard/queries';
+
+import css from '@styled-system/css';
+import { Filters } from 'app/pages/NewDashboard/Components/Filters';
+import { useOvermind } from 'app/overmind';
+import { getPossibleTemplates } from '../../utils';
+import { SandboxCard } from '../../../Components/SandboxCard';
+
+export const Drafts = () => {
+  const { state } = useOvermind();
+  const { loading, error, data } = useQuery<
+    PathedSandboxesQuery,
+    PathedSandboxesQueryVariables
+  >(PATHED_SANDBOXES_CONTENT_QUERY, {
+    variables: { path: '/', teamId: null },
+  });
+
+  if (error) {
+    return <Text>Error</Text>;
+  }
+
+  if (loading) {
+    return <Text>loading</Text>;
+  }
+
+  const sandboxes = data && data.me && data.me.collection.sandboxes;
+  const possibleTemplates = getPossibleTemplates(sandboxes);
+  const noTemplateSandboxes = sandboxes.filter(s => !s.customTemplate);
+  const orderedSandboxes = state.dashboard.getFilteredSandboxes(
+    // @ts-ignore
+    noTemplateSandboxes
+  );
+
+  return (
+    <Element>
+      <Text marginBottom={4} block>
+        Drafts
+      </Text>
+      <Filters possibleTemplates={possibleTemplates} />
+      <Element
+        css={css({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4,1fr)',
+          gridGap: 6,
+        })}
+      >
+        {orderedSandboxes.map(sandbox => (
+          <SandboxCard sandbox={sandbox} key={sandbox.id} />
+        ))}
+      </Element>
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Content/utils.ts

@@ -0,0 +1,19 @@
+import { uniqBy } from 'lodash-es';
+import getDefinition from '@codesandbox/common/lib/templates';
+
+export function getPossibleTemplates(sandboxes: any[]) {
+  return uniqBy(
+    sandboxes.map(x => {
+      const templateId = x.source?.template;
+      const template = getDefinition(templateId);
+
+      return {
+        id: templateId,
+        color: template.color,
+        name: template.name,
+        niceName: template.niceName,
+      };
+    }),
+    template => template.id
+  );
+}