From 5f62feda39a2c55a2b78e4ef1f34491aaef7f61b Mon Sep 17 00:00:00 2001 From: rahul_g Date: Fri, 19 Jul 2024 13:31:41 +0530 Subject: [PATCH] Fixed navigation issue on block component and optimized all component of master --- src/pages/block.tsx | 221 +++++++++++++++++------------------------ src/pages/district.tsx | 164 ++++++++++++++++-------------- src/pages/state.tsx | 188 ++++++++++++++++++----------------- 3 files changed, 276 insertions(+), 297 deletions(-) diff --git a/src/pages/block.tsx b/src/pages/block.tsx index 13284ac7..a9790ea8 100644 --- a/src/pages/block.tsx +++ b/src/pages/block.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useMemo, useCallback } from "react"; import KaTableComponent from "../components/KaTableComponent"; import { DataType } from "ka-table/enums"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; @@ -11,159 +11,119 @@ import MenuItem from "@mui/material/MenuItem"; import Select, { SelectChangeEvent } from "@mui/material/Select"; import PageSizeSelector from "@/components/PageSelector"; import { useTranslation } from "next-i18next"; -import { - getStateList, - getDistrictList, - getBlockList, -} from "@/services/MasterDataService"; -type StateDetail = { - value: string; - label: string; -}; +// Static Data +const staticStateData = [ + { value: "MH", label: "MAHARASHTRA" }, + { value: "KA", label: "KARNATAKA" }, +]; -type DistrictDetail = { - value: string; - label: string; -}; +const staticDistrictData = [ + { value: "D1", label: "Pune" }, + { value: "D2", label: "Mumbai" }, +]; -type BlockDetail = { - label: string; -}; +const staticBlockData = [{ label: "Hinjewadi" }, { label: "Kothrud" }]; const Block: React.FC = () => { const { t } = useTranslation(); - const [selectedState, setSelectedState] = useState(""); - const [selectedDistrict, setSelectedDistrict] = useState(""); + const [selectedState, setSelectedState] = useState("MH"); + const [selectedDistrict, setSelectedDistrict] = useState("D1"); const [selectedSort, setSelectedSort] = useState(t("MASTER.SORT")); const [pageOffset, setPageOffset] = useState(0); const [pageLimit, setPageLimit] = useState(10); - const [stateData, setStateData] = useState([]); - const [districtData, setDistrictData] = useState([]); - const [blockData, setBlockData] = useState([]); - const [pageSize, setPageSize] = useState(""); + const [stateData] = useState(staticStateData); + const [districtData] = useState(staticDistrictData); + const [blockData] = useState(staticBlockData); + const [pageSize, setPageSize] = useState(10); const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc"); const [selectedFilter, setSelectedFilter] = useState("All"); - const columns = [ - { - key: "block", - title: t("MASTER.BLOCK_NAMES"), - dataType: DataType.String, - }, - { - key: "actions", - title: t("MASTER.ACTIONS"), - dataType: DataType.String, - }, - ]; + const columns = useMemo( + () => [ + { + key: "block", + title: t("MASTER.BLOCK_NAMES"), + dataType: DataType.String, + }, + { + key: "actions", + title: t("MASTER.ACTIONS"), + dataType: DataType.String, + }, + ], + [t] + ); - const handleChange = (event: SelectChangeEvent) => { - setPageSize(event.target.value); + const handleChange = useCallback((event: SelectChangeEvent) => { + setPageSize(Number(event.target.value)); setPageLimit(Number(event.target.value)); - }; + }, []); - const handlePaginationChange = ( - event: React.ChangeEvent, - value: number - ) => { - setPageOffset(value - 1); - }; + const handlePaginationChange = useCallback( + (event: React.ChangeEvent, value: number) => { + setPageOffset(value - 1); + }, + [] + ); - const PageSizeSelectorFunction = () => ( - + const PageSizeSelectorFunction = useCallback( + () => ( + + ), + [handleChange, pageSize] ); - const handleStateChange = async (event: SelectChangeEvent) => { - const selectedState = event.target.value; - setSelectedState(selectedState); - try { - const data = await getDistrictList(selectedState); - setDistrictData(data.result || []); - setSelectedDistrict(data.result[0]?.value || ""); - const blockData = await getBlockList(data.result[0]?.value || ""); - setBlockData(blockData.result || []); - } catch (error) { - console.error("Error fetching district data", error); - } - }; + const handleStateChange = useCallback((event: SelectChangeEvent) => { + setSelectedState(event.target.value); + }, []); - const handleDistrictChange = async (event: SelectChangeEvent) => { - const selectedDistrict = event.target.value; - setSelectedDistrict(selectedDistrict); - try { - const blockData = await getBlockList(selectedDistrict); - setBlockData(blockData.result || []); - } catch (error) { - console.error("Error fetching block data", error); - } - }; + const handleDistrictChange = useCallback( + (event: SelectChangeEvent) => { + setSelectedDistrict(event.target.value); + }, + [] + ); - const handleSortChange = (event: SelectChangeEvent) => { + const handleSortChange = useCallback((event: SelectChangeEvent) => { const sortValue = event.target.value; setSelectedSort(sortValue); - if (sortValue === "Z-A") { - setSortDirection("desc"); - } else { - setSortDirection("asc"); - } - sortBlocks(sortValue); - }; + setSortDirection(sortValue === "Z-A" ? "desc" : "asc"); + }, []); - const sortBlocks = (sortValue: string) => { - const sortedBlocks = [...blockData]; - sortedBlocks.sort((a, b) => { - if (sortDirection === "asc") { - return a.label.localeCompare(b.label); - } else { - return b.label.localeCompare(a.label); - } - }); - setBlockData(sortedBlocks); - }; - const handleFilterChange = async (event: SelectChangeEvent) => { - console.log(event.target.value as string); - setSelectedFilter(event.target.value as string); - }; - const handleEdit = (rowData: any) => { - console.log("Edit row:", rowData); - }; + const handleFilterChange = useCallback((event: SelectChangeEvent) => { + setSelectedFilter(event.target.value); + }, []); - const handleDelete = (rowData: any) => { + const handleEdit = useCallback((rowData: any) => { + console.log("Edit row:", rowData); + }, []); + const handleDelete = useCallback((rowData: any) => { console.log("Delete row:", rowData); - }; - useEffect(() => { - const fetchStateData = async () => { - try { - const data = await getStateList(); - setStateData(data.result || []); - const initialState = data.result[0]?.value || ""; - setSelectedState(initialState); - const districtData = await getDistrictList(initialState); - setDistrictData(districtData.result || []); - const initialDistrict = districtData.result[0]?.value || ""; - setSelectedDistrict(initialDistrict); - const blockData = await getBlockList(initialDistrict); - setBlockData(blockData.result || []); - } catch (error) { - console.error("Error fetching initial data", error); - } - }; - fetchStateData(); }, []); + const sortedBlocks = [...blockData].sort((a, b) => + sortDirection === "asc" + ? a.label.localeCompare(b.label) + : b.label.localeCompare(a.label) + ); + const paginatedData = sortedBlocks.slice( + pageOffset * pageLimit, + (pageOffset + 1) * pageLimit + ); + const userProps = { userType: t("MASTER.BLOCKS"), searchPlaceHolder: t("MASTER.SEARCHBAR_PLACEHOLDER_BLOCK"), - selectedSort: selectedSort, - handleStateChange: handleStateChange, - handleSortChange: handleSortChange, - handleDistrictChange: handleDistrictChange, + selectedSort, + handleStateChange, + handleSortChange, + handleDistrictChange, states: stateData.map((state) => ({ value: state.value, label: state.label, @@ -172,12 +132,11 @@ const Block: React.FC = () => { value: district.value, label: district.label, })), - selectedState: selectedState, - selectedDistrict: selectedDistrict, + selectedState, + selectedDistrict, showStateDropdown: false, - selectedFilter: selectedFilter, - handleFilterChange: handleFilterChange - + selectedFilter, + handleFilterChange, }; return ( @@ -225,12 +184,12 @@ const Block: React.FC = () => { ({ + data={paginatedData.map((block) => ({ block: block.label, actions: "Action buttons", }))} limit={pageLimit} - offset={pageOffset * pageLimit} + offset={pageOffset} PagesSelector={() => ( { ); }; - export async function getStaticProps({ locale }: any) { return { props: { @@ -258,4 +216,3 @@ export async function getStaticProps({ locale }: any) { } export default Block; - \ No newline at end of file diff --git a/src/pages/district.tsx b/src/pages/district.tsx index 9ccbbd9d..713b45b9 100644 --- a/src/pages/district.tsx +++ b/src/pages/district.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useMemo, useCallback } from "react"; import KaTableComponent from "../components/KaTableComponent"; import { DataType } from "ka-table/enums"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; @@ -32,22 +32,26 @@ const District: React.FC = () => { const [pageSize, setPageSize] = useState(10); const [stateData, setStateData] = useState([]); const [districtData, setDistrictData] = useState([]); + const [sortedDistricts, setSortedDistricts] = useState([]); const [pageCount, setPageCount] = useState(1); const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc"); const [selectedFilter, setSelectedFilter] = useState("All"); - const columns = [ - { - key: "label", - title: t("MASTER.DISTRICT_NAMES"), - dataType: DataType.String, - }, - { - key: "actions", - title: t("MASTER.ACTIONS"), - dataType: DataType.String, - }, - ]; + const columns = useMemo( + () => [ + { + key: "label", + title: t("MASTER.DISTRICT_NAMES"), + dataType: DataType.String, + }, + { + key: "actions", + title: t("MASTER.ACTIONS"), + dataType: DataType.String, + }, + ], + [t] + ); const handleChange = (event: SelectChangeEvent) => { setPageSize(Number(event.target.value)); @@ -61,58 +65,64 @@ const District: React.FC = () => { setPageOffset(value - 1); }; - const PageSizeSelectorFunction = () => ( - + const PageSizeSelectorFunction = useCallback( + () => ( + + ), + [pageSize] ); - const handleStateChange = async (event: SelectChangeEvent) => { - const selectedState = event.target.value; - setSelectedState(selectedState); - try { - const data = await getDistrictList(selectedState); - setDistrictData(data.result); - setSelectedDistrict(data.result[0]?.label || "-"); - } catch (error) { - console.error("Error fetching district data", error); - } - }; + const handleStateChange = useCallback( + async (event: SelectChangeEvent) => { + const selectedState = event.target.value; + setSelectedState(selectedState); + try { + const data = await getDistrictList(selectedState); + setDistrictData(data.result); + setSelectedDistrict(data.result[0]?.label || "-"); + } catch (error) { + console.error("Error fetching district data", error); + } + }, + [] + ); - const handleSortChange = (event: SelectChangeEvent) => { + const handleSortChange = useCallback((event: SelectChangeEvent) => { const sortValue = event.target.value; setSelectedSort(sortValue); - if (sortValue === "Z-A") { - setSortDirection("desc"); - } else { - setSortDirection("asc"); - } - }; - const handleEdit = (rowData: any) => { - console.log("Edit row:", rowData); - }; + setSortDirection(sortValue === "Z-A" ? "desc" : "asc"); + }, []); - const handleDelete = (rowData: any) => { + const handleEdit = useCallback((rowData: any) => { + console.log("Edit row:", rowData); + }, []); + const handleDelete = useCallback((rowData: any) => { console.log("Delete row:", rowData); - }; - const handleFilterChange = async (event: SelectChangeEvent) => { - console.log(event.target.value as string); - setSelectedFilter(event.target.value as string); - }; + }, []); + + const handleFilterChange = useCallback( + async (event: SelectChangeEvent) => { + console.log(event.target.value); + setSelectedFilter(event.target.value); + }, + [] + ); + useEffect(() => { const fetchStateData = async () => { try { const data = await getStateList(); setStateData(data.result); - setSelectedState(data.result[0]?.value || ""); - if (data.result[0]?.value) { - const districtData = await getDistrictList(data.result[0].value); - setDistrictData(districtData.result); - setSelectedDistrict(districtData.result[0]?.label || "-"); - } + const initialSelectedState = data.result[0]?.value || ""; + setSelectedState(initialSelectedState); + const districtData = await getDistrictList(initialSelectedState); + setDistrictData(districtData.result); + setSelectedDistrict(districtData.result[0]?.label || "-"); } catch (error) { console.error("Error fetching state data", error); } @@ -122,32 +132,36 @@ const District: React.FC = () => { }, []); useEffect(() => { - const sortedDistricts = [...districtData].sort((a, b) => - sortDirection === "asc" - ? a.label.localeCompare(b.label) - : b.label.localeCompare(a.label) - ); - const paginatedData = sortedDistricts.slice( - pageOffset * pageLimit, - (pageOffset + 1) * pageLimit - ); - setDistrictData(paginatedData); - setPageCount(Math.ceil(districtData.length / pageLimit)); - }, [pageOffset, pageLimit, sortDirection, districtData]); + const sortAndPaginateData = () => { + const sorted = [...districtData].sort((a, b) => + sortDirection === "asc" + ? a.label.localeCompare(b.label) + : b.label.localeCompare(a.label) + ); + const paginatedData = sorted.slice( + pageOffset * pageLimit, + (pageOffset + 1) * pageLimit + ); + setSortedDistricts(paginatedData); + setPageCount(Math.ceil(districtData.length / pageLimit)); + }; + + sortAndPaginateData(); + }, [districtData, pageOffset, pageLimit, sortDirection]); const userProps = { userType: t("MASTER.DISTRICTS"), searchPlaceHolder: t("MASTER.SEARCHBAR_PLACEHOLDER_DISTRICT"), - selectedSort: selectedSort, - handleStateChange: handleStateChange, - handleSortChange: handleSortChange, + selectedSort, + handleStateChange, + handleSortChange, states: stateData.map((state) => state.label), districts: districtData.map((district) => district.label), - selectedState: selectedState, - selectedDistrict: selectedDistrict, + selectedState, + selectedDistrict, showStateDropdown: false, - selectedFilter:selectedFilter, - handleFilterChange:handleFilterChange + selectedFilter, + handleFilterChange, }; return ( @@ -155,10 +169,10 @@ const District: React.FC = () => { - States + States