🔨 Switch FilterOptions to use useOvermind

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;
 };

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;
+  `};
 `;

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;