Adding bookmarks, quotes, and updating /calculators route

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

@@ -1,43 +1,71 @@
 "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") || "[]";
+        const load = () => {
-        setPastUsedObj(JSON.parse(pastUsed)); 
+            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(        
         <>   
-                <div className="flex flex-col justify-center mt-2">
+                <GetQuote/>
-                {
+                {pastUsedObj.length !== 0 ? <div className="card card-border bg-white text-black w-full mt-5">
-                    pastUsedObj.length !== 0 ?
+                    <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>
+                    
-                }
+                    <h1>Empty</h1>
-                <div className="join mt-2 self-center">
+                </div>
-                    <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
+                        <div className="card-actions justify-center">
-                        if(index !== 0 ){
+                            <div className="join mt-2 self-center">
-                            setIndex(index - 1);
+                                <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
-                        }
+                                    if(index !== 0 ){
-                    }}>«</button>
+                                        setIndex(index - 1);
-                    <button className="join-item btn bg-white text-black">Result {index + 1}</button>
+                                    }
-                    <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
+                                }}>«</button>
-                        if(index < pastUsedObj.length - 1){
+                                <button className="join-item btn bg-white text-black">Result {index + 1}</button>
-                            setIndex(index+1);
+                                <button className="join-item btn bg-[#ed1b24] text-black" onClick={() => {
-                        }
+                                    if(index < pastUsedObj.length - 1){
-                    }}>»</button>
+                                        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>
-            </div>
                 
         </>
     );

src/app/globals.css

@@ -9,6 +9,7 @@
   grid-area: navbar;
   background: 	#ed1b24;     
   color: #FFFFFF;
+  position:sticky;
 }
 #logo{
   transform: translateY(1px);

