From 8e34ff4a7dbb51bbf151097180400b43f4ec5ffd Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 20 Sep 2024 11:35:39 +0500
Subject: [PATCH] feat: add status preference edit

---
 app/api/config.ts                             |  1 +
 app/components/Profile/Profile.EditModal.tsx  | 24 +++++-
 .../Profile/Profile.EditStatusModal.tsx       | 84 +++++++++++++++++++
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 app/components/Profile/Profile.EditStatusModal.tsx

diff --git a/app/api/config.ts b/app/api/config.ts
index 9246acb..ca80d64 100644
--- a/app/api/config.ts
+++ b/app/api/config.ts
@@ -18,6 +18,7 @@ export const ENDPOINTS = {
     favorite: `${API_PREFIX}/favorite`,
     settings: {
       my: `${API_PREFIX}/profile/preference/my`,
+      statusEdit: `${API_PREFIX}/profile/preference/status/edit`,
       statsEdit: `${API_PREFIX}/profile/preference/privacy/stats/edit`,
       countsEdit: `${API_PREFIX}/profile/preference/privacy/counts/edit`,
       socialEdit: `${API_PREFIX}/profile/preference/privacy/social/edit`,
diff --git a/app/components/Profile/Profile.EditModal.tsx b/app/components/Profile/Profile.EditModal.tsx
index 2b51462..160cc93 100644
--- a/app/components/Profile/Profile.EditModal.tsx
+++ b/app/components/Profile/Profile.EditModal.tsx
@@ -6,6 +6,7 @@ import useSWR from "swr";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { ProfileEditPrivacyModal } from "./Profile.EditPrivacyModal";
+import { ProfileEditStatusModal } from "./Profile.EditStatusModal";
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -27,6 +28,7 @@ export const ProfileEditModal = (props: {
   token: string;
 }) => {
   const [privacyModalOpen, setPrivacyModalOpen] = useState(false);
+  const [statusModalOpen, setStatusModalOpen] = useState(false);
   const [privacyModalSetting, setPrivacyModalSetting] = useState("none");
   const [privacySettings, setPrivacySettings] = useState({
     privacy_stats: 9,
@@ -38,6 +40,7 @@ export const ProfileEditModal = (props: {
     vk: false,
     google: false,
   });
+  const [status, setStatus] = useState("");
 
   const privacy_stat_act_social_text = {
     0: "Все пользователи",
@@ -68,6 +71,7 @@ export const ProfileEditModal = (props: {
         vk: data.is_vk_bound || data.isVkBound || false,
         google: data.is_google_bound || data.isGoogleBound || false,
       });
+      setStatus(data.status);
     }
   }, [data]);
 
@@ -95,10 +99,17 @@ export const ProfileEditModal = (props: {
                     Загрузить с устройства
                   </p>
                 </div>
-                <div>
+                <button
+                  className="p-2 text-left rounded-md hover:bg-gray-100"
+                  onClick={() => {
+                    setStatusModalOpen(true);
+                  }}
+                >
                   <p className="text-lg">Изменить статус</p>
-                  <p className="text-base text-gray-500">{data.status}</p>
-                </div>
+                  <p className="text-base text-gray-500 whitespace-pre">
+                    {status}
+                  </p>
+                </button>
                 <div>
                   <p className="text-lg">Изменить никнейм</p>
                 </div>
@@ -235,6 +246,13 @@ export const ProfileEditModal = (props: {
         privacySettings={privacySettings}
         setPrivacySettings={setPrivacySettings}
       />
+      <ProfileEditStatusModal
+        isOpen={statusModalOpen}
+        setIsOpen={setStatusModalOpen}
+        token={props.token}
+        status={status}
+        setStatus={setStatus}
+      />
     </>
   );
 };
diff --git a/app/components/Profile/Profile.EditStatusModal.tsx b/app/components/Profile/Profile.EditStatusModal.tsx
new file mode 100644
index 0000000..6044b55
--- /dev/null
+++ b/app/components/Profile/Profile.EditStatusModal.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { Button, Modal, Textarea } from "flowbite-react";
+import { ENDPOINTS } from "#/api/config";
+import { useEffect, useState } from "react";
+
+export const ProfileEditStatusModal = (props: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  token: string;
+  status: string;
+  setStatus: (status: string) => void;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [_status, _setStatus] = useState("");
+  const [_stringLength, _setStringLength] = useState(0);
+
+  useEffect(() => {
+    _setStatus(props.status);
+    _setStringLength(props.status.length);
+  }, [props.isOpen]);
+
+  function handleInput(e: any) {
+    _setStatus(e.target.value);
+    _setStringLength(e.target.value.length);
+  }
+
+  function _setStatusSetting() {
+    setLoading(true);
+    fetch(ENDPOINTS.user.settings.statusEdit, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        status: _status,
+      }),
+    })
+      .then((res) => {
+        if (res.ok) {
+          setLoading(false);
+          props.setStatus(_status);
+          props.setIsOpen(false);
+        } else {
+          new Error("failed to send data");
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  }
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+      size={"4xl"}
+    >
+      <Modal.Header>Изменить статус</Modal.Header>
+      <Modal.Body>
+        <Textarea
+          rows={3}
+          id="status"
+          className="w-full"
+          name="status"
+          onChange={(e) => handleInput(e)}
+          value={_status}
+          maxLength={80}
+        />
+        <p className="text-sm text-right text-gray-500 dark:text-gray-300">
+          {_stringLength}/80
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button color="blue" onClick={() => _setStatusSetting()}>Сохранить</Button>
+        <Button color="red" onClick={() => props.setIsOpen(false)}>
+          Отмена
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};