forked from Transparency/kgroad-frontend2
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import "./ProfileAvatar.scss";
|
|
import pen from "./icons/pen.svg";
|
|
import { apiInstance } from "@/shared/config/apiConfig";
|
|
import { useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface IProfileAvatarProps {
|
|
img: string;
|
|
}
|
|
|
|
const ProfileAvatar: React.FC<IProfileAvatarProps> = ({
|
|
img,
|
|
}: IProfileAvatarProps) => {
|
|
const session = useSession();
|
|
const router = useRouter();
|
|
const changeImage: React.ChangeEventHandler<
|
|
HTMLInputElement
|
|
> = async (e) => {
|
|
const Authorization = `Bearer ${session.data?.access_token}`;
|
|
const config = {
|
|
headers: {
|
|
Authorization,
|
|
},
|
|
};
|
|
const formData = new FormData();
|
|
if (e.target.files) {
|
|
const image = Array.from(e.target.files);
|
|
formData.append("image", image[0]);
|
|
}
|
|
|
|
try {
|
|
const res = await apiInstance.patch(
|
|
"/users/update_image/",
|
|
formData,
|
|
config
|
|
);
|
|
router.refresh();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="profile-avatar">
|
|
<img
|
|
className="profile-avatar__image"
|
|
src={img}
|
|
alt="User Image"
|
|
/>
|
|
<label htmlFor="profile-image">
|
|
<Image src={pen} alt="Pen Icon" />
|
|
</label>
|
|
<input onChange={changeImage} id="profile-image" type="file" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileAvatar;
|