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 {useDebouncedState} from "@mantine/hooks";
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}>
{
({isActive}) => <>
<PBAvatar model={eventList} name={eventList.name} img={eventList.img} size={"sm"}/>
<div className={classes.listText} data-active={isActive}>
{eventList.name} ({eventList.expand?.event.name})
{eventList.name} ({event.name})
</div>
</>
}
@ -43,15 +44,15 @@ const AnnouncementsLink = () => {
export default function EventListMessagesList() {
const {user, pb} = usePB()
const [eventListNameQuery, setEventListNameQuery] = useDebouncedState("", 200)
const [chatEntriesQuery, setChatEntriesQuery] = useDebouncedState("", 200)
const query = useInfiniteQuery({
queryKey: ["eventLists", eventListNameQuery],
queryKey: ["chatEntries", chatEntriesQuery],
queryFn: async ({pageParam}) => (
await pb.collection("eventLists").getList(pageParam, 100, {
filter: `enableChat=true&&name~'${eventListNameQuery}'`,
sort: "-messages_via_eventList.created,name",
expand: "event"
await pb.collection("eventListSlotEntriesWithUser").getList(pageParam, 100, {
filter: `user='${user?.id}'&&eventList.enableChat=true&&listName~'${chatEntriesQuery}'`,
sort: "created",
expand: "event,eventList"
})
),
getNextPageParam: (lastPage) =>
@ -60,7 +61,7 @@ export default function EventListMessagesList() {
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}`}>
<AnnouncementsLink/>
@ -70,22 +71,26 @@ export default function EventListMessagesList() {
<TextInput
leftSection={<IconListSearch/>}
rightSection={query.isPending ? <Loader size={"xs"}/> : undefined}
defaultValue={eventListNameQuery}
onChange={(e) => setEventListNameQuery(e.currentTarget.value)}
defaultValue={chatEntriesQuery}
onChange={(e) => setChatEntriesQuery(e.currentTarget.value)}
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">
<IconMoodPuzzled/>
</ThemeIcon>
<Text size={"xs"} c={"dimmed"}>
{eventListNameQuery ? "Keine Listen gefunden" : "Keine Listen"}
{chatEntriesQuery ? "Keine Listen gefunden" : "Keine Listen"}
</Text>
</Stack> : (
<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 && (
<Center p={"xs"}>