feat: add user block action and banner if user is blocked by another user

app/components/Profile/Profile.Actions.tsx

@@ -18,12 +18,13 @@ export const ProfileActions = (props: {
   my_profile_id: number;
   friendStatus: number;
   token: string;
+  is_me_blocked: boolean;
+  is_blocked: boolean;
 }) => {
   const router = useRouter();
-  const z2 = props.my_profile_id < props.profile_id;
+  const profileIdIsSmaller = props.my_profile_id < props.profile_id;
-  let profileIdIsSmaller = z2 ? true : false;
+  const [friendRequestDisabled, setFriendRequestDisabled] = useState(false);
-
+  const [blockRequestDisabled, setBlockRequestDisabled] = useState(false);
-  const [friendRequestDisabled, setfriendRequestDisabled] = useState(false);
 
   function _getFriendStatus() {
     const num = props.friendStatus;
@@ -35,8 +36,9 @@ export const ProfileActions = (props: {
     if (num == 2) {
       return 1;
     }
-    let z3 = (num == 0 && z2) || (num == 1 && !z2);
+    let z3 =
-    if ((num != 1 || z2) && (num != 0 || !z2)) {
+      (num == 0 && profileIdIsSmaller) || (num == 1 && !profileIdIsSmaller);
+    if ((num != 1 || profileIdIsSmaller) && (num != 0 || !profileIdIsSmaller)) {
       z = false;
     }
     if (z3) {
@@ -58,7 +60,8 @@ export const ProfileActions = (props: {
 
   function _addToFriends() {
     let url = `${ENDPOINTS.user.profile}/friend/request`;
-    setfriendRequestDisabled(true);
+    setFriendRequestDisabled(true);
+    setBlockRequestDisabled(true);
 
     FriendStatus == 1
       ? (url += "/remove/")
@@ -70,7 +73,22 @@ export const ProfileActions = (props: {
     fetch(url).then((res) => {
       setTimeout(() => {
         window.location.reload();
-      }, 1000);
+      }, 100);
+    });
+  }
+
+  function _addToBlocklist() {
+    let url = `${ENDPOINTS.user.profile}/blocklist`;
+    setBlockRequestDisabled(true);
+    setFriendRequestDisabled(true);
+
+    !props.is_blocked ? (url += "/add/") : (url += "/remove/");
+
+    url += `${props.profile_id}?token=${props.token}`;
+    fetch(url).then((res) => {
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
     });
   }
 
@@ -85,26 +103,34 @@ export const ProfileActions = (props: {
           <>
             {(!props.isFriendRequestsDisallowed ||
               FriendStatus == 1 ||
-              isRequestedStatus) && (
+              isRequestedStatus) &&
-              <Button
+              !props.is_me_blocked &&
-                disabled={friendRequestDisabled}
+              !props.is_blocked && (
-                color={
+                <Button
-                  FriendStatus == 1
+                  disabled={friendRequestDisabled}
-                    ? "red"
+                  color={
+                    FriendStatus == 1
+                      ? "red"
+                      : isRequestedStatus
+                      ? "light"
+                      : "blue"
+                  }
+                  onClick={() => _addToFriends()}
+                >
+                  {FriendStatus == 1
+                    ? "Удалить из друзей"
                     : isRequestedStatus
-                    ? "light"
+                    ? "Заявка отправлена"
-                    : "blue"
+                    : "Добавить в друзья"}
-                }
+                </Button>
-                onClick={() => _addToFriends()}
+              )}
-              >
+            <Button
-                {FriendStatus == 1
+              color={!props.is_blocked ? "red" : "blue"}
-                  ? "Удалить из друзей"
+              disabled={blockRequestDisabled}
-                  : isRequestedStatus
+              onClick={() => _addToBlocklist()}
-                  ? "Заявка отправлена"
+            >
-                  : "Добавить в друзья"}
+              {!props.is_blocked ? "Заблокировать" : "Разблокировать"}
-              </Button>
+            </Button>
-            )}
-            <Button color={"red"}>Заблокировать</Button>
           </>
         )}
       </div>

app/components/Profile/Profile.PrivacyBanner.tsx

@@ -1,12 +1,22 @@
-export const ProfilePrivacyBanner = (props: { is_privacy: boolean }) => {
+export const ProfilePrivacyBanner = (props: {
+  is_privacy: boolean;
+  is_me_blocked: boolean;
+}) => {
   return (
     <>
       {props.is_privacy && (
-        <div className="flex flex-col justify-between w-full p-4 border border-gray-200 rounded-md md:flex-row bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
+        <div
+          className={`flex flex-col justify-between w-full p-4 border rounded-md md:flex-row ${
+            !props.is_me_blocked
+              ? "border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
+              : "border-red-200 bg-red-50 dark:bg-red-700 dark:border-red-600"
+          }`}
+        >
           <div className="mb-4 md:mb-0 md:me-4">
             <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
-              У пользователя установлены настройки приватности. Некоторая
+              {!props.is_me_blocked
-              информация для вас может быть недоступна.
+                ? "У пользователя установлены настройки приватности. Некоторая информация для вас может быть недоступна."
+                : "Вы заблокированы данным пользователем. Его информация для вас не доступна."}
             </p>
           </div>
         </div>

app/components/Profile/Profile.User.tsx

@@ -48,7 +48,7 @@ export const ProfileUser = (props: {
             <Chip bg_color="bg-yellow-500" name="Спонсор Anixart" />
           )}
           {props.chips.isBlocked && (
-            <Chip bg_color="bg-yellow-500" name="Заблокирован" />
+            <Chip bg_color="bg-red-500" name="Заблокирован" />
           )}
           {props.chips.roles &&
             props.chips.roles.length > 0 &&

app/pages/Profile.tsx

@@ -98,7 +98,7 @@ export const ProfilePage = (props: any) => {
           ban_reason={user.ban_reason}
           ban_expires={user.ban_expires}
         />
-        <ProfilePrivacyBanner is_privacy={isPrivacy} />
+        <ProfilePrivacyBanner is_privacy={isPrivacy} is_me_blocked={user.is_me_blocked} />
       </div>
       <div
         className={`flex flex-wrap gap-2 ${
@@ -155,6 +155,8 @@ export const ProfilePage = (props: any) => {
               friendStatus={user.friend_status}
               my_profile_id={authUser.user.id}
               token={authUser.token}
+              is_me_blocked={user.is_me_blocked}
+              is_blocked={user.is_blocked}
             />
           )}
           {!user.is_stats_hidden && (