brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

listing teams in the team chat to select different chats

Browse source
This commit is contained in:
Carter 2026-02-25 13:23:24 -06:00
parent 5c1434a2e7
commit 0ea31c81e4
2 changed files with 42 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/chat/ChatDrawer.tsx
View file

@ -5,6 +5,8 @@ import { useMobile } from "hooks";
import { Team } from "models";
import Chat from "./Chat";
import { pond } from "protobuf-ts/pond";
import { useEffect, useState } from "react";
import { useTeamAPI } from "providers";
const useStyles = makeStyles<Theme>((theme: Theme) => ({
chatDrawer: {
@ -25,8 +27,8 @@ const useStyles = makeStyles<Theme>((theme: Theme) => ({
backgroundColor: theme.palette.background.default,
height: "100vh",
width: "100%",
display: "flex", // add this
flexDirection: "column", // add this
display: "flex",
flexDirection: "column",
},
drawerHeader: {
display: "flex",
@ -46,9 +48,17 @@ interface Props {
export function ChatDrawer(props: Props) {
const { open, onClose, team } = props;
const isMobile = useMobile();
const classes = useStyles()
const classes = useStyles();
const teamAPI = useTeamAPI();
// console.log(team.settings.avatar)
const [selectedTeam, setSelectedTeam] = useState<Team>(team);
const [teams, setTeams] = useState<pond.Team[]>([])
useEffect(() => {
teamAPI.listTeams(10, 0, "desc", "name", undefined, false, undefined).then(resp => {
setTeams(resp.data.teams)
})
}, [teamAPI])
return (
<Drawer
@ -74,9 +84,30 @@ export function ChatDrawer(props: Props) {
borderRight: `1px solid ${theme.palette.divider}`,
})}
>
<IconButton >
<IconButton
onClick={() => setSelectedTeam(team)}
sx={{
border: selectedTeam.settings?.key === team.settings.key ? "1px solid white" : "1px solid transparent",
borderRadius: "50%",
}}
>
<Avatar src={team.settings.avatar} />
</IconButton>
{teams.map((t, i)=> {
if (t.settings?.key === team.key()) return null;
return (
<IconButton
onClick={() => setSelectedTeam(Team.create(t))}
sx={{
border: selectedTeam.key() === t.settings?.key ? "1px solid white" : "1px solid transparent",
borderRadius: "50%",
}}
key={"chat-team-"+i}
>
<Avatar src={t.settings?.avatar} />
</IconButton>
)
})}
</Box>
{/* Main chat area */}
@ -85,13 +116,13 @@ export function ChatDrawer(props: Props) {
<IconButton onClick={onClose}>
<ChevronRight />
</IconButton>
<Typography>{team.name()} Chat</Typography>
<Typography>{selectedTeam.name()} Chat</Typography>
</Box>
<Box className={classes.chatContainer}>
<Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
<Chat objectKey={selectedTeam.key()} type={pond.NoteType.NOTE_TYPE_TEAM} />
</Box>
</Box>
</Box>
</Drawer>
)
);
}