mirror of
https://github.com/docmost/docmost.git
synced 2025-11-13 08:02:37 +10:00
fix profile image
This commit is contained in:
@ -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}>
|
||||||
|
|||||||
@ -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) => {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user