From e7688e386b4ea57b73ec9809693e3cc6a648022a Mon Sep 17 00:00:00 2001 From: ising2025 Date: Fri, 6 Mar 2026 01:15:30 -0500 Subject: [PATCH 1/4] make events distinction added two different sections, one for events created by you (blue) and one for events filled out (green). Added counts that update based on search next to headers. also added a button to jump to filled out section --- src/components/Accounts/AccountsPage.tsx | 219 ++++++++++++++++------- 1 file changed, 154 insertions(+), 65 deletions(-) diff --git a/src/components/Accounts/AccountsPage.tsx b/src/components/Accounts/AccountsPage.tsx index 6c02e50..3b16c5e 100644 --- a/src/components/Accounts/AccountsPage.tsx +++ b/src/components/Accounts/AccountsPage.tsx @@ -1,4 +1,4 @@ -import { useContext, useState, useEffect } from 'react'; +import { useContext, useState, useEffect, useRef, useMemo } from 'react'; import { IconPlus, IconSearch, IconTrash, IconEdit, IconChevronDown } from '@tabler/icons-react'; import { @@ -95,6 +95,22 @@ export default function AccountsPage() { }); }; + const filledOutRef = useRef(null); + + const createdCount = useMemo(() => + getSortedEvents(events ?? []).filter(e => + e.iAmCreator && + (e.id.toLowerCase().includes(filter) || e.name.toLowerCase().includes(filter)) + ).length + , [events, filter, sortBy]); + + const filledCount = useMemo(() => + getSortedEvents(events ?? []).filter(e => + !e.iAmCreator && + (e.id.toLowerCase().includes(filter) || e.name.toLowerCase().includes(filter)) + ).length + , [events, filter, sortBy]); + return (
{events === undefined ? ( -
- -
- ) : undefined} - {events && events.length != 0 ? ( -
- {getSortedEvents(events) - .filter( - (e) => - e.id.toLowerCase().includes(filter) || - e.name.toLowerCase().includes(filter) - ) - .map((event) => ( -
-
-
-

- {event.name} -

- {event.iAmCreator && ( -
- +
+ +
+ ) : undefined} + + {events && events.length !== 0 ? ( +
+ +
+
+
+
+

Created by You

+ + ({createdCount}) + +
+ +
+ {createdCount === 0 ? ( +

No created events match your search.

+ ) : ( +
+ {getSortedEvents(events) + .filter(e => + e.iAmCreator && + (e.id.toLowerCase().includes(filter) || e.name.toLowerCase().includes(filter)) + ) + .map((event) => ( +
+
+
+

+ {event.name} +

+ {event.iAmCreator && ( +
+ + +
+ )} +
+
+
- )} +
+ ))} +
+ )} +
-
- +
- +
+
+
+

Filled Out by You

+ + ({filledCount}) + +
+ {filledCount === 0 ? ( +

No filled out events match your search.

+ ) : ( +
+ {getSortedEvents(events) + .filter(e => + !e.iAmCreator && + (e.id.toLowerCase().includes(filter) || e.name.toLowerCase().includes(filter)) + ) + .map((event) => ( +
+
+
+

+ {event.name} +

+
+
+ + +
+
-
-
- ))} + ))} +
+ )}
- ) : events !== undefined ? ( + +
+ ) : events !== undefined ? ( getAccountId() === '' ? (
You are logged in as a guest. From 1c79332f2f8cc71aec786d01ef8e8c6fa2bbf14a Mon Sep 17 00:00:00 2001 From: ising2025 Date: Tue, 31 Mar 2026 10:49:08 -0400 Subject: [PATCH 2/4] Add sort by label --- src/components/Accounts/AccountsPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Accounts/AccountsPage.tsx b/src/components/Accounts/AccountsPage.tsx index 3b16c5e..ba65626 100644 --- a/src/components/Accounts/AccountsPage.tsx +++ b/src/components/Accounts/AccountsPage.tsx @@ -63,9 +63,7 @@ export default function AccountsPage() { const [filter, setFilter] = useState(''); const [events, setEvents] = useState(); const [hasDeletedEvent, setHasDeletedEvent] = useState(false); - const [sortBy, setSortBy] = useState<'dateCreated' | 'lastModified'>( - 'lastModified' - ); + const [sortBy, setSortBy] = useState<'dateCreated' | 'lastModified' | ''>(''); const [selectedEventToDelete, setSelectedEventToDelete] = useState(null); const [dontAskAgain, setDontAskAgain] = useState(false); @@ -183,6 +181,7 @@ export default function AccountsPage() { focus:border-primary focus:ring-2 focus:ring-primary/20 min-h-[40px] md:min-h-[60px]" > + From 74f92527456c7816212f8665100edcbbfb8598c2 Mon Sep 17 00:00:00 2001 From: ising2025 Date: Mon, 6 Apr 2026 14:25:31 -0400 Subject: [PATCH 3/4] Update AccountsPage.tsx Added list component, and participant/admin switch --- src/components/Accounts/AccountsPage.tsx | 422 +++++++++++++++-------- 1 file changed, 281 insertions(+), 141 deletions(-) diff --git a/src/components/Accounts/AccountsPage.tsx b/src/components/Accounts/AccountsPage.tsx index ba65626..3611e99 100644 --- a/src/components/Accounts/AccountsPage.tsx +++ b/src/components/Accounts/AccountsPage.tsx @@ -1,5 +1,5 @@ import { useContext, useState, useEffect, useRef, useMemo } from 'react'; -import { IconPlus, IconSearch, IconTrash, IconEdit, IconChevronDown } from '@tabler/icons-react'; +import { IconPlus, IconSearch, IconTrash, IconEdit, IconChevronDown, IconLayoutGrid, IconLayoutList } from '@tabler/icons-react'; import { checkIfLoggedIn, @@ -67,14 +67,14 @@ export default function AccountsPage() { const [selectedEventToDelete, setSelectedEventToDelete] = useState(null); const [dontAskAgain, setDontAskAgain] = useState(false); + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); + const [roleFilter, setRoleFilter] = useState<'all' | 'admin' | 'participant'>('all'); 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) => { @@ -109,6 +109,20 @@ export default function AccountsPage() { ).length , [events, filter, sortBy]); + const flatFilteredEvents = useMemo(() => + getSortedEvents(events ?? []).filter(e => { + const matchesSearch = e.id.toLowerCase().includes(filter) || e.name.toLowerCase().includes(filter); + const matchesRole = + roleFilter === 'all' || + (roleFilter === 'admin' && e.iAmCreator) || + (roleFilter === 'participant' && !e.iAmCreator); + return matchesSearch && matchesRole; + }) + , [events, filter, sortBy, roleFilter]); + + const showCreated = roleFilter === 'all' || roleFilter === 'admin'; + const showFilled = roleFilter === 'all' || roleFilter === 'participant'; + return (
- {/* Sort Dropdown */}