src/app/utils/Bookmark.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+export default function Bookmark({id, section, name, desc}:{id:string, section:string, name:string, desc:string}){
+    return(
+        <div className="card card-dash bg-white text-black w-full mt-2">
+            <div className="card-body bg-white text-black">
+                <h2 className="card-title bg-white text-black">{name}</h2>
+                <p>{desc}</p>
+                <div className="card-actions justify-end bg-white text-black">
+                    <Link href={`/calculate/${section}/${id}`}><button className="btn bg-[#ed1b24] hover:bg-[#8B0000]">Calculate</button></Link>
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/utils/Navbar.tsx

@@ -6,8 +6,8 @@ type Props = {
 
 export default function Navbar({navbarToggle}: Props){
     return(
-        <div className="navbar h-14 bg-base-100 shadow-sm z-50">
+        <div className="navbar h-14 bg-base-100 shadow-sm z-50 sticky top-0">
-            <div className="navbar-start">
+            <div className="navbar-start sticky">
                 <div className="dropdown">
                     <button onClick={
                         () => {

src/app/utils/Result.tsx

@@ -1,5 +1,6 @@
 import { Calculator, Interpretation } from "./calculators/types";
 import { CalculatorRegistry } from "./calculators/registry";
+import Link from "next/link";
 export default function Result({interpretation, calculated_value, unit, id, section} : {
     interpretation:Interpretation, 
     calculated_value:string | number, 
@@ -22,7 +23,15 @@ export default function Result({interpretation, calculated_value, unit, id, sect
     return(
         <div className={`card max-w-auto ${levelClass} bg-base-100 shadow-sm mt-5 ${levelClass}`}>
             <div className="card-body">
-                {calc ? <h2>{calc.name}</h2> : null}
+                {calc ? <Link className="flex items-center gap-2" href={`/calculate/${section}/${id}`}>
+                    <svg 
+                        className="w-7 h-7 shrink-0 align-middle" 
+                        viewBox="0 0 24 24" fill="none" 
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path d="M8.37032 11.0726L5.41421 14.0287C4.63317 14.8097 4.63316 16.076 5.41421 16.8571L6.95611 18.399C7.73715 19.18 9.00348 19.18 9.78453 18.399L12.7406 15.4429M11.0726 8.37032L14.0287 5.41421C14.8097 4.63317 16.076 4.63316 16.8571 5.41421L18.399 6.95611C19.18 7.73715 19.18 9.00348 18.399 9.78453L15.4429 12.7406M6.64883 6.64883L4.88296 4.88296M19.0992 19.0992L17.3333 17.3333M9.35119 5.87299V4M14.6488 20V18.127M5.87299 9.35119H4M20 14.6488H18.127" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>              
+                <h6 className="leading-none">{calc.name}</h6></Link> : null}
                 <h2 className="card-title self-center">Calculated Score/Value: {calculated_value} {unit}</h2>
                 <p>{message}</p>
                 {diagnosis ? <p>Diagnosis: {diagnosis}</p> : null}

src/app/utils/Section.tsx

@@ -4,10 +4,11 @@ import { useEffect, useState } from "react";
 import { Calculator } from "./calculators/types";
 
 export default function Section({sectionName, Calculators, id} : {sectionName:string, Calculators:Calculator[], id:string}){
-    const [bookmarks, setBookmarks] = useState<string[]>([]);
+    const [bookmarks, setBookmarks] = useState<{section:string, id:string}[]>([]);
     useEffect(() => {
         const bookmarkedStr:string = localStorage.getItem("bookmarks") || "[]";
-        const bookmarkedObj : string[] = JSON.parse(bookmarkedStr);
+        const bookmarkedObj : {section:string, id:string}[] = JSON.parse(bookmarkedStr);
+        console.log(bookmarkedObj);
         setBookmarks(bookmarkedObj);
     }, [])
     return(
@@ -30,18 +31,18 @@ export default function Section({sectionName, Calculators, id} : {sectionName:st
                                 className="shrink-0"
                                 onClick={() => {
                                     const bookmarks:string = localStorage.getItem("bookmarks") || "[]";
-                                    var bookmarksArr:string[] = JSON.parse(bookmarks);
+                                    var bookmarksArr:{section:string, id:string}[] = JSON.parse(bookmarks);
-                                    if(bookmarksArr.indexOf(id) !== -1){
+                                    if(bookmarksArr.findIndex(f => e.id === f.id) !== -1){
-                                        bookmarksArr = bookmarksArr.filter(e => e !== id);
+                                        bookmarksArr = bookmarksArr.filter(g => g.id !== e.id);
                                     }else{
-                                        bookmarksArr.push(id)
+                                        bookmarksArr.push({section:id, id:e.id});
                                     }
                                     setBookmarks(bookmarksArr);
                                     localStorage.setItem("bookmarks", JSON.stringify(bookmarksArr));
                                 }}
                             >
 
-                                { bookmarks.find(e => e === id) ? <svg
+                                { bookmarks.find(f => e.id === f.id) ? <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         x="0px"
                                         y="0px"

src/app/utils/getQuote.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+export default function GetQuote(){
+    const quotes = [
+        {
+            quote: "A good doctor treats the disease; a great doctor treats the patient who has the disease.",
+            author: "William Osler"
+        },
+        {
+            quote: "The art of medicine consists of amusing the patient while nature cures the disease.",
+            author: "Voltaire"
+        },
+        {
+            quote: "Wherever the art of medicine is loved, there is also a love of humanity.",
+            author: "Hippocrates"
+        },
+        {
+            quote: "The best way to find yourself is to lose yourself in the service of others.",
+            author: "Mahatma Gandhi"
+        },
+        {
+            quote: "Doctors put a wall up between themselves and their patients; nurses broke it down.",
+            author: "Jodi Picoult"
+        },
+        {
+            quote: "Medicine is not only a science; it is also an art. It does not consist of compounding pills and plasters; it deals with the very processes of life.",
+            author: "Paracelsus"
+        },
+        {
+            quote: "To array a man's will against his sickness is the supreme art of medicine.",
+            author: "Henry Ward Beecher"
+        },
+        {
+            quote: "A doctor's mission should be not simply to prevent death but to improve the quality of life.",
+            author: "Patch Adams"
+        },
+        {
+            quote: "Doctors are the true heroes of society, working selflessly to heal and comfort the sick.",
+            author: "Unknown"
+        },
+        {
+            quote: "A doctor is not just a healer but a source of hope and comfort for those in pain.",
+            author: "Unknown"
+        },
+        {
+            quote: "Always laugh when you can, it is cheap medicine.",
+            author: "Lord Byron"
+        },
+        {
+            quote: "Let food be thy medicine and medicine be thy food.",
+            author: "Hippocrates"
+        },
+        {
+            quote: "Isn’t it a bit unnerving that doctors call what they do “practice”?",
+            author: "George Carlin"
+        },
+        {
+            quote: "How do you tell the psychiatrists from the patients in the hospital? The patients get better and leave.",
+            author: "Lisa Scottoline"
+        },
+        {
+            quote: "Medicine is my lawful wife, and literature is my mistress. When I get fed up with one, I spend the night with the other.",
+            author: "Anton Chekhov"
+        },
+        {
+            quote: "The art of medicine consists of amusing the patient while nature cures the disease.",
+            author: "Voltaire"
+        },
+        {
+            quote: "After you find out all the things that can go wrong, your life becomes less about living and more about waiting.",
+            author: "Chuck Palahniuk"
+        },
+        {
+            quote: "A medicine cat has no time for doubt. Put your energy into today and stop worrying about the past.",
+            author: "Erin Hunter"
+        },
+        {
+            quote: "Wherever the art of Medicine is loved, there is also a love of Humanity.",
+            author: "Hippocrates"
+        },
+        {
+            quote: "In the words of the philosopher Sceptum, the founder of my profession: am I going to get paid for this?",
+            author: "Terry Pratchett"
+        },
+        {
+            quote: "In my opinion, our health care system has failed when a doctor fails to treat an illness that is treatable.",
+            author: "Kevin Alan Lee"
+        },
+        {
+            quote: "The life so short, the craft so long to learn.",
+            author: "Hippocrates"
+        },
+        {
+            quote: "Though the doctors treated him, let his blood, and gave him medications to drink, he nevertheless recovered.",
+            author: "Leo Tolstoy"
+        },
+        {
+            quote: "Surgeons can cut out everything except cause.",
+            author: "Herbert M. Shelton"
+        },
+        {
+            quote: "You are a placebo responder. Your body plays tricks on your mind. You cannot be trusted.",
+            author: "Ben Goldacre"
+        },
+        {
+            quote: "It’s true that laughter really is cheap medicine. It’s a prescription anyone can afford. And best of all, you can fill it right now.",
+            author: "Steve Goodier"
+        }
+    ];
+    const quote = quotes[Math.floor(Math.random() * quotes.length)];
+    return(
+            <div className="mt-5">
+                <div className="chat chat-start">
+                    <div className="chat-bubble bg-blue-200 text-blue-900 border-blue-200">
+                        <blockquote cite="https://www.huxley.net/bnw/four.html">
+                                <p>
+                                {quote.quote}
+                                </p>
+                            </blockquote>
+                            <p>—<cite>{quote.author}</cite></p>
+                    </div>
+                </div>
+                
+            </div>
+        
+    );
+}