[feat] Populate the map with project markers

api/maps/addMarker.tsx

@@ -0,0 +1,16 @@
+import { Marker } from '@react-google-maps/api';
+import { Project } from '../../types/schema';
+
+export default function addMarker(projects: Project[] | null) {
+  return projects?.map(project => {
+    return project.approved ? (
+      <Marker
+        key={project.id}
+        position={{
+          lat: project.latitude,
+          lng: project.longitude,
+        }}
+      />
+    ) : null;
+  });
+}

api/supabase/queries/query.ts

@@ -1,8 +1,11 @@
 import { Project } from '../../../types/schema';
 import supabase from '../createClient';
 
-export async function queryProjects() {
-  const { data: projects, error } = await supabase.from('Projects').select('*');
+export default async function queryProjects() {
+  const { data: projects, error } = await supabase
+    .from('Projects')
+    .select('*')
+    .eq('approved', true);
 
   console.log('PROJECTS', projects, 'ERROR', error);
 

app/page.tsx

@@ -1,12 +1,28 @@
-import { CSSProperties } from 'react';
+'use client';
+
+import { CSSProperties, useEffect, useState } from 'react';
 import Map from '@/components/Map/map';
 import ProjectModal from '@/components/ProjectModal';
+import queryProjects from '../api/supabase/queries/query';
+import { Project } from '../types/schema';
 
 export default function Home() {
+  const [projects, setProjects] = useState<Project[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    queryProjects()
+      .then(data => {
+        setProjects(data.projects);
+      })
+      .catch(err => setError(err));
+  }, []);
+
   return (
     <main style={mainStyles}>
       <ProjectModal project_id={1}></ProjectModal>
-      <Map />
+      {error ? <div style={errorStyles}>{error}</div> : null}
+      {projects ? <Map projects={projects} /> : null}
     </main>
   );
 }
@@ -21,3 +37,7 @@ const mainStyles: CSSProperties = {
   alignItems: 'center',
   justifyContent: 'center',
 };
+
+const errorStyles: CSSProperties = {
+  color: '#D22B2B',
+};

app/testing/page.tsx

@@ -3,26 +3,9 @@
 import { CSSProperties, useEffect, useState } from 'react';
 import Image from 'next/image';
 import BPLogo from '@/assets/images/bp-logo.png';
-import { queryProjects } from '../../api/supabase/queries/query';
-
-interface Project {
-  id: string;
-  project_name: string;
-  energy_category: string;
-  size: number;
-  developer: string;
-  longitude: number;
-  latitude: number;
-  project_statues: string;
-  county: string;
-  town: string;
-  region: string;
-  state_senate_district: number;
-  assembly_district: number;
-  project_image: string | null;
-  additional_information: string | null;
-  key_development_milestones: object | null;
-}
+import queryProjects from '../../api/supabase/queries/query';
+import Map from '../../components/Map/map';
+import { Project } from '../../types/schema';
 
 export default function Home() {
   const [projects, setProjects] = useState<Project[] | null>(null);
@@ -51,6 +34,7 @@ export default function Home() {
         <div>Loading...</div>
       )}
       {error ? <div style={errorStyles}>{error}</div> : null}
+      {projects ? <Map projects={projects} /> : null}
     </main>
   );
 }

components/Map/map.tsx

@@ -2,20 +2,22 @@
 
 import { useCallback, useState } from 'react';
 import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+import addMarker from '../../api/maps/addMarker';
+import { Project } from '../../types/schema';
 
 const containerStyle = {
   width: '700px',
   height: '700px',
 };
 
 const center = {
-  lat: 40.7128,
-  lng: -74.006,
+  lat: 43.0481,
+  lng: -76.1474,
 };
 
 const zoom = 7;
 
-export default function Map() {
+export default function Map(props: { projects: Project[] | null }) {
   const { isLoaded } = useJsApiLoader({
     id: 'google-map-script',
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string,
@@ -39,7 +41,9 @@ export default function Map() {
       mapContainerStyle={containerStyle}
       onLoad={onLoad}
       onUnmount={onUnmount}
-    ></GoogleMap>
+    >
+      {addMarker(props.projects)}
+    </GoogleMap>
   ) : (
     <></>
   );