add block user even if he is not a friend and status in profile (#97)

Wadie-ess · Nov 15, 2023 · bf30d9a · bf30d9a
2 parents b31b486 + a1c83dc
commit bf30d9a
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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">