[INTW26] Implement Interview Scheduling Feature by chene0 · Pull Request #263 · uwblueprint/website-bp

chene0 · 2026-04-11T15:42:08Z

Notion ticket link

Implementation description

Implement the interview scheduling page at route /interview-groups?interviewGroupId=<interviewGroupId> using the existing SplitPageLayout.tsx component
Hook the submit button to call backend graphql mutator updateInterviewGroup setting input scheduling link and status to "Ready for Invite"
Hook page to load information for the interview partner using backend graphql query getInterviewersByGroupId
Hook page to load information for the interviewed applicants using the backend graphql query getInterviewedApplicantsByGroupId

Steps to test

On website-bp-be, pull and checkout branch INTW26-interview-scheduling-feature and start the backend with docker compose up then run migrations with docker exec recruitment_tools_backend node migrate up
In pgAdmin run the following queries

CREATE EXTENSION IF NOT EXISTS pgcrypto;

INSERT INTO public.interviewed_applicant_records (id, "applicantRecordId", status, "createdAt", "updatedAt")
SELECT
	gen_random_uuid(),
	id,
	'NeedsReview',
	NOW(),
	NOW()
FROM public.applicant_records
ON CONFLICT ("applicantRecordId") DO NOTHING;

On localhost:5000/graphql call the following mutator and copy one of the returns groupIds

mutation DelegateInterviewers {
    delegateInterviewers(positions: ["VP Engineering"]) {
        interviewedApplicantRecordId
        interviewerId
        interviewHasConflict
        groupId
    }
}

Note the column values of the groupId with the following query

query GetInterviewGroup {
    getInterviewGroup(id: "<copied_group_id>") {
        id
        schedulingLink
        status
    }
}

Start the frontend with npm run dev
Login through localhost:3000/admin, then navigate to localhost:3000/interview-groups?interviewGroupId=<copied_group_id>
Type something in the "Paste link here" text input and press submit
Call the same query in step 3, confirm the schedulingLink field updated to what you input and the status is now "Ready to Interview"

What should reviewers focus on?

Page loads with correct applicant and interview partner info (rn theres no check if currently authed user is one of the interview partners, so frontend takes one of the found interview partners for functionality testing for now)
Page loads with existing schedulingLink after submission, resubmission updates successfully
Unable to submit empty link

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

interviewed applicants for that group

chene0 · 2026-04-11T15:44:08Z

-        gridTemplateColumns: `${leftWidth ? `${leftWidth}px` : "1fr"} ${
-          rightWidth ? `${rightWidth}px` : "1fr"
+        gridTemplateColumns: `${leftWidth ? `${leftWidth}fr` : "1fr"} ${
+          rightWidth ? `${rightWidth}fr` : "1fr"


replaced px with fr such that component scales horizontally to parent

@mxc-maggiechen what we thinking about this one, seems interesting

…Id=<interviewGroupId>`

interview group

SaqAsh · 2026-04-20T03:21:20Z

+import { fetchGraphql } from "@utils/makegqlrequest";
+import { queries, mutations } from "graphql/queries";
+
+const InterviewGroupStatusEnum = {


Rename as this is not an enum (please don't use an enum either it's a typescript anti pattern)

changed to InterviewGroupStatus

SaqAsh · 2026-04-20T03:21:35Z

-        gridTemplateColumns: `${leftWidth ? `${leftWidth}px` : "1fr"} ${
-          rightWidth ? `${rightWidth}px` : "1fr"
+        gridTemplateColumns: `${leftWidth ? `${leftWidth}fr` : "1fr"} ${
+          rightWidth ? `${rightWidth}fr` : "1fr"


@mxc-maggiechen what we thinking about this one, seems interesting

SaqAsh · 2026-04-20T03:22:13Z

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";


please name files in accordance with current codebase patterns (EditIcon.tsx)

i think the icon files all follow the .icon.tsx naming pattern at least under components/icons/

SaqAsh · 2026-04-20T03:22:37Z

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+
+export const EditIcon = (): ReactElement => (


you don't need to type the return type we can just have export const EditIcon = () => {}

SaqAsh · 2026-04-20T03:23:16Z

+  const [isEditing, setIsEditing] = useState(false);
+
+  const interviewGroupId = router.isReady
+    ? (router.query.interviewGroupId as string)


why we using type assertions?

i think nextjs types router.query.interviewGroupId as string | string[] | undefined

moved type narrowing logic to ternary

SaqAsh · 2026-04-20T03:23:44Z

+
+  // TODO: handle error state (e.g. show inline error message if a fetch fails)
+  // // once the codebase has an error handler
+  useEffect(() => {


lets see if we can figure out a way to not use a use effect here ....

are you suggesting getServerSideProps

to ternary

chene0 added 2 commits April 11, 2026 11:33

use 'fr' instead of 'px' for SplitPageLayout pane width values

1e49cd7

setup basic structure of interview group scheduling page and fetch

d524cea

interviewed applicants for that group

chene0 commented Apr 11, 2026

View reviewed changes

chene0 added 8 commits April 11, 2026 12:25

fetch interview partner info on interview group scheduling page

e66ae3e

implement interview group update submission flow (no ui feedback yet)

4d6e929

add frontend feedback to calendly link submission flow

8da684c

complete left side panel design to match figma

10ca932

fix right side panel appearance

7c37922

switch interview scheduler route to `/interview-groups?interviewGroup…

eb0a693

…Id=<interviewGroupId>`

add gap between interview partner email and interview details

cf876a4

add comment regarding auth based on currentAuthed user and users in the

a6d2cff

interview group

chene0 changed the title ~~Intw26 interview scheduling feature~~ [INTW26] Interview Scheduling Feature Apr 19, 2026

chene0 changed the title ~~[INTW26] Interview Scheduling Feature~~ [INTW26] Implement Interview Scheduling Feature Apr 19, 2026

chene0 marked this pull request as ready for review April 19, 2026 19:23

SaqAsh approved these changes May 5, 2026

View reviewed changes

SaqAsh self-assigned this May 5, 2026

chene0 added 3 commits May 4, 2026 22:52

rename InterviewGroupStatusEnum to InterviewGroupStatus

3575005

remove router.query.interviewGroupId type assertion, move type narrowing

6f8cb20

to ternary

remove return type for edit icon component

3604673

		@@ -0,0 +1,19 @@
		import { ReactElement } from "react";

		export const EditIcon = (): ReactElement => (

Conversation

chene0 commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chene0 commented Apr 11, 2026 •

edited

Loading