update

apps/app/components/Register/index.tsx

@@ -22,7 +22,7 @@ import {
 } from "@ant-design/icons";
 import { useAuth } from "@coderdojobraga/ui";
 import * as api from "bokkenjs";
-import { getBase64 } from "~/lib/images";
+import {dataURLtoFile} from "~/lib/images";
 import Emoji from "~/components/Emoji";
 
 import styles from "./style.module.css";
@@ -32,6 +32,9 @@ import { notifyError, notifyInfo } from "~/components/Notification";
 
 import { getIcon } from "~/lib/utils";
 
+
+
+
 const { Option } = Select;
 
 const CountrySelect = () => (
@@ -48,7 +51,7 @@ function Register({ cities }: any) {
   const { user } = useAuth();
   const [isLoading, setLoading] = useState(false);
   const [errors, setErrors] = useState();
-  const [avatar, setAvatar] = useState<string | ArrayBuffer | null>(null);
+  const [avatar, setAvatar] = useState< File | null>(null);
   const [socials] = useState([
     "Scratch",
     "Codewars",
@@ -211,12 +214,21 @@ function Register({ cities }: any) {
                   name="avatar"
                   accept="image/*"
                   beforeUpload={(file: File) => {
+
                     const reader = new FileReader();
 
                     reader.onload = function (event) {
                       if (event.target) {
-                        console.log(typeof event.target.result);
-                        setAvatar(event.target.result);
+
+                        // 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);

apps/app/lib/images.ts

@@ -0,0 +1,28 @@
+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 });
+// }

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

@@ -240,6 +240,55 @@ function Lectures() {
               onOk={handleOk}
               onCancel={handleOk}
             >
+
+
+
+          {/* const PresenceList: React.FC<PresenceListProps> = ({ attendees }) => {
+            const [presence, setPresence] = useState<boolean[]>(Array(attendees.length).fill(false));
+
+            const handlePresenceChange = (index: number) => {
+              const updatedPresence = [...presence];
+              updatedPresence[index] = !updatedPresence[index];
+              setPresence(updatedPresence);
+            };
+
+            return (
+              <div>
+                {attendees.map((attendee, index) => (
+                  <div key={index}>
+                    <input
+                      type="checkbox"
+                      checked={presence[index]}
+                      onChange={() => handlePresenceChange(index)}
+                    />
+                    <label>{attendee}</label>
+                  </div>
+                ))}
+              </div>
+            );
+          };
+
+          export default PresenceList; 
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
               <Descriptions size="small" column={1} layout="horizontal">
                 <Descriptions.Item
                   labelStyle={labelStyle}

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

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

apps/app/pages/settings.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
   Upload,
 } from "antd";
+import ImgCrop from "antd-img-crop";
 import moment from "moment";
 import {
   MinusCircleOutlined,
@@ -62,7 +63,7 @@ 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<undefined| string  >();
 
   const [userSkills, setUserSkills] = useState<any[]>([]);
   const [skills, setSkills] = useState<any[]>([]);
@@ -78,6 +79,14 @@ function Settings() {
     "Slack",
   ]);
 
+  const onSubmit = (values: any) => {
+    if (avatar) {
+      values["user[photo]"] = avatar;
+    }
+
+    edit_user(values);
+  };
+
   const getAllSkills = () => {
     getSkills()
       .then((response) => setSkills(response.data))
@@ -210,9 +219,11 @@ function Settings() {
   }, [user?.role, user?.mentor_id, formPersonal]);
 
   useEffect(() => {
-    setAvatar(user?.photo);
-    getUserSkills();
-    getAllSkills();
+    if (user?.photo) {
+      setAvatar(user?.photo);
+    };
+   getUserSkills();
+   getAllSkills();
   }, [user, getUserSkills]);
 
   const breakpoints = {
@@ -252,22 +263,25 @@ 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} />
           <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) => {
+                  console.log(file);
+                  setAvatar(file.name);
+                  return false;
+                }}
+                onRemove={() => setAvatar(user?.photo as File | undefi)}
+              >
+                <Button icon={<UploadOutlined />}>Upload</Button>
+              </Upload>
+            </ImgCrop>
           </Form.Item>
         </Space>
         <Section title="Informações Pessoais" />

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]":
@@ -132,3 +132,5 @@ export async function registerUser(values: any) {
 
   return response.data;
 }
+
+

packages/ui/components/Auth/AuthProvider.tsx

@@ -81,6 +81,7 @@ export function AuthProvider({ children }: PropsWithChildren<Props>) {
 
   function edit_user(values: any) {
     setLoading(true);
+    console.log(values);
 
     api
       .editUser(values)