complete filter/sort

fresh.gen.ts

@@ -47,6 +47,9 @@ import * as $wallet_address_ from "./routes/wallet/[address].tsx";
 import * as $BlockSelector from "./islands/BlockSelector.tsx";
 import * as $Header from "./islands/Header.tsx";
 import * as $MempoolWeather from "./islands/MempoolWeather.tsx";
+import * as $Navigator_NavigatorComponent from "./islands/Navigator/NavigatorComponent.tsx";
+import * as $Navigator_navigator from "./islands/Navigator/navigator.tsx";
+import * as $PageControl from "./islands/PageControl.tsx";
 import * as $StampSearch from "./islands/StampSearch.tsx";
 import * as $Toast_ToastComponent from "./islands/Toast/ToastComponent.tsx";
 import * as $Toast_toast from "./islands/Toast/toast.tsx";
@@ -120,6 +123,9 @@ const manifest = {
     "./islands/BlockSelector.tsx": $BlockSelector,
     "./islands/Header.tsx": $Header,
     "./islands/MempoolWeather.tsx": $MempoolWeather,
+    "./islands/Navigator/NavigatorComponent.tsx": $Navigator_NavigatorComponent,
+    "./islands/Navigator/navigator.tsx": $Navigator_navigator,
+    "./islands/PageControl.tsx": $PageControl,
     "./islands/StampSearch.tsx": $StampSearch,
     "./islands/Toast/ToastComponent.tsx": $Toast_ToastComponent,
     "./islands/Toast/toast.tsx": $Toast_toast,

islands/Navigator/NavigatorComponent.tsx

@@ -0,0 +1,84 @@
+import { useNavigator } from "$islands/Navigator/navigator.tsx";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+const filters = ["Png", "Gif", "Svg", "Jpg", "Html"];
+const sorts = ["Supply", "Block", "Stamp"];
+const active = " opacity-100";
+
+interface SortItemInterface {
+  title: string;
+  value: string;
+  onChange: (id: string) => void;
+}
+
+interface FilterItemInterface {
+  title: string;
+  value: string;
+  onChange: (id: string) => void;
+}
+
+const SortItem = (props: SortItemInterface) => {
+  const title = props.title;
+
+  return (
+    <div
+      class={"flex gap-x-2 opa items-center cursor-pointer hover:opacity-60" +
+        (title == props.value ? active : " opacity-25")}
+      onClick={() => {
+        props.onChange(title);
+      }}
+    >
+      <img class="rounded-full" src={`/img/${title}.png`} width={30} />
+      <span>{title}</span>
+    </div>
+  );
+};
+
+const FilterItem = (props: FilterItemInterface) => {
+  const title = props.title;
+  return (
+    <div
+      class="flex gap-x-1 items-center "
+      onClick={() => {
+        props.onChange(title);
+      }}
+    >
+      <input type="checkbox" checked={props.value.includes(title)} />
+      <span>{title}</span>
+    </div>
+  );
+};
+
+export const NavigatorComponent = () => {
+  const { setSortOption, setFilterOption, sortOption, filterOption } =
+    useNavigator();
+  return (
+    <>
+      <div class="flex flex-row text-white/80 w-full mb-4">
+        <span class="w-20">Filter by:</span>
+        <div class="flex flex-1 border border-gray-600 h-16 px-10 py-6 gap-x-5">
+          {filters.map((item) => {
+            return (
+              <FilterItem
+                title={item}
+                onChange={setFilterOption}
+                value={filterOption}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div class="flex flex-row text-white/80 w-full mb-10">
+        <span class="w-20">Sort by:</span>
+        <div class="flex flex-1 border gap-x-10 border-gray-600 px-10 py-6 items-center">
+          {sorts.map((item) => (
+            <SortItem
+              title={item}
+              onChange={setSortOption}
+              value={sortOption}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

islands/Navigator/navigator.tsx

@@ -0,0 +1,40 @@
+import { useContext, useState } from "preact/hooks";
+import { createContext } from "preact";
+import { NavigatorComponent } from "$islands/Navigator/NavigatorComponent.tsx";
+
+const NavigatorContext = createContext(null);
+
+export const useNavigator = () => useContext(NavigatorContext);
+
+export const NavigatorProvider = ({ children }) => {
+  const [sortOption, setSortOption] = useState("");
+  const [filterOption, setFilterOption] = useState<string[]>([]);
+
+  const setSortOptionData = (value: string) => {
+    setSortOption(value);
+    console.log("Sort option: ", value);
+  };
+
+  const setFilterOptionData = (value: string) => {
+    if (filterOption.includes(value)) {
+      setFilterOption([...filterOption.filter((item) => item != value)]);
+    } else {
+      setFilterOption([...filterOption, value]);
+    }
+    console.log(filterOption);
+  };
+
+  const contextValue = {
+    sortOption,
+    setSortOption: setSortOptionData,
+    filterOption,
+    setFilterOption: setFilterOptionData,
+  };
+  return (
+    <NavigatorContext.Provider value={contextValue}>
+      <NavigatorComponent />
+      {/* <span class="text-white">SortOption: {sortOption}</span> */}
+      {children}
+    </NavigatorContext.Provider>
+  );
+};

islands/PageControl.tsx

@@ -0,0 +1,137 @@
+import { useNavigator } from "$islands/Navigator/navigator.tsx";
+import { StampCard } from "$components/StampCard.tsx";
+import { StampRow } from "globals";
+import { useEffect, useState } from "preact/hooks";
+
+const sortData = (stamps: StampRow[], sortBy: string) => {
+  if (sortBy == "Supply") {
+    return [...stamps.sort((a: StampRow, b: StampRow) => a.supply - b.supply)];
+  } else if (sortBy == "Block") {
+    return [
+      ...stamps.sort((a: StampRow, b: StampRow) =>
+        a.block_index - b.block_index
+      ),
+    ];
+  } else if (sortBy == "Stamp") {
+    return [...stamps.sort((a: StampRow, b: StampRow) => a.stamp - b.stamp)];
+  } else return [...stamps];
+};
+
+const filterData = (stamps: StampRow[], filterBy: string[]) => {
+  if (filterBy.length == 0) {
+    return stamps;
+  }
+  return stamps.filter((stamp) =>
+    filterBy.find((option) =>
+      stamp.stamp_mimetype.indexOf(option.toLowerCase()) >= 0
+    ) != null
+  );
+};
+
+export function PageControl(
+  { page, pages, page_size, type = "stamp", stamps = [] }: {
+    page: number;
+    pages: number;
+    page_size: number;
+    type: "cursed" | "stamp";
+    stamps: [];
+  },
+) {
+  const maxPagesToShow = 5;
+  const currentPage = page;
+  const totalPages = pages;
+  const startPage = Math.max(1, currentPage - maxPagesToShow);
+  const endPage = Math.min(totalPages, currentPage + maxPagesToShow);
+  const pageItems = [];
+  const { filterOption, sortOption } = useNavigator();
+  const [content, setContent] = useState<StampRow[]>([]);
+
+  useEffect(() => {
+    if (stamps.length > 0) {
+      console.log(filterOption);
+      setContent(filterData(sortData(stamps, sortOption), filterOption));
+      console.log("sortby ", sortOption, sortData(stamps, sortOption)[0]);
+    }
+  }, [sortOption, filterOption]);
+
+  for (let p = startPage; p <= endPage; p++) {
+    pageItems.push(
+      <li key={p}>
+        <a
+          href={`/${type}?page=${p}&limit=${page_size}`}
+          f-partial={`/${type}?page=${p}&limit=${page_size}`}
+          class={`flex items-center justify-center px-3 h-8 leading-tight font-medium hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white
+            ${
+            currentPage === p
+              ? "bg-white text-gray-800 dark:bg-gray-400 dark:text-black font-semibold"
+              : "text-gray-500 bg-white dark:text-gray-400 dark:bg-gray-800"
+          }`}
+        >
+          {p}
+        </a>
+      </li>,
+    );
+  }
+
+  return (
+    <>
+      <nav aria-label="Page navigation">
+        <span class="text-white">SortBY: {sortOption}</span>
+        <ul class="inline-flex items-center -space-x-px text-sm">
+          <li>
+            <a
+              href={`/${type}?page=1&limit=${page_size}`}
+              f-partial={`/${type}?page=1&limit=${page_size}`}
+              class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-r-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              {"<<"}
+            </a>
+          </li>
+          <li>
+            <a
+              href={`/${type}?page=${
+                Math.max(1, currentPage - 1)
+              }&limit=${page_size}`}
+              f-partial={`/${type}?page=${
+                Math.max(1, currentPage - 1)
+              }&limit=${page_size}`}
+              class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-r-0 border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              {"<"}
+            </a>
+          </li>
+          {pageItems}
+          <li>
+            <a
+              href={`/${type}?page=${
+                Math.min(totalPages, currentPage + 1)
+              }&limit=${page_size}`}
+              f-partial={`/${type}?page=${
+                Math.min(totalPages, currentPage + 1)
+              }&limit=${page_size}`}
+              class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              {">"}
+            </a>
+          </li>
+          <li>
+            <a
+              href={`/${type}?page=${totalPages}&limit=${page_size}`}
+              f-partial={`/${type}?page=${totalPages}&limit=${page_size}`}
+              class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-l-0 border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              {">>"}
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div name="stamps">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 py-6 transition-opacity duration-700 ease-in-out">
+          {content.map((stamp: StampRow) => (
+            <StampCard stamp={stamp} kind="stamp" />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

routes/_app.tsx

@@ -5,6 +5,7 @@ import { Header } from "$islands/Header.tsx";
 import { MempoolWeather } from "$islands/MempoolWeather.tsx";
 import { ToastProvider } from "$islands/Toast/toast.tsx";
 import { StampSearchClient } from "$islands/StampSearch.tsx";
+import { NavigatorProvider } from "$islands/Navigator/navigator.tsx";
 
 export default function App({ Component }: AppProps) {
   return (
@@ -45,9 +46,11 @@ export default function App({ Component }: AppProps) {
               <MempoolWeather />
               <StampSearchClient />
             </div>
-            <Partial name="body">
-              <Component />
-            </Partial>
+            <NavigatorProvider>
+              <Partial name="body">
+                <Component />
+              </Partial>
+            </NavigatorProvider>
           </div>
         </ToastProvider>
       </body>