fix: Improved events calendar page

package.json

@@ -50,7 +50,6 @@
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-bootstrap": "^2.7.4",
-    "react-calendar": "^4.2.1",
     "react-datepicker": "^4.2.0",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",

src/components/EventCalendar/EventCalendar.module.css

@@ -1,52 +1,52 @@
 .calendar {
-  /* display: flex;
-    flex-direction: column; */
   font-family: sans-serif;
   font-size: 1.2rem;
+  margin-bottom: 20px;
 }
 .calendar__header {
   display: flex;
   margin-bottom: 2rem;
+  align-items: center;
 }
 .calendar__header_month {
   margin: 0.5rem;
   color: #707070;
   font-weight: bold;
 }
 .button {
-  background-color: rgba(40, 167, 69, 1);
-  color: #fff;
-  padding: 1px;
+  color: #707070;
+  background-color: rgba(0, 0, 0, 0);
   font-weight: bold;
+  border: 0px;
 }
 .calendar__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-bottom: 1rem;
   background-color: black;
+  height: 60px;
 }
 .weekday {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid white;
   color: #fff;
-  background-color: rgba(40, 167, 69, 1);
+  background-color: #31bb6b;
+  font-weight: 600;
 }
 .calendar__days {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   grid-template-rows: repeat(6, 1fr);
 }
 .day {
   background-color: #ffffff;
-  border: 1px solid rgb(0, 0, 0);
-  padding-bottom: 4rem;
   padding-left: 0.3rem;
   padding-right: 0.3rem;
   background-color: white;
-  border: 1px solid #707070;
-  color: #212121;
+  border: 1px solid #8d8d8d55;
+  color: #4b4b4b;
+  font-weight: 600;
+  height: 8rem;
 }
 .day__outside {
   background-color: #eeeded;
@@ -60,23 +60,59 @@
   background-color: #def6e1;
   font-weight: 700;
   text-decoration: underline;
-  color: #006000;
+  color: #31bb6b;
 }
 .btn__today {
-  background: #06960f;
   transition: ease-in all 200ms;
-  border-radius: 11px;
-  box-shadow: 0px 1px 3px #666666;
   font-family: Arial;
   color: #ffffff;
-  font-size: 20px;
+  font-size: 18px;
   padding: 10px 20px 10px 20px;
   text-decoration: none;
   margin-left: 20px;
   border: none;
 }
+.btn__more {
+  border: 0px;
+  font-size: 14px;
+  background-color: initial;
+  color: #31bb6b;
+  font-weight: 600;
+  transition: all 200ms;
+  position: relative;
+  display: block;
+}
+.btn__more:hover {
+  color: #3ce080;
+}
 
-.btn__today:hover {
-  background: #006000;
-  text-decoration: none;
+.expand_event_list {
+  display: block;
+}
+
+.expand_list_container {
+  width: 200px;
+  max-height: 250px;
+  z-index: 10;
+  position: relative;
+  left: auto;
+  right: auto;
+  overflow: auto;
+  padding: 10px 4px 0px 4px;
+  background-color: rgb(241, 241, 241);
+  border: 1px solid rgb(201, 201, 201);
+  border-radius: 5px;
+}
+
+@media only screen and (max-width: 700px) {
+  .event_list {
+    display: none;
+  }
+  .expand_list_container {
+    width: 150px;
+    padding: 4px 4px 0px 4px;
+  }
+  .day {
+    height: 5rem;
+  }
 }

src/components/EventCalendar/EventCalendar.test.tsx

@@ -135,10 +135,10 @@ describe('Calendar', () => {
         </I18nextProvider>
       </MockedProvider>
     );
-    const prevButton = screen.getByText('<');
+    const prevButton = screen.getByTestId('prevmonth');
     fireEvent.click(prevButton);
     //testing next month button
-    const nextButton = screen.getByText('>');
+    const nextButton = screen.getByTestId('nextmonth');
     fireEvent.click(nextButton);
     //Testing year change
     for (let index = 0; index < 13; index++) {
@@ -203,13 +203,73 @@ describe('Calendar', () => {
       </MockedProvider>
     );
     //Changing the month
-    const prevButton = screen.getByText('<');
+    const prevButton = screen.getByTestId('prevmonth');
     fireEvent.click(prevButton);
 
     // Clicking today button
-    const todayButton = screen.getByText('Today');
+    const todayButton = screen.getByTestId('nextmonth');
     fireEvent.click(todayButton);
     // const todayCell = screen.getByText(new Date().getDate().toString());
     // expect(todayCell).toHaveClass(styles.day__today);
   });
+  it('Should expand and contract when clicked on more and less button', () => {
+    const multipleEventData = [
+      {
+        _id: '1',
+        title: 'Event 1',
+        description: 'This is event 1',
+        startDate: new Date().toISOString().split('T')[0],
+        endDate: new Date().toISOString().split('T')[0],
+        location: 'Los Angeles',
+        startTime: '14:00',
+        endTime: '16:00',
+        allDay: false,
+        recurring: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '2',
+        title: 'Event 2',
+        description: 'This is event 2',
+        startDate: new Date().toISOString().split('T')[0],
+        endDate: new Date().toISOString().split('T')[0],
+        location: 'Los Angeles',
+        startTime: '14:00',
+        endTime: '16:00',
+        allDay: false,
+        recurring: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '3',
+        title: 'Event 3',
+        description: 'This is event 3',
+        startDate: new Date().toISOString().split('T')[0],
+        endDate: new Date().toISOString().split('T')[0],
+        location: 'Los Angeles',
+        startTime: '14:00',
+        endTime: '16:00',
+        allDay: false,
+        recurring: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+    ];
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Calendar eventData={multipleEventData} />
+        </I18nextProvider>
+      </MockedProvider>
+    );
+    const moreButton = screen.getByText('More');
+    fireEvent.click(moreButton);
+    expect(screen.getByText('Event 3')).toBeInTheDocument();
+    const lessButton = screen.getByText('Less');
+    fireEvent.click(lessButton);
+    expect(screen.queryByText('Event 3')).not.toBeInTheDocument();
+  });
 });

