Add filtering by date to PackageSearch

thunderstore-io · Jun 18, 2024 · 021c36d · 021c36d
1 parent 56ca52e
commit 021c36d
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 4 deletions.
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -43,6 +43,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
+      const created_after = searchParams.get("created_after");
+      const created_before = searchParams.get("created_before");
+      const updated_after = searchParams.get("updated_after");
+      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -58,7 +62,11 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
+          deprecated === "true" ? true : false,
+          created_after ?? "",
+          created_before ?? "",
+          updated_after ?? "",
+          updated_before ?? ""
         ),
       };
     } catch (error) {
@@ -86,6 +94,10 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
+      const created_after = searchParams.get("created_after");
+      const created_before = searchParams.get("created_before");
+      const updated_after = searchParams.get("updated_after");
+      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -101,7 +113,11 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
+          deprecated === "true" ? true : false,
+          created_after ?? "",
+          created_before ?? "",
+          updated_after ?? "",
+          updated_before ?? ""
         ),
       };
     } catch (error) {

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
@@ -34,3 +34,50 @@
 .skeletonContent {
   height: 38rem;
 }
+
+.dateFilterHeader {
+  padding: var(--space--8) var(--space--12);
+  font-size: var(--font-size--m);
+}
+
+.dateFilterInputs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: fit-content;
+}
+
+.dateFilterInput {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--space--10) var(--space--14);
+  border: var(--border-width--2) solid var(--border-color);
+
+  border-radius: var(--border-radius--8);
+  color: var(--color-text--tertiary);
+  font-weight: var(--font-weight-medium);
+
+  font-size: var(--font-size--l);
+  line-height: normal;
+  background-color: var(--color-surface--4);
+  outline: none;
+  transition: ease-out var(--animation-length-l);
+
+  --border-color: transparent;
+}
+
+.dateFilterInput:hover {
+  --border-color: var(--color-border--highlight);
+}
+
+.dateFilterInput:focus-within {
+  color: var(--color-text--default);
+  background-color: var(--color-black);
+
+  --border-color: var(--color-border--highlight);
+}
+
+.dateFilterInput::placeholder {
+  color: var(--color-text--tertiary);
+}
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -53,6 +53,10 @@ export function PackageSearch(props: Props) {
   const [nsfw, setNsfw] = useState(false);
   const [page, setPage] = useState(1);
   const [order, setOrder] = useState(PackageOrderOptions.Updated);
+  const [createdAfter, setCreatedAfter] = useState("");
+  const [createdBefore, setCreatedBefore] = useState("");
+  const [updatedAfter, setUpdatedAfter] = useState("");
+  const [updatedBefore, setUpdatedBefore] = useState("");
 
   const deferredCategories = useDeferredValue(categories);
   const deferredDeprecated = useDeferredValue(deprecated);
@@ -71,6 +75,11 @@ export function PackageSearch(props: Props) {
 
   const [debouncedSearchValue] = useDebounce(searchValue, 300);
 
+  const deferredCreatedAfter = useDeferredValue(createdAfter);
+  const deferredCreatedBefore = useDeferredValue(createdBefore);
+  const deferredUpdatedAfter = useDeferredValue(updatedAfter);
+  const deferredUpdatedBefore = useDeferredValue(updatedBefore);
+
   useEffect(() => {
     if (debouncedSearchValue === "") {
       searchParams.delete("search");
@@ -126,6 +135,30 @@ export function PackageSearch(props: Props) {
       searchParams.set("order", deferredOrder);
     }
 
+    if (deferredCreatedAfter === "") {
+      searchParams.delete("created_after");
+    } else {
+      searchParams.set("created_after", deferredCreatedAfter);
+    }
+
+    if (deferredCreatedBefore === "") {
+      searchParams.delete("created_before");
+    } else {
+      searchParams.set("created_before", deferredCreatedBefore);
+    }
+
+    if (deferredUpdatedAfter === "") {
+      searchParams.delete("updated_after");
+    } else {
+      searchParams.set("updated_after", deferredUpdatedAfter);
+    }
+
+    if (deferredUpdatedBefore === "") {
+      searchParams.delete("updated_before");
+    } else {
+      searchParams.set("updated_before", deferredUpdatedBefore);
+    }
+
     setSearchParams(searchParams);
   }, [
     debouncedSearchValue,
@@ -135,6 +168,10 @@ export function PackageSearch(props: Props) {
     deferredCategories,
     deferredPage,
     deferredOrder,
+    deferredCreatedAfter,
+    deferredCreatedBefore,
+    deferredUpdatedAfter,
+    deferredUpdatedBefore,
   ]);
 
   return (
@@ -148,6 +185,32 @@ export function PackageSearch(props: Props) {
 
       <div className={styles.contentWrapper}>
         <div className={styles.sidebar}>
+          <div className={styles.dateFilterInputs}>
+            <h2 className={styles.dateFilterHeader}>Updated</h2>
+            <input
+              type="date"
+              className={styles.dateFilterInput}
+              onChange={(e) => setUpdatedAfter(e.target.value)}
+            />
+            <input
+              type="date"
+              className={styles.dateFilterInput}
+              onChange={(e) => setUpdatedBefore(e.target.value)}
+            />
+          </div>
+          <div className={styles.dateFilterInputs}>
+            <h2 className={styles.dateFilterHeader}>Created</h2>
+            <input
+              type="date"
+              className={styles.dateFilterInput}
+              onChange={(e) => setCreatedAfter(e.target.value)}
+            />
+            <input
+              type="date"
+              className={styles.dateFilterInput}
+              onChange={(e) => setCreatedBefore(e.target.value)}
+            />
+          </div>
           <SectionMenu
             allSections={allSections}
             selected={section}

diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -127,7 +127,6 @@ export default function Community() {
 
   useEffect(() => {
     if (!startsHydrated.current && isHydrated) return;
-    console.log(currentUser);
     if (
       currentUser.rated_packages_cyberstorm.length > 0 &&
       typeof currentUser.rated_packages_cyberstorm[0] === "string"

diff --git a/packages/dapper-ts/src/methods/packageListings.ts b/packages/dapper-ts/src/methods/packageListings.ts
@@ -41,7 +41,11 @@ export async function getPackageListings(
   excludedCategories: string[] = [],
   section = "",
   nsfw = false,
-  deprecated = false
+  deprecated = false,
+  created_after = "",
+  created_before = "",
+  updated_after = "",
+  updated_before = ""
 ) {
   const options: PackageListingQueryParams = {
     ordering,
@@ -52,6 +56,10 @@ export async function getPackageListings(
     section,
     nsfw,
     deprecated,
+    created_after,
+    created_before,
+    updated_after,
+    updated_before,
   };
   let data;
 

diff --git a/packages/thunderstore-api/src/fetch/communityPackageListings.ts b/packages/thunderstore-api/src/fetch/communityPackageListings.ts
@@ -19,6 +19,10 @@ export async function fetchCommunityPackageListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
+    { key: "created_after", value: options?.created_after },
+    { key: "created_before", value: options?.created_before },
+    { key: "updated_after", value: options?.updated_after },
+    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 

diff --git a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts
@@ -20,6 +20,10 @@ export async function fetchNamespacePackageListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
+    { key: "created_after", value: options?.created_after },
+    { key: "created_before", value: options?.created_before },
+    { key: "updated_after", value: options?.updated_after },
+    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 

diff --git a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts
@@ -24,6 +24,10 @@ export async function fetchPackageDependantsListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
+    { key: "created_after", value: options?.created_after },
+    { key: "created_before", value: options?.created_before },
+    { key: "updated_after", value: options?.updated_after },
+    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 

diff --git a/packages/thunderstore-api/src/types/index.ts b/packages/thunderstore-api/src/types/index.ts
@@ -23,4 +23,12 @@ export interface PackageListingQueryParams {
   nsfw: boolean;
   /** Should deprecated packages be included (by default they're not) */
   deprecated: boolean;
+  // Date that the package must be created ON or AFTER
+  created_after: string;
+  // Date that the package must be created ON or BEFORE
+  created_before: string;
+  // Date when the package has to been last updated ON or AFTER
+  updated_after: string;
+  // Date when the package has to been last updated ON or BEFORE
+  updated_before: string;
 }