Skip to content

add query params to jobs page #203

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Apr 12, 2025
Merged

add query params to jobs page #203

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f70a30
add query params to jobs page
tracyyh Apr 11, 2025
9882e9e
lint
tracyyh Apr 11, 2025
50310d4
check if selectedrole is different from queryparam
tracyyh Apr 11, 2025
c93c8f0
fix dependency array
tracyyh Apr 12, 2025
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
35 changes: 30 additions & 5 deletions apps/web/src/app/(pages)/(dashboard)/(roles)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { ChevronDown } from "lucide-react";

import type { RoleType } from "@cooper/db/schema";
Expand All @@ -22,7 +22,9 @@

export default function Roles() {
const searchParams = useSearchParams();
const queryParam = searchParams.get("id") ?? null;
const searchValue = searchParams.get("search") ?? ""; // Get search query from URL
const router = useRouter();

const [selectedFilter, setSelectedFilter] = useState<
"default" | "rating" | "newest" | "oldest" | undefined
Expand All @@ -35,9 +37,32 @@
const buttonStyle =
"bg-white hover:bg-cooper-gray-200 border-white text-black p-2";

const [selectedRole, setSelectedRole] = useState<RoleType | undefined>(
roles.isSuccess ? roles.data[0] : undefined,
);
const defaultRole = useMemo(() => {
if (roles.isSuccess) {
const role = roles.data.find((role) => role.id === queryParam);
if (role) {
return role;
} else if (roles.data.length > 0) {
return roles.data[0];
}
}
}, [roles.isSuccess, roles.data, queryParam]);

const [selectedRole, setSelectedRole] = useState<RoleType | undefined>();

useEffect(() => {
// initializes the selectedRole to either the role provided by the query params or the first in the role data
if (defaultRole) {
setSelectedRole(defaultRole);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fine for now, but in the future I think if we add a limit to the roles api, we will need to come up with a way to ensure that in case the api doesn't return the selected role, we still fetch it and show it to the user.

E.g. if the api returns like the top 30 ranked roles, but the user is trying to go to the link associated with the 50th ranked role, I don't think it will be selected. There are two things we can do in this case:
If the roleId is not in the list of roles:

  1. Fetch that single role from the api and add it to the list
  2. Redirect the user to the specific page for that role i.e. coopernu.vercel.com/role?id={id}

Copy link
Contributor

@banushi-a banushi-a Apr 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I just saw that if the supplied id isn't there you make it the first role which is good for now I think

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm yeah this is a good point, I think once we implement pagination for the roles we can relook at this since there'll be a page associated with it

}
}, [defaultRole]);

useEffect(() => {
// updates the URL when a role is changed
if (selectedRole && queryParam !== selectedRole.id) {
router.replace(`/?id=${selectedRole.id}`);
}
}, [selectedRole, router]);

Check warning on line 65 in apps/web/src/app/(pages)/(dashboard)/(roles)/page.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'queryParam'. Either include it or remove the dependency array

return (
<>
Expand Down
Loading