feat: link answerpage component to campaign info component

Author: Plebbaroni

frontend-nextjs/src/app/[lang]/campaign/[orgSlug]/[campaignSlug]/campaign-info.tsx

@@ -6,10 +6,12 @@ import { getCampaignBySlugs, getCampaignAttachments, getCampaignRoles } from "@/
 import { Calendar, ExternalLink, Mail, FileText, Video, Clock, Users, Briefcase, Info, Phone, SquareUserRound } from "lucide-react";
 import { dateToString } from "@/lib/utils"; 
 import { Button } from "@/components/ui/button";
-import { notFound } from "next/navigation";
+import { notFound, useParams } from "next/navigation";
 import Link from "next/link";
 
-export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug: string, campaignSlug: string, dict: any }) {
+export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug: string, campaignSlug: string, dict: any, lang:string }) {
+    const params = useParams();
+    const lang = params.lang
     const { data: campaignData } = useQuery({
         queryKey: [`${orgSlug}-${campaignSlug}-campaign-details`],
         queryFn: () => getCampaignBySlugs(orgSlug, campaignSlug)
@@ -19,12 +21,12 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
 
     const { data: roleData } = useQuery({
         queryKey: [`${campaignData?.id}-campaign-roles`],
-        queryFn: () => getCampaignRoles(campaignData!.id)
+        queryFn: () => getCampaignRoles(campaignData!.id.toString())
     });
 
     const { data: attachmentsData } = useQuery({
         queryKey: [`${campaignData?.id}-campaign-attachments`],
-        queryFn: () => getCampaignAttachments(campaignData!.id)
+        queryFn: () => getCampaignAttachments(campaignData!.id.toString())
     })
 
     return (
@@ -352,7 +354,7 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
                                 </div>
 
                                 {/* TODO: If user is logged in, check for existing application and change text to "Continue Application" */}
-                                <Link href={`/campaign/${campaignData.id}/apply`}>
+                                <Link href={`/${lang}/campaign/apply/${campaignData.id}`}>
                                     <Button className="w-full cursor-pointer mb-2" size="lg">
                                         {dict.common.apply}
                                     </Button>

frontend-nextjs/src/app/[lang]/campaign/[orgSlug]/[campaignSlug]/page.tsx

@@ -16,7 +16,7 @@ export default async function CampaignPage({ params }: { params: Promise<{ orgSl
 
     return (
         <HydrationBoundary state={dehydrate(queryClient)}>
-            <CampaignInfo orgSlug={orgSlug} campaignSlug={campaignSlug} dict={dict} />
+            <CampaignInfo orgSlug={orgSlug} campaignSlug={campaignSlug} dict={dict} lang={lang}/>
         </HydrationBoundary>
     )
 

frontend-nextjs/src/app/[lang]/campaign/apply/[campaignId]/page.tsx

@@ -0,0 +1,18 @@
+import { redirect } from "next/navigation";
+import { createOrGetApplication } from "@/models/application";
+
+async function ApplyPage({ params }: { params: Promise<{ campaignId: string; lang: string }> }) {
+  const { campaignId, lang } = await params;
+
+  let response;
+  try {
+    response = await createOrGetApplication(campaignId);
+  } catch (error) {
+    console.error("Failed to create/get application:", error);
+    redirect(`/${lang}/campaign/apply/${campaignId}/finish`);
+  }
+
+  redirect(`/${lang}/campaign/apply/${campaignId}/application/${response.application_id}`);
+}
+
+export default ApplyPage;

frontend-nextjs/src/models/application.ts

@@ -19,6 +19,11 @@ export interface ApplicationAppliedRoleDetails {
     role_name: string;
     preference: number;
 }
+export async function createOrGetApplication(campaignId: string): Promise<{ application_id: string }> {
+    return await apiRequest<{ application_id: string }>(`/api/v1/campaign/${campaignId}/apply`, {
+      method: "POST",
+    });
+}
 
 export async function getApplication(applicationId: string): Promise<ApplicationDetails> {
     return await apiRequest<ApplicationDetails>(`/api/v1/application/${applicationId}`);