src/components/EventCalendar/EventCalendar.tsx

@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import Button from 'react-bootstrap/Button';
 import React, { useState, useEffect } from 'react';
 import styles from './EventCalendar.module.css';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 
 interface InterfaceEvent {
   _id: string;
@@ -75,6 +76,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
   const [currentMonth, setCurrentMonth] = useState(today.getMonth());
   const [currentYear, setCurrentYear] = useState(today.getFullYear());
   const [events, setEvents] = useState<InterfaceEvent[] | null>(null);
+  const [expanded, setExpanded] = useState<number>(-1);
 
   const filterData = (
     eventData: InterfaceEvent[],
@@ -162,6 +164,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         currentDate.getDate() + 1
       );
     }
+
     return days.map((date, index) => {
       const className = [
         date.toLocaleDateString() === today.toLocaleDateString() //Styling for today day cell
@@ -171,34 +174,64 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         selectedDate?.getTime() === date.getTime() ? styles.day__selected : '',
         styles.day,
       ].join(' ');
+
+      const toggleExpand = (index: number): void => {
+        if (expanded === index) {
+          setExpanded(-1);
+        } else {
+          setExpanded(index);
+        }
+      };
+
+      const allEventsList: any = events
+        ?.filter((datas) => {
+          if (datas.startDate == dayjs(date).format('YYYY-MM-DD')) return datas;
+        })
+        .map((datas: InterfaceEvent) => {
+          return (
+            <EventListCard
+              key={datas._id}
+              id={datas._id}
+              eventLocation={datas.location}
+              eventName={datas.title}
+              eventDescription={datas.description}
+              regDate={datas.startDate}
+              regEndDate={datas.endDate}
+              startTime={datas.startTime}
+              endTime={datas.endTime}
+              allDay={datas.allDay}
+              recurring={datas.recurring}
+              isPublic={datas.isPublic}
+              isRegisterable={datas.isRegisterable}
+            />
+          );
+        });
+
       return (
-        <div style={{}} key={index} className={className} data-testid="day">
+        <div key={index} className={className} data-testid="day">
           {date.getDate()}
-          <div className={styles.list_box}>
-            {events
-              ?.filter((datas) => {
-                if (datas.startDate == dayjs(date).format('YYYY-MM-DD'))
-                  return datas;
-              })
-              .map((datas: InterfaceEvent) => {
-                return (
-                  <EventListCard
-                    key={datas._id}
-                    id={datas._id}
-                    eventLocation={datas.location}
-                    eventName={datas.title}
-                    eventDescription={datas.description}
-                    regDate={datas.startDate}
-                    regEndDate={datas.endDate}
-                    startTime={datas.startTime}
-                    endTime={datas.endTime}
-                    allDay={datas.allDay}
-                    recurring={datas.recurring}
-                    isPublic={datas.isPublic}
-                    isRegisterable={datas.isRegisterable}
-                  />
-                );
-              })}
+          <div
+            className={expanded === index ? styles.expand_list_container : ''}
+          >
+            <div
+              className={
+                expanded === index
+                  ? styles.expand_event_list
+                  : styles.event_list
+              }
+            >
+              {expanded === index ? allEventsList : allEventsList?.slice(0, 2)}
+            </div>
+            {allEventsList?.length > 2 && (
+              <button
+                className={styles.btn__more}
+                onClick={() => {
+                  toggleExpand(index);
+                }}
+              >
+                {expanded === index ? 'Less' : 'More'}
+              </button>
+            )}
           </div>
         </div>
       );
@@ -208,8 +241,12 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
   return (
     <div className={styles.calendar}>
       <div className={styles.calendar__header}>
-        <Button className={styles.button} onClick={handlePrevMonth}>
-          {'<'}
+        <Button
+          className={styles.button}
+          onClick={handlePrevMonth}
+          data-testid="prevmonth"
+        >
+          <ChevronLeft />
         </Button>
         <div
           className={styles.calendar__header_month}
@@ -218,10 +255,14 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           {months[currentMonth]} {currentYear}
         </div>
         <Button className={styles.button} onClick={handleNextMonth}>
-          {'>'}
+          <ChevronRight />
         </Button>
         <div>
-          <Button className={styles.btn__today} onClick={handleTodayButton}>
+          <Button
+            className={styles.btn__today}
+            onClick={handleTodayButton}
+            data-testid="nextmonth"
+          >
             Today
           </Button>
         </div>