feat(announcements): users can now see their send announcements
Build and Push Docker image / build-and-push (push) Successful in 1m51s
Details
Build and Push Docker image / build-and-push (push) Successful in 1m51s
Details
This commit is contained in:
parent
5b85f91bb1
commit
886cf8278e
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
}
|
Loading…
Reference in New Issue