Redux store

client/package.json

@@ -15,6 +15,7 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/App.js

@@ -12,6 +12,7 @@ import axios from "axios";
 axios.defaults.baseURL = "http://localhost:8080";
 
 function App() {
+
   return (
     <>
       <Router>

client/src/components/Dropdown.js

@@ -19,7 +19,7 @@ const Dropdown = ({ options, onSelect, placeholder = 'Select an option' }) => {
         <div>
             <button
             type="button"
-            className="inline-flex justify-between w-full rounded-md shadow-sm px-4 py-2 bg-blue font-spartan font-medium text-darkblue hover:bg-gray-50 focus:outline-none"
+            className="inline-flex justify-between w-full rounded-md shadow-sm px-4 py-2 bg-blue font-spartan font-medium text-lightgray hover:bg-gray-50 focus:outline-none"
             onClick={toggleDropdown}
             >
             {selectedValue}
@@ -41,7 +41,7 @@ const Dropdown = ({ options, onSelect, placeholder = 'Select an option' }) => {
 
         {isOpen && (
             <div
-            className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white focus:outline-none z-10"
+            className="text-gray origin-top-right absolute right-0 w-80 rounded-b-md shadow-lg bg-white focus:outline-none z-10"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="menu-button"
@@ -51,7 +51,7 @@ const Dropdown = ({ options, onSelect, placeholder = 'Select an option' }) => {
                 {options.map((option) => (
                 <button
                     key={option}
-                    className="text-darkblue block px-4 py-2 text-sm w-full text-left hover:blue"
+                    className="font-spartan text-darkblue block px-4 py-2 text-sm w-full text-left hover:blue"
                     role="menuitem"
                     tabIndex="-1"
                     onClick={() => handleOptionClick(option)}

client/src/screens/calendarpage.js

@@ -1,5 +1,7 @@
-import React from 'react';
-import { format, addDays, subDays } from 'date-fns';
+import React, { useState, useEffect } from 'react';
+import { format, addDays } from 'date-fns';
+import axios from 'axios';
+import { useSelector } from "react-redux";
 
 const getFiveDayRange = () => {
     const today = new Date();
@@ -10,47 +12,125 @@ const getFiveDayRange = () => {
     return days;
 };
 
-function CalendarHeader() {
+function CalendarHeader({ medications }) {
     const days = getFiveDayRange();
     const today = new Date();
 
     return (
         <>
-        <div className="text-left text-lg font-spartan text-white ml-7 font-bold">
+            <div className="text-left text-lg font-spartan text-white ml-7 font-bold">
                 {format(today, 'EEEE, MMM dd, yyyy')}
-        </div>
-        <div className="flex justify-center items-center space-x-4 bg-gray-200 p-4 rounded-md mb-10">
-        {days.map((day, index) => {
-            const isToday = format(day, 'yyyy-MM-dd') === format(new Date(), 'yyyy-MM-dd');
-            return (
-            <div
-                key={index}
-                className={`p-4 rounded-full font-spartan  ${
-                isToday ? 'bg-blue text-gray' : 'bg-white text-calendarblue'
-                }`}
-            >
-                <div className="text-lg mt-2">{format(day, 'dd')}</div>
-                <div className="text-sm mb-2">{format(day, 'EEE')}</div> 
             </div>
-            );
-        })}
-        </div>
+            <div className="flex justify-center items-center space-x-4 bg-gray-200 p-4 rounded-md mb-10">
+                {days.map((day, index) => {
+                    const isToday = format(day, 'yyyy-MM-dd') === format(new Date(), 'yyyy-MM-dd');
+                    return (
+                        <div
+                            key={index}
+                            className={`p-4 rounded-full font-spartan ${isToday ? 'bg-blue text-gray' : 'bg-white text-calendarblue'}`}
+                        >
+                            <div className="text-lg mt-2">{format(day, 'dd')}</div>
+                            <div className="text-sm mb-2">{format(day, 'EEE')}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        </>
+    );
+}
+
+function TakePillItem({ medications, onTake, onSkip }) {
+    return (
+        <>
+            {medications.length === 0 ? (
+                <div className="text-center font-spartan text-darkblue text-xl mt-10">No medications yet!</div>
+            ) : (
+                medications.map((medication, index) => (
+                    <div
+                        key={index}
+                        className={`flex flex-col rounded-3xl drop-shadow-xl w-85 hs-auto left-0 right-0 mx-auto mt-10 bg-white ${medication.skipped ? 'opacity-50' : 'opacity-100'}`}
+                    >
+                        <div className="flex justify-between items-center p-1 bg-gray-100 h-auto">
+                            <div>
+                                <p className={`text-left font-spartan text-medium ml-5 mt-5 ${medication.recallStatus ? 'text-red' : 'text-green'}`}>
+                                    {medication.recallStatus ? 'Recalled' : 'Not Recalled'}
+                                </p>
+                            </div>
+                            <div>
+                                <p className="text-calendarblue text-sm text-right font-spartan tracking-widest mr-6 mt-4">{medication.time.join(', ')}</p>
+                                <h1 className="text-calendarblue text-3xl text-right tracking-widest mr-4 font-spartan">{medication.name}</h1>
+                            </div>
+                        </div>
+                        <div className="flex flex-row">
+                            <button
+                                type="button"
+                                onClick={() => onSkip(index)}
+                                className="flex items-center justify-center mt-5 w-80 px-4 py-2 left-0 right-0 mx-auto font-medium font-spartan text-white text-center text-xl bg-calendarblue rounded-l-3xl hover:bg-blue-600 focus:outline-none focus:bg-opacity-25"
+                            >
+                                Skip
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => onTake(index)}
+                                className="flex items-center justify-center mt-5 w-80 px-4 py-2 left-0 right-0 mx-auto font-medium font-spartan text-white text-center text-xl bg-calendarblue rounded-r-3xl hover:bg-blue-600 focus:outline-none focus:bg-opacity-25"
+                            >
+                                Take
+                            </button>
+                        </div>
+                    </div>
+                ))
+            )}
         </>
     );
 }
 
 function Calendarpage() {
+    const [medications, setMedications] = useState([]);
+    const { user } = useSelector((state) => state.auth);
+
+    const fetchMedications = async () => {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${user.token}`,
+            },
+        };
+        try {
+            const response = await axios.get('api/user/allmedications', config);
+            const medicationsData = response.data.map(medication => ({
+                name: medication.name,
+                time: medication.time,
+                recallStatus: medication.recallStatus,
+                skipped: false, // Add skipped state to each medication
+                taken: false // Add taken state to each medication
+            }));
+            setMedications(medicationsData);
+        } catch (error) {
+            console.error('Error fetching medications:', error);
+        }
+    };
+
+    const handleTake = (index) => {
+        // Remove the medication when "Take" is clicked
+        setMedications(medications.filter((_, i) => i !== index));
+    };
+
+    const handleSkip = (index) => {
+        // Mark the medication as skipped (set opacity to 50%)
+        setMedications(medications.map((med, i) => i === index ? { ...med, skipped: true } : med));
+    };
+
+    useEffect(() => {
+        fetchMedications();
+    }, []);
+
     return (
-        <div className="flex flex-col items-center w-screen h-screen bg-blue">
-            <div className = "flex flex-col rounded-b-3xl drop-shadow-xl w-screen h-auto left-0 right-0 mx-auto bg-calendarblue">
-            <h1 className="text-white text-5xl text-left tracking-widest ml-7 mt-10 font-spartan">Pillora </h1>
-                <CalendarHeader />
+        <div className="flex flex-col items-center overflow-y-scroll w-screen min-h-screen bg-blue">
+            <div className="flex flex-col rounded-b-3xl drop-shadow-xl w-screen h-auto left-0 right-0 mx-auto bg-calendarblue">
+                <h1 className="text-white text-5xl text-left tracking-widest ml-7 mt-10 font-spartan">Pillora</h1>
+                <CalendarHeader medications={medications} />
             </div>
-            <div className = "flex flex-col rounded-3xl drop-shadow-xl w-85 h-60 left-0 right-0 mx-auto mt-10 bg-white">
-                    <div className = "flex justify-content">
-                        <h1 className="text-calendarblue text-3xl text-right tracking-widest ml-3 mt-5 font-spartan"> Pill A </h1>
-                    </div>
-                </div>
+            <TakePillItem medications={medications} onTake={handleTake} onSkip={handleSkip} />
+            <div className="mb-40"></div>
         </div>
     );
 }

client/src/screens/loginpage.js

@@ -55,7 +55,7 @@ const LoginPage = () => {
         <>
             <div className="flex flex-col items-center justify-center h-screen w-screen bg-blue">
 
-                <div className="flex flex-col w-85 h-auto bg-white rounded-2xl shadow-xl mb-10">
+                <div className="flex flex-col w-85 h-auto bg-white rounded-2xl shadow-xl mb-20">
                     <img src="./assets/images/logo.png" alt="Logo" className="left-0 right-0 mx-auto mt-10 h-auto w-80" />
 
                     <form onSubmit={onSubmit}>