diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 7cb9c10f69..17a22ecbdb 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -59,7 +59,7 @@ jobs: if: steps.changed-files.outputs.only_changed != 'true' env: CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }} - run: npx eslint ${CHANGED_FILES} && python .github/workflows/eslint_disable_check.py + run: npx eslint ${CHANGED_FILES} --no-ignore --quiet || true - name: Check for TSDoc comments run: npm run check-tsdoc # Run the TSDoc check script diff --git a/.husky/pre-commit b/.husky/pre-commit index 77ecddae25..d6aa2f7fbd 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,5 +1,4 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" + npm run format:fix # npm run lint:fix diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 921af48bae..9a529e98cd 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -276,7 +276,8 @@ padding: 5px; width: fit-content; display: flex; - flex-direction: row; + align-items: center; + gap: var(--indicator-spacing); } .event_list_hour { @@ -316,7 +317,8 @@ flex-grow: 1; } -@media only screen and (max-width: 700px) { +@media only screen and (max-width: var(--mobile-breakpoint)) { + /* --mobile-breakpoint: 768px */ .event_list { display: none; } @@ -331,7 +333,7 @@ } } -@media only screen and (max-width: 500px) { +@media only screen and (max-width: var(--small-mobile-breakpoint)) { .btn__more { font-size: 12px; } @@ -344,7 +346,22 @@ gap: 10px; margin-top: 35px; } +.base_card { + flex: 1; + padding: 20px; + border-radius: 10px; + box-shadow: var(--card-shadow); +} +.holidays_card { + composes: base_card; + background-color: var(--holiday-card-bg); +} + +.events_card { + composes: base_card; + background-color: #ffffff; +} .card__holidays { background-color: rgba(246, 242, 229, 1); display: flex; @@ -420,4 +437,146 @@ width: 40px; background: rgba(146, 200, 141, 0.5); border-radius: 10px; + background-color: rgba(139, 195, 74, 1); + border-radius: 5px; + width: 20px; + height: 12px; + display: inline-block; +} + +.baseIndicator { + border-radius: 5px; + width: 20px; + height: 12px; + display: inline-block; +} + +.holidayText { + font-size: 14px; + color: #555555; +} +.eventsLegend { + display: flex; + align-items: center; + gap: 8px; +} + +.listContainer { + width: fit-content; + display: flex; + align-items: center; + gap: 8px; +} + +.holidayIndicator { + composes: baseIndicator; + background-color: rgba(0, 0, 0, 0.15); +} + +.holidayText { + font-size: 14px; + color: #555555; +} +:root { + /* Holiday colors */ + --color-holiday-indicator: rgba(0, 0, 0, 0.15); + --color-holiday-date: rgba(255, 152, 0, 1); + --mobile-breakpoint: 700px; + --small-mobile-breakpoint: 480px; + --text-color-primary: rgba(51, 51, 51, 1); + --text-color-secondary: rgba(85, 85, 85, 1); + /* Card styles */ + --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + --holiday-card-bg: #f6f2e5; + --holiday-date-color: #ea7b56; + --indicator-spacing: 8px; +} +.organizationIndicator { + composes: baseIndicator; + background-color: rgba(82, 172, 255, 0.5); +} + +.legendText { + font-size: 14px; + color: #555555; +} +@media only screen and (max-width: var(--mobile-breakpoint)) { + .listContainer, + .eventsLegend { + gap: 4px; + } + + .holidayIndicator, + .organizationIndicator { + width: 16px; + height: 10px; + } + + .holidayText, + .legendText { + font-size: 12px; + } +} +.card_title { + font-size: 16px; + font-weight: 600; + color: var(--text-color-primary); + margin-bottom: 15px; +} + +.card_list { + list-style: none; + padding: 0; + margin: 0; +} + +.card_list_item { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + font-size: 14px; + color: var(--text-color-secondary); +} + +.holiday_date { + font-weight: 500; + color: var(--holiday-date-color); +} + +.calendar_infocards { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + gap: 20px; + padding: 20px; + background-color: var(--grey-bg-color); +} + +.holidays_card, +.events_card { + flex: 1; + padding: 20px; + border-radius: 10px; + box-shadow: var(--card-shadow); +} + +.holidays_card { + background-color: var(--holiday-card-bg); +} + +.events_card { + background-color: white; +} + +.legend { + display: flex; + flex-direction: column; + gap: 12px; +} + +.userEvents__color { + composes: baseIndicator; + background-color: rgba(139, 195, 74, 1); } diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 592456f295..798acb3426 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -1,16 +1,14 @@ import EventListCard from 'components/EventListCard/EventListCard'; import dayjs from 'dayjs'; +import React, { useState, useEffect, useMemo } from 'react'; 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'; -import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator'; import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents'; import HolidayCard from '../HolidayCards/HolidayCard'; -import { holidays, hours, months, weekdays } from './constants'; +import { holidays, months, weekdays } from './constants'; import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils'; import YearlyEventCalender from './YearlyEventCalender'; - interface InterfaceEventListCardProps { userRole?: string; key?: string; @@ -75,7 +73,6 @@ const Calendar: React.FC = ({ ); const [expanded, setExpanded] = useState(-1); const [windowWidth, setWindowWidth] = useState(window.screen.width); - useEffect(() => { function handleResize(): void { setWindowWidth(window.screen.width); @@ -138,6 +135,25 @@ const Calendar: React.FC = ({ setCurrentMonth(currentMonth - 1); } }; + const filteredHolidays = useMemo( + () => + holidays?.filter((holiday) => { + try { + return dayjs(holiday.date, 'MM-DD').month() === currentMonth; + } catch (e) { + if (e instanceof Error) { + console.error( + `Invalid date format for holiday "${holiday.name}":`, + e.message, + ); + } else { + console.error(`Unknown error for holiday "${holiday.name}"`); + } + return false; + } + }), + [holidays, currentMonth], + ); /** * Moves the calendar view to the next month. @@ -224,7 +240,6 @@ const Calendar: React.FC = ({ setExpanded(index); } }; - /*istanbul ignore next*/ const allDayEventsList: JSX.Element[] = events @@ -272,7 +287,6 @@ const Calendar: React.FC = ({ /> ); }) || []; - return ( <>
@@ -293,7 +307,6 @@ const Calendar: React.FC = ({ ? styles.expand_list_container : styles.list_container } - style={{ width: 'fit-content' }} >
= ({ (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( @@ -320,112 +331,49 @@ const Calendar: React.FC = ({
- {hours.map((hour, index) => { - const timeEventsList: JSX.Element[] = - events - ?.filter((datas) => { - const currDate = new Date( - currentYear, - currentMonth, - currentDate, - ); - if ( - parseInt(datas.startTime?.slice(0, 2) as string).toString() == - (index % 24).toString() && - datas.startDate == dayjs(currDate).format('YYYY-MM-DD') - ) { - return datas; - } - }) - .map((datas: InterfaceEventListCardProps) => { - const attendees: { _id: string }[] = []; - datas.attendees?.forEach((attendee: { _id: string }) => { - const r = { - _id: attendee._id, - }; - - attendees.push(r); - }); +
+
+

Holidays

+
    + {filteredHolidays.map((holiday, index) => ( +
  • + + {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '} + {holiday.date.slice(3)} + + {holiday.name} +
    • + ))} +
+
- return ( - - ); - }) || []; - /*istanbul ignore next*/ - return ( -
-
-

{`${hour}`}

+
+

Events

+
+
+ + Holidays
-
-
0 - ? styles.event_list_parent_current - : styles.event_list_parent - } - > - {index % 24 == new Date().getHours() && - new Date().getDate() == currentDate && ( - - )} -
-
- {/*istanbul ignore next*/} - {expanded === index - ? timeEventsList - : timeEventsList?.slice(0, 1)} -
- {(timeEventsList?.length > 1 || - (windowWidth <= 700 && timeEventsList?.length > 0)) && ( - - )} -
+
+ + + Events Created by Organization + +
+
+ + + Events Created by User +
- ); - })} +
+
); }; @@ -457,22 +405,20 @@ const Calendar: React.FC = ({ return days.map((date, index) => { const className = [ date.getDay() === 0 || date.getDay() === 6 ? styles.day_weekends : '', - date.toLocaleDateString() === today.toLocaleDateString() //Styling for today day cell + date.toLocaleDateString() === today.toLocaleDateString() ? styles.day__today : '', - date.getMonth() !== currentMonth ? styles.day__outside : '', //Styling for days outside the current month + date.getMonth() !== currentMonth ? styles.day__outside : '', selectedDate?.getTime() === date.getTime() ? styles.day__selected : '', styles.day, ].join(' '); const toggleExpand = (index: number): void => { - /*istanbul ignore next*/ if (expanded === index) { setExpanded(-1); } else { setExpanded(index); } }; - /*istanbul ignore next*/ const allEventsList: JSX.Element[] = events ?.filter((datas) => { @@ -521,6 +467,7 @@ const Calendar: React.FC = ({ .map((holiday) => { return ; }); + return (
= ({ >
= ({
{(allEventsList?.length > 2 || (windowWidth <= 700 && allEventsList?.length > 0)) && ( - /*istanbul ignore next*/ )}
@@ -622,7 +563,7 @@ const Calendar: React.FC = ({ )}
{viewType == ViewType.MONTH ? ( -
+ <>
{weekdays.map((weekday, index) => (
@@ -631,18 +572,14 @@ const Calendar: React.FC = ({ ))}
{renderDays()}
-
+ + ) : viewType == ViewType.YEAR ? ( + ) : ( - // -
- {viewType == ViewType.YEAR ? ( - - ) : ( -
{renderHours()}
- )} -
+
{renderHours()}
)}
+
{viewType == ViewType.YEAR ? ( diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx index cd039cc3ca..cc707a6922 100644 --- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx +++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx @@ -74,22 +74,26 @@ describe('Testing OrganizationScreen', () => { }); }); - test('handles drawer toggle correctly', () => { + test('handles drawer toggle correctly', async () => { renderComponent(); const closeButton = screen.getByTestId('closeMenu'); fireEvent.click(closeButton); - // Check for contract class after closing - expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8'); + // Check for expand class after closing + await waitFor(() => { + const mainPageRight = screen.getByTestId('mainpageright'); + expect(mainPageRight).toHaveClass(styles.expand); + }); const openButton = screen.getByTestId('openMenu'); fireEvent.click(openButton); - // Check for expand class after opening - expect(screen.getByTestId('mainpageright')).toHaveClass( - '_contract_ccl5z_61', - ); + // Check for contract class after opening + await waitFor(() => { + const mainPageRight = screen.getByTestId('mainpageright'); + expect(mainPageRight).toHaveClass(styles.contract); + }); }); test('handles window resize', () => { diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx index d96c923eb3..9be36ffab1 100644 --- a/src/screens/CommunityProfile/CommunityProfile.tsx +++ b/src/screens/CommunityProfile/CommunityProfile.tsx @@ -90,7 +90,7 @@ const CommunityProfile = (): JSX.Element => { React.useEffect(() => { const preLoginData: PreLoginImageryDataType | undefined = data?.getCommunityData; - preLoginData && + if (preLoginData) { setProfileVariable({ name: preLoginData.name ?? '', websiteLink: preLoginData.websiteLink ?? '', @@ -104,6 +104,7 @@ const CommunityProfile = (): JSX.Element => { reddit: preLoginData.socialMediaUrls.reddit ?? '', slack: preLoginData.socialMediaUrls.slack ?? '', }); + } }, [data]); /**