Skip to content

Commit

Permalink
Merge remote-tracking branch 'natalie/allow-chains-to-contain-multipl…
Browse files Browse the repository at this point in the history 
…e-chat-rooms-#686' into chat
  • Loading branch information
@lil5
lil5 committed Apr 15, 2024
2 parents 931ba17 + bcf0dc5 commit 50de237
Showing 1 changed file with 95 additions and 47 deletions.
142 changes: 95 additions & 47 deletions app/src/pages/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import { patchGetOrJoinRoom } from "../api/chat";
import { Client4, WebSocketClient, WebSocketMessage } from "@mattermost/client";
import { Sleep } from "../utils/sleep";
import { Post, PostList } from "@mattermost/types/posts";
import { addOutline } from "ionicons/icons";
import { userGetAllByChain } from "../api/user";
import { User } from "../api/types";

const VITE_CHAT_URL = import.meta.env.VITE_CHAT_URL;

Expand All @@ -44,7 +47,9 @@ export default function Chat() {
const [mmWsClient, setMmWsClient] = useState<WebSocketClient | null>(null);
const [message, setMessage] = useState("");
const [sendingMsg, setSendingMsg] = useState(SendingMsgState.DEFAULT);
const [chatRooms, setChatRooms] = useState<User[] | null>(null);
const [mmClient, setMmClient] = useState<Client4 | null>(null);

const [postList, setPostList] = useState<PostList>({
order: [],
posts: {},
Expand Down Expand Up @@ -101,6 +106,7 @@ export default function Chat() {
setMmData(_mmData);
});
}
getUsersChatrooms();
}, [mmData, chain]);

async function handlePostedMessage(
Expand Down Expand Up @@ -163,6 +169,21 @@ export default function Chat() {
}
}

async function getUsersChatrooms() {
if (authUser) {
try {
let _users = (
await Promise.all(
authUser.chains.map((uc) => userGetAllByChain(uc.chain_uid)),
)
).map((d) => d.data);
setChatRooms(_users[0]);
} catch (err: any) {
console.error("Unable to load chains", err);
}
}
}

return (
<IonPage>
<IonHeader translucent>
Expand All @@ -174,59 +195,86 @@ export default function Chat() {
</IonHeader>
<IonContent
fullscreen
class={isThemeDefault ? " tw-bg-purple-contrast" : ""}
class={isThemeDefault ? "tw-bg-purple-contrast" : ""}
>
<div className="tw-flex tw-flex-col tw-h-full">
<div className="tw-flex-grow tw-overflow-y-auto tw-flex tw-flex-col-reverse">
{postList.order.map((item) => {
let post = postList.posts[item];
return (
<div>
<IonItem
color="light"
key={post.id}
className={`tw-rounded-tl-2xl tw-rounded-tr-2xl tw-mb-2 ${
post.user_id == authUser?.uid
? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
: "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
}`}
>
<div className="tw-py-2">
<div className="tw-font-bold">{post.props.username}</div>
<div>{post.message}</div>
<div className="tw-relative tw-h-full">
<div className="tw-fixed tw-z-10 tw-w-full tw-bg-[#f4f1f9]">
<div className="tw-flex tw-ml-5 tw-mb-2 tw-mt-2 tw-overflow-x-auto">
<div className="tw-rounded-full tw-w-14 tw-h-14 tw-mr-4 tw-bg-purple-shade tw-flex tw-items-center tw-justify-center">
<IonIcon className="tw-text-2xl" src={addOutline} />
</div>
{chatRooms?.map((cr) => {
let initials = cr.name
.split(" ")
.map((word) => word[0])
.join("");
return (
<div className="tw-mr-4 tw-w-14">
<div className="tw-shrink-0 tw-rounded-full tw-h-14 tw-bg-purple-shade tw-flex tw-items-center tw-justify-center">
<div className="tw-font-bold">{initials}</div>
</div>
</IonItem>
</div>
);
})}
<div className="tw-text-xs tw-text-center tw-truncate">
{cr.name}
</div>
</div>
);
})}
</div>
</div>
<div>
<IonItem
color="light"
disabled={sendingMsg == SendingMsgState.SENDING}
>
<IonInput
placeholder="Send Message"
value={message}
disabled={sendingMsg == SendingMsgState.SENDING}
onIonInput={(e) => setMessage(e.detail.value as string)}
className="tw-ml-2"
/>
<IonButton
slot="end"
onClick={sendMessage}
shape="round"
disabled={message == ""}
<div className="tw-flex tw-flex-col tw-absolute tw-bottom-0 tw-max-h-[75vh]">
<div className="tw-flex-grow tw-overflow-y-auto tw-flex tw-flex-col-reverse">
{postList.order.map((item) => {
let post = postList.posts[item];
return (
<div>
<IonItem
color="light"
key={post.id}
className={`tw-rounded-tl-2xl tw-rounded-tr-2xl tw-mb-2 ${
post.user_id == authUser?.uid
? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
: "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
}`}
>
<div className="tw-py-2">
<div className="tw-font-bold">
{post.props.username}
</div>
<div>{post.message}</div>
</div>
</IonItem>
</div>
);
})}
</div>
<div>
<IonItem
color="light"
className="tw-mr-0"
disabled={sendingMsg == SendingMsgState.SENDING}
>
<IonIcon
icon={sendOutline}
color="primary"
className="tw-text-2xl"
<IonInput
placeholder="Send Message"
value={message}
disabled={sendingMsg == SendingMsgState.SENDING}
onIonInput={(e) => setMessage(e.detail.value as string)}
className="tw-ml-2"
/>
</IonButton>
</IonItem>
<IonButton
slot="end"
onClick={sendMessage}
shape="round"
disabled={message == ""}
color="light"
className="tw-mr-0"
>
<IonIcon
icon={sendOutline}
color="primary"
className="tw-text-2xl"
/>
</IonButton>
</IonItem>
</div>
</div>
</div>
</IonContent>
Expand Down

0 comments on commit 50de237

Please sign in to comment.