Merge branch 'cobalt-kangaroos-integration' into ari-test

apps/codac-quasseln/src/components/Main-Chat-Components/ConversationBuble.tsx

@@ -12,7 +12,8 @@ interface Props {
     };
   };
   active: string;
-  setActive: React.Dispatch<React.SetStateAction<string>>;
+  // setActive: React.Dispatch<React.SetStateAction<string>>;
+  setActive: () => void
   deleteConv: () => void
 }
 const updatePinnedConversation = gql`
@@ -169,21 +170,22 @@ const ConversationBuble = ({ conversation, setActive, active, deleteConv }: Prop
   const [isActiveConvo, setIsActiveConvo] = useState<string>("");
 
   const handleConversationClick = () => {
-    setActive(conversation.id);
-    console.log("conversation.id :", conversation.id);
+    setActive();
   };
 
   //  DELETE CONVERSATION STATES AND FUNCTIONS...
   const [deleteNewConversation] = useMutation(deleteConversation);
 
-  const deleteEmptyConversation = (conversationId: any) => {
+  const deleteEmptyConversation = async (conversationId: any) => {
     if (allMessages.conversation.data.attributes.messages.data.length === 0) {
-      deleteNewConversation({
+      const deleted = await deleteNewConversation({
         variables: {
           id: conversationId
         }
       })
-      deleteConv()
+      if (deleted) {
+        deleteConv()
+      }
     }
   }
 

apps/codac-quasseln/src/components/Main-Chat-Components/message.tsx

@@ -4,17 +4,15 @@ import { useAuth } from "#/contexts/authContext";
 import { gql, useQuery, useMutation } from "@apollo/client";
 import { formatDate } from "#/utils/api-helpers";
 
+
+// THIS IS THE NEW QUERY TO UPDATE THE MESSAGES LIVE!! 
 const upDateChatMessage = gql`
