Added bookmark and past used in /calculators

src/app/(calculators)/calculate/[section]/[id]/renderCalc.tsx

@@ -4,8 +4,7 @@ import InputComponent from "@/app/utils/Input";
 import Input from "@/app/utils/Input";
 import Result from "@/app/utils/Result";
 import { CalculatorRegistry } from "@/app/utils/calculators/registry";
-import { Interpretation } from "@/app/utils/calculators/types";
-import { Metadata } from "next";
+import { Interpretation, pastUsed } from "@/app/utils/calculators/types";
 import { useState } from "react";
 
 export default function RenderCalculator({section, id} : {section:string, id:string}){
@@ -53,8 +52,25 @@ export default function RenderCalculator({section, id} : {section:string, id:str
                     e.preventDefault();
                     setResultStatus(true);
                     const calculatedValue = calculator.calc_func(form);
+                    const interpretation = calculator.interpret_func(calculatedValue)
                     setValue(calculatedValue);
-                    setResult(calculator.interpret_func(calculatedValue));
+                    setResult(interpretation);
+                    const values : string = localStorage.getItem("pastUsed") || "[]";
+                    const valuesobj : pastUsed[] = JSON.parse(values);
+                    valuesobj.push(
+                        {
+                            calcInfo:{
+                                section:section,
+                                id:id,
+                                name:calculator.name
+                            },
+                            value: calculatedValue,
+                            interpretation: interpretation,
+                            formData: form,
+                            unit:calculator.unit 
+                        }
+                    );
+                    localStorage.setItem("pastUsed", JSON.stringify(valuesobj));
                 }}>
                     <div className="card max-w-auto bg-white bg-base-100 shadow-sm">
                         <div className="card-body">
@@ -74,6 +90,8 @@ export default function RenderCalculator({section, id} : {section:string, id:str
                             interpretation={result}
                             calculated_value={value}
                             unit={calculator.unit ?? ""}
+                            section={undefined}
+                            id={undefined}
                         />
                     </h3> : null}
                 </form>

src/app/(calculators)/calculators/page.tsx

@@ -1,7 +1,44 @@
 "use client"
 
+import { pastUsed } from "@/app/utils/calculators/types";
+import Result from "@/app/utils/Result";
+import { useEffect, useState } from "react";
+
 export default function Calculators(){
+    const [pastUsedObj, setPastUsedObj] = useState<pastUsed[]>([]);
+    const [index, setIndex] = useState<number>(0)
+    useEffect(() => {
+        const pastUsed : string = localStorage.getItem("pastUsed") || "[]";
+        setPastUsedObj(JSON.parse(pastUsed)); 
+    }, [])
+    
     return(
-        <><h1>hi</h1></>
-    )
+        <>   
+                <div className="flex flex-col justify-center mt-2">
+                {
+                    pastUsedObj.length !== 0 ?
+                        <Result id={pastUsedObj[index].calcInfo.id} 
+                        section={pastUsedObj[index].calcInfo.section} 
+                        interpretation={pastUsedObj[index].interpretation} 
+                        calculated_value={pastUsedObj[index].value} 
+                        unit={pastUsedObj[index].unit}/>
+                    : <h1>Empty</h1>
+                }
+                <div className="join mt-2 self-center">
+                    <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
+                        if(index !== 0 ){
+                            setIndex(index - 1);
+                        }
+                    }}>«</button>
+                    <button className="join-item btn bg-white text-black">Result {index + 1}</button>
+                    <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
+                        if(index < pastUsedObj.length - 1){
+                            setIndex(index+1);
+                        }
+                    }}>»</button>
+                </div>
+            </div>
+            
+        </>
+    );
 }