fix: cropImage upload through the preview is not working

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,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 (
     <div className={styles.menu}>
@@ -97,7 +108,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/LectureForm/index.js

@@ -54,12 +54,12 @@ export default function LectureForm({ id }) {
 
   let promise;
 
-  const fetchData = () => {
+  const fetchData = useCallback(() => {
     if (!promise) {
       promise = Promise.all(events.map((event) => getNinjaEvents(event.id)));
     }
     return promise;
-  };
+  }, [events]);
 
   useEffect(() => {
     fetchData().then((responses) => {
@@ -71,7 +71,7 @@ export default function LectureForm({ id }) {
         )
       );
     });
-  }, [events]);
+  }, [fetchData]);
 
   const [filteredNinjas, setFilteredNinjas] = useState([]);
   const handleEventChange = useCallback(

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,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 (
     <>
       <Row justify="center" align="middle">
@@ -112,7 +122,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

@@ -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<void | File | string>();
+  const [avatarPreview, setAvatarPreview] = useState<null | string>();
   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 (
     <>
       <Row
@@ -205,24 +218,22 @@ function Register({ cities }: any) {
               label="Foto de perfil"
               valuePropName="avatar"
             >
-              <Upload
-                name="avatar"
-                accept="image/*"
-                beforeUpload={(file) => {
-                  getBase64(file, (imageUrl: any) => setAvatar(imageUrl));
-                  return false;
-                }}
-                onRemove={() => setAvatar(null)}
-                multiple={false}
-                maxCount={1}
-                showUploadList={{
-                  showDownloadIcon: false,
-                  showPreviewIcon: false,
-                  showRemoveIcon: true,
-                }}
-              >
-                <Button icon={<UploadOutlined />}>Selecionar</Button>
-              </Upload>
+              <ImgCrop>
+                <Upload
+                  accept="image/*"
+                  maxCount={1}
+                  beforeUpload={(file: File) => {
+                    setAvatar(file);
+                    getBase64(file, (result: string) => {
+                      setAvatarPreview(result);
+                    });
+                    return false;
+                  }}
+                  onRemove={() => setAvatar(user?.photo)}
+                >
+                  <Button icon={<UploadOutlined />}>Upload</Button>
+                </Upload>
+              </ImgCrop>
             </Form.Item>
             {user?.role == EUser.Mentor && (
               <Form.Item name="user[socials]" label="Redes Sociais">

apps/app/lib/images.js → 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);

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,7 +65,10 @@ function Settings() {
   const { user, edit_user, isLoading } = useAuth();
   const [formPersonal] = Form.useForm();
   const [formPassword] = Form.useForm();
-  const [avatar, setAvatar] = useState<undefined | 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[]>([]);
@@ -78,6 +84,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 +232,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 +276,27 @@ function Settings() {
           </Space>
         </Col>
       </Row>
-      <Form form={formPersonal} onFinish={edit_user} layout="vertical">
+      <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]">
-            <Upload
-              accept="image/*"
-              maxCount={1}
-              beforeUpload={(file) => {
-                getBase64(file, (imageUrl: any) => setAvatar(imageUrl));
-                return false;
-              }}
-              onRemove={() => setAvatar(user?.photo)}
-            >
-              <Button icon={<UploadOutlined />}>Upload</Button>
-            </Upload>
+            <ImgCrop>
+              <Upload
+                accept="image/*"
+                maxCount={1}
+                beforeUpload={(file: File) => {
+                  setAvatar(file);
+                  getBase64(file, (result: string) => {
+                    setAvatarPreview(result);
+                  });
+                  return false;
+                }}
+                onRemove={() => setAvatar(user?.photo)}
+              >
+                <Button icon={<UploadOutlined />}>Upload</Button>
+              </Upload>
+            </ImgCrop>
           </Form.Item>
         </Space>
         <Section title="Informações Pessoais" />

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

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]":