diff --git a/app/components/Profile/Profile.Actions.tsx b/app/components/Profile/Profile.Actions.tsx index 3ee6c83..cb6a927 100644 --- a/app/components/Profile/Profile.Actions.tsx +++ b/app/components/Profile/Profile.Actions.tsx @@ -3,6 +3,7 @@ import { ENDPOINTS } from "#/api/config"; import { Card, Button } from "flowbite-react"; import { useRouter } from "next/navigation"; import { useState } from "react"; +import useSWR, { useSWRConfig } from "swr"; // null - не друзья // 0 - заявка в друзья authUserId < profileId @@ -25,7 +26,7 @@ export const ProfileActions = (props: { const profileIdIsSmaller = props.my_profile_id < props.profile_id; const [friendRequestDisabled, setFriendRequestDisabled] = useState(false); const [blockRequestDisabled, setBlockRequestDisabled] = useState(false); - + const { mutate } = useSWRConfig(); function _getFriendStatus() { const num = props.friendStatus; @@ -71,8 +72,12 @@ export const ProfileActions = (props: { url += `${props.profile_id}?token=${props.token}`; fetch(url).then((res) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); setTimeout(() => { - window.location.reload(); + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); }, 100); }); } @@ -86,8 +91,12 @@ export const ProfileActions = (props: { url += `${props.profile_id}?token=${props.token}`; fetch(url).then((res) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); setTimeout(() => { - window.location.reload(); + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); }, 100); }); } diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index bbcf197..9bb6bad 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -2,8 +2,8 @@ import { useUserStore } from "#/store/auth"; import { useEffect, useState } from "react"; import { Spinner } from "../components/Spinner/Spinner"; -import { fetchDataViaGet } from "../api/utils"; import { ENDPOINTS } from "#/api/config"; +import useSWR from "swr"; import { ProfileUser } from "#/components/Profile/Profile.User"; import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; @@ -15,24 +15,35 @@ import { ProfileActions } from "#/components/Profile/Profile.Actions"; import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings"; import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory"; +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 ProfilePage = (props: any) => { const authUser = useUserStore(); const [user, setUser] = useState(null); const [isMyProfile, setIsMyProfile] = useState(false); + let url = `${ENDPOINTS.user.profile}/${props.id}`; + if (authUser.token) { + url += `?token=${authUser.token}`; + } + const { data } = useSWR(url, fetcher); + useEffect(() => { - async function _getData() { - let url = `${ENDPOINTS.user.profile}/${props.id}`; - if (authUser.token) { - url += `?token=${authUser.token}`; - } - const data = await fetchDataViaGet(url); + if (data) { setUser(data.profile); setIsMyProfile(data.is_my_profile); } - _getData(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [authUser]); + }, [data]); if (!user) { return ( @@ -98,7 +109,10 @@ export const ProfilePage = (props: any) => { ban_reason={user.ban_reason} ban_expires={user.ban_expires} /> - <ProfilePrivacyBanner is_privacy={isPrivacy} is_me_blocked={user.is_me_blocked} /> + <ProfilePrivacyBanner + is_privacy={isPrivacy} + is_me_blocked={user.is_me_blocked} + /> </div> <div className={`flex flex-wrap gap-2 ${