Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filtering by date to PackageSearch #1131

Merged
merged 1 commit into from
Aug 26, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions apps/cyberstorm-remix/app/c/community.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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}
1 change: 0 additions & 1 deletion apps/cyberstorm-remix/app/p/packageListing.tsx
Original file line number Diff line number Diff line change
@@ -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"
10 changes: 9 additions & 1 deletion packages/dapper-ts/src/methods/packageListings.ts
Original file line number Diff line number Diff line change
@@ -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;

Original file line number Diff line number Diff line change
@@ -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);

Original file line number Diff line number Diff line change
@@ -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);

Original file line number Diff line number Diff line change
@@ -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);

8 changes: 8 additions & 0 deletions packages/thunderstore-api/src/types/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}