Function useSortOrder

app/src/components/sorting.tsx:9–45

()

type SortableFields = string;

export const useSortOrder = <Fields extends SortableFields>() => {
  const [rawParams, setParams] = useQueryParam("sort", DelimitedArrayParam);

  const parsedParams = z.tuple([z.string(), z.enum(["asc", "desc"])]).safeParse(rawParams);

  const reset = useCallback(() => setParams(undefined), [setParams]);

  const params = useMemo(
    () =>
      parsedParams.success
        ? { field: parsedParams.data[0] as Fields, order: parsedParams.data[1] }
        : undefined,
    [parsedParams],
  );

  // If it's not sorted by this, sort asc. If it's sorted asc, sort desc. If it's sorted desc, remove sorting.
  const toggle = useCallback(
    (newField: Fields) => {
      if (params?.field === newField) {
        if (params.order === "asc") {
          setParams([newField, "desc"]);
        } else {
          reset();
        }
      } else {
        setParams([newField, "asc"]);
      }
    },
    [setParams, params, reset],
  );

  return {
    params,
    reset,
    toggle,
  };
};

export const SortArrows = <Fields extends SortableFields>(props: { field: Fields }) => {
  const { toggle, params } = useSortOrder<Fields>();