Added feature to encode data for sharing or cross-session use

felpsey · Dec 15, 2024 · 546ab3b · 546ab3b
1 parent 885e734
commit 546ab3b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import './App.css'
 
@@ -11,17 +11,66 @@ import { Module } from './domain/Module';
 
 
 function App() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [modules, setModules] = useState<Module[]>([]);
 
-  function newModuleEntry() {
+  // Decode search params when the component is mounted
+  useEffect(() => {
+    decodeSearchParams();
+  }, []);
+
+  // Update encoded search params when modules state is changed
+  useEffect(() => {
+    if (modules.length !== 0) {
+      updateSearchParams();
+    }
+  }, [modules]);
+
+  function decodeSearchParams(): void {
+    let currentUrl: URL = new URL(document.location.href);
+    let data: string|null = currentUrl.searchParams.get('data');
+
+    if (data) {
+      importUnstructuredModuleData(JSON.parse(atob(data)));
+    }
+  }
+
+  function importUnstructuredModuleData(unstructuredModuleData: []): void {
+    let structuredModuleData = unstructuredModuleData.map((module: any) => {
+      return new Module(module._code, module._credits, module._stage, module._grade);
+    });
+
+    setModules(structuredModuleData);
+  }
+
+  function encodeModuleData(): string {
+    // Convert modules array to JSON then base64 encode
+    return btoa(JSON.stringify(modules));
+  }
+
+  function newModuleEntry(): void {
     setIsModalOpen(true);
   }
 
-  function addModuleData(module: Module) {
+  function addModuleData(module: Module): void {
+    // Copy contents of existing modules array and append new module object
     setModules([...modules, module]);
   }
 
+  function updateSearchParams(): void {
+    // Encode module data in memory
+    let data = encodeModuleData();
+
+    // Fetch the currentl URL, this will change each time this method is called
+    let currentUrl = new URL(document.location.href);
+
+    // Set encoded data on URL object on 'data' property
+    currentUrl.searchParams.set('data', data);
+
+    // Append encoded params to URI without reloading page
+    history.replaceState({}, "", currentUrl.toString());
+  }
+
   return (
     <div className='container mx-auto h-screen border-l border-r border-gray-100'>
       <div className='flex pt-5 pb-5 border-b border-gray-100'>

diff --git a/src/components/ModuleTable.tsx b/src/components/ModuleTable.tsx
@@ -12,7 +12,9 @@ export default function Table({ modules }: TableProps) {
           <tr>
             <th className="border border-gray-200 px-4 py-2">Module</th>
             <th className="border border-gray-200 px-4 py-2">Credits</th>
+            <th className="border border-gray-200 px-4 py-2">Stage</th>
             <th className="border border-gray-200 px-4 py-2">Grade</th>
+            <th className="border border-gray-200 px-4 py-2">Weighted Grade</th>
           </tr>
         </thead>
         <tbody>
@@ -23,7 +25,9 @@ export default function Table({ modules }: TableProps) {
             >
               <td className="border border-gray-200 px-4 py-2">{item.code}</td>
               <td className="border border-gray-200 px-4 py-2">{item.credits}</td>
+              <td className="border border-gray-200 px-4 py-2">{item.stage}</td>
               <td className="border border-gray-200 px-4 py-2">{item.grade}</td>
+              <td className="border border-gray-200 px-4 py-2">{item.weightedGrade}</td>
             </tr>
           ))}
         </tbody>

diff --git a/src/domain/Module.ts b/src/domain/Module.ts
@@ -6,10 +6,10 @@ export class Module {
     private _weightedGrade: number;
 
     constructor(code: string, credits: number, stage: number, grade: number) {
-        this.code = code;
-        this.credits = credits;
-        this.stage = stage;
-        this.grade = grade;
+        this._code = code;
+        this._credits = credits;
+        this._stage = stage;
+        this._grade = grade;
         this._weightedGrade = this.calculateWeightedGrade();
     }
 
@@ -53,6 +53,6 @@ export class Module {
     }
 
     calculateWeightedGrade(): number {
-        return this._weightedGrade = this.stage * this.grade;
+        return this._weightedGrade = (this.credits * (this.stage - 1)) * this.grade;
     }
 }