persist selection state in url

tum-ai · Oct 12, 2024 · 4e42679 · 4e42679
1 parent d7675ec
commit 4e42679
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/app/opportunities/[opportunity_id]/applications/_components/applicationOverview.tsx b/app/opportunities/[opportunity_id]/applications/_components/applicationOverview.tsx
@@ -30,24 +30,43 @@ import ApplicationForm from "app/opportunities/_components/ApplicationForm";
 import { Input } from "@components/ui/input";
 import { Separator } from "components/ui/separator";
 import { AvatarStack } from "@components/user/users-stack";
+import { usePathname, useRouter } from "next/navigation";
 
+interface SelectionState {
+  questionnaire?: string;
+  application?: number;
+}
 interface Props {
   phases: OpportunityPhase[];
   isAdmin: boolean;
   opportunityId: number;
+  initialSelection: SelectionState;
 }
 
-export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
-  const [
-    { questionnaire: questionnaireId, application: applicationId },
-    setSelectionState,
-  ] = useState<{
+export const ApplicationOverview = ({
+  phases,
+  isAdmin,
+  initialSelection,
+}: Props) => {
+  const [selectionState, setSelectionState] = useState<{
     questionnaire?: string;
     application?: number;
-  }>({
-    questionnaire: undefined,
-    application: undefined,
-  });
+  }>(initialSelection);
+
+  const { questionnaire: questionnaireId, application: applicationId } =
+    selectionState;
+
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const updateSelection = (data: typeof selectionState) => {
+    setSelectionState(data);
+
+    const params = new URLSearchParams();
+    if (data.questionnaire) params.set("questionnaire", data.questionnaire);
+    if (data.application) params.set("application", String(data.application));
+    router.push(pathname + "?" + params.toString());
+  };
 
   const selectedQuestionnaire = useMemo(() => {
     return phases
@@ -122,7 +141,7 @@ export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
                           <Card
                             key={`questionnaire-${questionnaire.id}`}
                             onClick={() =>
-                              setSelectionState({
+                              updateSelection({
                                 questionnaire: questionnaire.id,
                                 application: undefined,
                               })
@@ -175,10 +194,10 @@ export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
                   {filteredApplications?.map((application) => (
                     <Card
                       onClick={() =>
-                        setSelectionState((prev) => ({
-                          ...prev,
+                        updateSelection({
+                          questionnaire: questionnaireId,
                           application: application.id,
-                        }))
+                        })
                       }
                       key={`application-${application.id}`}
                       className={cn(

diff --git a/app/opportunities/[opportunity_id]/applications/page.tsx b/app/opportunities/[opportunity_id]/applications/page.tsx
@@ -25,9 +25,16 @@ interface Props {
   params: {
     opportunity_id: string;
   };
+  searchParams: {
+    application?: string;
+    questionnaire?: string;
+  };
 }
 
-export default async function ApplicationsPage({ params }: Props) {
+export default async function ApplicationsPage({
+  params,
+  searchParams,
+}: Props) {
   const session = await getServerAuthSession();
   const userId = session?.user.id;
   if (!userId) redirect("/auth");
@@ -112,6 +119,10 @@ export default async function ApplicationsPage({ params }: Props) {
         opportunityId={opportunityId}
         phases={phases}
         isAdmin={isAdmin}
+        initialSelection={{
+          questionnaire: searchParams.questionnaire,
+          application: Number(searchParams.application),
+        }}
       />
     </div>
   );