Intw24 review end page

components/review/shared/reviewRatingPage.tsx

@@ -11,6 +11,7 @@ interface Props {
   resumeLink?: string;
   scores: Map<ReviewStage, number>;
   contextConsumer: JSX.Element;
+  application: ApplicationDTO | undefined;
 }
 
 interface resumeProps {
@@ -44,6 +45,7 @@ export const ReviewRatingPage: React.FC<Props> = ({
   resumeLink,
   scores,
   contextConsumer,
+  application
 }) => {
   return (
     <ReviewSplitPanelPage
@@ -63,6 +65,7 @@ export const ReviewRatingPage: React.FC<Props> = ({
         </div>
       }
       scores={scores}
+      application={application}
     />
   );
 };

components/review/shared/reviewSplitPanelPage.tsx

@@ -11,6 +11,7 @@ interface Props {
   rightContent?: JSX.Element;
   currentStage: ReviewStage;
   scores: Map<ReviewStage, number>;
+  application: ApplicationDTO | undefined;
 }
 
 export const ReviewSplitPanelPage: React.FC<Props> = ({
@@ -22,6 +23,7 @@ export const ReviewSplitPanelPage: React.FC<Props> = ({
   rightContent,
   currentStage,
   scores,
+  application
 }) => {
   return (
     <div className="grid grid-cols-2 grid-rows-[auto_1fr] h-screen">
@@ -58,7 +60,7 @@ export const ReviewSplitPanelPage: React.FC<Props> = ({
             <div>{rightContent}</div>
           </div>
         </div>
-        <ReviewStepper currentStage={currentStage} scores={scores} />
+        <ReviewStepper currentStage={currentStage} scores={scores} application={application} />
       </div>
     </div>
   );

components/review/shared/reviewStepper.tsx

@@ -2,15 +2,19 @@ import Button from "@components/common/Button";
 import { ReviewStage } from "pages/review";
 import React, { useMemo } from "react";
 import { ReviewSetStageContext } from "./reviewContext";
+import { fetchGraphql } from "@utils/makegqlrequest";
+import { mutations } from "graphql/queries";
+import { useRouter } from "next/router";
 
 interface Props {
   currentStage: ReviewStage;
   scores: Map<ReviewStage, number>;
+  application: ApplicationDTO | undefined;
 }
 
 type NavigationItemState = "current" | "past" | "future";
 
-export const ReviewStepper: React.FC<Props> = ({ currentStage, scores }) => {
+export const ReviewStepper: React.FC<Props> = ({ currentStage, application, scores }) => {
   const buttons = useMemo(
     () => [
       { title: "INFO", index: 1, stage: ReviewStage.INFO },
@@ -78,6 +82,44 @@ export const ReviewStepper: React.FC<Props> = ({ currentStage, scores }) => {
     }
   };
 
+  const sendRatingData = (id: number, ratingToBeChanged: string, newValue: number|undefined) => {
+    fetchGraphql(mutations.changeRating, {id: id, ratingToBeChanged: ratingToBeChanged, newValue: newValue}).then(
+      (result) => {},
+    );
+  };
+
+  const sendFinalComments = (id: number, newComments: string, newSkillCategory: string, newRecommendedSecondChoice: string) => {
+    fetchGraphql(mutations.modifyFinalComments, {id: id, newComments: newComments, newSkillCategory: newSkillCategory, newRecommendedSecondChoice: newRecommendedSecondChoice}).then(
+      (result) => {},
+    );
+  };
+
+  const getReviewId = (query: any): number => {
+    // verify reviewId
+    const reviewId =
+      typeof query["reviewId"] === "string"
+        ? parseInt(query["reviewId"])
+        : (() => {
+            throw new Error("reviewId must be a String");
+          })();
+    if (Number.isNaN(reviewId))
+      throw Error("reviewId must be parsable into an int");
+
+    return reviewId;
+  };
+
+  const reviewId = getReviewId(useRouter().query);
+
+  const updateAllData = () => {
+    // send all updated ratings
+    sendRatingData(reviewId, "passionFSG", scores?.get(ReviewStage.PFSG));
+    sendRatingData(reviewId, "teamPlayer", scores?.get(ReviewStage.TP));
+    sendRatingData(reviewId, "desireToLearn", scores?.get(ReviewStage.D2L));
+    sendRatingData(reviewId, "skill", scores?.get(ReviewStage.SKL));
+    // send finalComments (skills category, comments, second choice)
+    sendFinalComments(reviewId, application?.comments, application?.skillsCategory, application?.secondChoiceRole)
+  };
+
   return (
     <div className="bottom-0 left-0 w-full">
       <div className="bg-sky-100 m-2 p-4 flex">
@@ -108,7 +150,7 @@ export const ReviewStepper: React.FC<Props> = ({ currentStage, scores }) => {
                 <Button
                   className="justify-self-end whitespace-nowrap"
                   size="sm"
-                  onClick={() => setStage?.(ReviewStage.END_SUCCESS)}
+                  onClick={() => {updateAllData(), setStage?.(ReviewStage.END_SUCCESS)}}
                 >
                   Finish
                 </Button>

components/review/stages/reviewDriveToLearnStage.tsx

@@ -54,6 +54,7 @@ export const ReviewDriveToLearnStage: React.FC<Props> = ({
         <ReviewAnswers questions={questions} answers={answers} />
       }
       scores={scores}
+      application={application}
       contextConsumer={
         <ReviewSetScoresContext.Consumer>
           {(updateScore) => (

components/review/stages/reviewEndStage.tsx

@@ -1,25 +1,120 @@
 import { ReviewStage } from "pages/review";
 import { ReviewSplitPanelPage } from "../shared/reviewSplitPanelPage";
+import { useState } from "react";
 
 interface Props {
+  name: string;
+  application: ApplicationDTO | undefined;
   scores: Map<ReviewStage, number>;
 }
 
-export const ReviewEndStage: React.FC<Props> = ({ scores }) => {
+
+export const ReviewEndStage: React.FC<Props> = ({ name, application, scores }) => {
+  const totalScore = scores?.get(ReviewStage.PFSG) + scores?.get(ReviewStage.TP) + scores?.get(ReviewStage.D2L) + scores?.get(ReviewStage.SKL);
+
+  const [selectedOption, setSelectedOption] = useState<string>(''); // State to store the selected option
+  const [comment, setComment] = useState<string>(''); // State to store the comment
+
+  // Function to handle option change
+  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    application.skillsCategory = event.target.value;
+    setSelectedOption(event.target.value);
+  };
+  const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    application.comments = event.target.value;
+    setComment(event.target.value);
+  };
+  const handleChoiceChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (application.secondChoiceRole == "considered") {
+      application.secondChoiceRole = "not considered"
+    } else {
+      application.secondChoiceRole = "considered"
+    }
+  };
+
   return (
     <ReviewSplitPanelPage
-      studentName="M. Goose"
+      studentName={name}
       currentStage={ReviewStage.END}
-      leftTitle="Summary of scores"
+      leftTitle={"Summary of scores"}
       leftContent={
-        <div>
-          <div>Passion for Social Good: {scores?.get(ReviewStage.PFSG)}</div>
-          <div>Team Player: {scores?.get(ReviewStage.TP)}</div>
-          <div>Desire to Learn: {scores?.get(ReviewStage.D2L)}</div>
-          <div>Skill: {scores?.get(ReviewStage.SKL)}</div>
+        <div className="flow-root pl-5 pr-5">
+          <div className="flow-root pt-20 pb-5">
+            <h4 className="text-blue float-left B10">Topic</h4>
+            <h4 className="text-blue float-right B10">Rating</h4>
+          </div>
+          <div className="flex flex-col space-y-4">
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <span>Passion for Social Good</span>
+              <span style={{ textAlign: "right" }}>
+                {scores?.get(ReviewStage.PFSG)}/5
+              </span>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <span>Team Player</span>
+              <span style={{ textAlign: "right" }}>
+                {scores?.get(ReviewStage.TP)}/5
+              </span>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <span>Desire to Learn</span>
+              <span style={{ textAlign: "right" }}>
+                {scores?.get(ReviewStage.D2L)}/5
+              </span>
+            </div>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <span>Skill</span>
+              <span style={{ textAlign: "right" }}>
+                {scores?.get(ReviewStage.SKL)}/5
+              </span>
+            </div>
+          </div>
+          <hr className="h-px my-8 bg-gray-200 border-1"></hr>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <h4>Total</h4>
+              <h4 style={{ textAlign: "right" }}>
+                {totalScore}/5
+              </h4>
+            </div>
         </div>
       }
       scores={scores}
+      application={application}
+      rightContent={
+        <div className="flex flex-col space-y-4 pl-5 pr-5">
+          <div>
+            <form>
+              <h3 className="text-[26px] pt-8">Skills Category</h3>
+              <select value={selectedOption} onChange={handleOptionChange} required>
+                <option value="">Skills Category</option>
+                <option value="junior">Junior</option>
+                <option value="intermediate">Intermediate</option>
+                <option value="senior">Senior</option>
+              </select>
+              <h5 className="text-red-500 inline-block px-2 text-xl">*</h5>
+            </form>
+          </div>
+          <div>
+            <h3 className="text-[26px]">Comments</h3>
+            <textarea
+              value={comment}
+              onChange={handleCommentChange}
+              placeholder="Leave comments here"
+              style={{
+                width: "100%",
+                height: "100px",
+                padding: "8px",
+                fontSize: "16px",
+              }}
+            />
+          </div>
+          <div> 
+            <h3 className="text-[26px]"><span className="text-blue">Second Choice: </span>{application?.secondChoiceRole}</h3>
+            <input className="B10" type="checkbox" id="secondChoice" name="secondChoice" value="secondChoice" onChange={handleChoiceChange}></input>
+            <label>    Recommend for Second Choice</label>
+          </div>
+        </div>
+      }
     ></ReviewSplitPanelPage>
   );
 };

components/review/stages/reviewInfoStage.tsx

@@ -159,6 +159,7 @@ export const ReviewInfoStage: React.FC<ReviewStageProps> = ({
         </>
       }
       scores={scores}
+      application={application}
     ></ReviewSplitPanelPage>
   );
 };

components/review/stages/reviewPassionForSocialGoodStage.tsx

@@ -77,6 +77,7 @@ export const ReviewPassionForSocialGoodStage: React.FC<Props> = ({
           <ReviewAnswers questions={questions} answers={answers} />
         }
         scores={scores}
+        application={application}
       />
     </>
   );

components/review/stages/reviewSkillStage.tsx

@@ -60,6 +60,7 @@ export const ReviewSkillStage: React.FC<ReviewStageProps> = ({
       }
       resumeLink={resumeLink}
       scores={scores}
+      application={application}
       contextConsumer={
         <ReviewSetScoresContext.Consumer>
           {(updateScore) => (

components/review/stages/reviewTeamPlayerStage.tsx

@@ -72,6 +72,7 @@ export const ReviewTeamPlayerStage: React.FC<Props> = ({
         <ReviewAnswers questions={questions} answers={answers} />
       }
       scores={scores}
+      application={application}
     />
   );
 };

graphql/queries.ts

@@ -17,6 +17,21 @@ export const mutations = {
     refresh(refreshToken: $refreshToken)
   }
 `,
+  changeRating: `
+    mutation changeRating($id: Int!, $ratingToBeChanged: String!, $newValue: Int!) {
+      changeRating(id: $id, ratingToBeChanged: $ratingToBeChanged, newValue: $newValue) {
+        id
+      }
+    }
+  `
+  ,
+  modifyFinalComments: `
+    mutation modifyFinalComments($id: Int!, $newComments: String!, $newSkillCategory: String!, $newRecommendedSecondChoice: String!) {
+      modifyFinalComments(id: $id, newComments: $newComments, newSkillCategory: $newSkillCategory, newRecommendedSecondChoice: $newRecommendedSecondChoice) {
+        id
+      }
+    }
+  `,
 };
 
 // TODO: add functionaltiy to getRole in case accessToken expired and needs to be refreshed.

pages/review/index.tsx

@@ -142,7 +142,13 @@ const ReviewsPages: NextPage = () => {
           />
         );
       case ReviewStage.END:
-        return <ReviewEndStage scores={scores} />;
+        return (
+          <ReviewEndStage 
+            name={name}
+            application={application}
+            scores={scores} 
+          />
+        );
       case ReviewStage.END_SUCCESS:
       default:
         return <ReviewEndSuccessStage />;