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 {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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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