Skip to content

Commit b192f93

Browse files
Afonso-santosAfonso-santos
committed
resolve the crop issues
1 parent 0e3d560 commit b192f93

File tree

9 files changed

+105
-101
lines changed

9 files changed

+105
-101
lines changed

‎apps/app/components/AppMenu/index.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
UsergroupAddOutlined,
1717
} from "@ant-design/icons";
1818
import { useAuth } from "@coderdojobraga/ui";
19-
import { EUser, IUser } from "bokkenjs";
19+
import { API_URL, EUser, IUser } from "bokkenjs";
2020

2121
import styles from "./style.module.css";
2222

@@ -49,6 +49,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) {
4949
const [secondarySelectedKeys, setSecondarySelectedKeys] = useState<string[]>(
5050
[]
5151
);
52+
const [avatarPreview] = useState<null | string>();
5253
const handleClickPrimary = ({ key }: { key: string }) => {
5354
router.push(key);
5455
setPrimarySelectedKeys([key]);
@@ -60,6 +61,17 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) {
6061
setPrimarySelectedKeys([]);
6162
setSecondarySelectedKeys([key]);
6263
};
64+
let avatarSrc;
65+
if (
66+
!avatarPreview &&
67+
typeof user?.photo === "string" &&
68+
user?.photo.startsWith("/uploads/")
69+
) {
70+
const previewUrl = `${API_URL}${user.photo}`;
71+
avatarSrc = previewUrl;
72+
} else {
73+
avatarSrc = user?.photo;
74+
}
6375

6476
return (
6577
<div className={styles.menu}>
@@ -97,7 +109,7 @@ function AppMenu({ hidePrimaryMenu, collapsed }: any) {
97109
<Link href={`/profile/${getUserProfileUrl(user)}`}>
98110
<a>
99111
<Avatar
100-
src={user?.photo}
112+
src={avatarSrc}
101113
size="large"
102114
alt="Avatar"
103115
icon={<UserOutlined />}

‎apps/app/components/Profile/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import * as api from "bokkenjs";
2020
import * as socials from "~/lib/social";
2121
import { notifyError, notifyInfo } from "~/components/Notification";
2222
import styles from "./style.module.css";
23-
import { EUser } from "bokkenjs";
23+
import { API_URL, EUser } from "bokkenjs";
2424

2525
import { BsFileEarmarkPersonFill } from "react-icons/bs";
2626

@@ -40,7 +40,7 @@ function Profile({ id, role }: Props) {
4040
const [projects, setProjects] = useState<any[]>([]);
4141
const [skills, setSkills] = useState<any[]>([]);
4242
const [date, setDate] = useState<String>("");
43-
43+
const [avatarPreview] = useState<null | string>();
4444
useEffect(() => {
4545
api
4646
.getUserByRole({ id, role })
@@ -99,6 +99,17 @@ function Profile({ id, role }: Props) {
9999
setDate(moment(info.since).format("DD/MM/YYYY"));
100100
}, [info]);
101101

102+
let avatarSrc;
103+
if (
104+
!avatarPreview &&
105+
typeof info?.photo === "string" &&
106+
info?.photo.startsWith("/uploads/")
107+
) {
108+
const previewUrl = `${API_URL}${info.photo}`;
109+
avatarSrc = previewUrl;
110+
} else {
111+
avatarSrc = info?.photo;
112+
}
102113
return (
103114
<>
104115
<Row justify="center" align="middle">
@@ -112,7 +123,7 @@ function Profile({ id, role }: Props) {
112123
xl: 200,
113124
xxl: 200,
114125
}}
115-
src={info?.photo}
126+
src={avatarSrc}
116127
icon={<UserOutlined />}
117128
/>
118129
<Row justify="center" align="middle">

‎apps/app/components/Register/index.tsx‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,17 @@ import {
2222
} from "@ant-design/icons";
2323
import { useAuth } from "@coderdojobraga/ui";
2424
import * as api from "bokkenjs";
25-
import {dataURLtoFile} from "~/lib/images";
25+
import { getAvatarSrc, getBase64 } from "~/lib/images";
2626
import Emoji from "~/components/Emoji";
2727

2828
import styles from "./style.module.css";
2929
import { useState } from "react";
30-
import { EUser } from "bokkenjs";
30+
import { API_URL, EUser } from "bokkenjs";
3131
import { notifyError, notifyInfo } from "~/components/Notification";
3232

3333
import { getIcon } from "~/lib/utils";
3434

35-
36-
35+
const [avatarPreview, setAvatarPreview] = useState<null | string>();
3736

3837
const { Option } = Select;
3938

@@ -51,7 +50,7 @@ function Register({ cities }: any) {
5150
const { user } = useAuth();
5251
const [isLoading, setLoading] = useState(false);
5352
const [errors, setErrors] = useState();
54-
const [avatar, setAvatar] = useState< File | null>(null);
53+
const [avatar, setAvatar] = useState<void | File | string>();
5554
const [socials] = useState([
5655
"Scratch",
5756
"Codewars",
@@ -61,6 +60,7 @@ function Register({ cities }: any) {
6160
"Discord",
6261
"Slack",
6362
]);
63+
6464
const onFinish = (values: any) => {
6565
console.log(avatar);
6666
values["user[photo]"] = avatar;
@@ -82,6 +82,18 @@ function Register({ cities }: any) {
8282
.finally(() => setLoading(false));
8383
};
8484

85+
let avatarSrc;
86+
if (
87+
!avatarPreview &&
88+
typeof user?.photo === "string" &&
89+
user?.photo.startsWith("/uploads/")
90+
) {
91+
const previewUrl = `${API_URL}${user.photo}`;
92+
avatarSrc = previewUrl;
93+
} else {
94+
avatarSrc = user?.photo;
95+
}
96+
8597
return (
8698
<>
8799
<Row
@@ -211,39 +223,18 @@ function Register({ cities }: any) {
211223
>
212224
<ImgCrop>
213225
<Upload
214-
name="avatar"
215226
accept="image/*"
227+
maxCount={1}
216228
beforeUpload={(file: File) => {
217-
218-
const reader = new FileReader();
219-
220-
reader.onload = function (event) {
221-
if (event.target) {
222-
223-
// Access the uploaded file data as a string
224-
const imageDataURL = event.target.result as string;
225-
226-
// Perform any necessary actions with the image data URL
227-
console.log(typeof imageDataURL);
228-
229-
// Convert the data URL back to a file object
230-
const convertedFile = dataURLtoFile(imageDataURL, file.name);
231-
setAvatar(convertedFile);
232-
}
233-
};
234-
reader.readAsDataURL(file);
229+
setAvatar(file);
230+
getBase64(file, (result: string) => {
231+
setAvatarPreview(result);
232+
});
235233
return false;
236234
}}
237-
//onRemove={() => setAvatar(null)}
238-
multiple={false}
239-
maxCount={1}
240-
showUploadList={{
241-
showDownloadIcon: false,
242-
showPreviewIcon: false,
243-
showRemoveIcon: true,
244-
}}
235+
onRemove={() => setAvatar(user?.photo)}
245236
>
246-
<Button icon={<UploadOutlined />}>Selecionar</Button>
237+
<Button icon={<UploadOutlined />}>Upload</Button>
247238
</Upload>
248239
</ImgCrop>
249240
</Form.Item>

‎apps/app/lib/images.ts‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
1-
export function getBase64(img:File, callback:Function) {
1+
export function getBase64(img: File, callback: Function) {
22
const reader = new FileReader();
33
reader.addEventListener("load", () => callback(reader.result));
44
reader.readAsDataURL(img);
55
}
66

7-
// export function dataURLtoFile(dataURL:string, filename:string) {
8-
// const arr = dataURL.split(',');
9-
// const expectedMimeTypes = ['image/jpeg', 'image/png'];
10-
11-
12-
// const match = arr[0].match(/:(.*?);/);
13-
// if (!match) return null;
14-
15-
// const mime = match[1];
16-
17-
// if (!expectedMimeTypes.includes(mime) ) return null;
18-
19-
// const bstr = atob(arr[1]);
20-
// let n = bstr.length;
21-
// const u8arr = new Uint8Array(n);
22-
23-
// while (n--) {
24-
// u8arr[n] = bstr.charCodeAt(n);
25-
// }
26-
27-
// return new File([u8arr], filename, { type: mime });
28-
// }
7+
export function getAvatarSrc(
8+
avatarPreview: null | string | undefined,
9+
userPhoto: string | undefined,
10+
API_URL: string | undefined
11+
): string | undefined {
12+
if (
13+
typeof avatarPreview === "undefined" &&
14+
typeof userPhoto === "string" &&
15+
userPhoto.startsWith("/uploads/")
16+
) {
17+
const previewUrl = `${API_URL}${userPhoto}`;
18+
console.log("previewUrl", previewUrl);
19+
return previewUrl;
20+
} else {
21+
return userPhoto;
22+
}
23+
}

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -240,10 +240,7 @@ function Lectures() {
240240
onOk={handleOk}
241241
onCancel={handleOk}
242242
>
243-
244-
245-
246-
{/* const PresenceList: React.FC<PresenceListProps> = ({ attendees }) => {
243+
{/* const PresenceList: React.FC<PresenceListProps> = ({ attendees }) => {
247244
const [presence, setPresence] = useState<boolean[]>(Array(attendees.length).fill(false));
248245
249246
const handlePresenceChange = (index: number) => {
@@ -271,24 +268,6 @@ function Lectures() {
271268
export default PresenceList;
272269
*/}
273270

274-
275-
276-
277-
278-
279-
280-
281-
282-
283-
284-
285-
286-
287-
288-
289-
290-
291-
292271
<Descriptions size="small" column={1} layout="horizontal">
293272
<Descriptions.Item
294273
labelStyle={labelStyle}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ function Lectures() {
9797
{moment(new Date(lecture.event.start_time)).format(
9898
"DD/MM/YYYY"
9999
)}
100-
</Text>1
100+
</Text>
101+
1
101102
</Col>
102103
</Row>
103104
<Row align="middle" gutter={[16, 16]}>

‎apps/app/pages/settings.tsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useCallback, useEffect, useState } from "react";
2+
23
import {
34
Avatar,
45
Button,
@@ -16,15 +17,17 @@ import {
1617
import ImgCrop from "antd-img-crop";
1718
import moment from "moment";
1819
import {
20+
ConsoleSqlOutlined,
1921
MinusCircleOutlined,
2022
PlusOutlined,
2123
UploadOutlined,
2224
} from "@ant-design/icons";
23-
import { getBase64 } from "~/lib/images";
25+
import { getAvatarSrc, getBase64 } from "~/lib/images";
2426
import { useAuth } from "@coderdojobraga/ui";
2527
import { notifyError, notifyInfo } from "~/components/Notification";
2628
import { getIcon } from "~/lib/utils";
2729
import {
30+
API_URL,
2831
EUser,
2932
addMentorSkills,
3033
addNinjaSkills,
@@ -63,7 +66,10 @@ function Settings() {
6366
const { user, edit_user, isLoading } = useAuth();
6467
const [formPersonal] = Form.useForm();
6568
const [formPassword] = Form.useForm();
66-
const [avatar, setAvatar] = useState<void | string>();
69+
const [avatar, setAvatar] = useState<null | File | string>();
70+
const [avatarPreview, setAvatarPreview] = useState<
71+
null | string | undefined
72+
>();
6773

6874
const [userSkills, setUserSkills] = useState<any[]>([]);
6975
const [skills, setSkills] = useState<any[]>([]);
@@ -79,6 +85,20 @@ function Settings() {
7985
"Slack",
8086
]);
8187

88+
// const avatarSrc = getAvatarSrc(avatarPreview, user?.photo, API_URL);
89+
// if (avatarSrc !== avatarPreview) {
90+
// setAvatarPreview(avatarSrc);
91+
// }
92+
93+
if (
94+
!avatarPreview &&
95+
typeof avatar === "string" &&
96+
avatar.startsWith("/uploads/")
97+
) {
98+
console.log("avatar", API_URL + avatar);
99+
setAvatarPreview(API_URL + avatar);
100+
}
101+
82102
const onSubmit = (values: any) => {
83103
if (avatar) {
84104
values["user[photo]"] = avatar;
@@ -182,12 +202,6 @@ function Settings() {
182202
}
183203
};
184204

185-
const base64 = (file: any) => {
186-
getBase64(file, (result: string) => {
187-
setAvatar(result);
188-
});
189-
};
190-
191205
const changeSkills = () => {
192206
const deleted = userSkills
193207
.map((skill: any) => skill.id)
@@ -227,9 +241,9 @@ function Settings() {
227241
useEffect(() => {
228242
if (user?.photo) {
229243
setAvatar(user?.photo);
230-
};
231-
getUserSkills();
232-
getAllSkills();
244+
}
245+
getUserSkills();
246+
getAllSkills();
233247
}, [user, getUserSkills]);
234248

235249
const breakpoints = {
@@ -272,14 +286,17 @@ function Settings() {
272286
<Form form={formPersonal} onFinish={onSubmit} layout="vertical">
273287
<Section title="Foto de Perfil" />
274288
<Space>
275-
<Avatar size={100} src={avatar} />
289+
<Avatar size={100} src={avatarPreview} />
276290
<Form.Item name="user[photo]">
277291
<ImgCrop>
278292
<Upload
279293
accept="image/*"
280294
maxCount={1}
281-
beforeUpload={(file) => {
282-
base64(file);
295+
beforeUpload={(file: File) => {
296+
setAvatar(file);
297+
getBase64(file, (result: string) => {
298+
setAvatarPreview(result);
299+
});
283300
return false;
284301
}}
285302
onRemove={() => setAvatar(user?.photo)}

0 commit comments

Comments
 (0)