[INTW26] Implement Interview Scheduling Feature

APIClients/InterviewGroupAPIClient.ts

@@ -0,0 +1,71 @@
+import { fetchGraphql } from "@utils/makegqlrequest";
+import { queries, mutations } from "graphql/queries";
+
+const InterviewGroupStatusEnum = {
+  READY_TO_INTERVIEW: "Ready to Interview",
+  INVITES_SENT: "Invites Sent",
+  AVAILABILITY_PENDING: "Availability Pending",
+} as const;
+
+type InterviewGroup = {
+  schedulingLink: string | null;
+};
+
+type Applicant = {
+  firstName: string;
+  lastName: string;
+};
+
+type Interviewer = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  profilePictureFileId: string | null;
+};
+
+const InterviewGroupAPIClient = {
+  updateSchedulingLink: async (
+    id: string,
+    schedulingLink: string,
+  ): Promise<string | null> => {
+    return fetchGraphql(mutations.updateInterviewGroup, {
+      id,
+      status: InterviewGroupStatusEnum.READY_TO_INTERVIEW,
+      schedulingLink,
+    })
+      .then((result) => result.data.updateInterviewGroup.schedulingLink)
+      .catch((e: Error) => {
+        throw new Error(
+          `Failed to update scheduling link. Cause: ${e.message}`,
+        );
+      });
+  },
+  getInterviewGroup: async (id: string): Promise<InterviewGroup> => {
+    return fetchGraphql(queries.getInterviewGroup, { id })
+      .then((result) => result.data.getInterviewGroup)
+      .catch((e: Error) => {
+        throw new Error(`Failed to fetch interview group. Cause: ${e.message}`);
+      });
+  },
+  getInterviewersByGroupId: async (groupId: string): Promise<Interviewer[]> => {
+    return fetchGraphql(queries.getInterviewersByGroupId, { groupId })
+      .then((result) => result.data.getInterviewersByGroupId)
+      .catch((e: Error) => {
+        throw new Error(`Failed to fetch interviewers. Cause: ${e.message}`);
+      });
+  },
+  getInterviewedApplicantsByGroupId: async (
+    groupId: string,
+  ): Promise<Applicant[]> => {
+    return fetchGraphql(queries.getInterviewedApplicantsByGroupId, { groupId })
+      .then((result) => result.data.getInterviewedApplicantsByGroupId)
+      .catch((e: Error) => {
+        throw new Error(
+          `Failed to fetch interviewed applicants. Cause: ${e.message}`,
+        );
+      });
+  },
+};
+
+export default InterviewGroupAPIClient;

components/common/SplitPageLayout.tsx

@@ -29,8 +29,8 @@ export const SplitPanelLayout = ({
   const hasWidthOverride = leftWidth || rightWidth;
   const gridStyle = hasWidthOverride
     ? {
-        gridTemplateColumns: `${leftWidth ? `${leftWidth}px` : "1fr"} ${
-          rightWidth ? `${rightWidth}px` : "1fr"
+        gridTemplateColumns: `${leftWidth ? `${leftWidth}fr` : "1fr"} ${
+          rightWidth ? `${rightWidth}fr` : "1fr"
         }`,
       }
     : undefined;

components/icons/edit.icon.tsx

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+
+export const EditIcon = (): ReactElement => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z"
+      stroke="#848AA5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

graphql/queries.ts

@@ -23,6 +23,13 @@ export const mutations = {
     refresh(refreshToken: $refreshToken)
   }
 `,
+  updateInterviewGroup: `
+    mutation UpdateInterviewGroup($id: ID!, $status: String!, $schedulingLink: String!) {
+      updateInterviewGroup(id: $id, status: $status, schedulingLink: $schedulingLink) {
+        schedulingLink
+      }
+    }
+  `,
   changeRating: `
     mutation changeRating($id: Int!, $ratingToBeChanged: String!, $newValue: Int!) {
       changeRating(id: $id, ratingToBeChanged: $ratingToBeChanged, newValue: $newValue) {
@@ -47,4 +54,30 @@ export const queries = {
       isAuthorizedByRole(accessToken: $accessToken, roles: $roles)
   }
   `,
+  getInterviewGroup: `
+    query GetInterviewGroup($id: ID!) {
+      getInterviewGroup(id: $id) {
+        schedulingLink
+      }
+    }
+  `,
+  getInterviewersByGroupId: `
+    query GetInterviewersByGroupId($groupId: ID!) {
+      getInterviewersByGroupId(groupId: $groupId) {
+        id
+        firstName
+        lastName
+        email
+        profilePictureFileId
+      }
+    }
+  `,
+  getInterviewedApplicantsByGroupId: `
+    query GetInterviewedApplicantsByGroupId($groupId: ID!) {
+      getInterviewedApplicantsByGroupId(groupId: $groupId) {
+        firstName
+        lastName
+      }
+    }
+  `,
 };