From c4e3989a5761657c8ecdad6d27e82f29f707b1af Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sun, 13 Oct 2024 03:43:14 -0700 Subject: [PATCH 1/5] marker working --- api/maps/addMarker.tsx | 21 +++++++++++++++++++++ app/page.tsx | 4 ++-- app/testing/page.tsx | 22 +++------------------- components/Map/map.tsx | 13 ++++++++++--- types/helper.d.ts | 22 ++++++++++++++++++++++ 5 files changed, 58 insertions(+), 24 deletions(-) create mode 100644 api/maps/addMarker.tsx diff --git a/api/maps/addMarker.tsx b/api/maps/addMarker.tsx new file mode 100644 index 0000000..1b13a21 --- /dev/null +++ b/api/maps/addMarker.tsx @@ -0,0 +1,21 @@ +import { Marker } from '@react-google-maps/api'; +import { Project } from '../../types/helper'; + +export default function addMarker(projects: Project[] | null) { + return projects?.map((project, index) => { + console.log('index: ', index); + console.log('project: ', project); + console.log('approved: ', project.approved); + console.log('lat: ', project.latitude); + console.log('lng: ', project.longitude); + return project.approved ? ( + + ) : null; + }); +} diff --git a/app/page.tsx b/app/page.tsx index 2632fb1..5707516 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,5 @@ import { CSSProperties } from 'react'; -import Map from '@/components/Map/map'; +// import Map from '@/components/Map/map'; import ProjectModal from '@/components/ProjectModal'; export default function Home() { @@ -11,7 +11,7 @@ export default function Home() { size="1,200 MW/Mo" additional_info="lorem ipsum blah blah" > - + {/* */} ); } diff --git a/app/testing/page.tsx b/app/testing/page.tsx index bd725fc..d2aa753 100644 --- a/app/testing/page.tsx +++ b/app/testing/page.tsx @@ -4,25 +4,8 @@ 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 Map from '../../components/Map/map'; +import { Project } from '../../types/helper'; export default function Home() { const [projects, setProjects] = useState(null); @@ -51,6 +34,7 @@ export default function Home() {
Loading...
)} {error ?
{error}
: null} + {projects ? : null} ); } diff --git a/components/Map/map.tsx b/components/Map/map.tsx index 453d44e..622e45e 100644 --- a/components/Map/map.tsx +++ b/components/Map/map.tsx @@ -1,7 +1,9 @@ 'use client'; import { useCallback, useState } from 'react'; -import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; +import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; +import addMarker from '../../api/maps/addMarker'; +import { Project } from '../../types/helper'; const containerStyle = { width: '700px', @@ -15,7 +17,7 @@ const center = { 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, @@ -34,12 +36,17 @@ export default function Map() { setMap(null); }, []); + console.log('hiii: ', props.projects); + return isLoaded ? ( + > + {addMarker(props.projects)} + + ) : ( <> ); diff --git a/types/helper.d.ts b/types/helper.d.ts index 17cbc8a..770ed2c 100644 --- a/types/helper.d.ts +++ b/types/helper.d.ts @@ -4,3 +4,25 @@ export type Prettify = { } & {}; export type Merge = Prettify; + +export type Project = { + id: string; + project_name: string; + developer: string; + renewable_energy_technology: string; + size: number; + longitude: number; + latitude: number; + project_status: 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; + proposed_cod: string | null; + zipcode: string | null; + approved: boolean; +}; From 978e4bbc816006cba3f3646b63a519cd6006f291 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sun, 13 Oct 2024 16:30:37 -0700 Subject: [PATCH 2/5] [feat] added marker --- api/maps/addMarker.tsx | 9 ++------- app/page.tsx | 26 +++++++++++++++++++++++--- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/api/maps/addMarker.tsx b/api/maps/addMarker.tsx index 1b13a21..c7791a4 100644 --- a/api/maps/addMarker.tsx +++ b/api/maps/addMarker.tsx @@ -3,17 +3,12 @@ import { Project } from '../../types/helper'; export default function addMarker(projects: Project[] | null) { return projects?.map((project, index) => { - console.log('index: ', index); - console.log('project: ', project); - console.log('approved: ', project.approved); - console.log('lat: ', project.latitude); - console.log('lng: ', project.longitude); return project.approved ? ( ) : null; diff --git a/app/page.tsx b/app/page.tsx index 5707516..0634139 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,23 @@ -import { CSSProperties } from 'react'; -// import Map from '@/components/Map/map'; +'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/helper'; export default function Home() { + const [projects, setProjects] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + queryProjects() + .then(data => { + setProjects(data.projects); + }) + .catch(err => setError(err)); + }, []); + return (
- {/* */} + {error ?
{error}
: null} + {projects ? : null}
); } @@ -26,3 +42,7 @@ const mainStyles: CSSProperties = { alignItems: 'center', justifyContent: 'center', }; + +const errorStyles: CSSProperties = { + color: '#D22B2B', +}; From 04309167ab67a87f20a7e70dc29098190dfe73a1 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sun, 13 Oct 2024 18:24:09 -0700 Subject: [PATCH 3/5] shifted center and removed debug --- api/supabase/queries/query.ts | 5 ++++- components/Map/map.tsx | 9 +++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/api/supabase/queries/query.ts b/api/supabase/queries/query.ts index 514193a..5d9f11d 100644 --- a/api/supabase/queries/query.ts +++ b/api/supabase/queries/query.ts @@ -1,7 +1,10 @@ import supabase from '../createClient'; export default async function queryProjects() { - const { data: projects, error } = await supabase.from('Projects').select('*'); + const { data: projects, error } = await supabase + .from('Projects') + .select('*') + .eq('approved', true); console.log('PROJECTS', projects, 'ERROR', error); diff --git a/components/Map/map.tsx b/components/Map/map.tsx index 622e45e..1bfef50 100644 --- a/components/Map/map.tsx +++ b/components/Map/map.tsx @@ -1,7 +1,7 @@ 'use client'; import { useCallback, useState } from 'react'; -import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; +import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; import addMarker from '../../api/maps/addMarker'; import { Project } from '../../types/helper'; @@ -11,8 +11,8 @@ const containerStyle = { }; const center = { - lat: 40.7128, - lng: -74.006, + lat: 43.0481, + lng: -76.1474, }; const zoom = 7; @@ -36,8 +36,6 @@ export default function Map(props: { projects: Project[] | null }) { setMap(null); }, []); - console.log('hiii: ', props.projects); - return isLoaded ? ( {addMarker(props.projects)} - ) : ( <> From 3d9fb04e6cf83d85006f6f78722c1f3b32ca36f5 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Thu, 17 Oct 2024 00:49:13 -0700 Subject: [PATCH 4/5] removed index --- api/maps/addMarker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api/maps/addMarker.tsx b/api/maps/addMarker.tsx index c7791a4..dc76bb8 100644 --- a/api/maps/addMarker.tsx +++ b/api/maps/addMarker.tsx @@ -2,10 +2,10 @@ import { Marker } from '@react-google-maps/api'; import { Project } from '../../types/helper'; export default function addMarker(projects: Project[] | null) { - return projects?.map((project, index) => { + return projects?.map(project => { return project.approved ? ( Date: Thu, 17 Oct 2024 01:02:49 -0700 Subject: [PATCH 5/5] [fix] use Project schema --- app/testing/page.tsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/app/testing/page.tsx b/app/testing/page.tsx index 37bff6a..284752d 100644 --- a/app/testing/page.tsx +++ b/app/testing/page.tsx @@ -5,25 +5,7 @@ import Image from 'next/image'; import BPLogo from '@/assets/images/bp-logo.png'; import queryProjects from '../../api/supabase/queries/query'; import Map from '../../components/Map/map'; - -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 { Project } from '../../types/schema'; export default function Home() { const [projects, setProjects] = useState(null);