From d7508a5e13754dbc0afb34068df9b1de425a9a77 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 20 Sep 2024 10:42:21 +0500 Subject: [PATCH] feat: add privacy setting set modal --- app/components/Profile/Profile.EditModal.tsx | 308 ++++++++++++------ .../Profile/Profile.EditPrivacyModal.tsx | 146 +++++++++ 2 files changed, 346 insertions(+), 108 deletions(-) create mode 100644 app/components/Profile/Profile.EditPrivacyModal.tsx diff --git a/app/components/Profile/Profile.EditModal.tsx b/app/components/Profile/Profile.EditModal.tsx index ac1857a..2b51462 100644 --- a/app/components/Profile/Profile.EditModal.tsx +++ b/app/components/Profile/Profile.EditModal.tsx @@ -4,6 +4,8 @@ import { Modal } from "flowbite-react"; import { Spinner } from "../Spinner/Spinner"; import useSWR from "swr"; import { ENDPOINTS } from "#/api/config"; +import { useEffect, useState } from "react"; +import { ProfileEditPrivacyModal } from "./Profile.EditPrivacyModal"; const fetcher = async (url: string) => { const res = await fetch(url); @@ -24,125 +26,215 @@ export const ProfileEditModal = (props: { setIsOpen: (isOpen: boolean) => void; token: string; }) => { + const [privacyModalOpen, setPrivacyModalOpen] = useState(false); + const [privacyModalSetting, setPrivacyModalSetting] = useState("none"); + const [privacySettings, setPrivacySettings] = useState({ + privacy_stats: 9, + privacy_counts: 9, + privacy_social: 9, + privacy_friend_requests: 9, + }); + const [socialBounds, setSocialBounds] = useState({ + vk: false, + google: false, + }); const privacy_stat_act_social_text = { - 0: 'Все пользователи', - 1: 'Только друзья', - 2: 'Только я' - } + 0: "Все пользователи", + 1: "Только друзья", + 2: "Только я", + 9: "Неизвестно", + }; const privacy_friend_req_text = { - 0: 'Все пользователи', - 1: 'Никто' - } + 0: "Все пользователи", + 1: "Никто", + 9: "Неизвестно", + }; 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 - } + `${ENDPOINTS.user.settings.my}?token=${props.token}`, + fetcher + ); + + useEffect(() => { + if (data) { + setPrivacySettings({ + privacy_stats: data.privacy_stats, + privacy_counts: data.privacy_counts, + privacy_social: data.privacy_social, + privacy_friend_requests: data.privacy_friend_requests, + }); + setSocialBounds({ + vk: data.is_vk_bound || data.isVkBound || false, + google: data.is_google_bound || data.isGoogleBound || false, + }); + } + }, [data]); return ( - props.setIsOpen(false)} - size={"7xl"} - > - Редактирование профиля - - {isLoading ? ( - - ) : ( -
-
-
- -

Профиль

-
-
-

Изменить фото профиля

-

Загрузить с устройства

-
-
-

Изменить статус

-

{data.status}

-
-
-

Изменить никнейм

-
-
-

Мои социальные сети

-

- укажите ссылки на свои страницы в соц. сетях -

-
-
-
-
- -

Приватность

-
-
-

- Кто видит мою статистику, оценки и историю просмотра -

-

{privacy_stat_act_social_text[data.privacy_stats]}

-
-
-

- Кто видит в профиле мои комментарии, коллекции, видео и друзей -

-

{privacy_stat_act_social_text[data.privacy_counts]}

-
-
-

- Кто видит в профиле мои социальные сети -

-

{privacy_stat_act_social_text[data.privacy_social]}

-
-
-

- Кто может отправлять мне заявки в друзья -

-

{privacy_friend_req_text[data.privacy_friend_requests]}

-
-
-

Блоклист

-

- Список пользователей, которым запрещён доступ к вашей странице -

-
-
+ <> + props.setIsOpen(false)} + size={"7xl"} + > + Редактирование профиля + + {isLoading ? ( + + ) : (
-
- -

- Безопасность и привязка к сервисам -

+
+
+ +

Профиль

+
+
+

Изменить фото профиля

+

+ Загрузить с устройства +

+
+
+

Изменить статус

+

{data.status}

+
+
+

Изменить никнейм

+
+
+

Мои социальные сети

+

+ укажите ссылки на свои страницы в соц. сетях +

+
-
-

Изменить Email или Пароль

-

- Изменить возможно только в мобильном приложении -

+
+
+ +

Приватность

+
+ + + + +
+

Блоклист

+

+ Список пользователей, которым запрещён доступ к вашей + странице +

+
-
-

Привязка к сервисам

-

- Изменить возможно только в мобильном приложении -

-

- {(socialBounds.vk || socialBounds.google) ? "Аккаунт привязан к:" : "не привязан к сервисам"} {socialBounds.vk && "ВК"}{socialBounds.vk && socialBounds.google && ", "}{socialBounds.google && "Google"} -

+
+
+ +

+ Безопасность и привязка к сервисам +

+
+
+

Изменить Email или Пароль

+

+ Изменить возможно только в мобильном приложении +

+
+
+

Привязка к сервисам

+

+ Изменить возможно только в мобильном приложении +

+

+ {socialBounds.vk || socialBounds.google + ? "Аккаунт привязан к:" + : "не привязан к сервисам"}{" "} + {socialBounds.vk && "ВК"} + {socialBounds.vk && socialBounds.google && ", "} + {socialBounds.google && "Google"} +

+
-
- )} - - + )} + + + + ); }; diff --git a/app/components/Profile/Profile.EditPrivacyModal.tsx b/app/components/Profile/Profile.EditPrivacyModal.tsx new file mode 100644 index 0000000..1f75d03 --- /dev/null +++ b/app/components/Profile/Profile.EditPrivacyModal.tsx @@ -0,0 +1,146 @@ +"use client"; + +import { Modal } from "flowbite-react"; +import { ENDPOINTS } from "#/api/config"; + +export const ProfileEditPrivacyModal = (props: { + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; + token: string; + setting: string; + privacySettings: { + privacy_stats: number; + privacy_counts: number; + privacy_social: number; + privacy_friend_requests: number; + }; + setPrivacySettings: (privacySettings: any) => void; +}) => { + + const setting_text = { + privacy_stats: "Кто видит мою статистику, оценки и историю просмотра", + privacy_counts: + "Кто видит в профиле мои комментарии, коллекции, видео и друзей", + privacy_social: "Кто видит в профиле мои социальные сети", + privacy_friend_requests: "Кто может отправлять мне заявки в друзья", + }; + + function _setPrivacySetting(el: any) { + let privacySettings = structuredClone(props.privacySettings); + privacySettings[el.target.name] = el.target.value; + props.setPrivacySettings(privacySettings); + } + + return ( + props.setIsOpen(false)} + size={"4xl"} + > + {setting_text[props.setting]} + + {props.setting != "none" ? ( + <> +
+ {props.setting == "privacy_friend_requests" ? ( + <> +
+ _setPrivacySetting(e)} + checked={props.privacySettings[props.setting] == 0} + id="default-radio-1" + type="radio" + value={0} + name={props.setting} + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +
+
+ _setPrivacySetting(e)} + checked={props.privacySettings[props.setting] == 1} + id="default-radio-2" + type="radio" + value={1} + name={props.setting} + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +
+ + ) : ( + <> +
+ _setPrivacySetting(e)} + checked={props.privacySettings[props.setting] == 0} + id="default-radio-1" + type="radio" + value={0} + name={props.setting} + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +
+
+ _setPrivacySetting(e)} + checked={props.privacySettings[props.setting] == 1} + id="default-radio-2" + type="radio" + value={1} + name={props.setting} + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +
+
+ _setPrivacySetting(e)} + checked={props.privacySettings[props.setting] == 2} + id="default-radio-3" + type="radio" + value={2} + name={props.setting} + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + /> + +
+ + )} +
+ + ) : ( + "" + )} + + + ); +};