diff --git a/src/components/Accounts/AccountsPage.tsx b/src/components/Accounts/AccountsPage.tsx index 3a1e74c..01011d7 100644 --- a/src/components/Accounts/AccountsPage.tsx +++ b/src/components/Accounts/AccountsPage.tsx @@ -1,11 +1,16 @@ import { useContext, useState, useEffect } from 'react'; -import { IconPlus, IconSearch, IconTrash } from '@tabler/icons-react'; +import { + IconPlus, + IconSearch, + IconTrash, + IconChevronDown, +} from '@tabler/icons-react'; import { checkIfLoggedIn, getAccountId, - getAllEventsForUser, deleteEvent, + getParsedAccountPageEventsForUser, } from '../../firebase/events'; import { logout } from '../../firebase/auth'; @@ -17,8 +22,10 @@ import { GAPIContext } from '../../firebase/gapiContext'; import { LoadingAnim } from '../utils/components/LoadingAnim'; import LoginButton from '../utils/components/LoginButton'; import CopyCodeButton from '../utils/components/CopyCodeButton'; +import Button from '../utils/components/Button'; +import ButtonSmall from '../utils/components/ButtonSmall'; -interface AccountsPageEvent { +export interface AccountsPageEvent { name: string; id: string; dates: string; @@ -26,46 +33,10 @@ interface AccountsPageEvent { endTime: string; location: string; iAmCreator: boolean; + dateCreated: Date; + lastModified: Date; } -/** - * Parses the backend event object into a type that the AccountsPage component understands. - * @param events Event[] - * @returns AccountsPageEvent[] - */ -const parseEventObjectForAccountsPage = ( - events: Event[] -): AccountsPageEvent[] => { - const accountPageEvents: AccountsPageEvent[] = []; - events.forEach((event) => { - accountPageEvents.push({ - name: event.details.name, - id: event.publicId, - dates: event.details.chosenStartDate - ? event.details.chosenStartDate?.toLocaleDateString() - : 'TBD', - startTime: event.details.chosenStartDate - ? event.details.chosenStartDate?.toLocaleTimeString('en-US', { - hour: '2-digit', - minute: '2-digit', - hour12: true, - }) - : 'TBD', - endTime: event.details.chosenEndDate - ? event.details.chosenEndDate?.toLocaleTimeString('en-US', { - hour: '2-digit', - minute: '2-digit', - hour12: true, - }) - : 'TBD', - location: event.details.chosenLocation || 'TBD', - iAmCreator: event.details.adminAccountId === getAccountId(), - }); - }); - - return accountPageEvents; -}; - /** * Page Component. Renders the events associated with a logged in Google account. * Renders nothing if no events are associated or the user is logged in anonymously @@ -80,9 +51,11 @@ export default function AccountsPage() { const accountID = getAccountId(); if (accountID && accountID !== '') { - await getAllEventsForUser(getAccountId()).then((eventsUnparsed) => { - setEvents(parseEventObjectForAccountsPage(eventsUnparsed) || []); - }); + await getParsedAccountPageEventsForUser(accountID).then( + (parsedEvents) => { + setEvents(parsedEvents); + } + ); } else { setEvents([]); } @@ -95,51 +68,111 @@ export default function AccountsPage() { const nav = useNavigate(); const [filter, setFilter] = useState(''); - const [events, setEvents] = useState(); const [hasDeletedEvent, setHasDeletedEvent] = useState(false); + const [sortBy, setSortBy] = useState<'dateCreated' | 'lastModified'>( + 'lastModified' + ); const handleInputChange = (e: any) => { setFilter(e.target.value.toLowerCase()); }; + const getSortedEvents = (events: AccountsPageEvent[]) => { + // return events; // remove later + + console.log(events); + + return [...events].sort((a, b) => { + let dateA = sortBy === 'dateCreated' ? a.dateCreated : a.lastModified; + let dateB = sortBy === 'dateCreated' ? b.dateCreated : b.lastModified; + + dateA = new Date(dateA); + dateB = new Date(dateB); + + console.log(dateA, dateB); + if (dateA === undefined || dateB === undefined) { + console.log('Date is undefined'); + return 0; + } + return dateB.getTime() - dateA.getTime(); + }); + }; + return (
-
-
-

+
+ {/* Header with Title */} +
+

Your Events

-
-
-
- -
- -
+ {/* Desktop Button */} +
+ +
- + + Create + +
+
+ + {/* Controls Row */} +
+ {/* Search Input */} +
+
+ +
+ +
+ + {/* Sort Dropdown */} +
+ +
+ +
@@ -149,8 +182,8 @@ export default function AccountsPage() {
) : undefined} {events && events.length != 0 ? ( -
- {events +
+ {getSortedEvents(events) .filter( (e) => e.id.toLowerCase().includes(filter) || diff --git a/src/components/DaySelect/day_select_component/day_select_component.tsx b/src/components/DaySelect/day_select_component/day_select_component.tsx index a4f79c7..0e6339a 100644 --- a/src/components/DaySelect/day_select_component/day_select_component.tsx +++ b/src/components/DaySelect/day_select_component/day_select_component.tsx @@ -195,7 +195,8 @@ export const DaySelectComponent = () => { startDate, endDate, zoomLink, - timezone + timezone, + new Date() // dateCreated ) .then((ev) => { navigate('/timeselect/' + ev?.publicId); @@ -217,7 +218,8 @@ export const DaySelectComponent = () => { startDate, endDate, zoomLink, - timezone + timezone, + new Date() // dateCreated ) .then((ev) => { navigate('/timeselect/' + ev?.publicId); diff --git a/src/components/utils/components/Button.tsx b/src/components/utils/components/Button.tsx index 0b0959f..fa3d37a 100644 --- a/src/components/utils/components/Button.tsx +++ b/src/components/utils/components/Button.tsx @@ -10,6 +10,7 @@ interface Props { py?: string; // Padding-top and padding-bottom themeGradient?: boolean; bolded?: boolean; // Font weight + className?: string; // Add this line } export default function Button({ @@ -22,6 +23,7 @@ export default function Button({ textSize = 'lg', themeGradient = true, bolded = true, + className = '', }: Props) { const borderRadius = rounded === 'full' ? 'rounded-full' : 'rounded-lg'; const textSizeClass = @@ -38,6 +40,7 @@ export default function Button({ ${textSizeClass} text-${textColor} ${borderRadius} ${bgColor === `primary` ? `dark:bg-blue-700` : ``} ${bolded ? `font-bold` : `font-semibold`} + ${className} `} onClick={onClick} disabled={disabled} diff --git a/src/components/utils/components/ButtonSmall.tsx b/src/components/utils/components/ButtonSmall.tsx index 218b125..4148cb9 100644 --- a/src/components/utils/components/ButtonSmall.tsx +++ b/src/components/utils/components/ButtonSmall.tsx @@ -5,6 +5,7 @@ interface Props { children: React.ReactNode; disabled?: boolean; themeGradient?: boolean; + className?: string; } export default function ButtonSmall({ @@ -14,6 +15,7 @@ export default function ButtonSmall({ children, disabled = false, themeGradient = true, + className = ``, }: Props) { return (