resolve the crop issues

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<string[]>(
     []
   );
+  const [avatarPreview] = useState<null | string>();
   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 (
     <div className={styles.menu}>
@@ -97,7 +109,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) {
               <Link href={`/profile/${getUserProfileUrl(user)}`}>
                 <a>
                   <Avatar
-                    src={user?.photo}
+                    src={avatarSrc}
                     size="large"
                     alt="Avatar"
                     icon={<UserOutlined />}

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<any[]>([]);
   const [skills, setSkills] = useState<any[]>([]);
   const [date, setDate] = useState<String>("");
-
+  const [avatarPreview] = useState<null | string>();
   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 (
     <>
       <Row justify="center" align="middle">
@@ -112,7 +123,7 @@ function Profile({ id, role }: Props) {
               xl: 200,
               xxl: 200,
             }}
-            src={info?.photo}
+            src={avatarSrc}
             icon={<UserOutlined />}
           />
           <Row justify="center" align="middle">

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<null | string>();
 
 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<void | File | string>();
   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 (
     <>
       <Row
@@ -211,39 +223,18 @@ function Register({ cities }: any) {
             >
               <ImgCrop>
                 <Upload
-                  name="avatar"
                   accept="image/*"
+                  maxCount={1}
                   beforeUpload={(file: File) => {
-
-                    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)}
                 >
-                  <Button icon={<UploadOutlined />}>Selecionar</Button>
+                  <Button icon={<UploadOutlined />}>Upload</Button>
                 </Upload>
               </ImgCrop>
             </Form.Item>

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;
+  }
+}

apps/app/pages/admin/lectures/index.tsx

@@ -240,10 +240,7 @@ function Lectures() {
               onOk={handleOk}
               onCancel={handleOk}
             >
-
-
-
-          {/* const PresenceList: React.FC<PresenceListProps> = ({ attendees }) => {
+              {/* const PresenceList: React.FC<PresenceListProps> = ({ attendees }) => {
             const [presence, setPresence] = useState<boolean[]>(Array(attendees.length).fill(false));
 
             const handlePresenceChange = (index: number) => {
@@ -271,24 +268,6 @@ function Lectures() {
           export default PresenceList; 
  */}
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
               <Descriptions size="small" column={1} layout="horizontal">
                 <Descriptions.Item
                   labelStyle={labelStyle}

apps/app/pages/lectures/[role]/[id].tsx

@@ -97,7 +97,8 @@ function Lectures() {
                   {moment(new Date(lecture.event.start_time)).format(
                     "DD/MM/YYYY"
                   )}
-                </Text>1
+                </Text>
+                1
               </Col>
             </Row>
             <Row align="middle" gutter={[16, 16]}>

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<void | string>();
+  const [avatar, setAvatar] = useState<null | File | string>();
+  const [avatarPreview, setAvatarPreview] = useState<
+    null | string | undefined
+  >();
 
   const [userSkills, setUserSkills] = useState<any[]>([]);
   const [skills, setSkills] = useState<any[]>([]);
@@ -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() {
       <Form form={formPersonal} onFinish={onSubmit} layout="vertical">
         <Section title="Foto de Perfil" />
         <Space>
-          <Avatar size={100} src={avatar} />
+          <Avatar size={100} src={avatarPreview} />
           <Form.Item name="user[photo]">
             <ImgCrop>
               <Upload
                 accept="image/*"
                 maxCount={1}
-                beforeUpload={(file) => {
-                  base64(file);
+                beforeUpload={(file: File) => {
+                  setAvatar(file);
+                  getBase64(file, (result: string) => {
+                    setAvatarPreview(result);
+                  });
                   return false;
                 }}
                 onRemove={() => setAvatar(user?.photo)}