feat(announcements): users can now see their send announcements
Build and Push Docker image / build-and-push (push) Successful in 1m51s Details

This commit is contained in:
Valentin Kolb 2024-06-20 21:32:07 +02:00
parent 5b85f91bb1
commit 886cf8278e
4 changed files with 97 additions and 6 deletions

View File

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

View File

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

View File

@ -2,7 +2,7 @@ import {Button, Center, Divider, Loader, Stack, Text, TextInput, ThemeIcon, Unst
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import classes from "@/pages/chat/EventListMessagesList.module.css"; import classes from "@/pages/chat/EventListMessagesList.module.css";
import PBAvatar from "@/components/PBAvatar.tsx"; 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 {usePB} from "@/lib/pocketbase.tsx";
import {useDebouncedState} from "@mantine/hooks"; import {useDebouncedState} from "@mantine/hooks";
import {useInfiniteQuery} from "@tanstack/react-query"; import {useInfiniteQuery} from "@tanstack/react-query";
@ -23,7 +23,7 @@ const ListMessagesLink = ({eventList, event}: { eventList?: EventListModel, even
} }
const AnnouncementsLink = () => { const AnnouncementsLink = () => {
return <> return <div className={classes.announcementLinkContainer}>
<UnstyledButton component={NavLink} to={`/chat/announcements`} className={classes.announcementLink}> <UnstyledButton component={NavLink} to={`/chat/announcements`} className={classes.announcementLink}>
{ {
({isActive}) => <> ({isActive}) => <>
@ -38,7 +38,22 @@ const AnnouncementsLink = () => {
</> </>
} }
</UnstyledButton> </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() { export default function EventListMessagesList() {

View File

@ -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>
}