From b192f93e9b2955bc71eed3387b463f714bf7fd5a Mon Sep 17 00:00:00 2001 From: Afonsos4ntos Date: Mon, 19 Jun 2023 16:11:39 +0100 Subject: [PATCH] resolve the crop issues --- apps/app/components/AppMenu/index.tsx | 16 ++++++- apps/app/components/Profile/index.tsx | 17 ++++++-- apps/app/components/Register/index.tsx | 57 +++++++++++-------------- apps/app/lib/images.ts | 41 ++++++++---------- apps/app/pages/admin/lectures/index.tsx | 23 +--------- apps/app/pages/lectures/[role]/[id].tsx | 3 +- apps/app/pages/settings.tsx | 45 +++++++++++++------ packages/bokkenjs/lib/api.ts | 2 +- packages/bokkenjs/lib/auth/auth.ts | 2 - 9 files changed, 105 insertions(+), 101 deletions(-) diff --git a/apps/app/components/AppMenu/index.tsx b/apps/app/components/AppMenu/index.tsx index 26cbd9c8..857b0481 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,17 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { setPrimarySelectedKeys([]); setSecondarySelectedKeys([key]); }; + let avatarSrc; + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { + const previewUrl = `${API_URL}${user.photo}`; + avatarSrc = previewUrl; + } else { + avatarSrc = user?.photo; + } return (
@@ -97,7 +109,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { } diff --git a/apps/app/components/Profile/index.tsx b/apps/app/components/Profile/index.tsx index caa8037a..18273310 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,17 @@ 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/") + ) { + const previewUrl = `${API_URL}${info.photo}`; + avatarSrc = previewUrl; + } else { + avatarSrc = info?.photo; + } return ( <> @@ -112,7 +123,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 c959d936..7e006c6d 100644 --- a/apps/app/components/Register/index.tsx +++ b/apps/app/components/Register/index.tsx @@ -22,18 +22,17 @@ import { } from "@ant-design/icons"; import { useAuth } from "@coderdojobraga/ui"; import * as api from "bokkenjs"; -import {dataURLtoFile} from "~/lib/images"; +import { getAvatarSrc, getBase64 } from "~/lib/images"; 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"; - - +const [avatarPreview, setAvatarPreview] = useState(); const { Option } = Select; @@ -51,7 +50,7 @@ function Register({ cities }: any) { const { user } = useAuth(); const [isLoading, setLoading] = useState(false); const [errors, setErrors] = useState(); - const [avatar, setAvatar] = useState< File | null>(null); + const [avatar, setAvatar] = useState(); const [socials] = useState([ "Scratch", "Codewars", @@ -61,6 +60,7 @@ function Register({ cities }: any) { "Discord", "Slack", ]); + const onFinish = (values: any) => { console.log(avatar); values["user[photo]"] = avatar; @@ -82,6 +82,18 @@ function Register({ cities }: any) { .finally(() => setLoading(false)); }; + let avatarSrc; + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { + const previewUrl = `${API_URL}${user.photo}`; + avatarSrc = previewUrl; + } else { + avatarSrc = user?.photo; + } + return ( <> { - - const reader = new FileReader(); - - reader.onload = function (event) { - if (event.target) { - - // Access the uploaded file data as a string - const imageDataURL = event.target.result as string; - - // Perform any necessary actions with the image data URL - console.log(typeof imageDataURL); - - // Convert the data URL back to a file object - const convertedFile = dataURLtoFile(imageDataURL, file.name); - setAvatar(convertedFile); - } - }; - reader.readAsDataURL(file); + setAvatar(file); + getBase64(file, (result: string) => { + setAvatarPreview(result); + }); return false; }} - //onRemove={() => setAvatar(null)} - multiple={false} - maxCount={1} - showUploadList={{ - showDownloadIcon: false, - showPreviewIcon: false, - showRemoveIcon: true, - }} + onRemove={() => setAvatar(user?.photo)} > - + diff --git a/apps/app/lib/images.ts b/apps/app/lib/images.ts index 337fc37b..0c0c3fc4 100644 --- a/apps/app/lib/images.ts +++ b/apps/app/lib/images.ts @@ -1,28 +1,23 @@ -export function getBase64(img:File, callback:Function) { +export function getBase64(img: File, callback: Function) { const reader = new FileReader(); reader.addEventListener("load", () => callback(reader.result)); reader.readAsDataURL(img); } -// export function dataURLtoFile(dataURL:string, filename:string) { -// const arr = dataURL.split(','); -// const expectedMimeTypes = ['image/jpeg', 'image/png']; - - -// const match = arr[0].match(/:(.*?);/); -// if (!match) return null; - -// const mime = match[1]; - -// if (!expectedMimeTypes.includes(mime) ) return null; - -// const bstr = atob(arr[1]); -// let n = bstr.length; -// const u8arr = new Uint8Array(n); - -// while (n--) { -// u8arr[n] = bstr.charCodeAt(n); -// } - -// return new File([u8arr], filename, { type: mime }); -// } +export function getAvatarSrc( + avatarPreview: null | string | undefined, + userPhoto: string | undefined, + API_URL: string | undefined +): string | undefined { + if ( + typeof avatarPreview === "undefined" && + typeof userPhoto === "string" && + userPhoto.startsWith("/uploads/") + ) { + const previewUrl = `${API_URL}${userPhoto}`; + console.log("previewUrl", previewUrl); + return previewUrl; + } else { + return userPhoto; + } +} diff --git a/apps/app/pages/admin/lectures/index.tsx b/apps/app/pages/admin/lectures/index.tsx index b4d72108..0a10e8d8 100644 --- a/apps/app/pages/admin/lectures/index.tsx +++ b/apps/app/pages/admin/lectures/index.tsx @@ -240,10 +240,7 @@ function Lectures() { onOk={handleOk} onCancel={handleOk} > - - - - {/* const PresenceList: React.FC = ({ attendees }) => { + {/* const PresenceList: React.FC = ({ attendees }) => { const [presence, setPresence] = useState(Array(attendees.length).fill(false)); const handlePresenceChange = (index: number) => { @@ -271,24 +268,6 @@ function Lectures() { export default PresenceList; */} - - - - - - - - - - - - - - - - - - 1 + + 1 diff --git a/apps/app/pages/settings.tsx b/apps/app/pages/settings.tsx index 99df48f9..dc52d487 100644 --- a/apps/app/pages/settings.tsx +++ b/apps/app/pages/settings.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from "react"; + import { Avatar, Button, @@ -16,15 +17,17 @@ import { import ImgCrop from "antd-img-crop"; import moment from "moment"; import { + ConsoleSqlOutlined, MinusCircleOutlined, PlusOutlined, UploadOutlined, } from "@ant-design/icons"; -import { getBase64 } from "~/lib/images"; +import { getAvatarSrc, getBase64 } from "~/lib/images"; import { useAuth } from "@coderdojobraga/ui"; import { notifyError, notifyInfo } from "~/components/Notification"; import { getIcon } from "~/lib/utils"; import { + API_URL, EUser, addMentorSkills, addNinjaSkills, @@ -63,7 +66,10 @@ 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< + null | string | undefined + >(); const [userSkills, setUserSkills] = useState([]); const [skills, setSkills] = useState([]); @@ -79,6 +85,20 @@ function Settings() { "Slack", ]); + // const avatarSrc = getAvatarSrc(avatarPreview, user?.photo, API_URL); + // if (avatarSrc !== avatarPreview) { + // setAvatarPreview(avatarSrc); + // } + + if ( + !avatarPreview && + typeof avatar === "string" && + avatar.startsWith("/uploads/") + ) { + console.log("avatar", API_URL + avatar); + setAvatarPreview(API_URL + avatar); + } + const onSubmit = (values: any) => { if (avatar) { values["user[photo]"] = avatar; @@ -182,12 +202,6 @@ function Settings() { } }; - const base64 = (file: any) => { - getBase64(file, (result: string) => { - setAvatar(result); - }); - }; - const changeSkills = () => { const deleted = userSkills .map((skill: any) => skill.id) @@ -227,9 +241,9 @@ function Settings() { useEffect(() => { if (user?.photo) { setAvatar(user?.photo); - }; - getUserSkills(); - getAllSkills(); + } + getUserSkills(); + getAllSkills(); }, [user, getUserSkills]); const breakpoints = { @@ -272,14 +286,17 @@ function Settings() {
- + { - base64(file); + beforeUpload={(file: File) => { + 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 e859201a..294b34c8 100644 --- a/packages/bokkenjs/lib/auth/auth.ts +++ b/packages/bokkenjs/lib/auth/auth.ts @@ -132,5 +132,3 @@ export async function registerUser(values: any) { return response.data; } - -