diff --git a/src/pages/chat/ChatRouter.tsx b/src/pages/chat/ChatRouter.tsx index cdf5418..58ab32a 100644 --- a/src/pages/chat/ChatRouter.tsx +++ b/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
@@ -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 && }/>} }/> }/> + }/> diff --git a/src/pages/chat/EventListMessagesList.module.css b/src/pages/chat/EventListMessagesList.module.css index 52f9ef1..ae96663 100644 --- a/src/pages/chat/EventListMessagesList.module.css +++ b/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 { diff --git a/src/pages/chat/EventListMessagesList.tsx b/src/pages/chat/EventListMessagesList.tsx index bd540d8..42e4ebb 100644 --- a/src/pages/chat/EventListMessagesList.tsx +++ b/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
{ ({isActive}) => <> @@ -38,7 +38,22 @@ const AnnouncementsLink = () => { } - + + + { + ({isActive}) => <> + + + + + +
+ Gesendete Ankündigungen +
+ + } +
+
} export default function EventListMessagesList() { diff --git a/src/pages/chat/components/SendAnnouncements.tsx b/src/pages/chat/components/SendAnnouncements.tsx new file mode 100644 index 0000000..fc5f956 --- /dev/null +++ b/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 ( + + ) + + if (query.isLoading || !query.data) return ( +
+ +
+ ) + + return
+
+ {announcements.map((announcement) => ( + + ))} + + {query.hasNextPage ? ( +
+ +
+ ) : announcements.length === 0 ?
+ + Noch keine von dir gesendeten Ankündigungen + +
: null + } +
+
+} \ No newline at end of file