Christan / roxanne

apps/codac-quasseln/src/components/chat/main-chat/message.tsx

@@ -0,0 +1,268 @@
+import { FormEvent, useEffect, useRef, useState } from "react";
+import React from "react";
+import { useAuth } from "#/contexts/authContext";
+import { gql, useQuery, useMutation } from "@apollo/client";
+import { formatDate } from "#/utils/api-helpers";
+
+const upDateChatMessage = gql`
+  mutation updateMessage($id: ID!, $body: String!) {
+    updateMessage(id: $id, data: { body: $body }) {
+      data {
+        id
+        attributes {
+          body
+        }
+      }
+    }
+  }
+`;
+const getSingleMessage = gql`
+  query GetMessageById($id: ID) {
+    message(id: $id) {
+      data {
+        id
+        attributes {
+          body
+          author {
+            data {
+              id
+              attributes {
+                username
+                avatar {
+                  data {
+                    attributes {
+                      url
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const deleteChatMessage = gql`
+  mutation deleteMessage($id: ID!) {
+    deleteMessage(id: $id) {
+      data {
+        id
+      }
+    }
+  }
+`;
+
+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 || "");
+
+  const { loading, error, data, refetch } = useQuery(getSingleMessage, {
+    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) => {
+    // console.log("object :>> ", message.attributes.author.data?.id);
+    if (userId === message.attributes.author.data?.id || user?.role?.name === "Mentor") {
+      deleteMessageMutation({
+        variables: {
+          id: message.id,
+        },
+      });
+      deleteMsg();
+    }
+    setHiddenDiv(false);
+  };
+  const updateMessage = async (e: FormEvent<HTMLFormElement>, message: any) => {
+    e.preventDefault();
+    // console.log("message.id :>> ", message.id);
+    // console.log("msg attributes:>>", message.attributes);
+    if (userId === message.attributes.author.data.id) {
+      if (newMsg) {
+        updateMessageMutation({
+          variables: {
+            id: message.id,
+            body: newMsg, // we need to create a new form with this variable as msg body
+          },
+        });
+      }
+      setNewMsg("");
+      setEditToggle(false);
+      // await refetch();
+      refetch();
+    }
+  };
+  // testing click outside the div closes it .....
+
+  const hiddenDivRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (hiddenDivRef.current && !hiddenDivRef.current.contains(event.target)) {
+        setHiddenDiv(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const formatDate = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const today = new Date();
+    const yesterday = new Date();
+    yesterday.setDate(today.getDate() - 1);
+    let formattedDate = "";
+    if (date.getDate() === today.getDate()) {
+      formattedDate = "Today";
+    } else if (date.getDate() === yesterday.getDate()) {
+      formattedDate = "Yesterday";
+    } else {
+      formattedDate = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+    }
+    formattedDate += `@ ${date.getHours() < 10 ? "0" : ""}${date.getHours()}:${
+      date.getMinutes() < 10 ? "0" : ""
+    }${date.getMinutes()} `;
+
+    return formattedDate;
+  };
+
+  return (
+    <div className="message-container">
+      {!editToggle && (
+        <>
+          <div
+            // ref={hiddenDivRef}
+            className={`message-bubble option-A ${
+              user?.username === message.attributes.author.data?.attributes.username
+                ? "my-message"
+                : "user-message"
+            }`}
+          >
+            <div className="message-label">
+              {user?.username !== message.attributes.author.data?.attributes.username ? (
+                <strong>{message.attributes.author.data?.attributes.username}</strong>
+              ) : (
+                <strong>me</strong>
+              )}
+              {formatDate(message && message.attributes.createdAt)}
+              {user?.username === message.attributes.author.data?.attributes.username && (
+                <div className="message-functions-panel">
+                  <button
+                    onClick={() => {
+                      setEditToggle(!editToggle);
+                      setNewMsg(message.attributes.body);
+                    }}
+                  >
+                    <svg
+                      className="icon"
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="1em"
+                      viewBox="0 0 512 512"
+                    >
+                      <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => {
+                      setHiddenDiv(!hiddenDiv);
+                    }}
+                  >
+                    <svg
+                      className="icon"
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="1em"
+                      viewBox="0 0 448 512"
+                    >
+                      <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+            </div>
+            <p className="message-text">{message && message.attributes?.body}</p>
+            {hiddenDiv && (
+              <div className="delete-panel" ref={hiddenDivRef}>
+                <span>Delete this message ?</span>
+                <div className="buttons-container">
+                  <button
+                    className="primary"
+                    onClick={() => {
+                      setHiddenDiv(!hiddenDiv);
+                    }}
+                  >
+                    No
+                  </button>
+                  <button
+                    className="secondary"
+                    onClick={() => {
+                      deleteMessage(message.id);
+                    }}
+                  >
+                    Yes
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+      {editToggle && (
+        <>
+          <div className="option-B">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                updateMessage(e, message);
+                setEditToggle(!editToggle);
+              }}
+            >
+              <textarea
+                className="message-editor"
+                name="newText"
+                value={newMsg}
+                onChange={(e) => {
+                  setNewMsg(e.target.value);
+                  console.log("new message   :", newMsg);
+                }}
+              />
+              <div className="edit-panel">
+                Save changes ?
+                <div className="buttons-container">
+                  <button className="primary" type="submit">
+                    Yes
+                  </button>
+                  <button
+                    className="secondary"
+                    type="button"
+                    onClick={() => {
+                      setEditToggle(!editToggle);
+                    }}
+                  >
+                    No
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Message;

apps/codac-quasseln/src/components/main-layout.tsx

@@ -7,8 +7,6 @@ import Auth from "./auth";
 
 function MainLayout({ children }: { children: ReactNode }) {
   return (
-
-
     <DashboardLayout
       navigation={
         <GlobalNav

apps/codac-quasseln/src/components/navigation.tsx

@@ -2,21 +2,27 @@ import Link from "next/link";
 import React from "react";
 
 import { navigation } from "#/constants/navigation";
+//  This comes from navigation.ts... the u can add allements to the dashboard...
 
 const Navigation = () => {
+
   return (
-    <div className="space-y-10 text-white">
-      {navigation.map((section) => {
+    <div className="go-to-chat-container">
+      <Link className="go-to-chat" href="/main-chat">
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
+          <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+        </svg>
+        <span>Go to main chat</span>
+      </Link>
+      {/* FOLLOWING NAVIGATION TOTALLY REDUNDANT AND UNNECESSARY ??? */}
+      {/* {navigation.map((section) => {
         return (
           <div key={section.name} className="space-y-5">
             <div className="text-xs font-semibold uppercase tracking-wider text-gray-400">
               {section.name}
             </div>
 
-            <div
-              style={{ border: "5px solid green" }}
-              className="grid grid-cols-1 gap-5  lg:grid-cols-2"
-            >
+            <div className="grid grid-cols-1 gap-5  lg:grid-cols-2">
               {section.items.map((item) => {
                 return (
                   <Link
@@ -39,7 +45,7 @@ const Navigation = () => {
             </div>
           </div>
         );
-      })}
+      })} */}
     </div>
   );
 };

apps/codac-quasseln/src/constants/navigation.ts

@@ -23,6 +23,22 @@ export const navigation: { name: string; items: Item[] }[] = [
         slug: "chat",
         description: "Chat",
       },
+      {
+        name: "Main Chat",
+        slug: "main-chat",
+        description: "Main Chat",
+      },
+    ],
+  },
+  {
+    name: "Main Chat",
+    items: [
+      {
+        name: "Main Chat",
+        slug: "main-chat",
+        description: "main chat",
+      },
     ],
   },
 ];
+// New section "Main Chat" added by Christian.

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

@@ -2,7 +2,7 @@ import {
   useGetMeQuery,
   type UsersPermissionsLoginPayload,
   type UsersPermissionsMe,
-  type ChatroomEntityResponseCollection,
+  type ChatEntityResponseCollection,
 } from "codac-graphql-types";
 import { destroyCookie, setCookie } from "nookies";
 import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
@@ -12,7 +12,7 @@ import { type } from "os";
 
 type User = UsersPermissionsMe | null;
 
-type ChatRooms = ChatroomEntityResponseCollection | null;
+type ChatRooms = ChatEntityResponseCollection | null;
 
 export interface AuthContextValue {
   user: User;
@@ -42,14 +42,15 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [chatRooms, setChatRooms] = useState<ChatRooms>(null);
   const { data, error, loading: authLoading, refetch: getMe } = useGetMeQuery();
 
+  // does this Use Context work??????
+  //  the user now is different..... and has no chatrooms...
   useEffect(() => {
     if (data?.me && !error) {
       // console.log("this is the updated data/user:", data);
       const user = data.me as UsersPermissionsMe;
       setUser(user);
       const chatRooms = data.chatrooms as ChatRooms;
       setChatRooms(chatRooms);
-      console.log("this is the new chatRooms variable", chatRooms);
     }
   }, [data]);
 

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

@@ -45,7 +45,7 @@ export const SocketProvider = ({ children }: { children: ReactNode }) => {
       return;
     } else {
       const token = getToken();
-      console.log("token", token);
+
       const s: SocketIface = io(`${process.env.NEXT_PUBLIC_CODAC_SERVER_URL ?? ""}`, {
         auth: {
           token: token,

apps/codac-quasseln/src/pages/dashboard.tsx

@@ -3,6 +3,7 @@ import { useAuth } from "#/contexts/authContext";
 
 export default function Dashboard() {
   const { user, authLoading } = useAuth();
+
   return (
     <div>
       <h1 className="text-xl font-medium text-gray-300">CODAC QUASSELN</h1>