From 043d8a7d895fb7487fcca095ade34cd65a78fb00 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Wed, 18 Sep 2024 22:09:43 +0500
Subject: [PATCH] feat: add settings loading

---
 app/api/config.ts                            |   3 +
 app/components/Profile/Profile.EditModal.tsx | 205 ++++++++++++-------
 app/pages/Profile.tsx                        |   2 +-
 3 files changed, 140 insertions(+), 70 deletions(-)

diff --git a/app/api/config.ts b/app/api/config.ts
index 9d0dd09..890377e 100644
--- a/app/api/config.ts
+++ b/app/api/config.ts
@@ -16,6 +16,9 @@ export const ENDPOINTS = {
     bookmark: `${API_PREFIX}/profile/list`,
     history: `${API_PREFIX}/history`,
     favorite: `${API_PREFIX}/favorite`,
+    settings: {
+      my: `${API_PREFIX}/profile/preference/my`,
+    }
   },
   filter: `${API_PREFIX}/filter`,
   search: `${API_URL}/search`,
diff --git a/app/components/Profile/Profile.EditModal.tsx b/app/components/Profile/Profile.EditModal.tsx
index 102118d..ac1857a 100644
--- a/app/components/Profile/Profile.EditModal.tsx
+++ b/app/components/Profile/Profile.EditModal.tsx
@@ -1,6 +1,50 @@
-import { Modal } from "flowbite-react";
+"use client";
+
+import { Modal } from "flowbite-react";
+import { Spinner } from "../Spinner/Spinner";
+import useSWR from "swr";
+import { ENDPOINTS } from "#/api/config";
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const error = new Error(
+      `An error occurred while fetching the data. status: ${res.status}`
+    );
+    error.message = await res.json();
+    throw error;
+  }
+
+  return res.json();
+};
+
+export const ProfileEditModal = (props: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  token: string;
+}) => {
+
+  const privacy_stat_act_social_text = {
+    0: 'Все пользователи',
+    1: 'Только друзья',
+    2: 'Только я'
+  }
+  const privacy_friend_req_text = {
+    0: 'Все пользователи',
+    1: 'Никто'
+  }
+
+  const { data, isLoading, error } = useSWR(
+      `${ENDPOINTS.user.settings.my}?token=${props.token}`,
+      fetcher
+      );
+      
+  const socialBounds = {
+    'vk': data.is_vk_bound || data.isVkBound || false,
+    'google': data.is_google_bound || data.isGoogleBound || false
+  }
 
-export const ProfileEditModal = (props: {isOpen: boolean, setIsOpen: (isOpen: boolean) => void}) => {
   return (
     <Modal
       dismissible
@@ -8,74 +52,97 @@ export const ProfileEditModal = (props: {isOpen: boolean, setIsOpen: (isOpen: bo
       onClose={() => props.setIsOpen(false)}
       size={"7xl"}
     >
-        <Modal.Header>Редактирование профиля</Modal.Header>
-        <Modal.Body>
-            <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
-                    <div className="flex items-center gap-2">
-                        <span className="w-8 h-8 iconify mdi--user"></span>
-                        <p className="text-xl font-semibold">Профиль</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Изменить фото профиля</p>
-                        <p className="text-lg text-gray-500">Загрузить с устройства</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Изменить статус</p>
-                        <p className="text-lg text-gray-500">статус</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Изменить никнейм</p>
-                        <p className="text-lg text-gray-500">никнейм</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Мои социальные сети</p>
-                        <p className="text-lg text-gray-500">укажите ссылки на свои страницы в соц. сетях</p>
-                    </div>
-                </div>
-                <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
-                    <div className="flex items-center gap-2">
-                        <span className="w-8 h-8 iconify mdi--anonymous "></span>
-                        <p className="text-xl font-semibold">Приватность</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Кто видит мою статистику, оценки и историю просмотра</p>
-                        <p className="text-lg text-gray-500">Все пользователи</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Кто видит в профиле мои комментарии, коллекции, видео и друзей</p>
-                        <p className="text-lg text-gray-500">Все пользователи</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Кто видит в профиле мои социальные сети</p>
-                        <p className="text-lg text-gray-500">Все пользователи</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Кто может отправлять мне заявки в друзья</p>
-                        <p className="text-lg text-gray-500">Все пользователи</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Блоклист</p>
-                        <p className="text-lg text-gray-500">Список пользователей, которым запрещён доступ к вашей странице</p>
-                    </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                    <div className="flex items-center gap-2">
-                        <span className="w-8 h-8 iconify mdi--shield"></span>
-                        <p className="text-xl font-semibold">Безопасность и привязка к сервисам</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Изменить Email или Пароль</p>
-                        <p className="text-lg text-gray-500">Изменить возможно только в мобильном приложении</p>
-                    </div>
-                    <div>
-                        <p className="text-lg">Привязка к сервисам</p>
-                        <p className="text-lg text-gray-500">Изменить возможно только в мобильном приложении</p>
-                        <p className="text-lg text-gray-500">Аккаунт привязан к: сер1, сер2</p>
-                    </div>
-                </div>
+      <Modal.Header>Редактирование профиля</Modal.Header>
+      <Modal.Body>
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
+              <div className="flex items-center gap-2">
+                <span className="w-8 h-8 iconify mdi--user"></span>
+                <p className="text-xl font-bold">Профиль</p>
+              </div>
+              <div>
+                <p className="text-lg">Изменить фото профиля</p>
+                <p className="text-base text-gray-500">Загрузить с устройства</p>
+              </div>
+              <div>
+                <p className="text-lg">Изменить статус</p>
+                <p className="text-base text-gray-500">{data.status}</p>
+              </div>
+              <div>
+                <p className="text-lg">Изменить никнейм</p>
+              </div>
+              <div>
+                <p className="text-lg">Мои социальные сети</p>
+                <p className="text-base text-gray-500">
+                  укажите ссылки на свои страницы в соц. сетях
+                </p>
+              </div>
             </div>
-        </Modal.Body>
+            <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
+              <div className="flex items-center gap-2">
+                <span className="w-8 h-8 iconify mdi--anonymous "></span>
+                <p className="text-xl font-bold">Приватность</p>
+              </div>
+              <div>
+                <p className="text-lg">
+                  Кто видит мою статистику, оценки и историю просмотра
+                </p>
+                <p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_stats]}</p>
+              </div>
+              <div>
+                <p className="text-lg">
+                  Кто видит в профиле мои комментарии, коллекции, видео и друзей
+                </p>
+                <p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_counts]}</p>
+              </div>
+              <div>
+                <p className="text-lg">
+                  Кто видит в профиле мои социальные сети
+                </p>
+                <p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_social]}</p>
+              </div>
+              <div>
+                <p className="text-lg">
+                  Кто может отправлять мне заявки в друзья
+                </p>
+                <p className="text-base text-gray-500">{privacy_friend_req_text[data.privacy_friend_requests]}</p>
+              </div>
+              <div>
+                <p className="text-lg">Блоклист</p>
+                <p className="text-base text-gray-500">
+                  Список пользователей, которым запрещён доступ к вашей странице
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center gap-2">
+                <span className="w-8 h-8 iconify mdi--shield"></span>
+                <p className="text-xl font-bold">
+                  Безопасность и привязка к сервисам
+                </p>
+              </div>
+              <div>
+                <p className="text-lg">Изменить Email или Пароль</p>
+                <p className="text-base text-gray-500">
+                  Изменить возможно только в мобильном приложении
+                </p>
+              </div>
+              <div>
+                <p className="text-lg">Привязка к сервисам</p>
+                <p className="text-base text-gray-500">
+                  Изменить возможно только в мобильном приложении
+                </p>
+                <p className="text-base text-gray-500">
+                  {(socialBounds.vk || socialBounds.google) ? "Аккаунт привязан к:" : "не привязан к сервисам"} {socialBounds.vk && "ВК"}{socialBounds.vk && socialBounds.google && ", "}{socialBounds.google && "Google"}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </Modal.Body>
     </Modal>
   );
 };
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index 0dccc46..2123708 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -207,7 +207,7 @@ export const ProfilePage = (props: any) => {
           )}
         </div>
       </div>
-      <ProfileEditModal isOpen={isOpen && isMyProfile} setIsOpen={setIsOpen} />
+      <ProfileEditModal isOpen={isOpen && isMyProfile} setIsOpen={setIsOpen} token={authUser.token} />
     </>
   );
 };