From a1c83dcbc1ef7ec114efcc5fa6585857da22f7cc Mon Sep 17 00:00:00 2001
From: sedeve <xjsaad@gmail.com>
Date: Wed, 15 Nov 2023 17:41:16 +0100
Subject: [PATCH] add block user even if he is not a friend and status in
 profile

---
 backend/code/src/gateways/gateways.gateway.ts |  1 +
 .../code/src/Components/Profile/index.tsx     | 73 +++++++++++++++++++
 .../code/src/Components/Settings/index.tsx    |  3 -
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts
index 7ea63d4..9d5f394 100644
--- a/backend/code/src/gateways/gateways.gateway.ts
+++ b/backend/code/src/gateways/gateways.gateway.ts
@@ -193,6 +193,7 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
 
   @SubscribeMessage('status')
   async handleStatusEvent(@MessageBody() data: any) {
+    console.log('status event', data);
     const userId = data.userId;
     const status = this.server.sockets.adapter.rooms.get(`User:${userId}`)?.size
       ? 'online'
diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx
index 6e87130..a1b055f 100644
--- a/frontend/code/src/Components/Profile/index.tsx
+++ b/frontend/code/src/Components/Profile/index.tsx
@@ -30,6 +30,7 @@ import { BlockedUsersModal } from "../Chat/Components/RoomChatHelpers";
 import { blockUserCall } from "../Chat/Services/FriendsServices";
 import { AxiosError } from "axios";
 import { InvitationWaiting } from "../Layout/Assets/Invitationacceptance";
+import { classNames } from "../../Utils/helpers";
 type FRIENDSHIP = "none" | "friend" | "sent" | "recive" | "blocked" | undefined;
 export const Profile = () => {
   const user = useUserStore();
@@ -42,6 +43,7 @@ export const Profile = () => {
   const ChatState = useChatStore();
   const LayoutState = useModalStore();
   const socketStore = useSocketStore();
+  const [onlineStatus, setOnlineStatus] = useState<string>("offline");
 
   const inviteWaitingModalRef = useRef<HTMLDialogElement>(null);
   useEffect(() => {
@@ -72,6 +74,27 @@ export const Profile = () => {
 
     //eslint-disable-next-line
   }, [params, user]);
+
+  useEffect(() => {
+    if (params.id === "me" || params.id === user.id) {
+      return;
+    }
+    socketStore?.socket?.emit(
+      "status",
+      { userId: params.id },
+      (data: { status: string; inGame: boolean }) => {
+        console.log(data);
+        if (data.status === "online" && !data.inGame) {
+          setOnlineStatus("online");
+        } else if (data.status === "online" && data.inGame) {
+          setOnlineStatus("inGame");
+        } else {
+          setOnlineStatus("offline");
+        }
+      },
+    );
+  }, [params.id, socketStore?.socket, user.id]);
+
   console.log(status);
   const sendRequest = async () => {
     setDisabled("btn-disabled");
@@ -164,6 +187,23 @@ export const Profile = () => {
               ) : (
                 <Load />
               )}
+
+              {params.id !== "me" &&
+                params.id !== user.id &&
+                status === "friend" && (
+                  <span
+                    className={classNames(
+                      "px-2 py-1 font-light ml-2 text-xs border rounded-full",
+                      onlineStatus === "online"
+                        ? "text-green-500 border-green-500"
+                        : onlineStatus === "inGame"
+                        ? "text-yellow-500 border-yellow-500"
+                        : "text-red-500 border-red-500",
+                    )}
+                  >
+                    {onlineStatus}
+                  </span>
+                )}
             </div>
 
             <div className="flex flex-row  items-center  pt-2 text-xs">
@@ -202,6 +242,39 @@ export const Profile = () => {
                       <VscAdd />
                       Send request
                     </button>
+                    <div className="dropdown">
+                      <label tabIndex={0} className="">
+                        <summary className="list-none p-3 cursor-pointer ">
+                          <img src={More} alt="More" />
+                        </summary>
+                      </label>
+                      <ul
+                        tabIndex={0}
+                        className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute"
+                      >
+                        <span className="hover:bg-[#7940CF] hover:rounded">
+                          <li
+                            onClick={async () => {
+                              ChatState.setIsLoading(true);
+                              await blockUserCall(profile.id).then((res) => {
+                                ChatState.setIsLoading(false);
+                                if (
+                                  res?.status === 200 ||
+                                  res?.status === 201
+                                ) {
+                                  toast.success("User Blocked");
+                                  navigate("/chat");
+                                } else {
+                                  toast.error("Could Not Block User");
+                                }
+                              });
+                            }}
+                          >
+                            <div>Block</div>
+                          </li>
+                        </span>
+                      </ul>
+                    </div>
                   </div>
                 )}
               {params.id !== "me" &&
diff --git a/frontend/code/src/Components/Settings/index.tsx b/frontend/code/src/Components/Settings/index.tsx
index 6851e31..7f7fc8e 100644
--- a/frontend/code/src/Components/Settings/index.tsx
+++ b/frontend/code/src/Components/Settings/index.tsx
@@ -44,7 +44,6 @@ export const Setting = () => {
           Profile Settings
         </h1>
         <div className="flex flex-col bg-base-200 rounded-tl-2xl">
-          <h2 className="pt-6 px-6 text-neutral">change preview</h2>
           <div className="flex justify-center h-1/3 w-full pt-6 px-6">
             <div className="flex flex-col sm:flex-row w-full items-center gap-4 p-8 sm:justify-between justify-center overflow-hidden no-scrollbar max-h-[30vh] h-[25vh] bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
               <div className="flex justify-between items-center  gap-x-10 px-2 sm:px-0">
@@ -89,7 +88,6 @@ export const Setting = () => {
             </div>
           </div>
 
-          <h2 className="pt-6 px-6 text-neutral">change preview</h2>
           <div className="flex justify-center w-full pt-6 px-6">
             <div className="flex flex-col sm:flex-row justify-between w-full bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
               <div className="h-full p-8 grid md:grid-cols-2 grid-cols-1 w-full gap-4">
@@ -108,7 +106,6 @@ export const Setting = () => {
             </div>
           </div>
 
-          <h2 className="pt-6 px-6 text-neutral">change preview</h2>
           <div className="flex justify-center w-full pt-6 px-6">
             <div className="flex flex-col sm:flex-row justify-between w-full bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
               <div className="h-full p-8 grid grid-cols-1 w-full">