stuve-it
/
stuve-it-frontend
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chats): people cant see other chatrooms now
Build and Push Docker image / build-and-push (push) Successful in 6m8s Details 

prior, all account could see which chatrooms existed (they could see the messages, but it was confusing)
This commit is contained in:
Valentin Kolb 2024-06-13 21:57:43 +02:00
parent 1a3f2ff824
commit 63718ae4c0
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/chat/EventListMessagesList.tsx
View File

@ -6,15 +6,16 @@ import {IconArrowDown, IconListSearch, IconMoodPuzzled, IconSpeakerphone} from "
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";
import {EventListModel} from "@/models/EventTypes.ts"; import {EventListModel, EventModel} from "@/models/EventTypes.ts";
const ListMessagesLink = ({eventList}: { eventList: EventListModel }) => { const ListMessagesLink = ({eventList, event}: { eventList?: EventListModel, event?: EventModel }) => {
if (!eventList || !event) return null
return <UnstyledButton component={NavLink} to={`/chat/${eventList.id}`} className={classes.listLink}> return <UnstyledButton component={NavLink} to={`/chat/${eventList.id}`} className={classes.listLink}>
{ {
({isActive}) => <> ({isActive}) => <>
<PBAvatar model={eventList} name={eventList.name} img={eventList.img} size={"sm"}/> <PBAvatar model={eventList} name={eventList.name} img={eventList.img} size={"sm"}/>
<div className={classes.listText} data-active={isActive}> <div className={classes.listText} data-active={isActive}>
{eventList.name} ({eventList.expand?.event.name}) {eventList.name} ({event.name})
</div> </div>
</> </>
} }
@ -43,15 +44,15 @@ const AnnouncementsLink = () => {
export default function EventListMessagesList() { export default function EventListMessagesList() {
const {user, pb} = usePB() const {user, pb} = usePB()
const [eventListNameQuery, setEventListNameQuery] = useDebouncedState("", 200) const [chatEntriesQuery, setChatEntriesQuery] = useDebouncedState("", 200)
const query = useInfiniteQuery({ const query = useInfiniteQuery({
queryKey: ["eventLists", eventListNameQuery], queryKey: ["chatEntries", chatEntriesQuery],
queryFn: async ({pageParam}) => ( queryFn: async ({pageParam}) => (
await pb.collection("eventLists").getList(pageParam, 100, { await pb.collection("eventListSlotEntriesWithUser").getList(pageParam, 100, {
filter: `enableChat=true&&name~'${eventListNameQuery}'`, filter: `user='${user?.id}'&&eventList.enableChat=true&&listName~'${chatEntriesQuery}'`,
sort: "-messages_via_eventList.created,name", sort: "created",
expand: "event" expand: "event,eventList"
}) })
), ),
getNextPageParam: (lastPage) => getNextPageParam: (lastPage) =>
@ -60,7 +61,7 @@ export default function EventListMessagesList() {
enabled: !!user, enabled: !!user,
}) })
const eventLists = query.data?.pages.flatMap(t => t.items) || [] const chatEntries = query.data?.pages.flatMap(t => t.items) || []
return <div className={`stack ${classes.container}`}> return <div className={`stack ${classes.container}`}>
<AnnouncementsLink/> <AnnouncementsLink/>
@ -70,22 +71,26 @@ export default function EventListMessagesList() {
<TextInput <TextInput
leftSection={<IconListSearch/>} leftSection={<IconListSearch/>}
rightSection={query.isPending ? <Loader size={"xs"}/> : undefined} rightSection={query.isPending ? <Loader size={"xs"}/> : undefined}
defaultValue={eventListNameQuery} defaultValue={chatEntriesQuery}
onChange={(e) => setEventListNameQuery(e.currentTarget.value)} onChange={(e) => setChatEntriesQuery(e.currentTarget.value)}
placeholder={"Nach Listen suchen..."} placeholder={"Nach Listen suchen..."}
/> />
{eventLists.length === 0 ? <Stack gap={"xs"} align={"center"}> {chatEntries.length === 0 ? <Stack gap={"xs"} align={"center"}>
<ThemeIcon variant="transparent" size="xs" color="gray"> <ThemeIcon variant="transparent" size="xs" color="gray">
<IconMoodPuzzled/> <IconMoodPuzzled/>
</ThemeIcon> </ThemeIcon>
<Text size={"xs"} c={"dimmed"}> <Text size={"xs"} c={"dimmed"}>
{eventListNameQuery ? "Keine Listen gefunden" : "Keine Listen"} {chatEntriesQuery ? "Keine Listen gefunden" : "Keine Listen"}
</Text> </Text>
</Stack> : ( </Stack> : (
<div className={`${classes.listsContainer} no-scrollbar`}> <div className={`${classes.listsContainer} no-scrollbar`}>
{eventLists.map(list => <ListMessagesLink key={list.id} eventList={list}/>)} {chatEntries.map(entry => <ListMessagesLink
key={entry.id}
eventList={entry.expand?.eventList}
event={entry.expand?.event}
/>)}
{query.hasNextPage && ( {query.hasNextPage && (
<Center p={"xs"}> <Center p={"xs"}>