Merge branch 'develop' into develop

PalisadoesFoundation · Oct 23, 2023 · 4b759ef · 4b759ef
2 parents 6b79112 + 046600a
commit 4b759ef
Show file tree

Hide file tree

Showing 21 changed files with 783 additions and 13 deletions.
diff --git a/package.json b/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",

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -613,7 +613,6 @@
     "event": "Event",
     "organization": "Organization"
   },
-  "advertisement": {
     "title": "Advertisements",
     "pHeading": "Manage Ads",
     "activeAds": "Active Campaigns",
@@ -631,5 +630,14 @@
     "EXlink": "Ex. http://yourwebsite.com/photo",
     "register": "Create Advertisement",
     "close": "Close "
+},
+  "userChat": {
+    "chat": "Chat",
+    "search": "Search",
+    "contacts": "Contacts"
+  },
+  "userChatRoom": {
+    "selectContact": "Select a contact to start conversation",
+    "sendMessage": "Send Message"
   }
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -612,5 +612,14 @@
     "archievedAds": "Campagnes terminées",
     "pMessage": "Aucune publicité n'est présente pour cette campagne.",
     "delete": "Supprimer"
+},
+  "userChat": {
+    "chat": "Chat",
+    "search": "Recherche",
+    "contacts": "Contacts"
+  },
+  "userChatRoom": {
+    "selectContact": "Sélectionnez un contact pour démarrer la conversation",
+    "sendMessage": "Envoyer le message"
   }
 }
diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -613,5 +613,14 @@
     "archievedAds": "संपन्न अभियान",
     "pMessage": "इस अभियान के लिए कोई विज्ञापन नहीं हैं।",
     "delete": "हटाएँ"
+},
+  "userChat": {
+    "chat": "बात",
+    "search": "खोज",
+    "contacts": "संपर्क"
+  },
+  "userChatRoom": {
+    "selectContact": "बातचीत शुरू करने के लिए एक संपर्क चुनें",
+    "sendMessage": "मेसेज भेजें"
   }
 }
diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -613,5 +613,14 @@
     "archievedAds": "Campañas completadas",
     "pMessage": "No hay anuncios disponibles para esta campaña.",
     "delete": "Eliminar"
+},
+  "userChat": {
+    "chat": "Charlar",
+    "search": "Buscar",
+    "contacts": "Contactos"
+  },
+  "userChatRoom": {
+    "selectContact": "Seleccione un contacto para iniciar una conversación",
+    "sendMessage": "Enviar mensaje"
   }
 }
diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -613,5 +613,14 @@
     "archievedAds": "已完成的广告活动",
     "pMessage": "此广告活动没有相关广告。",
     "delete": "删除"
+  },
+  "userChat": {
+    "chat": "聊天",
+    "search": "搜尋",
+    "contacts": "聯絡方式"
+  },
+  "userChatRoom": {
+    "selectContact": "選擇聯絡人開始對話",
+    "sendMessage": "傳訊息"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -33,6 +33,7 @@ import Donate from 'screens/UserPortal/Donate/Donate';
 import Events from 'screens/UserPortal/Events/Events';
 import Tasks from 'screens/UserPortal/Tasks/Tasks';
 import Advertisements from 'components/Advertisements/Advertisements';
+import Chat from 'screens/UserPortal/Chat/Chat';
 
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
@@ -129,6 +130,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>

diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts
@@ -649,6 +649,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 {

diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
@@ -726,3 +726,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
+      }
+    }
+  }
+`;
diff --git a/src/components/EventStats/Statistics/AverageRating.test.tsx b/src/components/EventStats/Statistics/AverageRating.test.tsx
@@ -52,7 +52,7 @@ describe('Testing Average Rating Card', () => {
     );
 
     await waitFor(() =>
-      expect(queryByText('Rated 5.00 / 10')).toBeInTheDocument()
+      expect(queryByText('Rated 5.00 / 5')).toBeInTheDocument()
     );
   });
 });
diff --git a/src/components/EventStats/Statistics/AverageRating.tsx b/src/components/EventStats/Statistics/AverageRating.tsx
@@ -10,7 +10,7 @@ type ModalPropType = {
   data: {
     event: {
       _id: string;
-      averageFeedbackScore: number | null;
+      averageFeedbackScore: number;
       feedback: FeedbackType[];
     };
   };
@@ -41,12 +41,12 @@ export const AverageRating = ({ data }: ModalPropType): JSX.Element => {
             <h4>Average Review Score</h4>
           </Card.Title>
           <Typography component="legend">
-            Rated {(data.event.averageFeedbackScore || 0).toFixed(2)} / 10
+            Rated {data.event.averageFeedbackScore.toFixed(2)} / 5
           </Typography>
           <StyledRating
             name="customized-color"
             precision={0.5}
-            max={10}
+            max={5}
             readOnly
             value={data.event.averageFeedbackScore}
             icon={<FavoriteIcon fontSize="inherit" />}

diff --git a/src/components/EventStats/Statistics/Feedback.tsx b/src/components/EventStats/Statistics/Feedback.tsx
@@ -25,15 +25,10 @@ type FeedbackType = {
 export const FeedbackStats = ({ data }: ModalPropType): JSX.Element => {
   const ratingColors = [
     '#57bb8a', // Green
-    '#73b87e',
     '#94bd77',
-    '#b0be6e',
     '#d4c86a',
-    '#f5ce62',
     '#e9b861',
-    '#ecac67',
     '#e79a69',
-    '#e2886c',
     '#dd776e', // Red
   ];
 
@@ -45,13 +40,13 @@ export const FeedbackStats = ({ data }: ModalPropType): JSX.Element => {
   });
 
   const chartData = [];
-  for (let rating = 0; rating <= 10; rating++) {
+  for (let rating = 0; rating <= 5; rating++) {
     if (rating in count)
       chartData.push({
         id: rating,
         value: count[rating],
         label: `${rating} (${count[rating]})`,
-        color: ratingColors[10 - rating],
+        color: ratingColors[5 - rating],
       });
   }
 

diff --git a/src/components/EventStats/Statistics/Review.tsx b/src/components/EventStats/Statistics/Review.tsx
@@ -42,7 +42,7 @@ export const ReviewStats = ({ data }: ModalPropType): JSX.Element => {
             reviews.map((review) => (
               <div className="card user-review m-1" key={review._id}>
                 <div className="card-body">
-                  <Rating name="read-only" value={review.rating / 2} readOnly />
+                  <Rating name="read-only" value={review.rating} readOnly />
                   <p className="card-text">{review.review}</p>
                 </div>
               </div>

diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.module.css b/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;
+}
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.tsx b/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>
+  );
+}
diff --git a/src/components/UserPortal/ContactCard/ContactCard.module.css b/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;
+}