Student Profile Picture Render

TritonSE · Nov 21, 2024 · b6b97f4 · b6b97f4
1 parent 29d6dd7
commit b6b97f4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/frontend/src/api/students.ts b/frontend/src/api/students.ts
@@ -1,9 +1,10 @@
-import { GET, POST, PUT, DELETE, handleAPIError } from "../api/requests";
+import { DELETE, GET, POST, PUT, handleAPIError } from "../api/requests";
 import { StudentData as CreateStudentRequest } from "../components/StudentForm/types";
 
-import type { APIResult } from "../api/requests";
 import { createAuthHeader } from "./progressNotes";
 
+import type { APIResult } from "../api/requests";
+
 export type Student = CreateStudentRequest & {
   _id: string;
   medication: string;

diff --git a/frontend/src/components/StudentProfile.tsx b/frontend/src/components/StudentProfile.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
@@ -166,6 +167,7 @@ export default function StudentProfile({ id }: StudentProfileProps) {
   const [notFound, setNotFound] = useState<boolean>(false);
   const [studentData, setStudentData] = useState<Student>();
   const [enrollmentInfo, setEnrollmentInfo] = useState<EnrollmentDisplayInfo[]>();
+  const [image, setImage] = useState<string>("default");
   const { allPrograms } = useContext(ProgramsContext);
   const contentRef = useRef(null);
   const reactToPrintFn = useReactToPrint({ contentRef });
@@ -217,6 +219,10 @@ export default function StudentProfile({ id }: StudentProfileProps) {
           };
         }),
       );
+
+      if (studentData.profilePicture && studentData.profilePicture !== "default") {
+        setImage(studentData.profilePicture);
+      }
     }
   }, [studentData]);
 
@@ -327,21 +333,12 @@ export default function StudentProfile({ id }: StudentProfileProps) {
             </div>
           </div>
           {/*profile picture*/}
-          <svg
-            width="191"
-            height="214"
-            className=""
-            viewBox="0 0 191 214"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="95.2142" cy="95.2142" r="95.2142" fill="#B9B9B9" />
-            <circle cx="94.0389" cy="58.7743" r="35.2645" fill="black" />
-            <path
-              d="M36.7455 154.383C37.1285 139.994 43.1232 126.314 53.4714 116.215C63.8195 106.116 77.7163 100.383 92.2447 100.219C106.773 100.056 120.804 105.474 131.391 115.338C141.978 125.201 148.298 138.742 149.026 153.119L92.9112 155.878L36.7455 154.383Z"
-              fill="black"
-            />
-          </svg>
+          <Image
+            alt="Profile Picture"
+            src={image !== "default" ? image : "/../defaultProfilePic.svg"}
+            width={191}
+            height={214}
+          />
         </div>
         <div id="row1" className="flex space-x-[230px]">
           <ContactLayout contact={studentData.emergency} header="Emergency Contact">

diff --git a/frontend/src/components/StudentProfilePrintComponent.tsx b/frontend/src/components/StudentProfilePrintComponent.tsx
@@ -1,6 +1,7 @@
 import { LegacyRef } from "react";
 
 import { Student } from "../api/students";
+
 import { EnrollmentDisplayInfo } from "./StudentProfile";
 
 type PrintComponentProps = {
@@ -19,6 +20,12 @@ type PrintContactProps = {
 type PrintProgramProps = {
   enrollmentInfo: EnrollmentDisplayInfo;
 };
+
+function formatDate(d: Date) {
+  const date = new Date(d);
+  return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
+}
+
 function Contact({ firstName, lastName, email, phoneNumber, header }: PrintContactProps) {
   return (
     <div className="inline-block">
@@ -54,11 +61,6 @@ function Program({ enrollmentInfo }: PrintProgramProps) {
   );
 }
 
-function formatDate(d: Date) {
-  const date = new Date(d);
-  return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
-}
-
 export default function StudentProfilePrintComponent({
   data,
   contentRef,