Add chat screen to talawa-user-portal

package.json

@@ -11,6 +11,8 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.14.1",
+    "@mui/private-theming": "^5.14.13",
+    "@mui/system": "^5.14.12",
     "@mui/x-charts": "^6.0.0-alpha.13",
     "@mui/x-data-grid": "^6.8.0",
     "@mui/x-date-pickers": "^6.6.0",

public/locales/en.json

@@ -611,5 +611,14 @@
     "taskNotCompleted": "The task has not been completed yet",
     "event": "Event",
     "organization": "Organization"
+  },
+  "userChat": {
+    "chat": "Chat",
+    "search": "Search",
+    "contacts": "Contacts"
+  },
+  "userChatRoom": {
+    "selectContact": "Select a contact to start conversation",
+    "sendMessage": "Send Message"
   }
 }

public/locales/fr.json

@@ -604,5 +604,14 @@
     "taskNotCompleted": "La tâche n'est pas encore terminée",
     "event": "Événement",
     "organization": "Organisation"
+  },
+  "userChat": {
+    "chat": "Chat",
+    "search": "Recherche",
+    "contacts": "Contacts"
+  },
+  "userChatRoom": {
+    "selectContact": "Sélectionnez un contact pour démarrer la conversation",
+    "sendMessage": "Envoyer le message"
   }
 }

public/locales/hi.json

@@ -605,5 +605,14 @@
     "taskNotCompleted": "कार्य अभी तक पूरा नहीं हुआ है",
     "event": "आयोजन",
     "organization": "संगठन"
+  },
+  "userChat": {
+    "chat": "बात",
+    "search": "खोज",
+    "contacts": "संपर्क"
+  },
+  "userChatRoom": {
+    "selectContact": "बातचीत शुरू करने के लिए एक संपर्क चुनें",
+    "sendMessage": "मेसेज भेजें"
   }
 }

public/locales/sp.json

@@ -605,5 +605,14 @@
     "taskNotCompleted": "La tarea aún no se ha completado",
     "event": "Evento",
     "organization": "Organización"
+  },
+  "userChat": {
+    "chat": "Charlar",
+    "search": "Buscar",
+    "contacts": "Contactos"
+  },
+  "userChatRoom": {
+    "selectContact": "Seleccione un contacto para iniciar una conversación",
+    "sendMessage": "Enviar mensaje"
   }
 }

public/locales/zh.json

@@ -605,5 +605,14 @@
     "taskNotCompleted": "任務還沒完成",
     "event": "事件",
     "organization": "組織"
+  },
+  "userChat": {
+    "chat": "聊天",
+    "search": "搜尋",
+    "contacts": "聯絡方式"
+  },
+  "userChatRoom": {
+    "selectContact": "選擇聯絡人開始對話",
+    "sendMessage": "傳訊息"
   }
 }

src/App.tsx

@@ -32,6 +32,7 @@ import Settings from 'screens/UserPortal/Settings/Settings';
 import Donate from 'screens/UserPortal/Donate/Donate';
 import Events from 'screens/UserPortal/Events/Events';
 import Tasks from 'screens/UserPortal/Tasks/Tasks';
+import Chat from 'screens/UserPortal/Chat/Chat';
 
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
@@ -127,6 +128,7 @@ function app(): JSX.Element {
         <SecuredRouteForUser path="/user/donate" component={Donate} />
         <SecuredRouteForUser path="/user/events" component={Events} />
         <SecuredRouteForUser path="/user/tasks" component={Tasks} />
+        <SecuredRouteForUser path="/user/chat" component={Chat} />
 
         <Route exact path="*" component={PageNotFound} />
       </Switch>

src/GraphQl/Mutations/mutations.ts

@@ -622,6 +622,17 @@ export const UNLIKE_COMMENT = gql`
     }
   }
 `;
+
+export const CREATE_DIRECT_CHAT = gql`
+  mutation createDirectChat($userIds: [ID!]!, $organizationId: ID!) {
+    createDirectChat(
+      data: { userIds: $userIds, organizationId: $organizationId }
+    ) {
+      _id
+    }
+  }
+`;
+
 //Plugin WebSocket listner
 export const PLUGIN_SUBSCRIPTION = gql`
   subscription onPluginUpdate {

src/GraphQl/Queries/Queries.ts

@@ -714,3 +714,45 @@ export const USER_TASKS_LIST = gql`
     }
   }
 `;
+
+export const DIRECT_CHATS_LIST = gql`
+  query DirectChatsByUserID($id: ID!) {
+    directChatsByUserID(id: $id) {
+      _id
+      creator {
+        _id
+        firstName
+        lastName
+        email
+      }
+      messages {
+        _id
+        createdAt
+        messageContent
+        receiver {
+          _id
+          firstName
+          lastName
+          email
+        }
+        sender {
+          _id
+          firstName
+          lastName
+          email
+        }
+      }
+      organization {
+        _id
+        name
+      }
+      users {
+        _id
+        firstName
+        lastName
+        email
+        image
+      }
+    }
+  }
+`;

src/components/UserPortal/ChatRoom/ChatRoom.module.css

@@ -0,0 +1,13 @@
+.chatAreaContainer {
+  padding: 10px;
+  flex-grow: 1;
+  background-color: rgba(196, 255, 211, 0.3);
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.grey {
+  color: grey;
+}

src/components/UserPortal/ChatRoom/ChatRoom.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { ChangeEvent } from 'react';
+import { Paper } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import { Button, Form, InputGroup } from 'react-bootstrap';
+import styles from './ChatRoom.module.css';
+import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
+import { useTranslation } from 'react-i18next';
+
+interface InterfaceChatRoomProps {
+  selectedContact: string;
+}
+
+export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userChatRoom',
+  });
+
+  const [newMessage, setNewMessage] = React.useState('');
+
+  const handleNewMessageChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const newMessageValue = e.target.value;
+
+    setNewMessage(newMessageValue);
+  };
+
+  return (
+    <div className={`d-flex flex-column ${styles.chatAreaContainer}`}>
+      {!props.selectedContact ? (
+        <div
+          className={`d-flex flex-column justify-content-center align-items-center w-100 h-75 gap-2 ${styles.grey}`}
+        >
+          <PermContactCalendarIcon fontSize="medium" className={styles.grey} />
+          <h6>{t('selectContact')}</h6>
+        </div>
+      ) : (
+        <>
+          <div className={`d-flex flex-grow-1 flex-column`}>
+            <Paper
+              variant="outlined"
+              sx={{
+                p: 2,
+                backgroundColor: 'white',
+                borderRadius: '20px 20px 5px 20px',
+                marginBottom: `10px`,
+              }}
+            >
+              My message
+            </Paper>
+            <Paper
+              variant="outlined"
+              sx={{
+                p: 2,
+                backgroundColor: '#31bb6b',
+                borderRadius: '20px 20px 20px 5px',
+                color: 'white',
+                marginBottom: `10px`,
+              }}
+            >
+              Other message
+            </Paper>
+          </div>
+          <div>
+            <InputGroup>
+              <Form.Control
+                placeholder={t('sendMessage')}
+                aria-label="Send Message"
+                value={newMessage}
+                onChange={handleNewMessageChange}
+                className={styles.backgroundWhite}
+              />
+              <Button variant="primary" id="button-addon2">
+                <SendIcon fontSize="small" />
+              </Button>
+            </InputGroup>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/UserPortal/ContactCard/ContactCard.module.css

@@ -0,0 +1,33 @@
+.contact {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 10px;
+  cursor: pointer;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  border: 2px solid #f5f5f5;
+}
+
+.contactImage {
+  width: 50px;
+  height: auto;
+  border-radius: 10px;
+}
+
+.contactNameContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px;
+}
+
+.grey {
+  color: grey;
+}
+
+.bgGrey {
+  background-color: #f5f5f5;
+}
+
+.bgWhite {
+  background-color: white;
+}