feat: add toast to user status change

This commit is contained in:
Kentai Radiquum 2025-03-21 16:03:58 +05:00
parent d8ebabb04e
commit 83ad889408
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 64 additions and 29 deletions

View file

@ -176,6 +176,7 @@ export const ProfileEditModal = (props: {
mutate( mutate(
`${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}`
); );
userStore.checkAuth();
} }
if (avatarModalProps.croppedImage) { if (avatarModalProps.croppedImage) {

View file

@ -1,9 +1,12 @@
"use client"; "use client";
import { Button, Modal, Textarea } from "flowbite-react"; import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSWRConfig } from "swr"; import { useSWRConfig } from "swr";
import { toast } from "react-toastify";
import { tryCatchAPI } from "#/api/utils";
import { useUserStore } from "#/store/auth";
export const ProfileEditStatusModal = (props: { export const ProfileEditStatusModal = (props: {
isOpen: boolean; isOpen: boolean;
@ -17,6 +20,8 @@ export const ProfileEditStatusModal = (props: {
const [_status, _setStatus] = useState(""); const [_status, _setStatus] = useState("");
const [_stringLength, _setStringLength] = useState(0); const [_stringLength, _setStringLength] = useState(0);
const { mutate } = useSWRConfig(); const { mutate } = useSWRConfig();
const theme = useThemeMode();
const userStore = useUserStore();
useEffect(() => { useEffect(() => {
_setStatus(props.status); _setStatus(props.status);
@ -29,33 +34,59 @@ export const ProfileEditStatusModal = (props: {
_setStringLength(e.target.value.length); _setStringLength(e.target.value.length);
} }
function _setStatusSetting() { async function _setStatusSetting() {
setLoading(true); setLoading(true);
fetch(`${ENDPOINTS.user.settings.status}?token=${props.token}`, {
method: "POST", const tid = toast.loading("Обновление статуса...", {
headers: { position: "bottom-center",
"Content-Type": "application/json", hideProgressBar: true,
}, closeOnClick: false,
body: JSON.stringify({ pauseOnHover: false,
status: _status, draggable: false,
}), theme: theme.mode == "light" ? "light" : "dark",
}) });
.then((res) => {
if (res.ok) { const { data, error } = await tryCatchAPI(
mutate( fetch(`${ENDPOINTS.user.settings.status}?token=${props.token}`, {
`${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` method: "POST",
); headers: {
setLoading(false); "Content-Type": "application/json",
props.setStatus(_status); },
props.setIsOpen(false); body: JSON.stringify({
} else { status: _status,
new Error("failed to send data"); }),
}
}) })
.catch((err) => { );
console.log(err);
setLoading(false); if (error) {
toast.update(tid, {
render: "Ошибка обновления статуса",
type: "error",
autoClose: 2500,
isLoading: false,
closeOnClick: true,
draggable: true,
}); });
setLoading(false);
return;
}
toast.update(tid, {
render: "Статус обновлён",
type: "success",
autoClose: 2500,
isLoading: false,
closeOnClick: true,
draggable: true,
});
props.setStatus(_status);
mutate(
`${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}`
);
userStore.checkAuth();
setLoading(false);
props.setIsOpen(false);
} }
return ( return (
@ -82,7 +113,13 @@ export const ProfileEditStatusModal = (props: {
</p> </p>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button color="blue" onClick={() => _setStatusSetting()} disabled={loading}>Сохранить</Button> <Button
color="blue"
onClick={() => _setStatusSetting()}
disabled={loading}
>
Сохранить
</Button>
<Button color="red" onClick={() => props.setIsOpen(false)}> <Button color="red" onClick={() => props.setIsOpen(false)}>
Отмена Отмена
</Button> </Button>

View file

@ -50,9 +50,6 @@ export const CreateCollectionPage = () => {
const [addedReleasesIds, setAddedReleasesIds] = useState([]); const [addedReleasesIds, setAddedReleasesIds] = useState([]);
const [releasesEditModalOpen, setReleasesEditModalOpen] = useState(false); const [releasesEditModalOpen, setReleasesEditModalOpen] = useState(false);
// const [tempImageUrl, setTempImageUrl] = useState<string>(null);
// const [cropModalOpen, setCropModalOpen] = useState(false);
const [imageModalProps, setImageModalProps] = useState({ const [imageModalProps, setImageModalProps] = useState({
isOpen: false, isOpen: false,
isActionsDisabled: false, isActionsDisabled: false,