[DEV] Update

Author: Abdullah Shahid

semtrack/src/components/course/Stats.tsx

@@ -9,7 +9,7 @@ const Stats: React.FC<StatsProps> = ({ grades }) => {
   return (
     <div>
       <div className="stats shadow">
-        <div className="stat">
+        <div className="stat pb-5">
           <div className="stat-figure text-primary"></div>
           <div className="stat-title text-sm font-semibold">Grade</div>
           <div className="stat-value">{calculateAverageGrade(grades)} / 100</div>
@@ -19,14 +19,12 @@ const Stats: React.FC<StatsProps> = ({ grades }) => {
           <div className="stat-figure text-secondary"><br /></div>
           <div className="stat-title text-sm font-semibold">Min Grade</div>
           <div className="stat-value">{calculateMinGrade(grades)} / 100</div>
-          <div className="stat-desc"><br /></div>
         </div>
 
         <div className="stat">
           <div className="stat-figure text-secondary"></div>
           <div className="stat-title text-sm font-semibold">Max Grade</div>
           <div className="stat-value">{calculateMaxGrade(grades)} / 100</div>
-          <div className="stat-desc"></div>
         </div>
       </div>
     </div>

semtrack/src/components/dashboard/SemesterStats.tsx

@@ -1,14 +1,26 @@
-import { Course } from "../../store/slices/coursesSlice";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
+import { calculateGPAFromCourses } from "../../utils/gpa";
 
 
 const SemesterStats: React.FC = () => {
+  const {gpa, gradePercentage} = useSelector((state: RootState) => 
+    {
+      return calculateGPAFromCourses(state.courses.courses, state.grades, state.gpa) 
+    });
+
   return (
     <div>
       <div className="stats shadow">
-        <div className="stat">
+        <div className="stat pb-5">
           <div className="stat-figure text-primary"></div>
           <div className="stat-title text-sm font-semibold">Semester GPA</div>
-          <div className="stat-value">{0} / 4.0</div>
+          <div className="stat-value">{gpa} / 4.0</div>
+        </div>
+        <div className="stat">
+          <div className="stat-figure text-primary"></div>
+          <div className="stat-title text-sm font-semibold">Average Grade (%)</div>
+          <div className="stat-value">{gradePercentage} / 100</div>
         </div>
       </div>
     </div>

semtrack/src/pages/Dashboard.tsx

@@ -13,8 +13,8 @@ function Dashboard() {
       TBD - show reminders to enter grades for upcoming assignments, tests, and
       exams.
       <div className="mt-4"></div> */}
-      {/* <SemesterStats /> */}
-      {/* <div className="mt-8"></div> */}
+      <SemesterStats />
+      <div className="mt-8"></div>
       <Courses />
     </>
   );

semtrack/src/store/index.ts

@@ -8,16 +8,19 @@ import {
   setEdit,
   removeGrade
 } from "./slices/gradesSlice";
+import { GPAState, gpaReducer } from "./slices/gpaSlice";
 
 export interface RootState {
   courses: CourseState;
   grades: GradeState;
+  gpa: GPAState;
 }
 
 const store = configureStore({
   reducer: {
     courses: courseReducer,
     grades: gradesReducer,
+    gpa: gpaReducer,
   },
 });
 

semtrack/src/store/slices/gpaSlice.ts

@@ -0,0 +1,55 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface GradeRange {
+    min: number;
+    max: number;
+    gpa: number;
+}
+
+export interface GPATemplate {
+    scale: GradeRange[];
+}
+
+export type GPATemplatesByName = {
+    [name: string]: GPATemplate;
+};
+  
+
+export type GPAState = {
+    activeTemplate: string,
+    templates: GPATemplatesByName,
+    isOn: boolean
+};
+
+const initialState: GPAState = {
+  activeTemplate: "uoft",
+  templates: {
+    "uoft": {
+        scale: [
+            {min: 90, max: 100, gpa: 4.0},
+            {min: 85, max: 89, gpa: 4.0},
+            {min: 80, max: 84, gpa: 3.7},
+            {min: 77, max: 79, gpa: 3.3},
+            {min: 73, max: 76, gpa: 3.0},
+            {min: 70, max: 72, gpa: 2.7},
+            {min: 67, max: 69, gpa: 2.3},
+            {min: 63, max: 66, gpa: 2.0},
+            {min: 60, max: 62, gpa: 1.7},
+            {min: 57, max: 59, gpa: 1.3},
+            {min: 53, max: 56, gpa: 1.0},
+            {min: 50, max: 52, gpa: 0.7},
+            {min: 0, max: 49, gpa: 0.0},
+            {min: 0, max: 49, gpa: 0.0},
+        ]
+    }
+  },
+  isOn: true
+};
+
+const gpaSlice = createSlice({
+  name: "gpa",
+  initialState,
+  reducers: {},
+});
+
+export const gpaReducer = gpaSlice.reducer;

semtrack/src/utils/gpa.ts

@@ -0,0 +1,58 @@
+import { Course } from "../store/slices/coursesSlice"
+import { GPAState } from "../store/slices/gpaSlice";
+import { Grade, GradeState } from "../store/slices/gradesSlice";
+import { calculateAverageGrade } from "./grades";
+// todo: refactor this entire file 
+/**
+ * Calculates the combined GPA of all the given courses
+ * 
+ * @param {Course[]} courses An array of Course objects
+ * 
+ * @returns {number} the combined GPA of the given courses
+ */
+export const calculateGPAFromCourses = (courses: Course[], gradeState: GradeState, GPAState: GPAState) => {
+
+    let gpa = 0;
+    let weight = 0;
+
+    let gradePercentage = 0;
+
+    for (let course of courses) {
+
+        const grades: Grade[] = gradeState.data[course.id];
+
+        let grade = calculateAverageGrade(grades);
+
+        gradePercentage += grade;
+
+        let courseGPA = calculateGPAFromGrade(grade, GPAState);
+
+        // when weight is 2, add the gpa twice. 
+        gpa += courseGPA;
+        weight += 1;
+    }
+
+    gpa = gpa / weight;
+    gradePercentage /= weight;
+
+    return {gpa, gradePercentage };
+}
+
+// given grade, convert to gpa 
+export const calculateGPAFromGrade = (grade: number, GPAState: GPAState): number => {
+
+    if (!GPAState.isOn) {
+      return 0;
+    }
+  
+    const activeScale = GPAState.templates[GPAState.activeTemplate].scale;
+    
+    for (let gradeRange of activeScale) {
+      if (grade >= gradeRange.min && grade <= gradeRange.max) {
+        return gradeRange.gpa;
+      }
+    }
+  
+    throw new Error(`No GPA found for grade ${grade}`);
+  }
+