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 3bb808a2d43..c799e42fb90 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,43 +1,51 @@ import React from 'react'; import { orderBy } from 'lodash-es'; -import { inject, observer } from 'app/componentConnectors'; +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 Props { +interface IFilterOptionsProps { possibleTemplates: ITemplate[]; hideFilters?: boolean; - store?: any; - signals?: any; } -const FilterOptionsComponent = ({ +const FilterOptionsComponent: React.FC = ({ possibleTemplates, hideFilters, - store, - signals, -}: Props) => { +}: IFilterOptionsProps) => { + const { + state: { + dashboard: { isTemplateSelected, filters }, + }, + actions: { + dashboard: { + blacklistedTemplateAdded, + blacklistedTemplateRemoved, + blacklistedTemplatesCleared, + blacklistedTemplatesChanged, + }, + }, + } = useOvermind(); + const toggleTemplate = (name: string, select: boolean) => select - ? signals.dashboard.blacklistedTemplateRemoved({ + ? blacklistedTemplateRemoved({ template: name, }) - : signals.dashboard.blacklistedTemplateAdded({ + : blacklistedTemplateAdded({ template: name, }); - const allSelected = possibleTemplates.every(t => - store.dashboard.isTemplateSelected(t.id) - ); + const allSelected = possibleTemplates.every(t => isTemplateSelected(t.id)); const Overlay = () => ( {possibleTemplates.length > 0 ? ( <> {orderBy(possibleTemplates, 'niceName').map(template => { - const selected = store.dashboard.isTemplateSelected(template.id); + const selected = isTemplateSelected(template.id); return ( ); - const { blacklistedTemplates } = store.dashboard.filters; + const { blacklistedTemplates } = filters; const templateCount = possibleTemplates.length - blacklistedTemplates.length; const templateMessage = templateCount === possibleTemplates.length && templateCount > 0 @@ -95,6 +103,4 @@ const FilterOptionsComponent = ({ ); }; -export const FilterOptions = inject('store', 'signals')( - observer(FilterOptionsComponent) -); +export const FilterOptions = FilterOptionsComponent;