diff --git a/apps/app/components/AppMenu/index.tsx b/apps/app/components/AppMenu/index.tsx index 5ae11d8a..2658d749 100644 --- a/apps/app/components/AppMenu/index.tsx +++ b/apps/app/components/AppMenu/index.tsx @@ -16,7 +16,7 @@ import { UsergroupAddOutlined, } from "@ant-design/icons"; import { useAuth } from "@coderdojobraga/ui"; -import { EUser, IUser } from "bokkenjs"; +import { API_URL, EUser, IUser } from "bokkenjs"; import styles from "./style.module.css"; @@ -49,6 +49,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { const [secondarySelectedKeys, setSecondarySelectedKeys] = useState( [] ); + const [avatarPreview] = useState(); const handleClickPrimary = ({ key }: { key: string }) => { router.push(key); setPrimarySelectedKeys([key]); @@ -60,6 +61,16 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { setPrimarySelectedKeys([]); setSecondarySelectedKeys([key]); }; + let avatarSrc; + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { + avatarSrc = `${API_URL}${user.photo}`; + } else { + avatarSrc = user?.photo; + } return (
@@ -97,7 +108,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { } diff --git a/apps/app/components/LectureForm/index.js b/apps/app/components/LectureForm/index.js index 32ba42d6..61db158c 100644 --- a/apps/app/components/LectureForm/index.js +++ b/apps/app/components/LectureForm/index.js @@ -52,6 +52,7 @@ export default function LectureForm({ id }) { }, []); const [ninjas, setNinjas] = useState([]); + const fetchData = useCallback(() => { let promise; @@ -72,7 +73,7 @@ export default function LectureForm({ id }) { ) ); }); - }, [fetchData]); + }, [fetchData, events]); const [filteredNinjas, setFilteredNinjas] = useState([]); const handleEventChange = useCallback( diff --git a/apps/app/components/Profile/index.tsx b/apps/app/components/Profile/index.tsx index caa8037a..07d878d3 100644 --- a/apps/app/components/Profile/index.tsx +++ b/apps/app/components/Profile/index.tsx @@ -20,7 +20,7 @@ import * as api from "bokkenjs"; import * as socials from "~/lib/social"; import { notifyError, notifyInfo } from "~/components/Notification"; import styles from "./style.module.css"; -import { EUser } from "bokkenjs"; +import { API_URL, EUser } from "bokkenjs"; import { BsFileEarmarkPersonFill } from "react-icons/bs"; @@ -40,7 +40,7 @@ function Profile({ id, role }: Props) { const [projects, setProjects] = useState([]); const [skills, setSkills] = useState([]); const [date, setDate] = useState(""); - + const [avatarPreview] = useState(); useEffect(() => { api .getUserByRole({ id, role }) @@ -99,6 +99,16 @@ function Profile({ id, role }: Props) { setDate(moment(info.since).format("DD/MM/YYYY")); }, [info]); + let avatarSrc; + if ( + !avatarPreview && + typeof info?.photo === "string" && + info?.photo.startsWith("/uploads/") + ) { + avatarSrc = `${API_URL}${info.photo}`; + } else { + avatarSrc = info?.photo; + } return ( <> @@ -112,7 +122,7 @@ function Profile({ id, role }: Props) { xl: 200, xxl: 200, }} - src={info?.photo} + src={avatarSrc} icon={} /> diff --git a/apps/app/components/Register/index.tsx b/apps/app/components/Register/index.tsx index 7449bad7..bb182f4b 100644 --- a/apps/app/components/Register/index.tsx +++ b/apps/app/components/Register/index.tsx @@ -27,7 +27,7 @@ import Emoji from "~/components/Emoji"; import styles from "./style.module.css"; import { useState } from "react"; -import { EUser } from "bokkenjs"; +import { API_URL, EUser } from "bokkenjs"; import { notifyError, notifyInfo } from "~/components/Notification"; import { getIcon } from "~/lib/utils"; @@ -48,7 +48,8 @@ function Register({ cities }: any) { const { user } = useAuth(); const [isLoading, setLoading] = useState(false); const [errors, setErrors] = useState(); - const [avatar, setAvatar] = useState(null); + const [avatar, setAvatar] = useState(); + const [avatarPreview, setAvatarPreview] = useState(); const [socials] = useState([ "Scratch", "Codewars", @@ -60,7 +61,8 @@ function Register({ cities }: any) { ]); const onFinish = (values: any) => { - console.log(values); + values["user[photo]"] = avatar; + setLoading(true); api .registerUser(values) @@ -78,6 +80,17 @@ function Register({ cities }: any) { .finally(() => setLoading(false)); }; + let avatarSrc; + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { + avatarSrc = `${API_URL}${user.photo}`; + } else { + avatarSrc = user?.photo; + } + return ( <> - } /> + } /> @@ -205,24 +218,22 @@ function Register({ cities }: any) { label="Foto de perfil" valuePropName="avatar" > - { - getBase64(file, (imageUrl: any) => setAvatar(imageUrl)); - return false; - }} - onRemove={() => setAvatar(null)} - multiple={false} - maxCount={1} - showUploadList={{ - showDownloadIcon: false, - showPreviewIcon: false, - showRemoveIcon: true, - }} - > - - + + { + setAvatar(file); + getBase64(file, (result: string) => { + setAvatarPreview(result); + }); + return false; + }} + onRemove={() => setAvatar(user?.photo)} + > + + + {user?.role == EUser.Mentor && ( diff --git a/apps/app/lib/images.js b/apps/app/lib/images.ts similarity index 69% rename from apps/app/lib/images.js rename to apps/app/lib/images.ts index f0dac682..19168806 100644 --- a/apps/app/lib/images.js +++ b/apps/app/lib/images.ts @@ -1,4 +1,4 @@ -export function getBase64(img, callback) { +export function getBase64(img: File, callback: Function) { const reader = new FileReader(); reader.addEventListener("load", () => callback(reader.result)); reader.readAsDataURL(img); diff --git a/apps/app/pages/settings.tsx b/apps/app/pages/settings.tsx index 7bc96dd6..ac817254 100644 --- a/apps/app/pages/settings.tsx +++ b/apps/app/pages/settings.tsx @@ -13,8 +13,10 @@ import { Typography, Upload, } from "antd"; +import ImgCrop from "antd-img-crop"; import moment from "moment"; import { + ConsoleSqlOutlined, MinusCircleOutlined, PlusOutlined, UploadOutlined, @@ -24,6 +26,7 @@ import { useAuth } from "@coderdojobraga/ui"; import { notifyError, notifyInfo } from "~/components/Notification"; import { getIcon } from "~/lib/utils"; import { + API_URL, EUser, addMentorSkills, addNinjaSkills, @@ -62,8 +65,8 @@ function Settings() { const { user, edit_user, isLoading } = useAuth(); const [formPersonal] = Form.useForm(); const [formPassword] = Form.useForm(); - const [avatar, setAvatar] = useState(); - + const [avatar, setAvatar] = useState(); + const [avatarPreview, setAvatarPreview] = useState(); const [userSkills, setUserSkills] = useState([]); const [skills, setSkills] = useState([]); const [selectedSkills, setSelectedSkills] = useState([]); @@ -78,6 +81,22 @@ function Settings() { "Slack", ]); + if ( + !avatarPreview && + typeof avatar === "string" && + avatar.startsWith("/uploads/") + ) { + setAvatarPreview(API_URL + avatar); + } + + const onSubmit = (values: any) => { + if (avatar) { + values["user[photo]"] = avatar; + } + + edit_user(values); + }; + const getAllSkills = () => { getSkills() .then((response) => setSkills(response.data)) @@ -210,7 +229,9 @@ function Settings() { }, [user?.role, user?.mentor_id, formPersonal]); useEffect(() => { - setAvatar(user?.photo); + if (user?.photo) { + setAvatar(user?.photo); + } getUserSkills(); getAllSkills(); }, [user, getUserSkills]); @@ -252,22 +273,27 @@ function Settings() { -
+
- + - { - getBase64(file, (imageUrl: any) => setAvatar(imageUrl)); - return false; - }} - onRemove={() => setAvatar(user?.photo)} - > - - + + { + setAvatar(file); + getBase64(file, (result: string) => { + setAvatarPreview(result); + }); + return false; + }} + onRemove={() => setAvatar(user?.photo)} + > + + +
diff --git a/packages/bokkenjs/lib/api.ts b/packages/bokkenjs/lib/api.ts index 73ffff01..149d2cc4 100644 --- a/packages/bokkenjs/lib/api.ts +++ b/packages/bokkenjs/lib/api.ts @@ -1,6 +1,6 @@ import axios, { AxiosInstance } from "axios"; -const API_URL = process.env.NEXT_PUBLIC_API_URL; +export const API_URL = process.env.NEXT_PUBLIC_API_URL; export const API: AxiosInstance = axios.create({ //TODO: replace this with environment diff --git a/packages/bokkenjs/lib/auth/auth.ts b/packages/bokkenjs/lib/auth/auth.ts index 41e28d27..840da1aa 100644 --- a/packages/bokkenjs/lib/auth/auth.ts +++ b/packages/bokkenjs/lib/auth/auth.ts @@ -56,7 +56,7 @@ export async function editUser(values: any) { switch (key) { case "user[photo]": - data.append(key, values[key].file); + data.append(key, values[key]); break; case "user[birthday]": @@ -107,7 +107,7 @@ export async function registerUser(values: any) { switch (key) { case "user[photo]": - data.append(key, values[key].file); + data.append(key, values[key]); break; case "user[birthday]":