add changes and type-fest to editor

editor.planx.uk/package.json

@@ -89,6 +89,7 @@
     "subscriptions-transport-ws": "^0.11.0",
     "swr": "^2.2.4",
     "tippy.js": "^6.3.7",
+    "type-fest": "^4.32.0",
     "uuid": "^9.0.1",
     "vite": "^5.4.6",
     "vite-jest": "^0.1.4",

editor.planx.uk/src/pages/Team.tsx

@@ -17,7 +17,10 @@ import { Link, useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import { borderedFocusStyle } from "theme";
 import { AddButton } from "ui/editor/AddButton";
-import { SortFlowsSelect } from "ui/editor/SortFlowsSelect";
+import {
+  SortableFields,
+  SortControl,
+} from "ui/editor/SortControl";
 import { slugify } from "utils";
 
 import { client } from "../lib/graphql";
@@ -308,6 +311,15 @@ const Team: React.FC = () => {
   );
   const [flows, setFlows] = useState<FlowSummary[] | null>(null);
 
+  const sortArray: SortableFields<FlowSummary>[] = [
+    { displayName: "Name", fieldName: "name" },
+    { displayName: "Last updated", fieldName: "updatedAt" },
+    {
+      displayName: "Last published",
+      fieldName: `publishedFlows.0.publishedAt`,
+    },
+  ];
+
   const fetchFlows = useCallback(() => {
     getFlows(teamId).then((flows) => {
       // Copy the array and sort by most recently edited desc using last associated operation.createdAt, not flow.updatedAt
@@ -353,7 +365,11 @@ const Team: React.FC = () => {
         {showAddFlowButton && <AddFlowButton flows={flows} />}
       </Box>
       {hasFeatureFlag("SORT_FLOWS") && flows && (
-        <SortFlowsSelect flows={flows} setFlows={setFlows} />
+        <SortControl<FlowSummary>
+          records={flows}
+          setRecords={setFlows}
+          sortOptions={sortArray}
+        />
       )}
       {teamHasFlows && (
         <DashboardList>

editor.planx.uk/src/ui/editor/SortControl.tsx

@@ -0,0 +1,126 @@
+import TrendingDownIcon from "@mui/icons-material/TrendingDown";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import { get } from "lodash";
+import React, { useEffect, useMemo, useState } from "react";
+import { useCurrentRoute, useNavigation } from "react-navi";
+import { Paths } from "type-fest";
+import { slugify } from "utils";
+
+import SelectInput from "./SelectInput/SelectInput";
+
+type SortDirection = "asc" | "desc";
+
+export interface SortableFields<T> {
+  displayName: string;
+  fieldName: Paths<T>;
+}
+
+const compareValues = (
+  a: string | boolean,
+  b: string | boolean,
+  sortDirection: SortDirection,
+) => {
+  if (a < b) {
+    return sortDirection === "asc" ? 1 : -1;
+  }
+  if (a > b) {
+    return sortDirection === "asc" ? -1 : 1;
+  }
+  return 0;
+};
+
+export const SortControl = <T extends object>({
+  records,
+  setRecords,
+  sortOptions,
+}: {
+  records: T[];
+  setRecords: React.Dispatch<React.SetStateAction<T[] | null>>;
+  sortOptions: SortableFields<T>[];
+}) => {
+  const [selectedSort, setSelectedSort] = useState<SortableFields<T>>(
+    sortOptions[0],
+  );
+  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+
+  const navigation = useNavigation();
+  const route = useCurrentRoute();
+  const selectedDisplaySlug = slugify(selectedSort.displayName);
+
+  const sortOptionsMap = useMemo(() => {
+    return sortOptions.reduce(
+      (acc, option) => ({
+        ...acc,
+        [slugify(option.displayName)]: option,
+      }),
+      {} as Record<string, SortableFields<T>>,
+    );
+  }, [sortOptions]);
+
+  const updateSortParam = (sortOption: string) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("sort", sortOption);
+    searchParams.set("sortDirection", sortDirection);
+    navigation.navigate(
+      {
+        pathname: window.location.pathname,
+        search: `?${searchParams.toString()}`,
+      },
+      {
+        replace: true,
+      },
+    );
+  };
+
+  useEffect(() => {
+    const { sort: sortParam, sortDirection: sortDirectionParam } =
+      route.url.query;
+    const matchingSortOption = sortOptionsMap[sortParam];
+    matchingSortOption && setSelectedSort(matchingSortOption);
+    if (sortDirectionParam === "asc" || sortDirectionParam === "desc") {
+      setSortDirection(sortDirection);
+    }
+  }, []);
+
+  useEffect(() => {
+    const { fieldName } = selectedSort;
+    const sortedFlows = records?.sort((a: T, b: T) =>
+      compareValues(get(a, fieldName), get(b, fieldName), sortDirection),
+    );
+    sortedFlows && setRecords([...sortedFlows]);
+    updateSortParam(selectedDisplaySlug);
+  }, [selectedSort, sortDirection]);
+
+  return (
+    <Box display={"flex"}>
+      <SelectInput
+        value={selectedDisplaySlug}
+        onChange={(e) => {
+          const targetKey = e.target.value as string;
+          const matchingSortOption = sortOptionsMap[targetKey];
+          matchingSortOption && setSelectedSort(matchingSortOption);
+        }}
+      >
+        {sortOptions.map(({ displayName }) => (
+          <MenuItem key={slugify(displayName)} value={slugify(displayName)}>
+            {displayName}
+          </MenuItem>
+        ))}
+      </SelectInput>
+      <IconButton
+        title="ordering"
+        aria-label="ordering"
+        onClick={() =>
+          sortDirection === "asc"
+            ? setSortDirection("desc")
+            : setSortDirection("asc")
+        }
+      >
+        {sortDirection === "asc" ? <TrendingUpIcon /> : <TrendingDownIcon />}
+      </IconButton>
+    </Box>
+  );
+};