From 1fd50fa86f6fd27b04fa93e1562b65fe7bc73938 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Mon, 19 Aug 2024 15:27:12 +0700 Subject: [PATCH 01/48] add dropzone component --- hosting/src/components/Form/Dropzone.tsx | 38 ++++++++++++++++++++++++ hosting/src/components/Form/index.tsx | 22 +++++++------- 2 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 hosting/src/components/Form/Dropzone.tsx diff --git a/hosting/src/components/Form/Dropzone.tsx b/hosting/src/components/Form/Dropzone.tsx new file mode 100644 index 00000000..ae70a405 --- /dev/null +++ b/hosting/src/components/Form/Dropzone.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface DropzoneProps { + disabled?: boolean; + value?: string; + onChange?: (e: React.ChangeEvent) => void; +} + +/** + * Dropzone component for handle file. + * @param {DropzoneProps} props - The properties for the dropzone component. + * @return {JSX.Element} The rendered dropzone component. + */ +export function Dropzone({disabled, value, onChange}: DropzoneProps) { + return ( +
+ +
+ +

+ Click to upload or drag and drop +

+

SVG, PNG, JPG or GIF

+

(max, 800 X 800px)

+
+
+ ); +} diff --git a/hosting/src/components/Form/index.tsx b/hosting/src/components/Form/index.tsx index 897dd50d..c5b14c0b 100644 --- a/hosting/src/components/Form/index.tsx +++ b/hosting/src/components/Form/index.tsx @@ -1,10 +1,12 @@ -export {Checkbox} from "./Checkbox"; -export {DatePicker} from "./DatePicker"; -export {Dropdown} from "./Dropdown"; -export {FileUpload} from "./FileUpload"; -export {FormGroup} from "./FormGroup"; -export {Input} from "./Input"; -export {RadioButton} from "./RadioButton"; -export {Select} from "./Select"; -export {Switcher} from "./Switcher"; -export {TextArea} from "./TextArea"; +export { Checkbox } from "./Checkbox"; +export { DatePicker } from "./DatePicker"; +export { Dropdown } from "./Dropdown"; +export { Dropzone } from "./Dropzone"; +export { FileUpload } from "./FileUpload"; +export { FormGroup } from "./FormGroup"; +export { Input } from "./Input"; +export { RadioButton } from "./RadioButton"; +export { Select } from "./Select"; +export { Switcher } from "./Switcher"; +export { TextArea } from "./TextArea"; + From b14c285e4c00e2866040fcbb9a127831d9408780 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Mon, 19 Aug 2024 15:31:30 +0700 Subject: [PATCH 02/48] add toggle dropzone --- hosting/src/app/(protected)/settings/page.tsx | 83 ++++++++----------- 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx index 3344ad42..43050413 100644 --- a/hosting/src/app/(protected)/settings/page.tsx +++ b/hosting/src/app/(protected)/settings/page.tsx @@ -1,14 +1,18 @@ "use client"; import PageHeader from "@/components/common/PageHeader"; import DarkModeSwitcher from "@/components/DarkModeSwitcher"; -import {useAuthentication} from "@/hooks/useAuthentication"; -import {useTanamUser} from "@/hooks/useTanamUser"; +import { Dropzone } from "@/components/Form/Dropzone"; +import { useAuthentication } from "@/hooks/useAuthentication"; +import { useTanamUser } from "@/hooks/useTanamUser"; import Image from "next/image"; +import { useState } from 'react'; export default function Settings() { const {authUser} = useAuthentication(); const {tanamUser, saveUserInfo} = useTanamUser(authUser?.uid); + const [showDropzone, setShowDropzone] = useState(false); + async function onPersonalInfoSubmit(event: React.FormEvent) { event.preventDefault(); const form = event.currentTarget; @@ -75,54 +79,39 @@ export default function Settings() {

Your Photo

-
-
-
- User -
-
- Edit your photo - - - - -
+
+
+ User
- -
- -
- -

- Click to upload or drag and drop -

-

SVG, PNG, JPG or GIF

-

(max, 800 X 800px)

-
+
+ Edit your photo + + + +
+
-
- - -
- + { + showDropzone && ( + + ) + } + +
+ + +
From 16a3318acdbe83186cb7d95aeac1116358aed1bf Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Mon, 19 Aug 2024 15:41:01 +0700 Subject: [PATCH 03/48] fix settings page structure --- hosting/src/app/(protected)/settings/page.tsx | 104 +++++++----------- 1 file changed, 42 insertions(+), 62 deletions(-) diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx index 43050413..0029a4e8 100644 --- a/hosting/src/app/(protected)/settings/page.tsx +++ b/hosting/src/app/(protected)/settings/page.tsx @@ -28,13 +28,54 @@ export default function Settings() {
-
+
+
+
+

System

+
+
+
+ +
+ +
+
+
+
+
+ +

Personal Information

+
+
+
+
+ User +
+
+ Edit your photo + + + + +
+
+ + { + showDropzone && ( + + ) + } +
+
+
- -
-
-
-

Your Photo

-
-
-
-
- User -
-
- Edit your photo - - - - -
-
- - { - showDropzone && ( - - ) - } - -
- - -
-
-
-
- -
-
-
-

System

-
-
-
- -
- -
-
-
-
-
From 21b31b04a087af9efa57b99f0d21ff5c16bc3370 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 20 Aug 2024 07:44:11 +0700 Subject: [PATCH 04/48] default functionality for delete and set dropzone value to preview avatar --- hosting/src/app/(protected)/settings/page.tsx | 21 +++- hosting/src/components/Form/Dropzone.tsx | 107 ++++++++++++++---- .../src/components/Form/styles/dropzone.scss | 7 ++ 3 files changed, 108 insertions(+), 27 deletions(-) create mode 100644 hosting/src/components/Form/styles/dropzone.scss diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx index 0029a4e8..eaee9317 100644 --- a/hosting/src/app/(protected)/settings/page.tsx +++ b/hosting/src/app/(protected)/settings/page.tsx @@ -7,18 +7,23 @@ import { useTanamUser } from "@/hooks/useTanamUser"; import Image from "next/image"; import { useState } from 'react'; +const defaultAvatar = "/images/user/user-03.png"; + export default function Settings() { const {authUser} = useAuthentication(); const {tanamUser, saveUserInfo} = useTanamUser(authUser?.uid); const [showDropzone, setShowDropzone] = useState(false); + const [avatar, setAvatar] = useState(defaultAvatar); async function onPersonalInfoSubmit(event: React.FormEvent) { event.preventDefault(); + const form = event.currentTarget; const formData = { fullName: form.fullName.value, }; + await saveUserInfo(formData.fullName); } @@ -57,12 +62,12 @@ export default function Settings() {
- User + User
Edit your photo - +
@@ -70,12 +75,20 @@ export default function Settings() { { showDropzone && ( - + { + if (!value) return + setAvatar(value) + } + } + /> ) }
- +