From b37c9d76691186ed4cd5fa6e6be3a77baa594b9c Mon Sep 17 00:00:00 2001
From: Nathan Kluth <nlkluth@gmail.com>
Date: Tue, 7 Nov 2023 10:38:00 -0700
Subject: [PATCH] mv sort

---
 packages/nextjs/components/ProductSort.tsx     | 10 ++++++++++
 packages/nextjs/pages/products/index.tsx       |  2 +-
 packages/shared-ui/components/ProductSort.tsx  | 18 +++++++++++-------
 packages/shared-ui/index.ts                    |  3 +++
 .../utils/getOrderingFromQuery.ts              |  2 +-
 packages/shared-ui/utils/index.ts              |  3 +++
 .../{nextjs => shared-ui}/utils/sorting.ts     |  0
 7 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 packages/nextjs/components/ProductSort.tsx
 rename packages/{nextjs => shared-ui}/utils/getOrderingFromQuery.ts (89%)
 create mode 100644 packages/shared-ui/utils/index.ts
 rename packages/{nextjs => shared-ui}/utils/sorting.ts (100%)

diff --git a/packages/nextjs/components/ProductSort.tsx b/packages/nextjs/components/ProductSort.tsx
new file mode 100644
index 00000000..e0469ff7
--- /dev/null
+++ b/packages/nextjs/components/ProductSort.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useRouterQueryParams } from "utils/useRouterQueryParams";
+import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "shared-ui";
+
+type ProductSortProps = Pick<BaseProps, "as" | "showTitle" | "title" | "selectClassName">;
+
+export const ProductSort: React.FC<ProductSortProps> = (props) => {
+  const { replace, clear, query } = useRouterQueryParams();
+  return <BaseProductSort {...props} onClear={clear} onReplace={replace} query={query} />;
+};
diff --git a/packages/nextjs/pages/products/index.tsx b/packages/nextjs/pages/products/index.tsx
index d6773800..f056cc19 100644
--- a/packages/nextjs/pages/products/index.tsx
+++ b/packages/nextjs/pages/products/index.tsx
@@ -9,7 +9,7 @@ import { getAllFilteredVariants } from "utils/getFilteredPaginatedQuery";
 import { getCategoryFilters, getFlavourFilters, getStyleFilters } from "utils/getFilters";
 import { getPaginationFromQuery } from "utils/getPaginationFromQuery";
 import { getFiltersFromQuery } from "utils/getFiltersFromQuery";
-import { getOrderingFromQuery } from "utils/getOrderingFromQuery";
+import { getOrderingFromQuery } from "shared-ui";
 import { setCachingHeaders } from "utils/setCachingHeaders";
 import { SanityType } from "utils/consts";
 import { pluralize } from "utils/pluralize";
diff --git a/packages/shared-ui/components/ProductSort.tsx b/packages/shared-ui/components/ProductSort.tsx
index 3ef193f8..0edb7389 100644
--- a/packages/shared-ui/components/ProductSort.tsx
+++ b/packages/shared-ui/components/ProductSort.tsx
@@ -1,13 +1,15 @@
 import * as React from "react";
-import { Pill, Select } from "shared-ui";
-import { PAGE_QUERY_PARAM, SORT_OPTIONS, SORT_OPTIONS_ARRAY, SORT_QUERY_PARAM, SortType } from "utils/sorting";
-import { useRouterQueryParams } from "utils/useRouterQueryParams";
+import { Pill, Select } from "../";
+import { PAGE_QUERY_PARAM, SORT_OPTIONS, SORT_OPTIONS_ARRAY, SORT_QUERY_PARAM, SortType } from "../utils/sorting";
 
-type ProductSortProps = {
+export type ProductSortProps = {
   as?: "select" | "pills";
   showTitle?: boolean;
   title?: string;
   selectClassName?: string;
+  onClear: (key: string) => void;
+  onReplace: (key: Record<string, string>) => void;
+  query: Record<string, string | string[] | undefined>;
 };
 
 export const ProductSort: React.FC<ProductSortProps> = ({
@@ -15,19 +17,21 @@ export const ProductSort: React.FC<ProductSortProps> = ({
   showTitle = false,
   title = "Sort by",
   selectClassName = "",
+  onClear,
+  onReplace,
+  query,
 }) => {
-  const { replace, clear, query } = useRouterQueryParams();
   const defaultSortValue = SORT_OPTIONS_ARRAY.find(({ type }) => type === SortType.Default)?.value;
 
   const handleChange = (value: string) => {
     switch (SORT_OPTIONS[value].type) {
       case SortType.Natural: {
-        replace({ [SORT_QUERY_PARAM]: value, [PAGE_QUERY_PARAM]: "1" });
+        onReplace({ [SORT_QUERY_PARAM]: value, [PAGE_QUERY_PARAM]: "1" });
         break;
       }
       case SortType.Default:
       default:
-        clear(SORT_QUERY_PARAM);
+        onClear(SORT_QUERY_PARAM);
     }
   };
 
diff --git a/packages/shared-ui/index.ts b/packages/shared-ui/index.ts
index dbf28cee..af904c9f 100644
--- a/packages/shared-ui/index.ts
+++ b/packages/shared-ui/index.ts
@@ -12,8 +12,11 @@ export * from "./components/Modal";
 export * from "./components/WeDontSellBreadBanner";
 export * from "./components/Price";
 export * from "./components/QuantityInput";
+export * from './components/ProductSort';
 
 export * from "./components/sanity";
 export * from "./components/cart";
 export * from "./components/ImageCarousel";
 export * from "./components/Search";
+
+export * from './utils';
\ No newline at end of file
diff --git a/packages/nextjs/utils/getOrderingFromQuery.ts b/packages/shared-ui/utils/getOrderingFromQuery.ts
similarity index 89%
rename from packages/nextjs/utils/getOrderingFromQuery.ts
rename to packages/shared-ui/utils/getOrderingFromQuery.ts
index 13d7fe65..f82f4580 100644
--- a/packages/nextjs/utils/getOrderingFromQuery.ts
+++ b/packages/shared-ui/utils/getOrderingFromQuery.ts
@@ -1,5 +1,5 @@
 import { ParsedUrlQuery } from "querystring";
-import { SORT_OPTIONS, SORT_QUERY_PARAM } from "utils/sorting";
+import { SORT_OPTIONS, SORT_QUERY_PARAM } from "./sorting";
 
 export const getOrderingFromQuery = (query: ParsedUrlQuery) => {
   const { [SORT_QUERY_PARAM]: sortValue } = query;
diff --git a/packages/shared-ui/utils/index.ts b/packages/shared-ui/utils/index.ts
new file mode 100644
index 00000000..70617346
--- /dev/null
+++ b/packages/shared-ui/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './currencyFormatter';
+export * from './getOrderingFromQuery';
+export * from './sorting';
\ No newline at end of file
diff --git a/packages/nextjs/utils/sorting.ts b/packages/shared-ui/utils/sorting.ts
similarity index 100%
rename from packages/nextjs/utils/sorting.ts
rename to packages/shared-ui/utils/sorting.ts