fix profile image

This commit is contained in:
Philipinho
2024-06-22 04:48:29 +01:00
parent a3b690ac50
commit 81be99b404
4 changed files with 19 additions and 16 deletions

View File

@ -13,6 +13,7 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import { useCreateCommentMutation } from "@/features/comment/queries/comment-query"; import { useCreateCommentMutation } from "@/features/comment/queries/comment-query";
import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom"; import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
import { useEditor } from "@tiptap/react"; import { useEditor } from "@tiptap/react";
import { UserAvatar } from "@/components/ui/user-avatar.tsx";
interface CommentDialogProps { interface CommentDialogProps {
editor: ReturnType<typeof useEditor>; editor: ReturnType<typeof useEditor>;
@ -93,9 +94,12 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
> >
<Stack gap={2}> <Stack gap={2}>
<Group> <Group>
<Avatar size="sm" color="blue"> <UserAvatar
{currentUser.user.name.charAt(0)} color="blue"
</Avatar> size="sm"
avatarUrl={currentUser.user.avatarUrl}
name={currentUser.user.name}
/>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Group justify="space-between" wrap="nowrap"> <Group justify="space-between" wrap="nowrap">
<Text size="sm" fw={500} lineClamp={1}> <Text size="sm" fw={500} lineClamp={1}>

View File

@ -45,7 +45,7 @@ export function useCreateCommentMutation() {
//queryClient.setQueryData(RQ_KEY(data.pageId), comments); //queryClient.setQueryData(RQ_KEY(data.pageId), comments);
//} //}
queryClient.invalidateQueries({ queryKey: RQ_KEY(data.pageId) }); queryClient.refetchQueries({ queryKey: RQ_KEY(data.pageId) });
notifications.show({ message: "Comment created successfully" }); notifications.show({ message: "Comment created successfully" });
}, },
onError: (error) => { onError: (error) => {

View File

@ -13,23 +13,18 @@ export default function AccountAvatar() {
const [currentUser] = useAtom(currentUserAtom); const [currentUser] = useAtom(currentUserAtom);
const [, setUser] = useAtom(userAtom); const [, setUser] = useAtom(userAtom);
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const handleFileChange = async (selectedFile: File) => { const handleFileChange = async (selectedFile: File) => {
if (!selectedFile) { if (!selectedFile) {
return; return;
} }
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
setFile(selectedFile); setFile(selectedFile);
setPreviewUrl(URL.createObjectURL(selectedFile));
try { try {
setIsLoading(true); setIsLoading(true);
await uploadAvatar(selectedFile); const avatar = await uploadAvatar(selectedFile);
setUser((prev) => ({ ...prev, avatarUrl: avatar.fileName }));
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} finally { } finally {
@ -37,6 +32,8 @@ export default function AccountAvatar() {
} }
}; };
console.log(currentUser?.user.avatarUrl);
return ( return (
<> <>
<FileButton onChange={handleFileChange} accept="image/png,image/jpeg"> <FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
@ -47,8 +44,8 @@ export default function AccountAvatar() {
component="button" component="button"
radius="xl" radius="xl"
size="60px" size="60px"
avatarUrl={previewUrl || currentUser.user.avatarUrl} avatarUrl={currentUser?.user.avatarUrl}
name={currentUser.user.name} name={currentUser?.user.name}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
/> />
</Tooltip> </Tooltip>

View File

@ -1,5 +1,6 @@
import api from "@/lib/api-client"; import api from "@/lib/api-client";
import { ICurrentUser, IUser } from "@/features/user/types/user.types"; import { ICurrentUser, IUser } from "@/features/user/types/user.types";
import { IAttachment } from "@/lib/types.ts";
export async function getMyInfo(): Promise<ICurrentUser> { export async function getMyInfo(): Promise<ICurrentUser> {
const req = await api.post<ICurrentUser>("/users/me"); const req = await api.post<ICurrentUser>("/users/me");
@ -11,7 +12,7 @@ export async function updateUser(data: Partial<IUser>): Promise<IUser> {
return req.data as IUser; return req.data as IUser;
} }
export async function uploadAvatar(file: File) { export async function uploadAvatar(file: File): Promise<any> {
const formData = new FormData(); const formData = new FormData();
formData.append("type", "avatar"); formData.append("type", "avatar");
formData.append("image", file); formData.append("image", file);
@ -21,5 +22,6 @@ export async function uploadAvatar(file: File) {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
}); });
return req.data; console.log(req);
return req;
} }