mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 15:54:39 +00:00
feat: add view of user blocklist
This commit is contained in:
parent
4aa48f589b
commit
8daab3b3c1
GPG key ID:
858E8EE696525EED
3 changed files with 193 additions and 2 deletions
|
|
@ -18,6 +18,7 @@ export const ENDPOINTS = {
|
|||
bookmark: `${API_PREFIX}/profile/list`,
|
||||
history: `${API_PREFIX}/history`,
|
||||
favorite: `${API_PREFIX}/favorite`,
|
||||
blocklist: `${API_PREFIX}/profile/blocklist`,
|
||||
settings: {
|
||||
my: `${API_PREFIX}/profile/preference/my`,
|
||||
login: {
|
||||
|
|
|
|||
177
app/components/Profile/Profile.BlockedUsersModal.tsx
Normal file
177
app/components/Profile/Profile.BlockedUsersModal.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import { ENDPOINTS } from "#/api/config";
|
||||
import { tryCatchAPI, unixToDate, useSWRfetcher } from "#/api/utils";
|
||||
import { Avatar, Button, Modal, useThemeMode } from "flowbite-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
import { Spinner } from "../Spinner/Spinner";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export const ProfileBlockedUsersModal = (props: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
token: string;
|
||||
profile_id: number;
|
||||
}) => {
|
||||
const [currentRef, setCurrentRef] = useState<any>(null);
|
||||
const theme = useThemeMode();
|
||||
const [actionsDisabled, setActionsDisabled] = useState(false);
|
||||
const [unblockedUsers, setUnblockedUsers] = useState([]);
|
||||
|
||||
const modalRef = useCallback((ref) => {
|
||||
setCurrentRef(ref);
|
||||
}, []);
|
||||
|
||||
const getKey = (pageIndex: number, previousPageData: any) => {
|
||||
if (previousPageData && !previousPageData.content.length) return null;
|
||||
let url = `${ENDPOINTS.user.blocklist}/all/${pageIndex}?token=${props.token}`;
|
||||
return url;
|
||||
};
|
||||
|
||||
const { data, error, isLoading, size, setSize } = useSWRInfinite(
|
||||
getKey,
|
||||
useSWRfetcher,
|
||||
{ initialSize: 2 }
|
||||
);
|
||||
|
||||
async function _addToBlocklist(profile_id) {
|
||||
setActionsDisabled(true);
|
||||
|
||||
const tid = toast.loading(
|
||||
unblockedUsers.includes(profile_id) ?
|
||||
"Блокируем пользователя..."
|
||||
: "Разблокируем пользователя...",
|
||||
{
|
||||
position: "bottom-center",
|
||||
hideProgressBar: true,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: false,
|
||||
draggable: false,
|
||||
theme: theme.mode == "light" ? "light" : "dark",
|
||||
}
|
||||
);
|
||||
|
||||
let url = `${ENDPOINTS.user.blocklist}`;
|
||||
unblockedUsers.includes(profile_id) ?
|
||||
(url += "/add/")
|
||||
: (url += "/remove/");
|
||||
url += `${profile_id}?token=${props.token}`;
|
||||
|
||||
const { data, error } = await tryCatchAPI(fetch(url));
|
||||
if (error) {
|
||||
toast.update(tid, {
|
||||
render:
|
||||
unblockedUsers.includes(profile_id) ?
|
||||
"Ошибка блокировки"
|
||||
: "Ошибка разблокировки",
|
||||
type: "error",
|
||||
autoClose: 2500,
|
||||
isLoading: false,
|
||||
closeOnClick: true,
|
||||
draggable: true,
|
||||
});
|
||||
setActionsDisabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.update(tid, {
|
||||
render:
|
||||
unblockedUsers.includes(profile_id) ?
|
||||
"Пользователь заблокирован"
|
||||
: "Пользователь разблокирован",
|
||||
type: "success",
|
||||
autoClose: 2500,
|
||||
isLoading: false,
|
||||
closeOnClick: true,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (unblockedUsers.includes(profile_id)) {
|
||||
setUnblockedUsers((prev) => {
|
||||
return prev.filter((item) => item !== profile_id);
|
||||
});
|
||||
} else {
|
||||
setUnblockedUsers((prev) => {
|
||||
return [...prev, profile_id];
|
||||
});
|
||||
}
|
||||
setActionsDisabled(false);
|
||||
}
|
||||
|
||||
const [content, setContent] = useState([]);
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
let allReleases = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
allReleases.push(...data[i].content);
|
||||
}
|
||||
setContent(allReleases);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
function handleScroll() {
|
||||
const height = currentRef.scrollHeight - currentRef.clientHeight;
|
||||
const windowScroll = currentRef.scrollTop;
|
||||
const scrolled = (windowScroll / height) * 100;
|
||||
setScrollPosition(Math.floor(scrolled));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollPosition >= 95 && scrollPosition <= 96) {
|
||||
setSize(size + 1);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scrollPosition]);
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
dismissible
|
||||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
size={"7xl"}
|
||||
>
|
||||
<Modal.Header>Заблокированные пользователи</Modal.Header>
|
||||
<div
|
||||
className="flex flex-col gap-2 p-4 overflow-y-auto"
|
||||
onScroll={handleScroll}
|
||||
ref={modalRef}
|
||||
>
|
||||
{content && content.length > 0 ?
|
||||
content.map((user) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2" key={`blockeduser-${user.id}`}>
|
||||
<div className="flex gap-2">
|
||||
<Avatar
|
||||
alt=""
|
||||
img={user.avatar}
|
||||
rounded={true}
|
||||
size={"md"}
|
||||
bordered={true}
|
||||
color={user.is_online ? "success" : "light"}
|
||||
className="flex-shrink-0"
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-lg font-semibold">{user.login}</p>
|
||||
<p>Заблокирован: {unixToDate(user.added_date, "full")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
color={!unblockedUsers.includes(user.id) ? "blue" : "red"}
|
||||
onClick={() => _addToBlocklist(user.id)}
|
||||
disabled={actionsDisabled}
|
||||
className="flex-grow-0 h-fit"
|
||||
>
|
||||
{!unblockedUsers.includes(user.id) ?
|
||||
"Разблокировать"
|
||||
: "Заблокировать"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: "Нет заблокированных пользователей"}
|
||||
{isLoading && <Spinner />}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -14,6 +14,7 @@ import { useSWRConfig } from "swr";
|
|||
import { useUserStore } from "#/store/auth";
|
||||
import { ProfileEditLoginModal } from "./Profile.EditLoginModal";
|
||||
import { toast } from "react-toastify";
|
||||
import { ProfileBlockedUsersModal } from "./Profile.BlockedUsersModal";
|
||||
|
||||
export const ProfileEditModal = (props: {
|
||||
isOpen: boolean;
|
||||
|
|
@ -25,6 +26,7 @@ export const ProfileEditModal = (props: {
|
|||
const [statusModalOpen, setStatusModalOpen] = useState(false);
|
||||
const [socialModalOpen, setSocialModalOpen] = useState(false);
|
||||
const [loginModalOpen, setLoginModalOpen] = useState(false);
|
||||
const [blockedModalOpen, setBlockedModalOpen] = useState(false);
|
||||
const [privacyModalSetting, setPrivacyModalSetting] = useState("none");
|
||||
const [privacySettings, setPrivacySettings] = useState({
|
||||
privacy_stats: 9,
|
||||
|
|
@ -355,13 +357,18 @@ export const ProfileEditModal = (props: {
|
|||
}
|
||||
</p>
|
||||
</button>
|
||||
{/* <button className="p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
|
||||
<button
|
||||
className="p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
|
||||
onClick={() => {
|
||||
setBlockedModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">Блоклист</p>
|
||||
<p className="text-base text-gray-500 dark:text-gray-400">
|
||||
Список пользователей, которым запрещён доступ к вашей
|
||||
странице
|
||||
</p>
|
||||
</button> */}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -431,6 +438,12 @@ export const ProfileEditModal = (props: {
|
|||
setLogin={setLogin}
|
||||
profile_id={props.profile_id}
|
||||
/>
|
||||
<ProfileBlockedUsersModal
|
||||
isOpen={blockedModalOpen}
|
||||
setIsOpen={setBlockedModalOpen}
|
||||
token={props.token}
|
||||
profile_id={props.profile_id}
|
||||
/>
|
||||
</>
|
||||
: ""}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue