Issue #283

src/components/DaySelect/time_select_component/time_select_component.tsx

@@ -55,7 +55,7 @@ export const TimeSelectComponent = (props: any) => {
 
   return (
     <div
-      className={`time-select-container absolute z-50 ${props.paddingClass} flex flex-row items-center justify-center flex-wrap gap-2`}
+      className={`time-select-container absolute z-[49] ${props.paddingClass} flex flex-row items-center justify-center flex-wrap gap-2`}
     >
       <div className="grid items-center">
         <p className="text-right dark:text-text-dark font-normal m-0 text-xs sm:text-base">

src/components/GroupView/GroupViewPage.tsx

@@ -164,6 +164,20 @@ export default function GroupViewPage({
     [createCalendarEventUrl]
   );
 
+  const today = new Date();
+    const getNextDayOccurrence = (targetDayNum: number): Date => {
+      const date = new Date(today);
+      const currentDayNum = today.getDay();
+
+      let daysToAdd = targetDayNum - currentDayNum;
+      if (daysToAdd <= 0) {
+        daysToAdd += 7;
+      }
+
+      date.setDate(date.getDate() + daysToAdd);
+      return date;
+    };
+
   async function handleSelectionSubmission() {
     if (!dragState.endPoint || !dragState.startPoint) {
       setAlertMessage('No new time selection made!');
@@ -196,11 +210,17 @@ export default function GroupViewPage({
       ? selectedEndTimeHHMM.split(':').map(Number)
       : [0, 0];
 
-    const selectedStartTimeDateObject = new Date(calDate?.date!);
+    let selectedStartTimeDateObject = new Date(calDate?.date!);
+    if (selectedStartTimeDateObject.getFullYear() === 2000) {
+      selectedStartTimeDateObject = getNextDayOccurrence(selectedStartTimeDateObject.getDay());
+    }
     selectedStartTimeDateObject.setHours(startHour);
     selectedStartTimeDateObject.setMinutes(startMinute);
 
-    const selectedEndTimeDateObject = new Date(calDate?.date!);
+    let selectedEndTimeDateObject = new Date(calDate?.date!);
+    if (selectedEndTimeDateObject.getFullYear() === 2000) {
+      selectedEndTimeDateObject = getNextDayOccurrence(selectedEndTimeDateObject.getDay());
+    }
 
     endMinute += 15;
     if (endMinute == 60) {
@@ -378,9 +398,7 @@ export default function GroupViewPage({
                       ? 'View Availabilities'
                       : 'Edit Your Availability'}
                   </ButtonSmall>
-                  {isAdmin &&
-                    calendarFramework?.dates?.[0][0].date instanceof Date &&
-                    (calendarFramework.dates[0][0].date as Date).getFullYear() !== 2000 && (
+                  {isAdmin && (
                       <AddToGoogleCalendarButton onClick={handleSelectionSubmission} />
                     )}
                 </div>
@@ -494,10 +512,7 @@ export default function GroupViewPage({
                 theCalendarFramework={[calendarFramework, setCalendarFramework]}
                 chartedUsersData={[filteredChartedUsers, setChartedUsers]}
                 draggable={
-                  isAdmin &&
-                  calendarFramework?.dates?.[0][0].date instanceof Date &&
-                  (calendarFramework.dates[0][0].date as Date).getFullYear() !==
-                    2000
+                  isAdmin
                 }
                 user={getCurrentUserIndex()}
                 isAdmin={isAdmin}

src/components/Home/HomePage.tsx

@@ -7,6 +7,7 @@ import graphic from './calendargraphic.png';
 import LoginPopup from '../utils/components/LoginPopup';
 import Footer from '../utils/components/Footer';
 import Button from '../utils/components/Button';
+import TutorialModal from '../utils/components/TutorialModal/TutorialModal';
 
 // import { SiGooglecalendar } from 'react-icons/si';
 // import { FaLock } from 'react-icons/fa';
@@ -72,10 +73,19 @@ export default function HomePage() {
     }
   };
 
+  const [showTutorial, setTutorial] = React.useState<boolean>(false);
+
   return (
     <div className="flex flex-col min-h-screen">
       <div className="h-1 md:h-8"></div>
 
+      {showTutorial && (
+        <TutorialModal
+          isOpen={!!showTutorial}
+          onClose={() => setTutorial(false)}
+        />
+      )}
+
       <div className="flex-grow w-full overflow-auto px-8 sm:p-14 pt-0 md:px-16 md:pt-14 lg:px-40 xl:px-60 mb-3">
         <div className="flex-col-reverse justify-center md:flex-row flex md:h-1/2 mb-10">
           <div className="justify-center self-center space-y-5 md:space-y-12 max-w-full mb-4 min-w-[70%] md:w-[90%]">
@@ -127,6 +137,16 @@ export default function HomePage() {
                 View My Events
               </Button>
             </div>
+
+            <h1 className="text-text dark:text-text-dark">
+              <b>New to ymeets? →  </b>
+              <span 
+              className='cursor-pointer hover:text-primary transition'
+              onClick={() => setTutorial(true)}>
+                <u>Click here for a quick walkthrough!</u>
+              </span>
+            </h1>
+
           </div>
 
           <div className="flex md:w-[40%] justify-center pb-1 md:pb-4 sm:pb-7 md:pb-0 md:pl-0">

src/components/TimeSelect/TimeSelectPage.tsx

@@ -198,6 +198,10 @@ function TimeSelectPage({
 
   useEffect(() => {
     if (!isGeneralDays) return;
+    if (calendarFramework.dates.length === 0) return;
+
+    const startDate = calendarFramework.dates[0]?.[0]?.date;
+    if (!startDate || startDate.getFullYear() !== 2000) return;
 
     // you need to injet dates into each column so later on
     const today = new Date();
@@ -244,29 +248,31 @@ function TimeSelectPage({
       ...prev,
       dates: updatedDates,
     }));
-  }, [isGeneralDays]);
+  }, [isGeneralDays, calendarFramework.dates]);
 
   const fetchGoogleCalEvents = async (
     calIds: string[]
   ): Promise<calendar_v3.Schema$Event[]> => {
     if (!hasAccess || calIds.length === 0) return [];
 
     const dates = calendarFramework.dates.flat();
-    const timeMin = dates[0]?.date?.toISOString() ?? new Date().toISOString();
-    const timeMax = new Date(dates[dates.length - 1].date as Date).setUTCHours(
-      23,
-      59,
-      59,
-      999
-    );
+    const dateTimestamps = dates.map((d) => (d.date as Date).getTime());
+
+    const startDate = new Date(Math.min(...dateTimestamps));
+    startDate.setHours(0, 0, 0, 0);
+    const timeMin = startDate.toISOString();
+
+    const endDate = new Date(Math.max(...dateTimestamps));
+    endDate.setHours(23, 59, 59, 999);
+    const timeMax = endDate.toISOString();
 
     const allEvents: calendar_v3.Schema$Event[] = [];
 
     for (const calId of calIds) {
       const events = await getEvents(
         calId,
         timeMin,
-        new Date(timeMax).toISOString(),
+        timeMax,
         calendarFramework.timezone
       );
 
@@ -295,6 +301,7 @@ function TimeSelectPage({
     hasAccess,
     shouldFillAvailability,
     calendarFramework.timezone,
+    calendarFramework.dates,
   ]);
 
   // Fetch the user's Google Calendars

src/components/navbar/NavBar.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { onAuthStateChanged } from 'firebase/auth';
 import { auth } from '../../backend/firebase';
+import TutorialModal from '../utils/components/TutorialModal/TutorialModal';
 
 import {
   IconMenu2,
@@ -19,6 +20,7 @@ import {
   IconMoonFilled,
   IconMoon,
   IconSun,
+  IconBook,
 } from '@tabler/icons-react';
 import { useAuth } from '../../backend/authContext';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -34,6 +36,8 @@ export default function NavBar() {
 
   const { login, logout, currentUser } = useAuth();
 
+  const [showTutorial, setTutorial] = useState(false);
+
   const handleMouseLeave = () => {
     setIsOpen(false);
   };
@@ -82,6 +86,13 @@ export default function NavBar() {
 
   return (
     <>
+    {showTutorial && (
+      <TutorialModal
+        isOpen={!!showTutorial}
+        onClose={() => setTutorial(false)}
+      />
+    )}
+
       <div className="flex flex-col w-full pt-6 justify-center z-40 items-center">
         <div className="flex bg-secondary_background dark:bg-secondary_background-dark rounded-xl h-16 w-[94%] px-5 sm:px-8 items-center justify-between shadow-lg">
           <NavLogo />
@@ -148,6 +159,20 @@ export default function NavBar() {
                     aria-orientation="vertical"
                     aria-labelledby="options-menu"
                   >
+                    <a
+                      href="#"
+                      className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setTutorial(true);
+                        setMenuState('closed');
+                      }}
+                    >
+                      <IconBook className="mr-2" size={17} /> Tutorial
+                    </a>
+
+                    <div className="border-t border-gray-200"></div>
+
                     <a
                       href="#"
                       className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"