diff --git a/package-lock.json b/package-lock.json index 89aafd4..a8f8531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.2.0", - "react-dom": "^19.2.0" + "react-dom": "^19.2.0", + "react-window": "^2.2.7" }, "devDependencies": { "@eslint/js": "^9.39.1", @@ -59,7 +60,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1526,7 +1526,6 @@ "integrity": "sha512-68e+T28EbdmLSTkPgs3+UacC6rzmqrcWFPQs1C8mwJhI/r5Uxr0yEuQotczNRROd1gq30NGxee+fo0rSIxpyAw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1537,7 +1536,6 @@ "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1607,7 +1605,6 @@ "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.54.0", "@typescript-eslint/types": "8.54.0", @@ -1859,7 +1856,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1978,7 +1974,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2200,7 +2195,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3019,7 +3013,6 @@ "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==", "dev": true, "license": "MIT", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -3066,7 +3059,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -3076,7 +3068,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -3649,6 +3640,16 @@ "dev": true, "license": "MIT" }, + "node_modules/react-window": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-2.2.7.tgz", + "integrity": "sha512-SH5nvfUQwGHYyriDUAOt7wfPsfG9Qxd6OdzQxl5oQ4dsSsUicqQvjV7dR+NqZ4coY0fUn3w1jnC5PwzIUWEg5w==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3675,7 +3676,6 @@ "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -3866,7 +3866,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3968,7 +3967,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -4098,7 +4096,6 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 204350f..757f147 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ }, "dependencies": { "react": "^19.2.0", - "react-dom": "^19.2.0" + "react-dom": "^19.2.0", + "react-window": "^2.2.7" }, "devDependencies": { "@eslint/js": "^9.39.1", diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx index 6ae81df..d1d87a2 100644 --- a/src/components/app/app.tsx +++ b/src/components/app/app.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useCo2Data } from '../../hooks/useCo2Data'; import { LoadingSpinner } from '../loading-spinner/loading-spinner'; import { SearchBar } from '../search-bar/search-bar'; @@ -32,36 +32,54 @@ export const App = () => { isColumnModalOpen: false, }); - const years = data ? getAvailableYears(data) : []; - const availableColumns = getAvailableColumns(); - - const handleSearch = (value: string) => { - setState({ ...state, searchQuery: value }); - }; - - const handleYearChange = (year: number) => { - setState({ ...state, selectedYear: year }); - }; - - const handleSortFieldChange = (field: 'name' | 'population') => { - setState({ ...state, sortField: field }); - }; - - const handleSortOrderToggle = () => { - setState({ - ...state, - sortOrder: state.sortOrder === 'asc' ? 'desc' : 'asc', - }); - }; - - const handleColumnToggle = (column: string) => { - setState({ - ...state, - selectedColumns: state.selectedColumns.includes(column) - ? state.selectedColumns.filter((c) => c !== column) - : [...state.selectedColumns, column], - }); - }; +const years = useMemo(() => { + return data ? getAvailableYears(data) : []; +}, [data]); + + +const availableColumns = useMemo(() => { + return getAvailableColumns(); +}, []); + + const handleSearch = useCallback((value: string) => { + setState(prev => ({ + ...prev, + searchQuery: value, + })); +}, []); + +const handleYearChange = useCallback((year: number) => { + setState(prev => ({ + ...prev, + selectedYear: year, + })); +}, []); + +const handleSortFieldChange = useCallback( + (field: 'name' | 'population') => { + setState(prev => ({ + ...prev, + sortField: field, + })); + }, + [] +); + + const handleSortOrderToggle = useCallback(() => { + setState(prev => ({ + ...prev, + sortOrder: prev.sortOrder === 'asc' ? 'desc' : 'asc', + })); +}, []); + +const handleColumnToggle = useCallback((column: string) => { + setState(prev => ({ + ...prev, + selectedColumns: prev.selectedColumns.includes(column) + ? prev.selectedColumns.filter(c => c !== column) + : [...prev.selectedColumns, column], + })); +}, []); const handleModalToggle = () => { setState({ ...state, isColumnModalOpen: !state.isColumnModalOpen }); diff --git a/src/components/country-card/country-card.tsx b/src/components/country-card/country-card.tsx index 7eb1059..82c12b6 100644 --- a/src/components/country-card/country-card.tsx +++ b/src/components/country-card/country-card.tsx @@ -1,30 +1,49 @@ -import type { Country } from '../../types'; -import { DataTable } from '../data-table/data-table'; -import { - getPopulationForYear, - getCo2ForYear, - createYearDataMap, -} from '../../utils/data-transformers'; -import { formatNumber } from '../../utils/format-utils'; - -import styles from './country-card.module.css'; - -type CountryCardProps = { - country: Country; - selectedYear: number; - selectedColumns: string[]; -}; - -export const CountryCard = ({ country, selectedYear, selectedColumns }: CountryCardProps) => { - const yearDataMap = createYearDataMap(country.data); - const population = getPopulationForYear(yearDataMap, selectedYear); - const co2 = getCo2ForYear(yearDataMap, selectedYear); +import React, { useMemo } from "react"; +import { formatNumber } from "../../utils/format-utils"; +import styles from "./country-card.module.css"; +import { createYearDataMap, getCo2ForYear, getPopulationForYear } from "../../utils/data-transformers"; +import { DataTable } from "../data-table/data-table"; +import type { Country } from "../../types"; + +// Component Status +// CountryList ✅ useMemo + sort +// CountryCard ✅ useMemo + memo +// DataTable 🔜 add memo + ke + + +// CountryList ⭐⭐⭐⭐⭐ +// CountryCard ⭐⭐⭐⭐⭐ +// DataTable ⭐⭐⭐⭐ +// Parent handlers ⭐⭐⭐ +// Virtualization ⭐⭐⭐⭐ (bonus) + + +type CountryCardProps = { country: Country; selectedYear: number; selectedColumns: string[] }; + +export const CountryCard = React.memo(function CountryCard({ + country, + selectedYear, + selectedColumns, +}: CountryCardProps) { + const yearDataMap = useMemo(() => { + return createYearDataMap(country.data); + }, [country.data]); + + const population = useMemo(() => { + return getPopulationForYear(yearDataMap, selectedYear); + }, [yearDataMap, selectedYear]); + + const co2 = useMemo(() => { + return getCo2ForYear(yearDataMap, selectedYear); + }, [yearDataMap, selectedYear]); return (

{country.id}

- {country.iso_code && {country.iso_code}} + {country.iso_code && ( + {country.iso_code} + )}
@@ -36,7 +55,11 @@ export const CountryCard = ({ country, selectedYear, selectedColumns }: CountryC
- + ); -}; +}); \ No newline at end of file diff --git a/src/components/country-list/country-list.tsx b/src/components/country-list/country-list.tsx index d3a43e5..76c59eb 100644 --- a/src/components/country-list/country-list.tsx +++ b/src/components/country-list/country-list.tsx @@ -1,6 +1,15 @@ +import { useMemo } from 'react'; +import { List } from 'react-window'; +import type { RowComponentProps } from 'react-window'; + import type { Country } from '../../types'; + +import { + getPopulationForYear, + createYearDataMap, +} from '../../utils/data-transformers'; + import { CountryCard } from '../country-card/country-card'; -import { getPopulationForYear, createYearDataMap } from '../../utils/data-transformers'; import styles from './country-list.module.css'; @@ -15,6 +24,41 @@ type CountryListProps = { onYearChange: (year: number) => void; }; +type CountryWithYearDataMap = Country & { + yearDataMap: ReturnType; +}; + +type CountryRowProps = { + countries: CountryWithYearDataMap[]; + selectedColumns: string[]; + selectedYear: number; +}; + +const CountryRow = ({ + ariaAttributes, + countries, + index, + selectedColumns, + selectedYear, + style, +}: RowComponentProps) => { + const country = countries[index]; + + if (!country) { + return null; + } + + return ( +
+ +
+ ); +}; + export const CountryList = ({ countries, searchQuery, @@ -24,32 +68,65 @@ export const CountryList = ({ sortField, sortOrder, }: CountryListProps) => { - const filteredCountries = countries - .filter((c) => { - const matchesSearch = c.id.toLowerCase().includes(searchQuery.toLowerCase()); - const matchesRegion = !selectedRegion || c.data.some((d) => d.region === selectedRegion); - return matchesSearch && matchesRegion; - }) - .sort((a, b) => { - if (sortField === 'name') { - return sortOrder === 'asc' ? a.id.localeCompare(b.id) : b.id.localeCompare(a.id); - } else { - const popA = getPopulationForYear(createYearDataMap(a.data), selectedYear) || 0; - const popB = getPopulationForYear(createYearDataMap(b.data), selectedYear) || 0; + const countriesWithMap = useMemo(() => { + return countries.map((country) => ({ + ...country, + yearDataMap: createYearDataMap(country.data), + })); + }, [countries]); + + const filteredCountries = useMemo(() => { + return countriesWithMap + .filter((country) => { + const matchesSearch = country.id + .toLowerCase() + .includes(searchQuery.toLowerCase()); + + const matchesRegion = + !selectedRegion || + country.data.some((data) => data.region === selectedRegion); + + return matchesSearch && matchesRegion; + }) + .sort((a, b) => { + if (sortField === 'name') { + return sortOrder === 'asc' + ? a.id.localeCompare(b.id) + : b.id.localeCompare(a.id); + } + + const popA = getPopulationForYear(a.yearDataMap, selectedYear) || 0; + const popB = getPopulationForYear(b.yearDataMap, selectedYear) || 0; + return sortOrder === 'asc' ? popA - popB : popB - popA; - } - }); + }); + }, [ + countriesWithMap, + searchQuery, + selectedRegion, + selectedYear, + sortField, + sortOrder, + ]); + + const rowProps = useMemo( + () => ({ + countries: filteredCountries, + selectedColumns, + selectedYear, + }), + [filteredCountries, selectedColumns, selectedYear], + ); return (
- {filteredCountries.map((country, index) => ( - - ))} +
); -}; +}; \ No newline at end of file diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx index 1050543..a22380f 100644 --- a/src/components/data-table/data-table.tsx +++ b/src/components/data-table/data-table.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import type { YearData } from '../../types'; import { formatNumber } from '../../utils/format-utils'; @@ -10,7 +11,9 @@ type DataTableProps = { }; export const DataTable = ({ data, year, columns }: DataTableProps) => { - const yearData = data.filter((d) => d.year === year); + const yearData = useMemo(() => { + return data.filter((d) => d.year === year); + }, [data, year]); if (yearData.length === 0) { return
No data available for year {year}
; diff --git a/src/utils/data-transformers.ts b/src/utils/data-transformers.ts index 3d58d44..61b0977 100644 --- a/src/utils/data-transformers.ts +++ b/src/utils/data-transformers.ts @@ -46,7 +46,7 @@ export const getCo2ForYear = (yearMap: Map, year: number): num }; export const getAvailableYears = (countries: Country[]): number[] => { - const years = new Set(); + const years = new Set(); countries.forEach((country) => { country.data.forEach((yearData) => { @@ -54,5 +54,5 @@ export const getAvailableYears = (countries: Country[]): number[] => { }); }); - return Array.from(years).sort((a, b) => a - b); + return Array.from(years).sort((a, b) => a - b); };