64 create map component in react by YoungMame · Pull Request #67 · YoungMame/matcha

YoungMame · 2025-12-31T16:58:56Z

/map page

UsersMap component using

Fixing seeding for proper UX

Copilot

Pull request overview

This PR implements a map feature for displaying users on an interactive map using MapLibre GL. The implementation includes a new React component for rendering user locations and clusters, integrates with a backend API to fetch location data, and updates the seeding logic to generate more realistic test data centered around Paris.

Added interactive map component with user markers and clustering support
Integrated MapLibre GL and react-map-gl libraries for map rendering
Fixed field naming inconsistency (profilePictureUrl → profilePicture) between frontend and backend
Enhanced database queries with distance-based sorting and result limiting
Updated seed data to use Paris-centered coordinates for better UX testing

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
nextjs/matcha/src/types/api/usersMap.ts	Added TypeScript interfaces for map user data, clusters, and API responses
nextjs/matcha/src/lib/api/map.ts	Created API client for fetching nearby users from the map endpoint
nextjs/matcha/src/components/map/UsersMap.tsx	Implemented main map component with user markers, clustering, and viewport management
nextjs/matcha/src/app/(logged)/map/page.tsx	Added map page that fetches user profile and renders the UsersMap component
nextjs/matcha/src/app/(logged)/me/page.tsx	Removed unused refetch variable from useMyProfile hook destructuring
fastify/assets/srcs/models/User/index.ts	Fixed field naming, added distance sorting, LIMIT clause, and clustering logic improvements
fastify/assets/seed/seed.ts	Added random name generation and Paris-centered coordinate generation for seed data
fastify/assets/seed/dataset.json	Updated all location coordinates to be centered around Paris
nextjs/matcha/package.json	Added maplibre-gl and react-map-gl dependencies
nextjs/matcha/pnpm-lock.yaml	Updated lock file with new map-related dependencies

Files not reviewed (1)

nextjs/matcha/pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-31T17:03:01Z

+import { useMyProfile } from "@/hooks/useProfile";
+import UsersMap from "@/components/map/UsersMap";
+
+export default function MyProfilePage() {


The function name is 'MyProfilePage' but this is actually the map page, not a profile page. This should be renamed to something like 'MapPage' to accurately reflect its purpose.

Suggested change

export default function MyProfilePage() {

export default function MapPage() {

Copilot · 2025-12-31T17:03:01Z

+            setFirstFetchDone(true);
+            queryClient.invalidateQueries({ queryKey: ['map'] });
+        }
+    }, [center, zoom, lastSignificantMove, radius]);


Missing dependency array includes 'queryClient' and 'firstFetchDone'. The useEffect depends on 'queryClient' (used on line 83) and 'firstFetchDone' (used on line 78), which should be included in the dependency array to avoid stale closures.

Suggested change

}, [center, zoom, lastSignificantMove, radius]);

}, [center, zoom, lastSignificantMove, radius, firstFetchDone, queryClient]);

Copilot · 2025-12-31T17:03:01Z

                parseTags(u.tags),
                u.fame_rate,
-				u.isProfileCompleted ,
+				        u.isProfileCompleted ,


Inconsistent indentation with tabs and spaces mixed. Line 96 uses tabs while other lines use spaces, which violates consistent code formatting practices.

Suggested change

u.isProfileCompleted ,

u.isProfileCompleted,

Copilot · 2025-12-31T17:03:02Z

-            AND 6371 * acos(least(1, greatest(-1, cos(radians(locations.latitude)) * cos(radians($1)) * cos(radians($2) - radians(locations.longitude)) + sin(radians(locations.latitude)) * sin(radians($1))))) < $3`,
+            AND 6371 * acos(least(1, greatest(-1, cos(radians(locations.latitude)) * cos(radians($1)) * cos(radians($2) - radians(locations.longitude)) + sin(radians(locations.latitude)) * sin(radians($1))))) < $3
+            ORDER BY distance ASC
+            LIMIT 100`,


The magic number 100 for LIMIT should be defined as a named constant. Hard-coding the limit makes it difficult to maintain and unclear why 100 was chosen. Consider defining it as a constant like MAX_MAP_USERS_PER_QUERY at the top of the class.

Copilot · 2025-12-31T17:03:02Z

