Gpt 12

crushit/api/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "6.3.2",
-    "@redwoodjs/auth-firebase-api": "6.3.2",
-    "@redwoodjs/graphql-server": "6.3.2",
+    "@redwoodjs/api": "6.4.2",
+    "@redwoodjs/auth-firebase-api": "6.4.2",
+    "@redwoodjs/graphql-server": "6.4.2",
     "firebase-admin": "11.10.1"
   },
   "prisma": {

crushit/package.json

@@ -7,8 +7,8 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/auth-firebase-setup": "6.3.2",
-    "@redwoodjs/core": "6.3.2",
+    "@redwoodjs/auth-firebase-setup": "6.4.2",
+    "@redwoodjs/core": "6.4.2",
     "tailwind-scrollbar": "^3.0.5"
   },
   "eslintConfig": {

crushit/web/package.json

@@ -11,10 +11,10 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/auth-firebase-web": "6.3.2",
-    "@redwoodjs/forms": "6.3.2",
-    "@redwoodjs/router": "6.3.2",
-    "@redwoodjs/web": "6.3.2",
+    "@redwoodjs/auth-firebase-web": "6.4.2",
+    "@redwoodjs/forms": "6.4.2",
+    "@redwoodjs/router": "6.4.2",
+    "@redwoodjs/web": "6.4.2",
     "autoprefixer": "^10.4.16",
     "firebase": "^10",
     "postcss": "^8.4.31",
@@ -25,7 +25,7 @@
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
-    "@redwoodjs/vite": "6.3.2",
+    "@redwoodjs/vite": "6.4.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6"
   }

crushit/web/src/components/AppointmentDetails/AppointmentDetails.jsx

@@ -0,0 +1,18 @@
+// TaskDetail.js
+
+const AppointmentDetails = ({ task, onClose }) => {
+  return (
+    <div className="p-2 mt-2 bg-gray-200 rounded-lg">
+      <h4 className="font-bold">Details for {task.time}</h4>
+      <p>{task.detail}</p>
+      <button
+        onClick={onClose}
+        className="mt-2 px-2 py-1 bg-red-500 text-white rounded hover:bg-red-700"
+      >
+        Close
+      </button>
+    </div>
+  );
+};
+
+export default AppointmentDetails;

crushit/web/src/components/AppointmentDetails/AppointmentDetails.stories.jsx

@@ -0,0 +1,17 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```jsx
+// export const Primary = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import TaskDetails from './AppointmentDetails'
+
+export default { component: TaskDetails }
+
+export const Primary = {}

crushit/web/src/components/AppointmentDetails/AppointmentDetails.test.jsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import AppointmentDetails from './AppointmentDetails'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('AppointmentDetails', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<AppointmentDetails />)
+    }).not.toThrow()
+  })
+})

crushit/web/src/components/Appointments/Appointments.jsx

@@ -1,68 +1,61 @@
 import React, { useState } from 'react';
+import AppointmentDetails from '../AppointmentDetails/AppointmentDetails';
 
 const Appointments = () => {
-  // Example appointment times
   const times = [
-    '8 AM', '9 AM', '10 AM', '11 AM', '12 PM', '1 PM', '2 PM', '3 PM', '4 PM',
+    '5 AM', '6 AM', '7 AM', '8 AM', '9 AM', '10 AM', '11 AM', 
+    '12 PM', '1 PM', '2 PM', '3 PM', '4 PM',
     '5 PM', '6 PM', '7 PM', '8 PM', '9 PM', '10 PM', '11 PM',
-    '12 AM', '1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM', '7 AM',
+    '12 AM', '1 AM', '2 AM', '3 AM', '4 AM',
+    //...times list
   ];
 
-  const [showPopup, setShowPopup] = useState(false);
-  const [selectedTime, setSelectedTime] = useState(null);
-  const [selectedTask, setSelectedTask] = useState(null);
+  const [showTaskDetailForTime, setShowTaskDetailForTime] = useState(null);
 
-  const handleDescription = (time) => {
-    setSelectedTime(time);
-    setShowPopup(true);
+  const handleToggleDescription = (time) => {
+    if (showTaskDetailForTime === time) {
+      setShowTaskDetailForTime(null); // Close if the same time is clicked
+    } else {
+      setShowTaskDetailForTime(time); // Show for the clicked time
+    }
   };
 
   const tasks = {
-    // examples
-    // '7 AM': 'Focus Time • Assign Leader for Task 1',
-    // '8 AM': 'Meeting with Counselor',
-    // '9 AM': 'Focus Time • Assign Leader for Task 1',
-    // ... add additional tasks as needed
+    // examples        
+    //'7 AM': 'Focus Time • Assign Leader for Task 1',
+    //'8 AM': 'Meeting with Counselor',
+    //'9 AM': 'Focus Time • Assign Leader for Task 1',
+    //...tasks object
   };
-  const TaskDescriptionPopup = () => (
-    <div className="absolute top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 flex justify-center items-center">
-      <div className="bg-white p-4 rounded-lg">
-        <h3 className="font-bold text-lg mb-4">Task Details for {selectedTime}</h3>
-        {/* Display the selected task detail */}
-        <p>{selectedTask}</p>
-        <button
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
-          onClick={() => setShowPopup(false)}
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  );
 
   return (
     <div>
       <h2 className="text-[30px] font-bold font-dm text-gray-900 mb-3">Appointments</h2>
       <div className="bg-white rounded-lg shadow p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-gray-100" style={{ height: "72vh" }}>
         {times.map((time) => (
-          <div key={time} className="flex items-center justify-between px-4 py-2">
-            <span className="text-lg text-gray-700 font-semibold">{time}</span>
-            {tasks[time] ? (
-              <button
-                onClick={() => handleDescription(time)}
-                className="ml-4 bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded-md shadow focus:outline-none focus:ring focus:border-blue-300"
-              >
-                {tasks[time]}
-              </button>
-            ) : (
-              // Render an empty space if there's no task for the time slot
-              <span className="ml-4 text-sm px-2 py-1"></span>
+          <div key={time} className="flex flex-col items-start justify-between px-4 py-2">
+            <div className="flex items-center w-full">
+              <span className="text-lg text-gray-700 font-semibold">{time}</span>
+              {tasks[time] && (
+                <button
+                  onClick={() => handleToggleDescription(time)}
+                  className="ml-4 bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded-md shadow focus:outline-none focus:ring focus:border-blue-300"
+                >
+                  {tasks[time]}
+                </button>
+              )}
+            </div>
+            {showTaskDetailForTime === time && (
+              <AppointmentDetails
+                task={{ time, detail: tasks[time] }} 
+                onClose={() => setShowTaskDetailForTime(null)} // Pass the close function as a prop
+              />
             )}
           </div>
         ))}
       </div>
-      {showPopup && <TaskDescriptionPopup />}
     </div>
   );
 };
+
 export default Appointments;