From ea2326a9643f2012511f4c0289c27eeacbc6a52c Mon Sep 17 00:00:00 2001
From: pyphilia <pyphilia@gmail.com>
Date: Wed, 11 Aug 2021 15:00:36 +0200
Subject: [PATCH] feat: detect own messages

---
 example/src/App.tsx         |  4 +++-
 src/components/Chatbox.tsx  | 23 ++++++++++++++++-------
 src/components/Input.tsx    |  2 +-
 src/components/Message.tsx  | 10 ++++++----
 src/components/Messages.tsx |  9 +++++----
 src/constants.js            |  1 +
 src/types.ts                | 12 ++++++++++++
 7 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 998feccd..64affe01 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,7 +1,9 @@
 import Chatbox from '@graasp/chatbox';
+import { ImmutableMember } from '../../src/types';
 
 const App = () => {
-  return <Chatbox chatId="24" id="24" />;
+  const member = new ImmutableMember({ name: 'kim', id: 'kim-id' });
+  return <Chatbox chatId="24" id="24" showHeader currentMember={member} />;
 };
 
 export default App;
diff --git a/src/components/Chatbox.tsx b/src/components/Chatbox.tsx
index b35847cf..8a4d1b8e 100644
--- a/src/components/Chatbox.tsx
+++ b/src/components/Chatbox.tsx
@@ -2,11 +2,11 @@ import React, { FC, Fragment } from 'react';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
 import Messages from './Messages';
-import { List } from 'immutable';
+import { List, Record } from 'immutable';
 import Input from './Input';
 import Header from './Header';
-import { DEFAULT_CHATBOX_HEIGHT } from '../constants';
-import { ChatMessage, PartialChatMessage } from '../types';
+import { DEFAULT_CHATBOX_HEIGHT, INPUT_HEIGHT } from '../constants';
+import type { ChatMessage, Member, PartialChatMessage } from '../types';
 
 type Props = {
   id: string;
@@ -15,18 +15,23 @@ type Props = {
   isLoading?: boolean;
   sendMessageFunction?: (message: PartialChatMessage) => void;
   chatId: string;
+  showHeader?: boolean;
+  currentMember: Record<Member>;
 };
 
 const Chatbox: FC<Props> = ({
-  height,
+  height = DEFAULT_CHATBOX_HEIGHT,
   sendMessageFunction,
   messages,
   isLoading,
   chatId,
+  showHeader = false,
+  currentMember,
 }) => {
-  const useStyles = makeStyles(() => ({
+  const useStyles = makeStyles((theme) => ({
     container: {
       height: height || DEFAULT_CHATBOX_HEIGHT,
+      padding: theme.spacing(0, 1),
     },
   }));
   const classes = useStyles();
@@ -35,9 +40,13 @@ const Chatbox: FC<Props> = ({
   }
   return (
     <Fragment>
-      <Header />
+      {showHeader && <Header />}
       <Container maxWidth="md" className={classes.container}>
-        <Messages messages={messages} height={height} />
+        <Messages
+          currentMember={currentMember}
+          messages={messages}
+          height={height - INPUT_HEIGHT}
+        />
         <Input sendMessageFunction={sendMessageFunction} chatId={chatId} />
       </Container>
     </Fragment>
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e23aedfc..42c011a3 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -50,7 +50,7 @@ const Input: FC<Props> = ({ chatId, placeholder, sendMessageFunction }) => {
         placeholder={placeholder || t('Type something…')}
       />
       <IconButton onClick={onClick}>
-        <SendIcon />
+        <SendIcon color="primary" />
       </IconButton>
     </Box>
   );
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index d4f9352a..f17a27b9 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -1,16 +1,17 @@
 import React, { FC } from 'react';
 import Box from '@material-ui/core/Box';
+import { Record } from 'immutable';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import grey from '@material-ui/core/colors/grey';
 import clsx from 'clsx';
-import type { ChatMessage } from '../types';
+import type { ChatMessage, Member } from '../types';
 
 const useStyles = makeStyles((theme) => ({
   message: {
     background: grey[100],
     borderRadius: '5px',
-    margin: theme.spacing(1),
+    margin: theme.spacing(1, 0),
     padding: theme.spacing(0.5, 1, 1),
     maxWidth: '80%',
     width: 'fit-content',
@@ -22,12 +23,13 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   message: ChatMessage;
+  currentMember: Record<Member>;
 };
 
-const Message: FC<Props> = ({ message }) => {
+const Message: FC<Props> = ({ message, currentMember }) => {
   const classes = useStyles();
   const creator = message.creator;
-  const isOwnMessage = creator === 'me';
+  const isOwnMessage = creator === currentMember.get('id');
   const align = isOwnMessage ? 'flex-end' : null;
 
   return (
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
index 5b08fde3..f6e72632 100644
--- a/src/components/Messages.tsx
+++ b/src/components/Messages.tsx
@@ -1,16 +1,17 @@
 import React, { FC, useRef, useEffect } from 'react';
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
-import { List } from 'immutable';
+import { List, Record } from 'immutable';
 import Message from './Message';
-import type { ChatMessage } from '../types';
+import type { ChatMessage, Member } from '../types';
 
 type Props = {
   messages?: List<ChatMessage>;
   height?: number;
+  currentMember: Record<Member>;
 };
 
-const Messages: FC<Props> = ({ messages, height }) => {
+const Messages: FC<Props> = ({ messages, height, currentMember }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const useStyles = makeStyles(() => ({
@@ -41,7 +42,7 @@ const Messages: FC<Props> = ({ messages, height }) => {
       <Box className={classes.messagesContainer}>
         {messages?.map((message) => (
           // todo: apply key
-          <Message message={message} />
+          <Message currentMember={currentMember} message={message} />
         ))}
       </Box>
     </div>
diff --git a/src/constants.js b/src/constants.js
index 638df0cd..7359b554 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1 +1,2 @@
 export const DEFAULT_CHATBOX_HEIGHT = 600;
+export const INPUT_HEIGHT = 100;
diff --git a/src/types.ts b/src/types.ts
index e47e75f3..c9de4369 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { Record } from 'immutable';
+
 export type PartialChatMessage = {
   chatId: string;
   body: string;
@@ -9,3 +11,13 @@ export type ChatMessage = {
   createdAt: string;
   body: string;
 };
+
+export type Member = {
+  id: string;
+  name: string;
+};
+export class ImmutableMember extends Record({
+  id: '',
+  name: '',
+  type: '',
+}) {}