From 7814f83b36187ec94299bced73525c84efc54bd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Mon, 7 Oct 2019 02:06:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20FilterOptions=20to=20us?=
 =?UTF-8?q?e=20useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overmind/namespaces/dashboard/actions.ts  |  12 +-
 .../Filters/FilterOptions/elements.ts         | 148 +++++++++---------
 .../Sandboxes/Filters/FilterOptions/index.tsx | 101 ++++++------
 .../Content/Sandboxes/Filters/index.tsx       |  22 +--
 .../Dashboard/Content/Sandboxes/index.tsx     | 142 +++++++++--------
 .../Dashboard/Content/Sandboxes/types.ts      |   6 -
 6 files changed, 214 insertions(+), 217 deletions(-)
 delete mode 100644 packages/app/src/app/pages/Dashboard/Content/Sandboxes/types.ts

diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
index c27b0aadf06..7f90eef7296 100755
--- a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -30,16 +30,16 @@ export const orderByChanged: Action<{ orderBy: OrderBy }> = (
   state.dashboard.orderBy = orderBy;
 };
 
-export const blacklistedTemplateAdded: Action<{ template: string }> = (
+export const blacklistedTemplateAdded: Action<string> = (
   { state },
-  { template }
+  template
 ) => {
   state.dashboard.filters.blacklistedTemplates.push(template);
 };
 
-export const blacklistedTemplateRemoved: Action<{ template: string }> = (
+export const blacklistedTemplateRemoved: Action<string> = (
   { state },
-  { template }
+  template
 ) => {
   state.dashboard.filters.blacklistedTemplates = state.dashboard.filters.blacklistedTemplates.filter(
     currentTemplate => currentTemplate !== template
@@ -50,9 +50,9 @@ export const blacklistedTemplatesCleared: Action = ({ state }) => {
   state.dashboard.filters.blacklistedTemplates = [];
 };
 
-export const blacklistedTemplatesChanged: Action<{ templates: string[] }> = (
+export const blacklistedTemplatesChanged: Action<string[]> = (
   { state },
-  { templates }
+  templates
 ) => {
   state.dashboard.filters.blacklistedTemplates = templates;
 };
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts
index f0c1e5edc8f..adfc226c56c 100644
--- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts
+++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts
@@ -1,20 +1,21 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div<{ hideFilters: boolean }>`
-  transition: 0.3s ease opacity;
-  position: relative;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.875rem;
-
-  margin-right: 1rem;
-  vertical-align: middle;
-
-  ${props =>
-    props.hideFilters &&
-    css`
-      opacity: 0.5;
-      pointer-events: none;
-    `};
+  ${({ hideFilters }) => css`
+    transition: 0.3s ease opacity;
+    position: relative;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.875rem;
+
+    margin-right: 1rem;
+    vertical-align: middle;
+
+    ${hideFilters &&
+      css`
+        opacity: 0.5;
+        pointer-events: none;
+      `};
+  `};
 `;
 
 export const TemplatesName = styled.span`
@@ -29,21 +30,23 @@ export const TemplatesName = styled.span`
 `;
 
 export const OverlayContainer = styled.div`
-  overflow: hidden;
-  box-sizing: border-box;
-  right: 0;
-  text-align: left;
-  line-height: 1.6;
-  width: 300px;
-  padding: 1rem;
-  z-index: 10;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.875rem;
-
-  border-radius: 2px;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-
-  background-color: ${props => props.theme.background};
+  ${({ theme }) => css`
+    overflow: hidden;
+    box-sizing: border-box;
+    right: 0;
+    text-align: left;
+    line-height: 1.6;
+    width: 300px;
+    padding: 1rem;
+    z-index: 10;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.875rem;
+
+    border-radius: 2px;
+    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+
+    background-color: ${theme.background};
+  `};
 `;
 
 export const OptionName = styled.span`
@@ -52,62 +55,61 @@ export const OptionName = styled.span`
 `;
 
 export const Option = styled.div<{ selected: boolean }>`
-  transition: 0.3s ease color;
-  cursor: pointer;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+  ${({ selected, theme }) => css`
+    transition: 0.3s ease color;
+    cursor: pointer;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
 
-  margin-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
 
-  &:hover {
-    color: rgba(255, 255, 255, 0.9);
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
 
-    ${props =>
-      !props.selected &&
-      css`
-        span {
-          border-color: rgba(255, 255, 255, 0.1);
-        }
-      `};
-  }
+      ${!selected &&
+        css`
+          span {
+            border-color: rgba(255, 255, 255, 0.1);
+          }
+        `};
+    }
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-  ${props =>
-    props.selected &&
-    css`
-      color: white;
-    `};
+    ${selected &&
+      css`
+        color: white;
+      `};
+  `};
 `;
 
-export const CheckBox = styled.span<{ selected: boolean; color: string }>`
-  ${props =>
-    props.selected
+export const CheckBox = styled.span<{ color: string; selected: boolean }>`
+  ${({ color, selected }) => css`
+    ${selected
       ? css`
-          background: ${props.color} url('') no-repeat 50%/10px;
+          background: ${color} url('') no-repeat 50%/10px;
           background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
         `
       : css`
           background: rgba(0, 0, 0, 0.3) url('') no-repeat 50%/10px;
           background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>");
         `};
-  border: 2px solid transparent;
-
-  ${props =>
-    props.selected &&
-    css`
-      border-color: ${props.color};
-    `};
-  box-shadow: none;
-  display: inline-block;
-  border-radius: 3.5px;
-  width: 16px;
-  height: 16px;
-  outline: none;
-  vertical-align: middle;
-  margin-right: 0.75rem;
-  transition: 0.15s ease all;
-  cursor: pointer;
+    border: 2px solid transparent;
+
+    ${selected &&
+      css`
+        border-color: ${color};
+      `};
+    box-shadow: none;
+    display: inline-block;
+    border-radius: 3.5px;
+    width: 16px;
+    height: 16px;
+    outline: none;
+    vertical-align: middle;
+    margin-right: 0.75rem;
+    transition: 0.15s ease all;
+    cursor: pointer;
+  `};
 `;
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx
index c799e42fb90..061862c1e67 100644
--- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx
@@ -1,79 +1,85 @@
-import React from 'react';
 import { orderBy } from 'lodash-es';
+import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
 import { Overlay as OverlayComponent } from 'app/components/Overlay';
+
 import { Container, TemplatesName, OverlayContainer } from './elements';
 import { Option } from './Option';
-import { ITemplate } from '../../types';
 
-interface IFilterOptionsProps {
-  possibleTemplates: ITemplate[];
+type Template = {
+  id: string;
+  name: string;
+  color: string;
+  niceName: string;
+};
+type Props = {
+  possibleTemplates: Template[];
   hideFilters?: boolean;
-}
-
-const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
+};
+export const FilterOptions: FunctionComponent<Props> = ({
   possibleTemplates,
   hideFilters,
-}: IFilterOptionsProps) => {
+}) => {
   const {
-    state: {
-      dashboard: { isTemplateSelected, filters },
-    },
     actions: {
       dashboard: {
         blacklistedTemplateAdded,
         blacklistedTemplateRemoved,
-        blacklistedTemplatesCleared,
         blacklistedTemplatesChanged,
+        blacklistedTemplatesCleared,
+      },
+    },
+    state: {
+      dashboard: {
+        filters: { blacklistedTemplates },
+        isTemplateSelected,
       },
     },
   } = useOvermind();
 
   const toggleTemplate = (name: string, select: boolean) =>
-    select
-      ? blacklistedTemplateRemoved({
-          template: name,
-        })
-      : blacklistedTemplateAdded({
-          template: name,
-        });
-
-  const allSelected = possibleTemplates.every(t => isTemplateSelected(t.id));
+    select ? blacklistedTemplateRemoved(name) : blacklistedTemplateAdded(name);
+  const allSelected = possibleTemplates.every(({ id }) =>
+    isTemplateSelected(id)
+  );
 
   const Overlay = () => (
     <OverlayContainer>
       {possibleTemplates.length > 0 ? (
         <>
-          {orderBy(possibleTemplates, 'niceName').map(template => {
-            const selected = isTemplateSelected(template.id);
+          {orderBy(possibleTemplates, 'niceName').map(
+            ({ color, id, name, niceName }) => {
+              const selected = isTemplateSelected(id);
 
-            return (
-              <Option
-                toggleTemplate={toggleTemplate}
-                selected={selected}
-                key={template.name}
-                color={template.color}
-                id={template.id}
-                niceName={template.niceName || template.name}
-              />
-            );
-          })}
+              return (
+                <Option
+                  color={color}
+                  id={id}
+                  key={name}
+                  niceName={niceName || name}
+                  selected={selected}
+                  toggleTemplate={toggleTemplate}
+                />
+              );
+            }
+          )}
 
           <Option
-            toggleTemplate={() => {
-              if (!allSelected) {
-                blacklistedTemplatesCleared();
-              } else {
-                blacklistedTemplatesChanged({
-                  templates: possibleTemplates.map(t => t.id) || [],
-                });
-              }
-            }}
-            selected={allSelected}
             color="#374140"
             id="all"
-            style={{ marginTop: '1rem' }}
             niceName="Select All"
+            selected={allSelected}
+            style={{ marginTop: '1rem' }}
+            toggleTemplate={() => {
+              if (allSelected) {
+                return blacklistedTemplatesChanged(
+                  possibleTemplates.map(({ id }) => id)
+                );
+              }
+
+              return blacklistedTemplatesCleared();
+            }}
           />
         </>
       ) : (
@@ -82,7 +88,6 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
     </OverlayContainer>
   );
 
-  const { blacklistedTemplates } = filters;
   const templateCount = possibleTemplates.length - blacklistedTemplates.length;
   const templateMessage =
     templateCount === possibleTemplates.length && templateCount > 0
@@ -92,7 +97,7 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
         }`;
 
   return (
-    <OverlayComponent event="Dashboard - Order By" content={Overlay}>
+    <OverlayComponent content={Overlay} event="Dashboard - Order By">
       {open => (
         <Container hideFilters={hideFilters}>
           Showing{' '}
@@ -102,5 +107,3 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
     </OverlayComponent>
   );
 };
-
-export const FilterOptions = FilterOptionsComponent;
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/index.tsx
index 2c4d8c9f967..e512bf3cb56 100644
--- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/index.tsx
@@ -1,27 +1,27 @@
-import React from 'react';
+import React, { ComponentProps, FunctionComponent } from 'react';
 
 import { SortOptions } from './SortOptions';
 import { FilterOptions } from './FilterOptions';
 
 import { Container } from './elements';
-import { ITemplate } from '../types';
 
-interface Props {
-  possibleTemplates: ITemplate[];
+type Props = {
   hideOrder?: boolean;
-  hideFilters?: boolean;
-}
-
-export const Filters = ({
-  possibleTemplates,
-  hideOrder,
+} & Pick<
+  ComponentProps<typeof FilterOptions>,
+  'hideFilters' | 'possibleTemplates'
+>;
+export const Filters: FunctionComponent<Props> = ({
   hideFilters,
-}: Props) => (
+  hideOrder,
+  possibleTemplates,
+}) => (
   <Container>
     <FilterOptions
       hideFilters={hideFilters}
       possibleTemplates={possibleTemplates}
     />
+
     <SortOptions hideOrder={hideOrder} />
   </Container>
 );
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.tsx b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.tsx
index 303ba10bda1..5933ee86632 100644
--- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.tsx
@@ -1,87 +1,85 @@
-import React from 'react';
+import React, { ComponentProps, ComponentType, FunctionComponent } from 'react';
+
 import { DelayedAnimation } from 'app/components/DelayedAnimation';
+
 import { Container, HeaderContainer, HeaderTitle } from '../elements';
 import { SandboxGrid } from '../SandboxGrid';
-import { Filters } from './Filters';
+
 import { DashboardActions } from './Actions';
-import { ITemplate } from './types';
+import { Filters } from './Filters';
 
-interface Props {
+type Props = {
   sandboxes: any[];
-  Header: React.ComponentType;
-  SubHeader: React.ComponentType;
-  ExtraElement: React.ComponentType;
+  Header: ComponentType;
+  SubHeader: ComponentType;
+  ExtraElement: ComponentType;
 
-  possibleTemplates: ITemplate[];
   isLoading?: boolean;
-  hideOrder?: boolean;
-  hideFilters?: boolean;
   page?: number;
   actions?: any[];
-}
-
-// eslint-disable-next-line react/prefer-stateless-function
-export class Content extends React.Component<Props> {
-  render() {
-    const {
-      sandboxes,
-      Header,
-      SubHeader,
-      isLoading,
-      ExtraElement,
-      hideOrder,
-      hideFilters,
-      possibleTemplates = [],
-      page,
-      actions = [],
-    } = this.props;
-
-    return (
-      <Container>
-        <HeaderContainer>
-          <HeaderTitle>
-            {Header}{' '}
-            {sandboxes && !isLoading && (
-              <span
-                style={{
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  color: 'rgba(255, 255, 255, 0.6',
-                  marginLeft: '.5rem',
-                }}
-              >
-                {sandboxes.length}
-              </span>
-            )}
-          </HeaderTitle>
-          <DashboardActions actions={actions} />
-          <Filters
-            hideOrder={hideOrder}
-            hideFilters={hideFilters}
-            possibleTemplates={possibleTemplates}
-          />
-        </HeaderContainer>
-        {SubHeader}
-        {isLoading ? (
-          <DelayedAnimation
-            delay={0.6}
+} & Pick<
+  ComponentProps<typeof Filters>,
+  'hideFilters' | 'hideOrder' | 'possibleTemplates'
+>;
+export const Content: FunctionComponent<Props> = ({
+  sandboxes,
+  Header,
+  SubHeader,
+  isLoading,
+  ExtraElement,
+  hideOrder,
+  hideFilters,
+  possibleTemplates = [],
+  page,
+  actions = [],
+}) => (
+  <Container>
+    <HeaderContainer>
+      <HeaderTitle>
+        {Header}{' '}
+        {sandboxes && !isLoading && (
+          <span
             style={{
-              textAlign: 'center',
-              marginTop: '2rem',
+              fontSize: '1rem',
               fontWeight: 600,
-              color: 'rgba(255, 255, 255, 0.5)',
+              color: 'rgba(255, 255, 255, 0.6',
+              marginLeft: '.5rem',
             }}
           >
-            Fetching Sandboxes...
-          </DelayedAnimation>
-        ) : (
-          <SandboxGrid
-            page={page}
-            ExtraElement={ExtraElement}
-            sandboxes={sandboxes}
-          />
+            {sandboxes.length}
+          </span>
         )}
-      </Container>
-    );
-  }
-}
+      </HeaderTitle>
+
+      <DashboardActions actions={actions} />
+
+      <Filters
+        hideFilters={hideFilters}
+        hideOrder={hideOrder}
+        possibleTemplates={possibleTemplates}
+      />
+    </HeaderContainer>
+
+    {SubHeader}
+
+    {isLoading ? (
+      <DelayedAnimation
+        delay={0.6}
+        style={{
+          textAlign: 'center',
+          marginTop: '2rem',
+          fontWeight: 600,
+          color: 'rgba(255, 255, 255, 0.5)',
+        }}
+      >
+        Fetching Sandboxes...
+      </DelayedAnimation>
+    ) : (
+      <SandboxGrid
+        ExtraElement={ExtraElement}
+        page={page}
+        sandboxes={sandboxes}
+      />
+    )}
+  </Container>
+);
diff --git a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/types.ts b/packages/app/src/app/pages/Dashboard/Content/Sandboxes/types.ts
deleted file mode 100644
index 9a3cd839ab1..00000000000
--- a/packages/app/src/app/pages/Dashboard/Content/Sandboxes/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface ITemplate {
-  id: string;
-  name: string;
-  color: string;
-  niceName: string;
-}