add persistent view toggle (codesandbox#4009)

Author: SaraVieira

packages/app/src/app/overmind/namespaces/dashboard/actions.ts

@@ -9,11 +9,19 @@ import {
 import Fuse from 'fuse.js';
 import { OrderBy, sandboxesTypes } from './state';
 
+const VIEW_MODE_DASHBOARD = 'VIEW_MODE_DASHBOARD';
+
 // DELETE WHEN NEW DASHBOARD ONLINE
 export const dashboardMounted: AsyncAction = async (context, value) => {
   await withLoadApp()(context, value);
 };
 
+export const newDashboardMounted: Action = ({ state, effects }) => {
+  const localStorageViewMode = effects.browser.storage.get(VIEW_MODE_DASHBOARD);
+  if (localStorageViewMode) {
+    state.dashboard.viewMode = localStorageViewMode;
+  }
+};
 export const sandboxesSelected: Action<{
   sandboxIds: string[];
 }> = ({ state }, { sandboxIds }) => {
@@ -78,6 +86,14 @@ export const searchChanged: Action<{ search: string }> = (
   state.dashboard.filters.search = search;
 };
 
+export const viewModeChanged: Action<{ mode: 'grid' | 'list' }> = (
+  { state, effects },
+  { mode }
+) => {
+  state.dashboard.viewMode = mode;
+  effects.browser.storage.set(VIEW_MODE_DASHBOARD, mode);
+};
+
 export const createSandboxClicked: AsyncAction<{
   body: { collectionId: string };
   sandboxId: string;

packages/app/src/app/pages/NewDashboard/Components/Filters/ViewOptions/icons.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const GridIcon = props => (
+  <svg width={15} height={14} fill="none" viewBox="0 0 15 14" {...props}>
+    <path
+      fill={props.active ? '#fff' : '#757575'}
+      fillRule="evenodd"
+      d="M6.709 0H.65v6H6.71V0zm0 8H.65v6H6.71V8zm2.02 0h6.057v6H8.728V8zm6.057-8H8.728v6h6.058V0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const ListIcon = props => (
+  <svg width={15} height={15} fill="none" viewBox="0 0 10 10" {...props}>
+    <path
+      fill={props.active ? '#fff' : '#757575'}
+      fillRule="evenodd"
+      d="M2.5 0H0v2.5h2.5V0zm0 3.75H0v2.5h2.5v-2.5zM0 7.5h2.5V10H0V7.5zm10-3.75H3.75v2.5H10v-2.5zM3.75 7.5H10V10H3.75V7.5zM10 0H3.75v2.5H10V0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

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

@@ -0,0 +1,56 @@
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { Text, Menu, Stack } from '@codesandbox/components';
+import { GridIcon, ListIcon } from './icons';
+
+const STATES: { name: string; key: 'grid' | 'list'; icon: any }[] = [
+  {
+    name: 'Grid View',
+    key: 'grid',
+    icon: GridIcon,
+  },
+  {
+    name: 'List View',
+    key: 'list',
+    icon: ListIcon,
+  },
+];
+
+export const ViewOptions: FunctionComponent = () => {
+  const {
+    actions: {
+      dashboard: { viewModeChanged },
+    },
+    state: {
+      dashboard: { viewMode },
+    },
+  } = useOvermind();
+
+  return (
+    <>
+      <Menu>
+        <Menu.Button>
+          {viewMode === 'grid' ? <GridIcon /> : <ListIcon />}
+        </Menu.Button>
+        <Menu.List>
+          {STATES.map(viewState => (
+            <Menu.Item
+              field={viewState.key}
+              onSelect={() => viewModeChanged({ mode: viewState.key })}
+            >
+              <Stack gap={4} align="center" justify="space-between">
+                <Text variant={viewMode === viewState.key ? 'body' : 'muted'}>
+                  {viewState.name}
+                </Text>
+                {viewState.icon({
+                  width: 10,
+                  active: viewMode === viewState.key,
+                })}
+              </Stack>
+            </Menu.Item>
+          ))}
+        </Menu.List>
+      </Menu>
+    </>
+  );
+};

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

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

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

@@ -12,7 +12,7 @@ export const SandboxComponent = props => {
 
   if (dashboard.viewMode === 'list' || props.match.path.includes('deleted')) {
     return (
-      <Element style={{ gridColumnStart: 4 }}>
+      <Element style={{ gridColumn: '1/-1' }}>
         <SandboxItem {...props} />
       </Element>
     );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { Element } from '@codesandbox/components';
 import css from '@styled-system/css';
@@ -14,8 +14,13 @@ import { Search } from './routes/Search';
 export const Content = () => {
   const {
     state: { dashboard },
+    actions,
   } = useOvermind();
 
+  useEffect(() => {
+    actions.dashboard.newDashboardMounted();
+  }, [actions.dashboard]);
+
   return (
     <Element
       as="main"