update issue

stampchain-io · Apr 18, 2024 · 04758d2 · 04758d2
1 parent 4a9be66
commit 04758d2
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 150 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -47,7 +47,6 @@ 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 $StampNavigator from "./islands/StampNavigator.tsx";
@@ -124,7 +123,6 @@ 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/StampNavigator.tsx": $StampNavigator,

diff --git a/islands/Navigator/NavigatorComponent.tsx b/islands/Navigator/NavigatorComponent.tsx
diff --git a/islands/Navigator/navigator.tsx b/islands/Navigator/navigator.tsx
@@ -1,6 +1,5 @@
 import { useContext, useState } from "preact/hooks";
 import { createContext } from "preact";
-import { NavigatorComponent } from "$islands/Navigator/NavigatorComponent.tsx";
 
 const NavigatorContext = createContext(null);
 
@@ -11,28 +10,47 @@ export const NavigatorProvider = ({ children }) => {
   const [filterOption, setFilterOption] = useState<string[]>([]);
 
   const setSortOptionData = (value: string) => {
+    if (window.history) {
+      window.history.pushState(
+        {},
+        "",
+        `/stamp?sortBy=${value}&filterBy=${filterOption}`,
+      );
+      window.location.reload();
+    }
     setSortOption(value);
     console.log("Sort option: ", value);
   };
 
   const setFilterOptionData = (value: string) => {
+    let updatedData;
     if (filterOption.includes(value)) {
-      setFilterOption([...filterOption.filter((item) => item != value)]);
+      updatedData = [...filterOption.filter((item) => item != value)];
     } else {
-      setFilterOption([...filterOption, value]);
+      updatedData = [...filterOption, value];
+    }
+    if (window.history) {
+      window.history.pushState(
+        {},
+        "",
+        `/stamp?sortBy=${sortOption}&filterBy=${updatedData}`,
+      );
+      window.location.reload();
     }
-    console.log(filterOption);
+    setFilterOption(updatedData);
+    console.log(updatedData);
   };
 
   const contextValue = {
     sortOption,
     setSortOption: setSortOptionData,
     filterOption,
+    setFilter: setFilterOption,
+    setSort: setSortOption,
     setFilterOption: setFilterOptionData,
   };
   return (
     <NavigatorContext.Provider value={contextValue}>
-      {/* <NavigatorComponent /> */}
       {/* <span class="text-white">SortOption: {sortOption}</span> */}
       {children}
     </NavigatorContext.Provider>

diff --git a/islands/PageControl.tsx b/islands/PageControl.tsx
@@ -4,29 +4,29 @@ import { StampRow } from "globals";
 import { useEffect, useState } from "preact/hooks";
 import { StampsClass } from "$lib/database/index.ts";
 
-const sortData = (stamps: StampRow[], sortBy: string) => {
-  const data = [...stamps];
-  if (sortBy == "Supply") {
-    return [...data.sort((a: StampRow, b: StampRow) => a.supply - b.supply)];
-  } else if (sortBy == "Block") {
-    return [
-      ...data.sort((a: StampRow, b: StampRow) => a.block_index - b.block_index),
-    ];
-  } else if (sortBy == "Stamp") {
-    return [...data.sort((a: StampRow, b: StampRow) => a.stamp - b.stamp)];
-  } else return [...data];
-};
+// const sortData = (stamps: StampRow[], sortBy: string) => {
+//   const data = [...stamps];
+//   if (sortBy == "Supply") {
+//     return [...data.sort((a: StampRow, b: StampRow) => a.supply - b.supply)];
+//   } else if (sortBy == "Block") {
+//     return [
+//       ...data.sort((a: StampRow, b: StampRow) => a.block_index - b.block_index),
+//     ];
+//   } else if (sortBy == "Stamp") {
+//     return [...data.sort((a: StampRow, b: StampRow) => a.stamp - b.stamp)];
+//   } else return [...data];
+// };
 
-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
-  );
-};
+// 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 = [] }: {
@@ -44,21 +44,20 @@ export function PageControl(
   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("updated!!!!", stamps.length, stamps.at(0));
+  // useEffect(() => {
+  //   if (stamps.length > 0) {
+  //     console.log("updated!!!!", stamps.length, stamps.at(0));
 
-      setContent([...filterData(sortData(stamps, sortOption), filterOption)]);
-    }
-  }, [sortOption, filterOption]);
+  //     setContent([...filterData(sortData(stamps, sortOption), filterOption)]);
+  //   }
+  // }, [sortOption, filterOption]);
 
   for (let p = startPage; p <= endPage; p++) {
     pageItems.push(
       <li key={p}>
         <a
-          href={`/${type}?page=${p}&limit=${page_size}`}
+          href={`/${type}?page=${p}&limit=${page_size}&sort=${sortOption}&filter=${filterOption}`}
           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
             ${
@@ -75,7 +74,7 @@ export function PageControl(
 
   return (
     <>
-      {(content.length > 0 || stamps.length == 0) &&
+      {(stamps.length != 0) &&
         (
           <nav aria-label="Page navigation">
             <ul class="inline-flex items-center -space-x-px text-sm">
@@ -129,7 +128,7 @@ export function PageControl(
         )}
       <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) => (
+          {stamps.map((stamp: StampRow) => (
             <StampCard stamp={stamp} kind="stamp" />
           ))}
         </div>

diff --git a/islands/StampNavigator.tsx b/islands/StampNavigator.tsx
@@ -1,17 +1,19 @@
 import { StampRow } from "globals";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
 import { useNavigator } from "$islands/Navigator/navigator.tsx";
 const filters = ["Png", "Gif", "Svg", "Jpg", "Html"];
-const sorts = ["Supply", "Block", "Stamp"];
+const sorts = ["Supply", "Stamp"];
 const active = " opacity-50";
 
 interface SortItemInterface {
   title: string;
   onChange: (id: string) => void;
+  value: string;
 }
 
 interface FilterItemInterface {
   title: string;
+  value: string[];
   onChange: (id: string) => void;
 }
 
@@ -20,7 +22,8 @@ const SortItem = (props: SortItemInterface) => {
 
   return (
     <div
-      class="flex gap-x-2 items-center cursor-pointer opacity-25 hover:opacity-60"
+      class={"flex gap-x-2 items-center cursor-pointer hover:opacity-100 " +
+        (props.value == props.title ? "opacity-100" : "opacity-15")}
       onClick={() => {
         props.onChange(title);
       }}
@@ -40,21 +43,46 @@ const FilterItem = (props: FilterItemInterface) => {
         props.onChange(title);
       }}
     >
-      <input type="checkbox" />
+      <input type="checkbox" checked={props.value.includes(title)} />
       <span>{title}</span>
     </div>
   );
 };
 
-export function StampNavigator() {
-  const { setSortOption, setFilterOption } = useNavigator();
+export function StampNavigator({ initFilter, initSort }) {
+  const {
+    setSortOption,
+    setFilterOption,
+    sortOption,
+    filterOption,
+    setFilter,
+    setSort,
+  } = useNavigator();
+
+  useEffect(() => {
+    console.log(initFilter, initSort, "++++");
+    if (initFilter) {
+      console.log(initFilter, "---------------");
+      setFilter(initFilter);
+    }
+    if (initSort) {
+      console.log(initSort, "-----------------");
+      setSort(initSort);
+    }
+  }, []);
   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} />;
+            return (
+              <FilterItem
+                title={item}
+                onChange={setFilterOption}
+                value={filterOption}
+              />
+            );
           })}
         </div>
       </div>
@@ -65,6 +93,7 @@ export function StampNavigator() {
             <SortItem
               title={item}
               onChange={setSortOption}
+              value={sortOption}
             />
           ))}
         </div>

diff --git a/islands/StampSearch.tsx b/islands/StampSearch.tsx
@@ -5,7 +5,6 @@ export function StampSearchClient() {
     // const stampId = parseInt(searchTerm);
     // Redirect to /stamp/[id] route with the stampId
     window.location.href = `/stamp/${searchTerm}`;
-    console.log("ssssss");
     // }
   };