feat(announcements): users can now see their send announcements

src/pages/chat/ChatRouter.tsx

@@ -10,6 +10,7 @@ import {usePB} from "@/lib/pocketbase.tsx";
 import {useLogin} from "@/components/users/modals/hooks.ts";
 import Announcements from "@/pages/chat/components/Announcements.tsx";
 import {useEffect} from "react";
+import SendAnnouncements from "@/pages/chat/components/SendAnnouncements.tsx";
 
 const ChatIndex = () => {
     return <Center>
@@ -26,6 +27,7 @@ export default function ChatRouter() {
 
     useEffect(() => {
         if (!user) handler.open()
+        // eslint-disable-next-line
     }, [user])
 
     if (!user) {
@@ -55,6 +57,7 @@ export default function ChatRouter() {
                 {!isMobile && <Route index element={<ChatIndex/>}/>}
                 <Route path={":listId"} element={<ListMessagesView/>}/>
                 <Route path={"announcements"} element={<Announcements/>}/>
+                <Route path={"send-announcements"} element={<SendAnnouncements/>}/>
             </Routes>
         </div>
     </div>

src/pages/chat/EventListMessagesList.module.css

@@ -3,15 +3,21 @@
     transition: width 0.3s ease
 }
 
+.announcementLinkContainer {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--padding) / 2);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    background-color: var(--mantine-color-body);
+}
+
 .announcementLink {
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: calc(var(--padding) / 2);
     gap: var(--gap);
-    border: var(--border);
-    border-radius: var(--border-radius);
-    background-color: var(--mantine-color-body);
 }
 
 .listText {

src/pages/chat/EventListMessagesList.tsx

@@ -2,7 +2,7 @@ import {Button, Center, Divider, Loader, Stack, Text, TextInput, ThemeIcon, Unst
 import {NavLink} from "react-router-dom";
 import classes from "@/pages/chat/EventListMessagesList.module.css";
 import PBAvatar from "@/components/PBAvatar.tsx";
-import {IconArrowDown, IconListSearch, IconMoodPuzzled, IconSpeakerphone} from "@tabler/icons-react";
+import {IconArrowDown, IconEdit, IconListSearch, IconMoodPuzzled, IconSpeakerphone} from "@tabler/icons-react";
 import {usePB} from "@/lib/pocketbase.tsx";
 import {useDebouncedState} from "@mantine/hooks";
 import {useInfiniteQuery} from "@tanstack/react-query";
@@ -23,7 +23,7 @@ const ListMessagesLink = ({eventList, event}: { eventList?: EventListModel, even
 }
 
 const AnnouncementsLink = () => {
-    return <>
+    return <div className={classes.announcementLinkContainer}>
         <UnstyledButton component={NavLink} to={`/chat/announcements`} className={classes.announcementLink}>
             {
                 ({isActive}) => <>
@@ -38,7 +38,22 @@ const AnnouncementsLink = () => {
                 </>
             }
         </UnstyledButton>
+
+        <UnstyledButton component={NavLink} to={`/chat/send-announcements`} className={classes.announcementLink}>
+            {
+                ({isActive}) => <>
+
+                    <ThemeIcon variant="light" radius={"xl"} size="md" color="green">
+                        <IconEdit/>
+                    </ThemeIcon>
+
+                    <div className={`${classes.listText} `} data-active={isActive}>
+                        Gesendete Ankündigungen
+                    </div>
                 </>
+            }
+        </UnstyledButton>
+    </div>
 }
 
 export default function EventListMessagesList() {

src/pages/chat/components/SendAnnouncements.tsx

@@ -0,0 +1,67 @@
+import {useInfiniteQuery} from "@tanstack/react-query";
+import {PocketBaseErrorAlert, usePB} from "@/lib/pocketbase.tsx";
+import {Button, Center, Loader, Text} from "@mantine/core";
+import classes from './Announcements.module.css'
+import {IconMessageCircleDown} from "@tabler/icons-react";
+import Announcement from "@/pages/chat/components/Announcement.tsx";
+
+export default function SendAnnouncements() {
+
+    const {user, pb} = usePB()
+    const query = useInfiniteQuery({
+        queryKey: ["announcements"],
+        queryFn: async ({pageParam}) => (
+            await pb.collection("messages").getList(pageParam, 50, {
+                filter: `isAnnouncement=true&&sender='${user?.id}'`,
+                sort: "-created",
+                expand: "sender"
+            })
+        ),
+        getNextPageParam: (lastPage) =>
+            lastPage.page >= lastPage.totalPages ? undefined : lastPage.page + 1,
+        initialPageParam: 1,
+        enabled: !!user,
+    })
+
+    const announcements = query.data?.pages.flatMap(page => page.items) || []
+
+    if (query.isError) return (
+        <PocketBaseErrorAlert error={query.error}/>
+    )
+
+    if (query.isLoading || !query.data) return (
+        <Center>
+            <Loader/>
+        </Center>
+    )
+
+    return <div className={`stack `}>
+        <div className={`scrollbar ${classes.announcements}`}>
+            {announcements.map((announcement) => (
+                <Announcement
+                    key={announcement.id}
+                    announcement={announcement}
+                />
+            ))}
+
+            {query.hasNextPage ? (
+                <Center>
+                    <Button
+                        variant={"transparent"} color={"blue"}
+                        radius={"xl"}
+                        onClick={() => query.fetchNextPage()}
+                        leftSection={<IconMessageCircleDown/>}
+                        loading={query.isFetchingNextPage}
+                    >
+                        Mehr laden
+                    </Button>
+                </Center>
+            ) : announcements.length === 0 ? <div className={classes.text}>
+                <Text ta={"center"} size={"xs"} c={"dimmed"}>
+                    Noch keine von dir gesendeten Ankündigungen
+                </Text>
+            </div> : null
+            }
+        </div>
+    </div>
+}