From 98c8fc56db91664b98a50e9113787b56fe785b9e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 22:33:32 +0700 Subject: fix --- src/lib/address/api/addressesApi.js | 10 +++++ src/lib/address/components/Addresses.jsx | 68 ++++++++++++++++++++++++++++++++ src/lib/address/hooks/useAddresses.js | 13 ++++++ 3 files changed, 91 insertions(+) create mode 100644 src/lib/address/api/addressesApi.js create mode 100644 src/lib/address/components/Addresses.jsx create mode 100644 src/lib/address/hooks/useAddresses.js (limited to 'src/lib/address') diff --git a/src/lib/address/api/addressesApi.js b/src/lib/address/api/addressesApi.js new file mode 100644 index 00000000..1edfc077 --- /dev/null +++ b/src/lib/address/api/addressesApi.js @@ -0,0 +1,10 @@ +import odooApi from "@/core/api/odooApi" +import { getAuth } from "@/core/utils/auth" + +const addressesApi = async () => { + const auth = getAuth() + const dataAddresses = await odooApi('GET', `/api/v1/user/${auth.id}/address`) + return dataAddresses +} + +export default addressesApi \ No newline at end of file diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx new file mode 100644 index 00000000..7a82c0da --- /dev/null +++ b/src/lib/address/components/Addresses.jsx @@ -0,0 +1,68 @@ +import Link from "@/core/components/elements/Link/Link" +import Spinner from "@/core/components/elements/Spinner/Spinner" +import useAuth from "@/core/hooks/useAuth" +import { getItemAddress, updateItemAddress } from "@/core/utils/address" +import { useRouter } from "next/router" +import useAddresses from "../hooks/useAddresses" + +const Addresses = () => { + const router = useRouter() + const { + select = null + } = router.query + const auth = useAuth() + const { addresses } = useAddresses() + const selectedAdress = getItemAddress(select || '') + const changeSelectedAddress = (id) => { + if (!select) return + updateItemAddress(select, id) + router.back() + } + + if (addresses.isLoading) { + return ( +
+ +
+ ) + } + + return ( +
+
+ Tambah Alamat +
+ +
+ { addresses.data?.map((address, index) => { + let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'; + return ( +
+
changeSelectedAddress(address.id)}> +
+
{ type }
+ { auth?.partnerId == address.id && ( +
Utama
+ ) } +
+

{ address.name }

+ { address.mobile && ( +

{ address.mobile }

+ ) } +

+ { address.street } +

+
+ Ubah Alamat +
+ ); + }) } +
+
+ ) +} + +export default Addresses \ No newline at end of file diff --git a/src/lib/address/hooks/useAddresses.js b/src/lib/address/hooks/useAddresses.js new file mode 100644 index 00000000..9968d790 --- /dev/null +++ b/src/lib/address/hooks/useAddresses.js @@ -0,0 +1,13 @@ +import { useQuery } from "react-query" +import addressesApi from "../api/addressesApi" + +const useAddresses = () => { + const fetchAddresses = async () => await addressesApi() + const { data, isLoading } = useQuery('addresses', fetchAddresses) + + return { + addresses: { data, isLoading } + } +} + +export default useAddresses \ No newline at end of file -- cgit v1.2.3 From 3c559031623649a67825ff47f34512f0eb946861 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 10:14:32 +0700 Subject: fix --- src/lib/address/api/addressApi.js | 8 + src/lib/address/api/cityApi.js | 8 + src/lib/address/api/createAddressApi.js | 8 + src/lib/address/api/districtApi.js | 8 + src/lib/address/api/editAddressApi.js | 8 + src/lib/address/api/subDistrictApi.js | 8 + src/lib/address/components/CreateAddress.jsx | 230 ++++++++++++++++++++++++ src/lib/address/components/EditAddress.jsx | 256 +++++++++++++++++++++++++++ 8 files changed, 534 insertions(+) create mode 100644 src/lib/address/api/addressApi.js create mode 100644 src/lib/address/api/cityApi.js create mode 100644 src/lib/address/api/createAddressApi.js create mode 100644 src/lib/address/api/districtApi.js create mode 100644 src/lib/address/api/editAddressApi.js create mode 100644 src/lib/address/api/subDistrictApi.js create mode 100644 src/lib/address/components/CreateAddress.jsx create mode 100644 src/lib/address/components/EditAddress.jsx (limited to 'src/lib/address') diff --git a/src/lib/address/api/addressApi.js b/src/lib/address/api/addressApi.js new file mode 100644 index 00000000..f2fc6c9e --- /dev/null +++ b/src/lib/address/api/addressApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const addressApi = async ({ id }) => { + const dataAddress = await odooApi('GET', `/api/v1/partner/${id}/address`) + return dataAddress +} + +export default addressApi \ No newline at end of file diff --git a/src/lib/address/api/cityApi.js b/src/lib/address/api/cityApi.js new file mode 100644 index 00000000..8cf1bedd --- /dev/null +++ b/src/lib/address/api/cityApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const cityApi = async () => { + const dataCities = await odooApi('GET', '/api/v1/city') + return dataCities +} + +export default cityApi \ No newline at end of file diff --git a/src/lib/address/api/createAddressApi.js b/src/lib/address/api/createAddressApi.js new file mode 100644 index 00000000..29804d1c --- /dev/null +++ b/src/lib/address/api/createAddressApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const createAddressApi = async ({ data }) => { + const dataAddress = await odooApi('POST', '/api/v1/partner/address', data) + return dataAddress +} + +export default createAddressApi \ No newline at end of file diff --git a/src/lib/address/api/districtApi.js b/src/lib/address/api/districtApi.js new file mode 100644 index 00000000..120757e9 --- /dev/null +++ b/src/lib/address/api/districtApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const districtApi = async ({ cityId }) => { + const dataDistricts = await odooApi('GET', `/api/v1/district?city_id=${cityId}`) + return dataDistricts +} + +export default districtApi \ No newline at end of file diff --git a/src/lib/address/api/editAddressApi.js b/src/lib/address/api/editAddressApi.js new file mode 100644 index 00000000..e01f6015 --- /dev/null +++ b/src/lib/address/api/editAddressApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const editAddressApi = async ({ id, data }) => { + const dataAddress = await odooApi('PUT', `/api/v1/partner/${id}/address`, data) + return dataAddress +} + +export default editAddressApi \ No newline at end of file diff --git a/src/lib/address/api/subDistrictApi.js b/src/lib/address/api/subDistrictApi.js new file mode 100644 index 00000000..64230838 --- /dev/null +++ b/src/lib/address/api/subDistrictApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const subDistrictApi = async ({ districtId }) => { + const dataSubDistricts = await odooApi('GET', `/api/v1/sub_district?district_id=${districtId}`) + return dataSubDistricts +} + +export default subDistrictApi \ No newline at end of file diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx new file mode 100644 index 00000000..4ba99820 --- /dev/null +++ b/src/lib/address/components/CreateAddress.jsx @@ -0,0 +1,230 @@ +import HookFormSelect from "@/core/components/elements/Select/HookFormSelect" +import useAuth from "@/core/hooks/useAuth" +import { useRouter } from "next/router" +import { Controller, useForm } from "react-hook-form" +import * as Yup from "yup" +import cityApi from "../api/cityApi" +import districtApi from "../api/districtApi" +import subDistrictApi from "../api/subDistrictApi" +import { useEffect, useState } from "react" +import createAddressApi from "../api/createAddressApi" +import { toast } from "react-hot-toast" +import { yupResolver } from "@hookform/resolvers/yup" + +const CreateAddress = () => { + const auth = useAuth() + const router = useRouter() + const { + register, + formState: { errors }, + handleSubmit, + watch, + setValue, + control, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues + }) + + const [ cities, setCities ] = useState([]) + const [ districts, setDistricts ] = useState([]) + const [ subDistricts, setSubDistricts ] = useState([]) + + useEffect(() => { + const loadCities = async () => { + let dataCities = await cityApi() + dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })) + setCities(dataCities) + } + loadCities() + }, []) + + const watchCity = watch('city') + useEffect(() => { + setValue('district', '') + if (watchCity) { + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }) + dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name })) + setDistricts(dataDistricts) + } + loadDistricts() + } + }, [ watchCity, setValue ]) + + const watchDistrict = watch('district') + useEffect(() => { + setValue('subDistrict', '') + if (watchDistrict) { + const loadSubDistricts = async () => { + let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict }) + dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name })) + setSubDistricts(dataSubDistricts) + } + loadSubDistricts() + } + }, [ watchDistrict, setValue ]) + + const onSubmitHandler = async (values) => { + const data = { + ...values, + city_id: values.city, + district_id: values.district, + sub_district_id: values.subDistrict, + parent_id: auth.partnerId + } + + const address = await createAddressApi({ data }) + if (address?.id) { + toast.success('Berhasil menambahkan alamat') + router.back() + } + } + + return ( +
+
+ + } + /> +
{ errors.type?.message }
+
+ +
+ + +
{ errors.name?.message }
+
+ +
+ + +
{ errors.email?.message }
+
+ +
+ + +
{ errors.mobile?.message }
+
+ +
+ + +
{ errors.street?.message }
+
+ +
+ + +
{ errors.zip?.message }
+
+ +
+ + } + /> +
{ errors.city?.message }
+
+ +
+ + ( + + )} + /> +
+ +
+ + ( + + )} + /> +
+ + +
+ ) +} + +const validationSchema = Yup.object().shape({ + type: Yup.string().required('Harus di-pilih'), + name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'), + email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), + mobile: Yup.string().required('Harus di-isi'), + street: Yup.string().required('Harus di-isi'), + zip: Yup.string().required('Harus di-isi'), + city: Yup.string().required('Harus di-pilih'), +}) + +const defaultValues = { + type: '', + name: '', + email: '', + mobile: '', + street: '', + city: '', + district: '', + subDistrict: '', + zip: '', +} + +const types = [ + { value: 'contact', label: 'Contact Address' }, + { value: 'invoice', label: 'Invoice Address' }, + { value: 'delivery', label: 'Delivery Address' }, + { value: 'other', label: 'Other Address' }, +] + +export default CreateAddress \ No newline at end of file diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx new file mode 100644 index 00000000..b866a1e6 --- /dev/null +++ b/src/lib/address/components/EditAddress.jsx @@ -0,0 +1,256 @@ +import { yupResolver } from "@hookform/resolvers/yup" +import { useRouter } from "next/router" +import { useEffect, useState } from "react" +import * as Yup from "yup" +import cityApi from "../api/cityApi" +import { Controller, useForm } from "react-hook-form" +import districtApi from "../api/districtApi" +import subDistrictApi from "../api/subDistrictApi" +import editAddressApi from "../api/editAddressApi" +import HookFormSelect from "@/core/components/elements/Select/HookFormSelect" +import { toast } from "react-hot-toast" + +const EditAddress = ({ id, defaultValues }) => { + const router = useRouter() + const { + register, + formState: { errors }, + handleSubmit, + watch, + setValue, + getValues, + control, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }) + + const [cities, setCities] = useState([]) + const [districts, setDistricts] = useState([]) + const [subDistricts, setSubDistricts] = useState([]) + + useEffect(() => { + const loadCities = async () => { + let dataCities = await cityApi() + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })) + setCities(dataCities) + } + loadCities() + }, []) + + const watchCity = watch("city") + useEffect(() => { + setValue("district", "") + if (watchCity) { + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }) + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name, + })) + setDistricts(dataDistricts) + let oldDistrict = getValues("oldDistrict") + if (oldDistrict) { + setValue("district", oldDistrict) + setValue("oldDistrict", "") + } + } + loadDistricts() + } + }, [watchCity, setValue, getValues]) + + const watchDistrict = watch("district") + useEffect(() => { + setValue("subDistrict", "") + if (watchDistrict) { + const loadSubDistricts = async () => { + let dataSubDistricts = await subDistrictApi({ + districtId: watchDistrict, + }) + dataSubDistricts = dataSubDistricts.map((district) => ({ + value: district.id, + label: district.name, + })) + setSubDistricts(dataSubDistricts) + let oldSubDistrict = getValues("oldSubDistrict") + + if (oldSubDistrict) { + setValue("subDistrict", oldSubDistrict) + setValue("oldSubDistrict", "") + } + } + loadSubDistricts() + } + }, [watchDistrict, setValue, getValues]) + + const onSubmitHandler = async (values) => { + const data = { + ...values, + city_id: values.city, + district_id: values.district, + sub_district_id: values.subDistrict, + } + + const address = await editAddressApi({ id, data }) + if (address?.id) { + toast.success("Berhasil mengubah alamat") + router.back() + } + } + + return ( +
+
+ + ( + + )} + /> +
+ {errors.type?.message} +
+
+ +
+ + +
+ {errors.name?.message} +
+
+ +
+ + +
+ {errors.email?.message} +
+
+ +
+ + +
+ {errors.mobile?.message} +
+
+ +
+ + +
+ {errors.street?.message} +
+
+ +
+ + +
+ {errors.zip?.message} +
+
+ +
+ + } + /> +
+ {errors.city?.message} +
+
+ +
+ + ( + + )} + /> +
+ +
+ + ( + + )} + /> +
+ + +
+ ) +} + +const validationSchema = Yup.object().shape({ + type: Yup.string().required("Harus di-pilih"), + name: Yup.string().min(3, "Minimal 3 karakter").required("Harus di-isi"), + email: Yup.string() + .email("Format harus seperti johndoe@example.com") + .required("Harus di-isi"), + mobile: Yup.string().required("Harus di-isi"), + street: Yup.string().required("Harus di-isi"), + zip: Yup.string().required("Harus di-isi"), + city: Yup.string().required("Harus di-pilih"), +}) + +const types = [ + { value: "contact", label: "Contact Address" }, + { value: "invoice", label: "Invoice Address" }, + { value: "delivery", label: "Delivery Address" }, + { value: "other", label: "Other Address" }, +] + +export default EditAddress -- cgit v1.2.3 From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 11:03:34 +0700 Subject: prettier --- src/lib/address/api/addressApi.js | 4 +- src/lib/address/api/addressesApi.js | 6 +- src/lib/address/api/cityApi.js | 4 +- src/lib/address/api/createAddressApi.js | 4 +- src/lib/address/api/districtApi.js | 4 +- src/lib/address/api/editAddressApi.js | 4 +- src/lib/address/api/subDistrictApi.js | 4 +- src/lib/address/components/Addresses.jsx | 80 ++++++----- src/lib/address/components/CreateAddress.jsx | 166 ++++++++++------------- src/lib/address/components/EditAddress.jsx | 196 +++++++++++---------------- src/lib/address/hooks/useAddresses.js | 8 +- 11 files changed, 213 insertions(+), 267 deletions(-) (limited to 'src/lib/address') diff --git a/src/lib/address/api/addressApi.js b/src/lib/address/api/addressApi.js index f2fc6c9e..f99d81c0 100644 --- a/src/lib/address/api/addressApi.js +++ b/src/lib/address/api/addressApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const addressApi = async ({ id }) => { const dataAddress = await odooApi('GET', `/api/v1/partner/${id}/address`) return dataAddress } -export default addressApi \ No newline at end of file +export default addressApi diff --git a/src/lib/address/api/addressesApi.js b/src/lib/address/api/addressesApi.js index 1edfc077..96f9e9d9 100644 --- a/src/lib/address/api/addressesApi.js +++ b/src/lib/address/api/addressesApi.js @@ -1,5 +1,5 @@ -import odooApi from "@/core/api/odooApi" -import { getAuth } from "@/core/utils/auth" +import odooApi from '@/core/api/odooApi' +import { getAuth } from '@/core/utils/auth' const addressesApi = async () => { const auth = getAuth() @@ -7,4 +7,4 @@ const addressesApi = async () => { return dataAddresses } -export default addressesApi \ No newline at end of file +export default addressesApi diff --git a/src/lib/address/api/cityApi.js b/src/lib/address/api/cityApi.js index 8cf1bedd..7873435b 100644 --- a/src/lib/address/api/cityApi.js +++ b/src/lib/address/api/cityApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const cityApi = async () => { const dataCities = await odooApi('GET', '/api/v1/city') return dataCities } -export default cityApi \ No newline at end of file +export default cityApi diff --git a/src/lib/address/api/createAddressApi.js b/src/lib/address/api/createAddressApi.js index 29804d1c..b33b7ae1 100644 --- a/src/lib/address/api/createAddressApi.js +++ b/src/lib/address/api/createAddressApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const createAddressApi = async ({ data }) => { const dataAddress = await odooApi('POST', '/api/v1/partner/address', data) return dataAddress } -export default createAddressApi \ No newline at end of file +export default createAddressApi diff --git a/src/lib/address/api/districtApi.js b/src/lib/address/api/districtApi.js index 120757e9..b0bcff16 100644 --- a/src/lib/address/api/districtApi.js +++ b/src/lib/address/api/districtApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const districtApi = async ({ cityId }) => { const dataDistricts = await odooApi('GET', `/api/v1/district?city_id=${cityId}`) return dataDistricts } -export default districtApi \ No newline at end of file +export default districtApi diff --git a/src/lib/address/api/editAddressApi.js b/src/lib/address/api/editAddressApi.js index e01f6015..ba383ef0 100644 --- a/src/lib/address/api/editAddressApi.js +++ b/src/lib/address/api/editAddressApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const editAddressApi = async ({ id, data }) => { const dataAddress = await odooApi('PUT', `/api/v1/partner/${id}/address`, data) return dataAddress } -export default editAddressApi \ No newline at end of file +export default editAddressApi diff --git a/src/lib/address/api/subDistrictApi.js b/src/lib/address/api/subDistrictApi.js index 64230838..3f834420 100644 --- a/src/lib/address/api/subDistrictApi.js +++ b/src/lib/address/api/subDistrictApi.js @@ -1,8 +1,8 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const subDistrictApi = async ({ districtId }) => { const dataSubDistricts = await odooApi('GET', `/api/v1/sub_district?district_id=${districtId}`) return dataSubDistricts } -export default subDistrictApi \ No newline at end of file +export default subDistrictApi diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index 7a82c0da..c4855f8f 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -1,15 +1,13 @@ -import Link from "@/core/components/elements/Link/Link" -import Spinner from "@/core/components/elements/Spinner/Spinner" -import useAuth from "@/core/hooks/useAuth" -import { getItemAddress, updateItemAddress } from "@/core/utils/address" -import { useRouter } from "next/router" -import useAddresses from "../hooks/useAddresses" +import Link from '@/core/components/elements/Link/Link' +import Spinner from '@/core/components/elements/Spinner/Spinner' +import useAuth from '@/core/hooks/useAuth' +import { getItemAddress, updateItemAddress } from '@/core/utils/address' +import { useRouter } from 'next/router' +import useAddresses from '../hooks/useAddresses' const Addresses = () => { const router = useRouter() - const { - select = null - } = router.query + const { select = null } = router.query const auth = useAuth() const { addresses } = useAddresses() const selectedAdress = getItemAddress(select || '') @@ -21,48 +19,60 @@ const Addresses = () => { if (addresses.isLoading) { return ( -
- +
+
) } return ( -
-
- Tambah Alamat +
+
+ Tambah Alamat
-
- { addresses.data?.map((address, index) => { - let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'; +
+ {addresses.data?.map((address, index) => { + let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' return ( -
changeSelectedAddress(address.id)}> -
-
{ type }
- { auth?.partnerId == address.id && ( -
Utama
- ) } +
+
{type}
+ {auth?.partnerId == address.id &&
Utama
}
-

{ address.name }

- { address.mobile && ( -

{ address.mobile }

- ) } -

- { address.street } +

{address.name}

+ {address.mobile &&

{address.mobile}

} +

+ {address.street}

- Ubah Alamat + + Ubah Alamat +
- ); - }) } + ) + })}
) } -export default Addresses \ No newline at end of file +export default Addresses diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 4ba99820..62bb0858 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -1,34 +1,34 @@ -import HookFormSelect from "@/core/components/elements/Select/HookFormSelect" -import useAuth from "@/core/hooks/useAuth" -import { useRouter } from "next/router" -import { Controller, useForm } from "react-hook-form" -import * as Yup from "yup" -import cityApi from "../api/cityApi" -import districtApi from "../api/districtApi" -import subDistrictApi from "../api/subDistrictApi" -import { useEffect, useState } from "react" -import createAddressApi from "../api/createAddressApi" -import { toast } from "react-hot-toast" -import { yupResolver } from "@hookform/resolvers/yup" +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' +import useAuth from '@/core/hooks/useAuth' +import { useRouter } from 'next/router' +import { Controller, useForm } from 'react-hook-form' +import * as Yup from 'yup' +import cityApi from '../api/cityApi' +import districtApi from '../api/districtApi' +import subDistrictApi from '../api/subDistrictApi' +import { useEffect, useState } from 'react' +import createAddressApi from '../api/createAddressApi' +import { toast } from 'react-hot-toast' +import { yupResolver } from '@hookform/resolvers/yup' const CreateAddress = () => { const auth = useAuth() const router = useRouter() - const { - register, - formState: { errors }, + const { + register, + formState: { errors }, handleSubmit, watch, setValue, - control, - } = useForm({ + control + } = useForm({ resolver: yupResolver(validationSchema), defaultValues }) - const [ cities, setCities ] = useState([]) - const [ districts, setDistricts ] = useState([]) - const [ subDistricts, setSubDistricts ] = useState([]) + const [cities, setCities] = useState([]) + const [districts, setDistricts] = useState([]) + const [subDistricts, setSubDistricts] = useState([]) useEffect(() => { const loadCities = async () => { @@ -45,12 +45,15 @@ const CreateAddress = () => { if (watchCity) { const loadDistricts = async () => { let dataDistricts = await districtApi({ cityId: watchCity }) - dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name })) + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name + })) setDistricts(dataDistricts) } loadDistricts() } - }, [ watchCity, setValue ]) + }, [watchCity, setValue]) const watchDistrict = watch('district') useEffect(() => { @@ -58,14 +61,17 @@ const CreateAddress = () => { if (watchDistrict) { const loadSubDistricts = async () => { let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict }) - dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name })) + dataSubDistricts = dataSubDistricts.map((district) => ({ + value: district.id, + label: district.name + })) setSubDistricts(dataSubDistricts) } loadSubDistricts() } - }, [ watchDistrict, setValue ]) + }, [watchDistrict, setValue]) - const onSubmitHandler = async (values) => { + const onSubmitHandler = async (values) => { const data = { ...values, city_id: values.city, @@ -79,119 +85,93 @@ const CreateAddress = () => { toast.success('Berhasil menambahkan alamat') router.back() } - } + } return ( -
+
- + } + render={(props) => } /> -
{ errors.type?.message }
+
{errors.type?.message}
- - -
{ errors.name?.message }
+ + +
{errors.name?.message}
- + -
{ errors.email?.message }
+
{errors.email?.message}
- - -
{ errors.mobile?.message }
+ + +
{errors.mobile?.message}
- + -
{ errors.street?.message }
+
{errors.street?.message}
- - -
{ errors.zip?.message }
+ + +
{errors.zip?.message}
- + } + render={(props) => } /> -
{ errors.city?.message }
+
{errors.city?.message}
- + ( - + render={(props) => ( + )} />
- + ( - + render={(props) => ( + )} />
-
@@ -205,7 +185,7 @@ const validationSchema = Yup.object().shape({ mobile: Yup.string().required('Harus di-isi'), street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), - city: Yup.string().required('Harus di-pilih'), + city: Yup.string().required('Harus di-pilih') }) const defaultValues = { @@ -217,14 +197,14 @@ const defaultValues = { city: '', district: '', subDistrict: '', - zip: '', + zip: '' } const types = [ { value: 'contact', label: 'Contact Address' }, { value: 'invoice', label: 'Invoice Address' }, { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' }, + { value: 'other', label: 'Other Address' } ] -export default CreateAddress \ No newline at end of file +export default CreateAddress diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index b866a1e6..0cfa013a 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -1,14 +1,14 @@ -import { yupResolver } from "@hookform/resolvers/yup" -import { useRouter } from "next/router" -import { useEffect, useState } from "react" -import * as Yup from "yup" -import cityApi from "../api/cityApi" -import { Controller, useForm } from "react-hook-form" -import districtApi from "../api/districtApi" -import subDistrictApi from "../api/subDistrictApi" -import editAddressApi from "../api/editAddressApi" -import HookFormSelect from "@/core/components/elements/Select/HookFormSelect" -import { toast } from "react-hot-toast" +import { yupResolver } from '@hookform/resolvers/yup' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import * as Yup from 'yup' +import cityApi from '../api/cityApi' +import { Controller, useForm } from 'react-hook-form' +import districtApi from '../api/districtApi' +import subDistrictApi from '../api/subDistrictApi' +import editAddressApi from '../api/editAddressApi' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' +import { toast } from 'react-hot-toast' const EditAddress = ({ id, defaultValues }) => { const router = useRouter() @@ -19,10 +19,10 @@ const EditAddress = ({ id, defaultValues }) => { watch, setValue, getValues, - control, + control } = useForm({ resolver: yupResolver(validationSchema), - defaultValues, + defaultValues }) const [cities, setCities] = useState([]) @@ -34,52 +34,52 @@ const EditAddress = ({ id, defaultValues }) => { let dataCities = await cityApi() dataCities = dataCities.map((city) => ({ value: city.id, - label: city.name, + label: city.name })) setCities(dataCities) } loadCities() }, []) - const watchCity = watch("city") + const watchCity = watch('city') useEffect(() => { - setValue("district", "") + setValue('district', '') if (watchCity) { const loadDistricts = async () => { let dataDistricts = await districtApi({ cityId: watchCity }) dataDistricts = dataDistricts.map((district) => ({ value: district.id, - label: district.name, + label: district.name })) setDistricts(dataDistricts) - let oldDistrict = getValues("oldDistrict") + let oldDistrict = getValues('oldDistrict') if (oldDistrict) { - setValue("district", oldDistrict) - setValue("oldDistrict", "") + setValue('district', oldDistrict) + setValue('oldDistrict', '') } } loadDistricts() } }, [watchCity, setValue, getValues]) - const watchDistrict = watch("district") + const watchDistrict = watch('district') useEffect(() => { - setValue("subDistrict", "") + setValue('subDistrict', '') if (watchDistrict) { const loadSubDistricts = async () => { let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict, + districtId: watchDistrict }) dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, - label: district.name, + label: district.name })) setSubDistricts(dataSubDistricts) - let oldSubDistrict = getValues("oldSubDistrict") + let oldSubDistrict = getValues('oldSubDistrict') if (oldSubDistrict) { - setValue("subDistrict", oldSubDistrict) - setValue("oldSubDistrict", "") + setValue('subDistrict', oldSubDistrict) + setValue('oldSubDistrict', '') } } loadSubDistricts() @@ -91,143 +91,101 @@ const EditAddress = ({ id, defaultValues }) => { ...values, city_id: values.city, district_id: values.district, - sub_district_id: values.subDistrict, + sub_district_id: values.subDistrict } const address = await editAddressApi({ id, data }) if (address?.id) { - toast.success("Berhasil mengubah alamat") + toast.success('Berhasil mengubah alamat') router.back() } } return ( -
+
- + ( - - )} + render={(props) => } /> -
- {errors.type?.message} -
+
{errors.type?.message}
- - -
- {errors.name?.message} -
+ + +
{errors.name?.message}
- + -
- {errors.email?.message} -
+
{errors.email?.message}
- - -
- {errors.mobile?.message} -
+ + +
{errors.mobile?.message}
- + -
- {errors.street?.message} -
+
{errors.street?.message}
- - -
- {errors.zip?.message} -
+ + +
{errors.zip?.message}
- + } /> -
- {errors.city?.message} -
+
{errors.city?.message}
- + ( - + )} />
- + ( - + )} />
-
@@ -235,22 +193,20 @@ const EditAddress = ({ id, defaultValues }) => { } const validationSchema = Yup.object().shape({ - type: Yup.string().required("Harus di-pilih"), - name: Yup.string().min(3, "Minimal 3 karakter").required("Harus di-isi"), - email: Yup.string() - .email("Format harus seperti johndoe@example.com") - .required("Harus di-isi"), - mobile: Yup.string().required("Harus di-isi"), - street: Yup.string().required("Harus di-isi"), - zip: Yup.string().required("Harus di-isi"), - city: Yup.string().required("Harus di-pilih"), + type: Yup.string().required('Harus di-pilih'), + name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'), + email: Yup.string().email('Format harus seperti johndoe@example.com').required('Harus di-isi'), + mobile: Yup.string().required('Harus di-isi'), + street: Yup.string().required('Harus di-isi'), + zip: Yup.string().required('Harus di-isi'), + city: Yup.string().required('Harus di-pilih') }) const types = [ - { value: "contact", label: "Contact Address" }, - { value: "invoice", label: "Invoice Address" }, - { value: "delivery", label: "Delivery Address" }, - { value: "other", label: "Other Address" }, + { value: 'contact', label: 'Contact Address' }, + { value: 'invoice', label: 'Invoice Address' }, + { value: 'delivery', label: 'Delivery Address' }, + { value: 'other', label: 'Other Address' } ] export default EditAddress diff --git a/src/lib/address/hooks/useAddresses.js b/src/lib/address/hooks/useAddresses.js index 9968d790..629e367c 100644 --- a/src/lib/address/hooks/useAddresses.js +++ b/src/lib/address/hooks/useAddresses.js @@ -1,13 +1,13 @@ -import { useQuery } from "react-query" -import addressesApi from "../api/addressesApi" +import { useQuery } from 'react-query' +import addressesApi from '../api/addressesApi' const useAddresses = () => { const fetchAddresses = async () => await addressesApi() const { data, isLoading } = useQuery('addresses', fetchAddresses) - + return { addresses: { data, isLoading } } } -export default useAddresses \ No newline at end of file +export default useAddresses -- cgit v1.2.3 From 7265295454801c1d921385a4b67fb3780b46771e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 14:00:00 +0700 Subject: fix --- src/lib/address/components/Addresses.jsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'src/lib/address') diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index c4855f8f..3ac06b6c 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -40,7 +40,7 @@ const Addresses = () => { className={ 'p-4 rounded-md border ' + (selectedAdress && selectedAdress == address.id - ? 'border-gray_r-7 bg-gray_r-2' + ? 'border-gray_r-7 bg-gray_r-4' : 'border-gray_r-7') } > @@ -51,15 +51,7 @@ const Addresses = () => {

{address.name}

{address.mobile &&

{address.mobile}

} -

- {address.street} -

+

{address.street}

Date: Wed, 22 Feb 2023 23:36:47 +0700 Subject: fix --- src/lib/address/components/CreateAddress.jsx | 58 +++++++++++++++++++++++----- src/lib/address/components/EditAddress.jsx | 58 +++++++++++++++++++++++----- 2 files changed, 98 insertions(+), 18 deletions(-) (limited to 'src/lib/address') diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 62bb0858..849b4c01 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -88,20 +88,34 @@ const CreateAddress = () => { } return ( -
+
} + render={(props) => ( + + )} />
{errors.type?.message}
- +
{errors.name?.message}
@@ -118,7 +132,12 @@ const CreateAddress = () => {
- +
{errors.mobile?.message}
@@ -135,7 +154,12 @@ const CreateAddress = () => {
- +
{errors.zip?.message}
@@ -144,7 +168,12 @@ const CreateAddress = () => { } + render={(props) => ( + + )} />
{errors.city?.message}
@@ -155,7 +184,11 @@ const CreateAddress = () => { name='district' control={control} render={(props) => ( - + )} />
@@ -166,12 +199,19 @@ const CreateAddress = () => { name='subDistrict' control={control} render={(props) => ( - + )} />
- diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 0cfa013a..a832edbc 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -102,20 +102,34 @@ const EditAddress = ({ id, defaultValues }) => { } return ( -
+
} + render={(props) => ( + + )} />
{errors.type?.message}
- +
{errors.name?.message}
@@ -132,7 +146,12 @@ const EditAddress = ({ id, defaultValues }) => {
- +
{errors.mobile?.message}
@@ -149,7 +168,12 @@ const EditAddress = ({ id, defaultValues }) => {
- +
{errors.zip?.message}
@@ -158,7 +182,12 @@ const EditAddress = ({ id, defaultValues }) => { } + render={(props) => ( + + )} />
{errors.city?.message}
@@ -169,7 +198,11 @@ const EditAddress = ({ id, defaultValues }) => { name='district' control={control} render={(props) => ( - + )} /> @@ -180,12 +213,19 @@ const EditAddress = ({ id, defaultValues }) => { name='subDistrict' control={control} render={(props) => ( - + )} /> - -- cgit v1.2.3