New Chat Connections Fetched and in chat box profile details show with click the chat connection

Author: SamarpanCoder2002

package.json

@@ -1,6 +1,6 @@
 {
   "name": "socialbook-frontend",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.1",

src/component/common/buttons.js

@@ -1,4 +1,8 @@
-export const AcceptButton = ({ darkMode, onClickOperation, customClassName }) => {
+export const AcceptButton = ({
+  darkMode,
+  onClickOperation,
+  customClassName,
+}) => {
   return (
     <button
       className={`${
@@ -12,7 +16,11 @@ export const AcceptButton = ({ darkMode, onClickOperation, customClassName }) =>
   );
 };
 
-export const ConnectButton = ({ darkMode, onClickOperation, customClassName }) => {
+export const ConnectButton = ({
+  darkMode,
+  onClickOperation,
+  customClassName,
+}) => {
   return (
     <button
       className={`${
@@ -26,7 +34,11 @@ export const ConnectButton = ({ darkMode, onClickOperation, customClassName }) =
   );
 };
 
-export const CancelButton = ({ darkMode, onClickOperation, customClassName }) => {
+export const CancelButton = ({
+  darkMode,
+  onClickOperation,
+  customClassName,
+}) => {
   return (
     <button
       className={`${
@@ -40,12 +52,16 @@ export const CancelButton = ({ darkMode, onClickOperation, customClassName }) =>
   );
 };
 
-export const MessageButton = ({ darkMode, onClickOperation, customClassName }) => {
+export const MessageButton = ({
+  darkMode,
+  onClickOperation,
+  customClassName,
+}) => {
   return (
     <button
       className={`${
         darkMode ? "hover:bg-blue-800" : "hover:bg-blue-400"
-      } text-lightPrimaryFgColor dark:text-darkPrimaryFgColor px-2 py-1 rounded-3xl border-darkPrimaryFgColor  hover:bg-opacity-30  transition-all duration-300 sm:ml-3 w-full hover:shadow-sm hover:shadow-darkPrimaryFgColor  ${customClassName}`}
+      } text-lightPrimaryFgColor dark:text-darkPrimaryFgColor px-2 py-1 rounded-3xl border-darkPrimaryFgColor  hover:bg-opacity-30  transition-all duration-300 sm:ml-3 w-full   ${customClassName}`}
       style={{ borderWidth: "0.2px" }}
       onClick={onClickOperation}
     >

src/component/connection/connection-common-layout.js

@@ -34,6 +34,7 @@ const ConnectionCollectionItem = ({
           connectionType={connectionType}
           partnerUserId={user.id}
           setCollectiveIds={setCollectiveIds}
+          userData = {user}
         />
       </div>
     </div>
@@ -45,13 +46,15 @@ const ButtonCollectionPrediction = ({
   darkMode,
   partnerUserId,
   setCollectiveIds,
+  userData
 }) => {
   if (connectionType === ConnectionType.AlreadyConnected) {
     return (
       <ConnectedUsersButtonCollection
         darkMode={darkMode}
         partnerUserId={partnerUserId}
         setCollectiveIds={setCollectiveIds}
+        userData={userData}
       />
     );
   } else if (connectionType === ConnectionType.RequestReceived) {
@@ -114,12 +117,15 @@ const ConnectedUsersButtonCollection = ({
   darkMode,
   partnerUserId,
   setCollectiveIds,
+  userData
 }) => {
   // ** NOTE: Message Button Will be redirect to the specific chat..
   // ** We will do it after implement chat feature.
 
+  const {name, profilePic, description} = userData;
+
   const onMessageButtonClick = () => {
-    getChatBoxId(partnerUserId)
+    getChatBoxId(partnerUserId, name, description, profilePic)
       .then((data) => {
         console.log("Chat Box Id is: ", data);
       })

src/component/messaging-section/helper/api_call.js

@@ -3,8 +3,14 @@ import { getDataFromLocalStorage } from "../../common/local-storage-management";
 
 import { errorMessage } from "../../common/desktop-notification";
 
-export const getChatBoxId = async (partnerId) => {
-  const { user, token } = getDataFromLocalStorage();
+export const getChatBoxId = async (
+  partnerId,
+  partnerName,
+  partnerDescription,
+  partnerProfilePic
+) => {
+  const { user, token, name, description, profilePic } =
+    getDataFromLocalStorage();
 
   const res = await fetch(`${API}/messaging/getChatBoxId/${user}`, {
     method: "POST",
@@ -14,6 +20,12 @@ export const getChatBoxId = async (partnerId) => {
     },
     body: JSON.stringify({
       partnerId,
+      partnerName,
+      partnerDescription,
+      partnerProfilePic,
+      currentName: name,
+      currentDescription: description,
+      currentProfilePic: profilePic,
     }),
   });
 
@@ -27,8 +39,23 @@ export const getChatBoxId = async (partnerId) => {
   return data.chatBoxId;
 };
 
-
-// TODO: Do it  //
 export const getAllChatConnections = async () => {
+  const { token, user } = getDataFromLocalStorage();
+
+  const res = await fetch(`${API}/messaging/getAllChatConnections/${user}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
-}
+  const data = await res.json();
+
+  if (data.code !== 200) {
+    errorMessage(data.message);
+    return;
+  }
+
+  return data.chatConnections;
+};