@@ -127,31 +127,50 @@ export default class UserModel {

    getUsersFromLocation = async (lat: number, lgn: number, radius: number): Promise<MapUser[]> => {


Inconsistent parameter name. The parameter is named 'lgn' (line 128) but 'lng' would be more standard and consistent with the frontend code which uses 'lng'. This inconsistency could lead to confusion.

Copilot · 2025-12-31T17:03:04Z

-            [lat, lgn, radius]
-        );
+        let result;
+        if (level == 1 && radius < 300) {


The magic number 300 for radius threshold should be defined as a named constant. Hard-coding this radius value makes it unclear what it represents (presumably kilometers) and makes it harder to tune this threshold later.

Copilot · 2025-12-31T17:03:04Z

+    const onZoomEnd = (evt: { viewState: { zoom: number } }) => {
+        const zoom = evt.viewState.zoom;
+        setZoom(zoom);
+        setLevel(zoom < LEVEL1_ZOOM ? zoom < LEVEL2_ZOOM ? 2 : 1 : 0 );


The level logic is reversed. When zoom is 13 (initial value), zoom < LEVEL1_ZOOM (5) is false, so level will be 0. When zooming out, the zoom value decreases, but the ternary operator sets level=2 when zoom < LEVEL2_ZOOM (3) and level=1 when zoom >= LEVEL2_ZOOM but < LEVEL1_ZOOM. This seems inverted - typically level should increase as you zoom out (lower zoom values).

Copilot · 2025-12-31T17:03:04Z

+                                latitude={user.latitude}
+                                onClick={() => router.push(`/profile/${user.id}`)}
+                                >
+                                <Image className='rounded-full w-24 h-24' unoptimized src={user.profilePicture || '/default-profile.svg'} alt={user.firstName} width={24} height={24} />


Missing alt text fallback. When user.firstName is undefined or empty, the alt attribute will be empty, which is poor for accessibility. Consider using a default value like 'User profile picture'.

Suggested change

<Image className='rounded-full w-24 h-24' unoptimized src={user.profilePicture || '/default-profile.svg'} alt={user.firstName} width={24} height={24} />

<Image className='rounded-full w-24 h-24' unoptimized src={user.profilePicture || '/default-profile.svg'} alt={user.firstName || 'User profile picture'} width={24} height={24} />

Copilot · 2025-12-31T17:03:05Z

+                        {clusters.map((cluster, index) => (
+                            <Marker
+                                key={`cluster-${index}`}


Missing key or unique identifier for clusters. Using array index as a key for clusters (key={cluster-${index}}) can cause issues with React reconciliation if the cluster order changes. If clusters don't have unique IDs, consider using a combination of latitude and longitude as the key.

Suggested change

{clusters.map((cluster, index) => (

<Marker

key={`cluster-${index}`}

{clusters.map((cluster) => (

<Marker

key={`cluster-${cluster.latitude}-${cluster.longitude}`}

Copilot · 2025-12-31T17:03:05Z

+    }, [center, zoom, lastSignificantMove, radius]);
+
+
+    const { isPending, error, data, isFetching } = useQuery({


Unused variable isPending.

Suggested change

const { isPending, error, data, isFetching } = useQuery({

const { error, data, isFetching } = useQuery({

YoungMame added 4 commits December 28, 2025 16:15

add:([WIP]: map data fetching)

db8125f

add:([WIP]:UsersMap component)

f1e8376

add:([WIP]:add map libre react component)

367cdaf

add:(user and cluster markers) & fix:(seeding and sql queries)

566de03

YoungMame self-assigned this Dec 31, 2025

Copilot AI review requested due to automatic review settings December 31, 2025 16:58

YoungMame added the enhancement New feature or request label Dec 31, 2025

YoungMame linked an issue Dec 31, 2025 that may be closed by this pull request

Create Map component in react #64

Closed

6 tasks

Copilot started reviewing on behalf of YoungMame December 31, 2025 16:59 View session

YoungMame merged commit be64abe into main Dec 31, 2025
5 checks passed

Copilot AI reviewed Dec 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

64 create map component in react#67

64 create map component in react#67
YoungMame merged 4 commits into
mainfrom
64-create-map-component-in-react

YoungMame commented Dec 31, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	export default function MyProfilePage() {
	export default function MapPage() {

	}, [center, zoom, lastSignificantMove, radius]);
	}, [center, zoom, lastSignificantMove, radius, firstFetchDone, queryClient]);

		@@ -127,31 +127,50 @@ export default class UserModel {

		getUsersFromLocation = async (lat: number, lgn: number, radius: number): Promise<MapUser[]> => {

	<Image className='rounded-full w-24 h-24' unoptimized src={user.profilePicture \|\| '/default-profile.svg'} alt={user.firstName} width={24} height={24} />
	<Image className='rounded-full w-24 h-24' unoptimized src={user.profilePicture \|\| '/default-profile.svg'} alt={user.firstName \|\| 'User profile picture'} width={24} height={24} />

		}, [center, zoom, lastSignificantMove, radius]);


		const { isPending, error, data, isFetching } = useQuery({

	const { isPending, error, data, isFetching } = useQuery({
	const { error, data, isFetching } = useQuery({

Conversation

YoungMame commented Dec 31, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants