SortOptions: refactored to overmind (codesandbox#3183)

Author: christianalfoni

…/Sandboxes/Filters/SortOptions/Option.js …Sandboxes/Filters/SortOptions/Option.tsxpackages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js renamed to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js renamed to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
 import Check from 'react-icons/lib/md/check';
+
 import { IconContainer, OptionContainer } from './elements';
 
-export default ({ name, field, currentField, setField }) => {
+interface Props {
+  name: string;
+  field: string;
+  currentField: string;
+  setField: (field: string) => void;
+}
+
+export const Option: React.FC<Props> = ({
+  name,
+  field,
+  currentField,
+  setField,
+}) => {
   const selected = field === currentField;
+
   return (
     <OptionContainer onClick={() => setField(field)} selected={selected}>
       <IconContainer>{selected && <Check />}</IconContainer> {name}

…andboxes/Filters/SortOptions/elements.js …andboxes/Filters/SortOptions/elements.tspackages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.ts packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.ts

@@ -1,7 +1,9 @@
-import styled, { css } from 'styled-components';
 import ArrowDown from 'react-icons/lib/md/arrow-downward';
+import styled, { css } from 'styled-components';
 
-export const OptionContainer = styled.a`
+export const OptionContainer = styled.a<{
+  selected: boolean;
+}>`
   transition: 0.3s ease color;
   display: flex;
   vertical-align: middle;
@@ -33,7 +35,9 @@ export const IconContainer = styled.div`
   margin-right: 0.5rem;
 `;
 
-export const Container = styled.div`
+export const Container = styled.div<{
+  hideOrder: boolean;
+}>`
   transition: 0.3s ease opacity;
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.875rem;

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js

@@ -0,0 +1,87 @@
+import { Overlay as OverlayComponent } from 'app/components/Overlay';
+import { useOvermind } from 'app/overmind';
+import React from 'react';
+
+import { Arrow, Container, OrderName, OverlayContainer } from './elements';
+import { Option } from './Option';
+
+const FIELD_TO_NAME = {
+  updatedAt: 'Last Modified',
+  insertedAt: 'Last Created',
+  title: 'Name',
+};
+
+interface Props {
+  hideOrder: boolean;
+}
+
+export const SortOptions: React.FC<Props> = ({ hideOrder }) => {
+  const { state, actions } = useOvermind();
+
+  function toggleSort(e) {
+    e.preventDefault();
+    const { orderBy } = state.dashboard;
+    const { orderByChanged } = actions.dashboard;
+    orderByChanged({
+      orderBy: {
+        order: orderBy.order === 'asc' ? 'desc' : 'asc',
+        field: orderBy.field,
+      },
+    });
+  }
+
+  function setField(field: string) {
+    const { orderBy } = state.dashboard;
+    const { orderByChanged } = actions.dashboard;
+    orderByChanged({
+      orderBy: {
+        order: orderBy.order,
+        field,
+      },
+    });
+  }
+
+  const { field, order } = state.dashboard.orderBy;
+
+  const Overlay = () => (
+    <OverlayContainer>
+      <Option
+        setField={setField}
+        currentField={field}
+        field="title"
+        name={FIELD_TO_NAME.title}
+      />
+      <Option
+        setField={setField}
+        currentField={field}
+        field="insertedAt"
+        name={FIELD_TO_NAME.insertedAt}
+      />
+      <Option
+        setField={setField}
+        currentField={field}
+        field="updatedAt"
+        name={FIELD_TO_NAME.updatedAt}
+      />
+    </OverlayContainer>
+  );
+
+  return (
+    <OverlayComponent event="Dashboard - Order By" content={Overlay}>
+      {open => (
+        <Container hideOrder={hideOrder}>
+          Sort by <OrderName onClick={open}>{FIELD_TO_NAME[field]} </OrderName>
+          <Arrow
+            onClick={toggleSort}
+            style={{
+              transform: `rotate(${order === 'asc' ? -180 : 0}deg)`,
+              fontSize: '.875rem',
+              marginLeft: 4,
+              marginBottom: 2,
+            }}
+          />
+        </Container>
+      )}
+    </OverlayComponent>
+  );
+};