-  mutation updateMessage($id: ID!, $body: String!) {
-    updateMessage(id: $id, data: { body: $body }) {
-      data {
-        id
-        attributes {
-          body
-        }
-      }
-    }
+mutation updateMessage ($id: ID!, $body: String!){
+  updateConversationMessage(messageId: $id, body: $body ){
+    success
+    message
   }
+}
 `;
 const getSingleMessage = gql`
   query GetMessageById($id: ID) {
@@ -43,18 +41,18 @@ const getSingleMessage = gql`
     }
   }
 `;
+
+
 const deleteChatMessage = gql`
-  mutation deleteMessage($id: ID!) {
-    deleteMessage(id: $id) {
-      data {
-        id
-      }
-    }
-  }
-`;
+mutation deleteChatMessage($id: ID!){
+  deleteConversationMessage(messageId: $id){
+  success
+  message
+}
+}`
 
 const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }) => {
-  // console.log("message.id: ", message.id);
+
   const [hiddenDiv, setHiddenDiv] = useState(false);
   const [editToggle, setEditToggle] = useState(false);
   const [newMsg, setNewMsg] = useState(message?.attributes?.body || "");
@@ -63,13 +61,10 @@ const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }
     variables: { id: message.id },
   });
 
-  // console.log("data: ", data);
-
   const { user } = useAuth();
   const userId = user?.id;
 
   const [updateMessageMutation] = useMutation(upDateChatMessage);
-
   const [deleteMessageMutation] = useMutation(deleteChatMessage);
   //  the mentor has permmision to delete as well... condicional... id not working and only deleting first message...
   const deleteMessage = (messageId: any) => {
@@ -103,6 +98,7 @@ const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }
       refetch();
     }
   };
+
   // testing click outside the div closes it .....
 
   const hiddenDivRef = useRef<HTMLDivElement>(null);
@@ -113,9 +109,7 @@ const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }
         setHiddenDiv(false);
       }
     };
-
     document.addEventListener("mousedown", handleClickOutside);
-
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
@@ -136,7 +130,6 @@ const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }
     }
     formattedDate += `@ ${date.getHours() < 10 ? "0" : ""}${date.getHours()}:${date.getMinutes() < 10 ? "0" : ""
       }${date.getMinutes()} `;
-
     return formattedDate;
   };
 
@@ -147,8 +140,8 @@ const Message = ({ message, deleteMsg }: { message: any; deleteMsg: () => void }
           <div
             // ref={hiddenDivRef}
             className={`message-bubble option-A ${user?.username === message.attributes.author.data?.attributes.username
-                ? "my-message"
-                : "user-message"
+              ? "my-message"
+              : "user-message"
               }`}
           >
             <div className="message-label">

apps/codac-quasseln/src/contexts/socketContext.tsx

@@ -7,6 +7,8 @@ import { io, type Socket } from "socket.io-client";
 import { getToken } from "#/lib/apolloClient";
 
 import { useAuth } from "./authContext";
+import { MessageEntity } from "codac-graphql-types";
+
 
 interface ServerToClientEvents {
   noArg: () => void;
@@ -15,6 +17,9 @@ interface ServerToClientEvents {
   ["chat:update"]: (chat: Chat) => void;
   ["chat"]: (chat: Chat) => void;
   ["conversation:update"]: (conversation: ConversationEntity) => void;
+  ["message:update"]: (message: MessageEntity) => void;
+
+
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

apps/codac-quasseln/src/pages/main-chat/[chatId].tsx

@@ -80,6 +80,7 @@ const createNewMessage = gql`
       success
   }
   }`;
+
 const updatePinnedConversation = gql`
   mutation updateArticle($id: ID!, $pinned: Boolean!) {
     updateConversation(id: $id, data: { pinned: $pinned }) {
@@ -163,6 +164,8 @@ const SingleChat = (props: Props) => {
   const { socket } = useSocket();
 
 
+
+
   // Refetching enables you to refresh query results in response to a particular user action, as opposed to using a fixed interval.
   const {
     data: conversations,
@@ -178,6 +181,7 @@ const SingleChat = (props: Props) => {
     error: messageError,
     refetch,
   } = useQuery(getChatHistoryById, { variables: { id: active } });
+  // console.log('allMessages :>> ', allMessages);
 
   //NOTE - SAVE/CREATE A NEW MESSAGE
   // FUNCTION TO SCROLL DOWN TO THE LAST MESSAGE IN THE CHAT
@@ -232,9 +236,11 @@ const SingleChat = (props: Props) => {
   const [newConversationModal, setNewConversationModal] = useState(false);
   const [newConversationTitle, setNewConversationTitle] = useState("");
   const [newConversationDescription, setNewConversationDescription] = useState("");
-  const [createNewConversation] = useMutation(createConversation);
+  const [createNewConversation, { loading: loadingNewConversation }] = useMutation(createConversation);
+
+  const newConversation = (e: any) => {
+    e.preventDefault()
 
-  const newConversation = () => {
     if (newConversationTitle.length >= 1) {
       createNewConversation({
         variables: {
@@ -262,14 +268,11 @@ const SingleChat = (props: Props) => {
         conversationRefetch();
       }
     })
-    // socket?.on("message:update", (message) => {
-    //   console.log('message :>> ', message);
-
-    // })
-  }, [socket])
-  console.log("socket :>> ", socket);
-
+  }, [socket]);
 
+  useEffect(() => {
+    conversationRefetch();
+  }, [active]);
 
   return (
     <>
@@ -291,7 +294,7 @@ const SingleChat = (props: Props) => {
                         <ConversationBuble
                           key={conversation.id}
                           conversation={conversation}
-                          setActive={setActive}
+                          setActive={() => setActive(conversation.id)}
                           active={active}
                           deleteConv={deleteConv}
                         />
@@ -314,7 +317,7 @@ const SingleChat = (props: Props) => {
                         <ConversationBuble
                           key={conversation.id}
                           conversation={conversation}
-                          setActive={setActive}
+                          setActive={() => setActive(conversation.id)}
                           active={active}
                           deleteConv={deleteConv}
                         />
@@ -323,9 +326,10 @@ const SingleChat = (props: Props) => {
                   }
                 )}
               {/* Inline styling to make a test version  */}
-              <button onClick={() => setNewConversationModal(!newConversationModal)}>
+              {loadingNewConversation ? <p>creating conversation</p> : <button onClick={() => setNewConversationModal(!newConversationModal)}>
                 Create Conversation
-              </button>
+              </button>}
+
             </div>
           </div>
           <div className="chat-convo-container">
@@ -429,7 +433,8 @@ const SingleChat = (props: Props) => {
                   <div className="buttons-container">
                     <button
                       className="primary"
-                      onClick={() => newConversation()}
+
+                      onClick={newConversation}
                       type="submit"
                     >
                       Create Conversation

apps/codac-quasseln/src/pages/main-chat/index.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useSocket } from "#/contexts/socketContext";
 import { Enum_Componentleadlifecycle_State } from "codac-graphql-types";
 
+
 const GetAllChats = gql`
   query getAllChats {
     chatrooms {
@@ -63,7 +64,7 @@ const KangaroosChat = (props: Props) => {
 
   console.log("socket :>> ", socket);
   console.log("user :>> ", user);
-  console.log("data from chris query :>> ", data);
+  console.log("data from query :>> ", data);
 
   return (
     <>