fix: Fixed more button disappearing on calendar on small screens (#1401)

* Fixed more button disappearing on calendar on small screens

* Added test

* Changed button name and highlighted date with events

* Fixed failing test

src/components/EventCalendar/EventCalendar.module.css

@@ -62,6 +62,9 @@
   text-decoration: underline;
   color: #31bb6b;
 }
+.day__events {
+  background-color: #def6e1;
+}
 .btn__today {
   transition: ease-in all 200ms;
   font-family: Arial;
@@ -116,3 +119,9 @@
     height: 5rem;
   }
 }
+
+@media only screen and (max-width: 500px) {
+  .btn__more {
+    font-size: 12px;
+  }
+}

src/components/EventCalendar/EventCalendar.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
 import Calendar from './EventCalendar';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { I18nextProvider } from 'react-i18next';
 
@@ -212,7 +212,7 @@ describe('Calendar', () => {
     // 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', () => {
+  it('Should expand and contract when clicked on View all and View less button', () => {
     const multipleEventData = [
       {
         _id: '1',
@@ -265,11 +265,25 @@ describe('Calendar', () => {
         </I18nextProvider>
       </MockedProvider>
     );
-    const moreButton = screen.getByText('More');
+    const moreButton = screen.getByText('View all');
     fireEvent.click(moreButton);
     expect(screen.getByText('Event 3')).toBeInTheDocument();
-    const lessButton = screen.getByText('Less');
+    const lessButton = screen.getByText('View less');
     fireEvent.click(lessButton);
     expect(screen.queryByText('Event 3')).not.toBeInTheDocument();
   });
+
+  test('Handles window resize', () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Calendar eventData={eventData} />
+        </I18nextProvider>
+      </MockedProvider>
+    );
+
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+  });
 });

src/components/EventCalendar/EventCalendar.tsx

@@ -77,6 +77,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
   const [currentYear, setCurrentYear] = useState(today.getFullYear());
   const [events, setEvents] = useState<InterfaceEvent[] | null>(null);
   const [expanded, setExpanded] = useState<number>(-1);
+  const [windowWidth, setWindowWidth] = useState<number>(window.screen.width);
+
+  useEffect(() => {
+    function handleResize(): void {
+      setWindowWidth(window.screen.width);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   const filterData = (
     eventData: InterfaceEvent[],
@@ -208,7 +217,13 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         });
 
       return (
-        <div key={index} className={className} data-testid="day">
+        <div
+          key={index}
+          className={
+            className + ' ' + (allEventsList?.length > 0 && styles.day__events)
+          }
+          data-testid="day"
+        >
           {date.getDate()}
           <div
             className={expanded === index ? styles.expand_list_container : ''}
@@ -222,14 +237,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
             >
               {expanded === index ? allEventsList : allEventsList?.slice(0, 2)}
             </div>
-            {allEventsList?.length > 2 && (
+            {(allEventsList?.length > 2 ||
+              (windowWidth <= 700 && allEventsList?.length > 0)) && (
               <button
                 className={styles.btn__more}
                 onClick={() => {
                   toggleExpand(index);
                 }}
               >
-                {expanded === index ? 'Less' : 'More'}
+                {expanded === index ? 'View less' : 'View all'}
               </button>
             )}
           </div>