From 0c62724feb6b7fa9d9191acb117c6d359e2b94eb Mon Sep 17 00:00:00 2001 From: amel Date: Tue, 9 Jul 2024 10:39:01 +0800 Subject: [PATCH 1/2] upd: grup Deskripsi: - menggunakan layout navbar new - menggunakan local state - menggunakan modal konfirmasi dan toast No Issues --- .../group/components/list_group_active.tsx | 50 ++++++++++++------- .../components/list_group_non_active.tsx | 47 +++++++++++------ .../group/components/ui/drawer_group.tsx | 15 +++--- .../group/components/ui/edit_drawer_group.tsx | 37 ++++++++------ .../group/components/ui/navbar_group.tsx | 41 +++++++-------- 5 files changed, 109 insertions(+), 81 deletions(-) diff --git a/src/module/group/components/list_group_active.tsx b/src/module/group/components/list_group_active.tsx index 7e72ae7..4f1750c 100644 --- a/src/module/group/components/list_group_active.tsx +++ b/src/module/group/components/list_group_active.tsx @@ -1,50 +1,50 @@ -import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; +import { LayoutDrawer, WARNA } from '@/module/_global'; import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; import React, { useState } from 'react'; import { HiOutlineOfficeBuilding } from 'react-icons/hi'; import { HiMagnifyingGlass } from 'react-icons/hi2'; import EditDrawerGroup from './ui/edit_drawer_group'; -import { useHookstate } from '@hookstate/core'; -import { useRouter } from 'next/navigation'; +import toast from 'react-hot-toast'; const dataGroup = [ { id: 1, - name: 'Lembaga Pengkreditan Desa' + name: 'Dinas' }, { id: 2, - name: 'Lembaga Pengkreditan Desa' + name: 'Adat' }, { id: 3, - name: 'Lembaga Pengkreditan Desa' + name: 'LPD' }, { id: 4, - name: 'Lembaga Pengkreditan Desa' + name: 'Karang Taruna' }, { id: 5, - name: 'Lembaga Pengkreditan Desa' + name: 'BPD' }, { id: 6, - name: 'Lembaga Pengkreditan Desa' + name: 'LPM' }, { id: 7, - name: 'Lembaga Pengkreditan Desa' + name: 'PKK' }, { id: 8, - name: 'Lembaga Pengkreditan Desa' + name: 'Pengelolaan Penduduk' }, ] export default function ListGroupActive() { - // const openDrawerEdit = useHookstate(isDrawer) const [openDrawer, setOpenDrawer] = useState(false) + const [valChoose, setValChoose] = useState("") + return ( { return ( - setOpenDrawer(true)} > + { + setValChoose(v.name) + setOpenDrawer(true) + }} + > @@ -80,8 +87,13 @@ export default function ListGroupActive() { ) })} - setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> - + setOpenDrawer(false)} title={valChoose}> + { + if (val) { + toast.success('Sukses! data tersimpan') + } + setOpenDrawer(false) + }} /> ); diff --git a/src/module/group/components/list_group_non_active.tsx b/src/module/group/components/list_group_non_active.tsx index b79a4d2..00c5840 100644 --- a/src/module/group/components/list_group_non_active.tsx +++ b/src/module/group/components/list_group_non_active.tsx @@ -1,47 +1,50 @@ -import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; +import { LayoutDrawer, WARNA } from '@/module/_global'; import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; import React, { useState } from 'react'; import { HiOutlineOfficeBuilding } from 'react-icons/hi'; import { HiMagnifyingGlass } from 'react-icons/hi2'; import EditDrawerGroup from './ui/edit_drawer_group'; +import toast from 'react-hot-toast'; const dataGroup = [ { id: 1, - name: 'No Active Desa' + name: 'Dinas' }, { id: 2, - name: 'No Active Desa' + name: 'Adat' }, { id: 3, - name: 'No Active Desa' + name: 'LPD' }, { id: 4, - name: 'No Active Desa' + name: 'Karang Taruna' }, { id: 5, - name: 'No Active Desa' + name: 'BPD' }, { id: 6, - name: 'No Active Desa' + name: 'LPM' }, { id: 7, - name: 'No Active Desa' + name: 'PKK' }, { id: 8, - name: 'No Active Desa' + name: 'Pengelolaan Penduduk' }, ] export default function ListGroupNonActive() { const [openDrawer, setOpenDrawer] = useState(false) + const [valChoose, setValChoose] = useState("") + return ( { return ( - setOpenDrawer(true)}> + { + setValChoose(v.name) + setOpenDrawer(true) + }} + > @@ -77,8 +87,13 @@ export default function ListGroupNonActive() { ) })} - setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> - + setOpenDrawer(false)} title={valChoose}> + { + if (val) { + toast.success('Sukses! data tersimpan') + } + setOpenDrawer(false) + }} /> ); diff --git a/src/module/group/components/ui/drawer_group.tsx b/src/module/group/components/ui/drawer_group.tsx index b279696..10cebfa 100644 --- a/src/module/group/components/ui/drawer_group.tsx +++ b/src/module/group/components/ui/drawer_group.tsx @@ -1,17 +1,16 @@ -import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; -import { useHookstate } from '@hookstate/core'; +import { LayoutDrawer, WARNA } from '@/module/_global'; import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import React, { useState } from 'react'; import { IoAddCircle } from "react-icons/io5"; -export default function DrawerGroup() { +export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) => void }) { const [openDrawerGroup, setOpenDrawerGroup] = useState(false) - const openDrawer = useHookstate(isDrawer) function onCLose() { setOpenDrawerGroup(false) - openDrawer.set(false) + onSuccess(true) } + return ( @@ -29,7 +28,7 @@ export default function DrawerGroup() { - setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}> + setOpenDrawerGroup(false)} title={'Tambah Grup'}> diff --git a/src/module/group/components/ui/edit_drawer_group.tsx b/src/module/group/components/ui/edit_drawer_group.tsx index 489163a..17de722 100644 --- a/src/module/group/components/ui/edit_drawer_group.tsx +++ b/src/module/group/components/ui/edit_drawer_group.tsx @@ -1,26 +1,31 @@ 'use client' -import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; -import { useHookstate } from '@hookstate/core'; +import { LayoutDrawer, WARNA } from '@/module/_global'; +import LayoutModal from '@/module/_global/layout/layout_modal'; import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import React, { useState } from 'react'; import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5"; -export default function EditDrawerGroup() { +export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolean) => void }) { const [openDrawerGroup, setOpenDrawerGroup] = useState(false) - const openDrawerEdit = useHookstate(isDrawer) + const [isModal, setModal] = useState(false) function onCLose() { setOpenDrawerGroup(false) - openDrawerEdit.set(false) + onUpdated(true) } + + function onTrue(val: boolean) { + if (val) { + onUpdated(true) + } + setModal(false) + } + return ( - - + + setModal(true)} style={{ cursor: 'pointer' }}> @@ -28,7 +33,7 @@ export default function EditDrawerGroup() { Tidak Aktif - setOpenDrawerGroup(true)}> + setOpenDrawerGroup(true)} style={{ cursor: 'pointer' }}> @@ -38,7 +43,7 @@ export default function EditDrawerGroup() { - setOpenDrawerGroup(false)} title={'EDIT GRUP'}> + setOpenDrawerGroup(false)} title={'Edit Grup'}> + + setModal(false)} + description="Apakah Anda yakin ingin mangubah status aktifasi data?" + onYes={(val) => { onTrue(val) }} /> ); } diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx index 434dbdc..d47f734 100644 --- a/src/module/group/components/ui/navbar_group.tsx +++ b/src/module/group/components/ui/navbar_group.tsx @@ -1,34 +1,27 @@ "use client" -import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global'; -import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core'; -import React from 'react'; +import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; +import { ActionIcon, } from '@mantine/core'; +import React, { useState } from 'react'; import { HiMenu } from "react-icons/hi"; import DrawerGroup from './drawer_group'; -import { useHookstate } from '@hookstate/core'; +import toast from 'react-hot-toast'; export default function NavbarGroup() { - const openDrawerMenu = useHookstate(isDrawer) + const [isOpen, setOpen] = useState(false) return ( <> - - - - - - - GROUP - - - - openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> - - - - - - - openDrawerMenu.set(false)}> - + setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + } + /> + setOpen(false)}> + { + setOpen(false) + toast.success('Sukses! data tersimpan') + }} /> ); From de1debf3db65d30c6693be14c3992b5531889a02 Mon Sep 17 00:00:00 2001 From: amel Date: Tue, 9 Jul 2024 10:57:26 +0800 Subject: [PATCH 2/2] upd: hapus variable global NO Issues --- src/module/_global/index.ts | 4 ---- src/module/_global/layout/layout_modal.tsx | 3 --- src/module/_global/val/isDrawer.ts | 4 ---- src/module/_global/val/isModal.ts | 4 ---- .../component/list_announcement.tsx | 4 ++-- .../component/ui/navbar_announcement.tsx | 5 ++--- .../component/ui/drawer_detail_position.tsx | 5 +---- .../component/ui/drawer_list_position.tsx | 2 +- .../component/ui/list_position_active.tsx | 3 ++- .../component/ui/list_position_nonactive.tsx | 3 ++- .../project/components/ui/navbar_project.tsx | 3 +-- .../user/member/component/list_member.tsx | 4 ++-- .../component/ui/drawer_detail_member.tsx | 3 +-- .../member/component/ui/drawer_list_member.tsx | 17 ++++++++--------- .../user/member/view/view_detail_member.tsx | 6 +----- .../user/profile/view/view_edit_profile.tsx | 8 +------- 16 files changed, 24 insertions(+), 54 deletions(-) delete mode 100644 src/module/_global/val/isDrawer.ts delete mode 100644 src/module/_global/val/isModal.ts diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index e4c5267..ef95e3c 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -5,8 +5,6 @@ import LoadingPage from "./layout/layout_loading_page"; import LayoutLogin from "./layout/layout_login"; import LayoutNavbarHome from "./layout/layout_navbar_home"; import LayoutNavbarNew from "./layout/layout_navbar_new"; -import { isDrawer } from "./val/isDrawer"; -import { isModal } from "./val/isModal"; export { WARNA } export { LayoutLogin } @@ -14,6 +12,4 @@ export { LayoutNavbarHome } export { LayoutIconBack } export { LoadingPage } export { LayoutDrawer } -export { isDrawer } -export { isModal } export { LayoutNavbarNew } \ No newline at end of file diff --git a/src/module/_global/layout/layout_modal.tsx b/src/module/_global/layout/layout_modal.tsx index 650b46e..efec057 100644 --- a/src/module/_global/layout/layout_modal.tsx +++ b/src/module/_global/layout/layout_modal.tsx @@ -1,11 +1,8 @@ -import { useHookstate } from '@hookstate/core'; import { Box, Button, Flex, Modal, Text } from '@mantine/core'; import React, { useState } from 'react'; import { BsQuestionCircleFill } from 'react-icons/bs'; -import { isModal } from '../val/isModal'; export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) { - const openModal = useHookstate(isModal) const [isValModal, setValModal] = useState(opened) return ( @@ -20,9 +15,11 @@ export default function DrawerListMember() { cols={{ base: 3, sm: 3, lg: 3 }} > { router.push('/member/create') - onCLose() }} > @@ -33,7 +30,9 @@ export default function DrawerListMember() { - + diff --git a/src/module/user/member/view/view_detail_member.tsx b/src/module/user/member/view/view_detail_member.tsx index bdacf97..7446d17 100644 --- a/src/module/user/member/view/view_detail_member.tsx +++ b/src/module/user/member/view/view_detail_member.tsx @@ -1,9 +1,5 @@ -import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global"; -import { useHookstate } from "@hookstate/core"; -import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core"; +import { Box, Group, Text } from "@mantine/core"; import { FaSquarePhone } from "react-icons/fa6"; -import { HiMenu } from "react-icons/hi"; -import { HiUser } from "react-icons/hi2"; import { MdEmail } from "react-icons/md"; import { RiIdCardFill } from "react-icons/ri"; import NavbarDetailMember from "../component/ui/navbar_detail_member"; diff --git a/src/module/user/profile/view/view_edit_profile.tsx b/src/module/user/profile/view/view_edit_profile.tsx index f877051..4f93b49 100644 --- a/src/module/user/profile/view/view_edit_profile.tsx +++ b/src/module/user/profile/view/view_edit_profile.tsx @@ -1,13 +1,7 @@ - -import { isModal, WARNA } from "@/module/_global"; -import { Box, Button, Modal, Stack, TextInput } from "@mantine/core"; -import HeaderEditProfile from "../component/ui/header_edit_profile"; -import { HiUser } from "react-icons/hi2"; -import { useHookstate } from "@hookstate/core"; import EditProfile from "../component/edit_profile"; export default function ViewEditProfile() { return ( - + ) } \ No newline at end of file