From 3e4fed3310ad4f6eafaaab37681253df232c36d5 Mon Sep 17 00:00:00 2001 From: Afonsos4ntos Date: Mon, 19 Jun 2023 16:19:39 +0100 Subject: [PATCH] resolve the cropIssues --- apps/app/components/AppMenu/index.tsx | 10 +++-- apps/app/components/Profile/index.tsx | 10 +++-- apps/app/components/Register/index.tsx | 54 +++++++++++-------------- apps/app/lib/images.ts | 16 ++++---- apps/app/pages/admin/lectures/index.tsx | 23 +---------- apps/app/pages/lectures/[role]/[id].tsx | 3 +- apps/app/pages/settings.tsx | 36 ++++++++--------- packages/bokkenjs/lib/auth/auth.ts | 2 - 8 files changed, 66 insertions(+), 88 deletions(-) diff --git a/apps/app/components/AppMenu/index.tsx b/apps/app/components/AppMenu/index.tsx index 98468550..857b0481 100644 --- a/apps/app/components/AppMenu/index.tsx +++ b/apps/app/components/AppMenu/index.tsx @@ -16,12 +16,10 @@ import { UsergroupAddOutlined, } from "@ant-design/icons"; import { useAuth } from "@coderdojobraga/ui"; -import { EUser, IUser,API_URL } from "bokkenjs"; +import { API_URL, EUser, IUser } from "bokkenjs"; import styles from "./style.module.css"; - - const { SubMenu, Item } = Menu; const { Text, Title } = Typography; @@ -64,7 +62,11 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) { setSecondarySelectedKeys([key]); }; let avatarSrc; - if (!avatarPreview && typeof user?.photo === 'string' && user?.photo.startsWith('/uploads/')) { + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { const previewUrl = `${API_URL}${user.photo}`; avatarSrc = previewUrl; } else { diff --git a/apps/app/components/Profile/index.tsx b/apps/app/components/Profile/index.tsx index cf564fc5..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, API_URL } from "bokkenjs"; +import { API_URL, EUser } from "bokkenjs"; import { BsFileEarmarkPersonFill } from "react-icons/bs"; @@ -29,8 +29,6 @@ import { getIcon } from "~/lib/utils"; const { TabPane } = Tabs; const { Title } = Typography; - - interface Props { id: string; role: EUser; @@ -102,7 +100,11 @@ function Profile({ id, role }: Props) { }, [info]); let avatarSrc; - if (!avatarPreview && typeof info?.photo === 'string' && info?.photo.startsWith('/uploads/')) { + if ( + !avatarPreview && + typeof info?.photo === "string" && + info?.photo.startsWith("/uploads/") + ) { const previewUrl = `${API_URL}${info.photo}`; avatarSrc = previewUrl; } else { diff --git a/apps/app/components/Register/index.tsx b/apps/app/components/Register/index.tsx index c92def67..7e006c6d 100644 --- a/apps/app/components/Register/index.tsx +++ b/apps/app/components/Register/index.tsx @@ -22,22 +22,18 @@ import { } from "@ant-design/icons"; import { useAuth } from "@coderdojobraga/ui"; import * as api from "bokkenjs"; -import {getBase64,getAvatarSrc} 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, API_URL } 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; const CountrySelect = () => ( @@ -48,15 +44,13 @@ const CountrySelect = () => ( ); - - function Register({ cities }: any) { const router = useRouter(); const { Title } = Typography; const { user } = useAuth(); const [isLoading, setLoading] = useState(false); const [errors, setErrors] = useState(); - const [avatar, setAvatar] = useState< void | File|string>(); + const [avatar, setAvatar] = useState(); const [socials] = useState([ "Scratch", "Codewars", @@ -67,7 +61,6 @@ function Register({ cities }: any) { "Slack", ]); - const onFinish = (values: any) => { console.log(avatar); values["user[photo]"] = avatar; @@ -89,11 +82,12 @@ function Register({ cities }: any) { .finally(() => setLoading(false)); }; - - - let avatarSrc; - if (!avatarPreview && typeof user?.photo === 'string' && user?.photo.startsWith('/uploads/')) { + if ( + !avatarPreview && + typeof user?.photo === "string" && + user?.photo.startsWith("/uploads/") + ) { const previewUrl = `${API_URL}${user.photo}`; avatarSrc = previewUrl; } else { @@ -227,22 +221,22 @@ function Register({ cities }: any) { label="Foto de perfil" valuePropName="avatar" > - - { - setAvatar(file); - getBase64(file, (result: string) => { - setAvatarPreview(result); - }); - return false; - }} - onRemove={() => setAvatar(user?.photo )} - > - - - + + { + 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.ts b/apps/app/lib/images.ts index 7fd7cdf7..0c0c3fc4 100644 --- a/apps/app/lib/images.ts +++ b/apps/app/lib/images.ts @@ -1,21 +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 getAvatarSrc( - avatarPreview: null | string | undefined , + avatarPreview: null | string | undefined, userPhoto: string | undefined, - API_URL: string | undefined, + API_URL: string | undefined ): string | undefined { - if (typeof avatarPreview === 'undefined' && typeof userPhoto === 'string' && userPhoto.startsWith('/uploads/')) { + if ( + typeof avatarPreview === "undefined" && + typeof userPhoto === "string" && + userPhoto.startsWith("/uploads/") + ) { const previewUrl = `${API_URL}${userPhoto}`; - console.log('previewUrl', previewUrl); + 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 44efc4db..dc52d487 100644 --- a/apps/app/pages/settings.tsx +++ b/apps/app/pages/settings.tsx @@ -22,7 +22,7 @@ import { PlusOutlined, UploadOutlined, } from "@ant-design/icons"; -import { getBase64, getAvatarSrc } 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"; @@ -67,9 +67,11 @@ function Settings() { const [formPersonal] = Form.useForm(); const [formPassword] = Form.useForm(); const [avatar, setAvatar] = useState(); - const [avatarPreview, setAvatarPreview] = useState(); + const [avatarPreview, setAvatarPreview] = useState< + null | string | undefined + >(); - const [userSkills, setUserSkills] = useState([]); + const [userSkills, setUserSkills] = useState([]); const [skills, setSkills] = useState([]); const [selectedSkills, setSelectedSkills] = useState([]); const [mentorSocials, setMentorSocials] = useState([]); @@ -82,20 +84,20 @@ function Settings() { "Discord", "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); + if ( + !avatarPreview && + typeof avatar === "string" && + avatar.startsWith("/uploads/") + ) { + console.log("avatar", API_URL + avatar); setAvatarPreview(API_URL + avatar); } - - - const onSubmit = (values: any) => { if (avatar) { @@ -200,8 +202,6 @@ function Settings() { } }; - - const changeSkills = () => { const deleted = userSkills .map((skill: any) => skill.id) @@ -241,9 +241,9 @@ function Settings() { useEffect(() => { if (user?.photo) { setAvatar(user?.photo); - }; - getUserSkills(); - getAllSkills(); + } + getUserSkills(); + getAllSkills(); }, [user, getUserSkills]); const breakpoints = { @@ -288,19 +288,19 @@ function Settings() { - + { + beforeUpload={(file: File) => { setAvatar(file); getBase64(file, (result: string) => { setAvatarPreview(result); }); return false; }} - onRemove={() => setAvatar(user?.photo )} - > + onRemove={() => setAvatar(user?.photo)} + > 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; } - -