From b21e1f0c2e6f03abd83ba715af4f116e0f9ffccb Mon Sep 17 00:00:00 2001 From: nico Date: Mon, 25 Aug 2025 21:47:45 +0800 Subject: [PATCH] Add Debounched Search Menu Ekonomi, Inovasi, Keamanan --- .../(pages)/ekonomi/pasar-desa/page.tsx | 7 +- .../ekonomi/program-kemiskinan/page.tsx | 7 +- .../desa-digital-smart-village/page.tsx | 7 +- .../info-teknologi-tepat-guna/page.tsx | 164 +++++++----------- .../page.tsx | 7 +- .../(pages)/keamanan/tips-keamanan/page.tsx | 7 +- 6 files changed, 81 insertions(+), 118 deletions(-) diff --git a/src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx b/src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx index 3e8f3a6f..8062d4ab 100644 --- a/src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx +++ b/src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx @@ -2,7 +2,7 @@ import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa'; import colors from '@/con/colors'; import { Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; -import { useShallowEffect } from '@mantine/hooks'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react'; import { motion } from 'motion/react'; import { useRouter } from 'next/navigation'; @@ -14,6 +14,7 @@ function Page() { const router = useRouter() const state = useProxy(pasarDesaState.pasarDesa) const [search, setSearch] = useState(''); + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const [selectedCategory, setSelectedCategory] = useState(null); const { data, @@ -35,8 +36,8 @@ function Page() { : data; useShallowEffect(() => { - load(page, 4, search, selectedCategory || undefined) - }, [page, search, selectedCategory]) + load(page, 4, debouncedSearch, selectedCategory || undefined) + }, [page, debouncedSearch, selectedCategory]) if (loading || !data) { diff --git a/src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx b/src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx index 97d11d42..fb015f6a 100644 --- a/src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx +++ b/src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx @@ -6,7 +6,7 @@ import BackButton from '../../desa/layanan/_com/BackButto'; import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, Tooltip, XAxis, YAxis } from 'recharts'; import { useProxy } from 'valtio/utils'; import programKemiskinanState from '@/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan'; -import { useShallowEffect } from '@mantine/hooks'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { IconSearch } from '@tabler/icons-react'; interface StatistikData { @@ -31,6 +31,7 @@ interface ProgramKemiskinanData { function Page() { const [search, setSearch] = useState('') + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const state = useProxy(programKemiskinanState) const { @@ -42,8 +43,8 @@ function Page() { } = state.findMany useShallowEffect(() => { - load(page, 2, search) - }, [page, search]) + load(page, 2, debouncedSearch) + }, [page, debouncedSearch]) if (loading || !data) { return ( diff --git a/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx b/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx index 5a83dbaa..ea42b000 100644 --- a/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx +++ b/src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx @@ -5,11 +5,12 @@ import React, { useState } from 'react'; import BackButton from '../../desa/layanan/_com/BackButto'; import { useProxy } from 'valtio/utils'; import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital'; -import { useShallowEffect } from '@mantine/hooks'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { IconSearch } from '@tabler/icons-react'; function Page() { const [search, setSearch] = useState("") + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const state = useProxy(desaDigitalState) const { data, @@ -20,8 +21,8 @@ function Page() { } = state.findMany useShallowEffect(() => { - load(page, 3, search) - }, [page, search]) + load(page, 3, debouncedSearch) + }, [page, debouncedSearch]) const filteredData = data || [] diff --git a/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx b/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx index 4bbd73b1..e5935bf7 100644 --- a/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx +++ b/src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx @@ -1,108 +1,63 @@ +'use client' import colors from '@/con/colors'; -import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core'; -import React from 'react'; +import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import BackButton from '../../desa/layanan/_com/BackButto'; +import { useProxy } from 'valtio/utils'; -const data = [ - { - id: 1, - image: '/api/img/pertanian-cerdas.png', - judul: 'Pertanian Cerdas', - subjudul1: 'Sistem Irigasi Hemat Air', - subjudul2: 'Pengolahan Limbah Pertanian', - deskripsi1: - Penggunaan sensor kelembaban tanah - Kontrol penyiraman otomatis - Pengurangan konsumsi air hingga 40% - , - deskripsi2: - Mesin pencacah jerami otomatis - Konversi limbah menjadi pupuk organik - Mengurangi pembakaran sampah pertanian - , - }, - { - id: 2, - image: '/api/img/energi-terbarukan.png', - judul: 'Energi Terbarukan', - subjudul1: 'Pembangkit Listrik Mikrohidro', - subjudul2: 'Solar Home System', - deskripsi1: - Memanfaatkan aliran sungai sekitar - Kapasitas 10-50 kW - Elektrifikasi mandiri desa - , - deskripsi2: - Panel surya untuk rumah tangga - Akses listrik 24 jam - Hemat biaya energi - , - }, - { - id: 3, - image: '/api/img/pengolahan-pangan.png', - judul: 'Pengolahan Pangan', - subjudul1: 'Mesin Pengering Hasil Pertanian', - subjudul2: 'Alat Pengolah Hasil Pertanian', - deskripsi1: - Teknologi pengering tenaga surya - Menjaga kualitas hasil panen - Mencegah kerusakan pasca panen - , - deskripsi2: - Mesin pengupas dan pengemas produk - Meningkatkan nilai jual komoditas - Standarisasi kualitas produk - , - }, - { - id: 4, - image: '/api/img/pengelolaan-sampah.png', - judul: 'Pengelolaan Sampah', - subjudul1: 'Sistem Pengolahan Sampah Terpadu', - subjudul2: 'Komposter Komunal', - deskripsi1: - Pemilahan otomatis - Daur ulang sampah organik dan anorganik - Pembangkit listrik dari sampah - , - deskripsi2: - Teknologi pengomposan cepat - Menghasilkan pupuk organik - Mengurangi sampah ke TPA - , - }, - { - id: 5, - image: '/api/img/kesehatan-daring.png', - judul: 'Kesehatan Masyarakat', - subjudul1: 'Alat Deteksi Dini Penyakit', - subjudul2: 'Air Bersih Mandiri', - deskripsi1: - Skrining kesehatan portable - Pemeriksaan tekanan darah dan gula - Konsultasi medis jarak jauh - , - deskripsi2: - Sistem filter air canggih - Menghilangkan kontaminan - Jaminan kualitas air minum +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; +import { useState } from 'react'; +import infoTeknoState from '@/app/admin/(dashboard)/_state/inovasi/info-tekno'; +import { IconSearch } from '@tabler/icons-react'; - - , - }, -] function Page() { + const [search, setSearch] = useState("") + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay + const state = useProxy(infoTeknoState) + const { + data, + page, + totalPages, + loading, + load, + } = state.findMany + + useShallowEffect(() => { + load(page, 3, debouncedSearch) + }, [page, debouncedSearch]) + + const filteredData = data || [] + + if (loading || !data) { + return ( + + + + ) + } return ( - - Info Teknologi Tepat Guna - - Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga. + + + + Info Teknologi Tepat Guna + + + + setSearch(e.target.value)} + leftSection={} + w={{ base: "50%", md: "100%" }} + /> + + + Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga. @@ -113,18 +68,13 @@ function Page() { md: 3 }} > - {data.map((v, k) => { + {filteredData.map((v, k) => { return ( - - {v.judul} + + {v.name} - {v.subjudul1} - {v.deskripsi1} - - - {v.subjudul2} - {v.deskripsi2} + ) @@ -132,6 +82,14 @@ function Page() { +
+ load(newPage)} // ini penting! + total={totalPages} + my="md" + /> +
); } diff --git a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx index 2337b32f..902977d8 100644 --- a/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx @@ -2,7 +2,7 @@ import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan'; import colors from '@/con/colors'; import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; -import { useShallowEffect } from '@mantine/hooks'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { IconSearch } from '@tabler/icons-react'; import { useState } from 'react'; import { useProxy } from 'valtio/utils'; @@ -12,6 +12,7 @@ import BackButton from '../../desa/layanan/_com/BackButto'; function Page() { const state = useProxy(keamananLingkunganState) const [search, setSearch] = useState('') + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const { data, page, @@ -21,8 +22,8 @@ function Page() { } = state.findMany; useShallowEffect(() => { - load(page, 3, search) - }, [page, search]) + load(page, 3, debouncedSearch) + }, [page, debouncedSearch]) if (loading || !data) { return ( diff --git a/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx b/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx index 531d35a2..2a230ecb 100644 --- a/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx +++ b/src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx @@ -4,7 +4,7 @@ import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skele import BackButton from '../../desa/layanan/_com/BackButto'; import { useProxy } from 'valtio/utils'; import tipsKeamananState from '@/app/admin/(dashboard)/_state/keamanan/tips-keamanan'; -import { useShallowEffect } from '@mantine/hooks'; +import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'; import { useState } from 'react'; import { IconSearch } from '@tabler/icons-react'; @@ -12,6 +12,7 @@ import { IconSearch } from '@tabler/icons-react'; function Page() { const state = useProxy(tipsKeamananState) const [search, setSearch] = useState('') + const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay const { data, page, @@ -21,8 +22,8 @@ function Page() { } = state.findMany; useShallowEffect(() => { - load(page, 3, search) - }, [page, search]) + load(page, 3, debouncedSearch) + }, [page, debouncedSearch]) if (loading || !data) { return (