Adding bookmarks, quotes, and updating /calculators route

This commit is contained in:
2026-04-02 15:49:26 +05:30
parent f8d0f5fd79
commit 5ee01cb014
8 changed files with 216 additions and 35 deletions

View File

@@ -1,44 +1,72 @@
"use client"
import { pastUsed } from "@/app/utils/calculators/types";
import { Calculator, pastUsed } from "@/app/utils/calculators/types";
import Result from "@/app/utils/Result";
import { useEffect, useState } from "react";
import GetQuote from "@/app/utils/getQuote";
import { CalculatorRegistry } from "@/app/utils/calculators/registry";
import Bookmark from "@/app/utils/Bookmark";
export default function Calculators(){
const [pastUsedObj, setPastUsedObj] = useState<pastUsed[]>([]);
const [bookmarks, setBookmarks] = useState<{id:string, section:string}[]>();
const [index, setIndex] = useState<number>(0)
useEffect(() => {
const pastUsed : string = localStorage.getItem("pastUsed") || "[]";
setPastUsedObj(JSON.parse(pastUsed));
const load = () => {
const stored:string = localStorage.getItem("pastUsed") || "[]";
const parsed = JSON.parse(stored);
setPastUsedObj([...parsed]);
const rawBookmark = localStorage.getItem("bookmarks") || "[]";
const bookmarkarr: { id: string; section: string }[] = JSON.parse(rawBookmark);
setBookmarks(bookmarkarr)
};
load();
}, [])
return(
return(
<>
<div className="flex flex-col justify-center mt-2">
{
pastUsedObj.length !== 0 ?
<GetQuote/>
{pastUsedObj.length !== 0 ? <div className="card card-border bg-white text-black w-full mt-5">
<div className="card-body">
<h2 className="card-title justify-center">Past Results:</h2>
<div className="flex flex-col justify-center mt-2">
<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>
<h1>Empty</h1>
</div>
</div>
<div className="card-actions justify-center">
<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>
</div>
</div> : <h2>No past results were found</h2>}
<div className="card border-4 border-[#ed1b24] bg-white text-black w-full mt-5">
<div className="card-body">
<h2 className="card-title">Bookmarks:</h2>
<div className="grid grid-cols-2 gap-4">
{bookmarks?.length !== 0 ? bookmarks?.map(e => {
console.log(e.id);
const calc = CalculatorRegistry[e.section].calculators.find(c => c.id === e.id)
return <Bookmark section={e.section} name={calc?.name || "Not Loaded"} desc={calc?.desc || "Not Loaded"} id={e.id}/>
}) : <h2>empty</h2>}
</div>
</div>
</div>
</>
);
}