Merge branch 'main' into justin/project-modal

api/supabase/createClient.ts

@@ -0,0 +1,14 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error(
+    'No Supabase environment variables detected, please make sure they are in place!',
+  );
+}
+
+const supabase = createClient(supabaseUrl, supabaseKey);
+
+export default supabase;

api/supabase/queries/query.ts

@@ -0,0 +1,9 @@
+import supabase from '../createClient';
+
+export default async function queryProjects() {
+  const { data: projects, error } = await supabase.from('Projects').select('*');
+
+  console.log('PROJECTS', projects, 'ERROR', error);
+
+  return { projects, error };
+}

app/components/map.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '700px',
+  height: '700px',
+};
+
+const center = {
+  lat: 40.7128,
+  lng: -74.006,
+};
+
+const zoom = 7;
+
+export default function Map() {
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string,
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [map, setMap] = useState<google.maps.Map | null>(null);
+
+  const onLoad = useCallback((map: google.maps.Map) => {
+    map.setCenter(center);
+    map.setZoom(zoom);
+    setMap(map);
+  }, []);
+
+  const onUnmount = useCallback(() => {
+    setMap(null);
+  }, []);
+
+  return isLoaded ? (
+    <GoogleMap
+      mapContainerStyle={containerStyle}
+      onLoad={onLoad}
+      onUnmount={onUnmount}
+    ></GoogleMap>
+  ) : (
+    <></>
+  );
+}

app/page.tsx

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 import Image from 'next/image';
 import BPLogo from '@/assets/images/bp-logo.png';
 import ProjectModal from '@/components/ProjectModal';
+import Map from './components/map';
 
 export default function Home() {
   return (
@@ -13,6 +14,7 @@ export default function Home() {
         size="1,200 MW/Mo"
         additional_info="lorem ipsum blah blah"
       ></ProjectModal>
+      <Map />
     </main>
   );
 }
@@ -27,9 +29,3 @@ const mainStyles: CSSProperties = {
   alignItems: 'center',
   justifyContent: 'center',
 };
-
-const imageStyles: CSSProperties = {
-  width: '80px',
-  height: '80px',
-  marginBottom: '0.5rem',
-};

app/testing/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+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;
+}
+
+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}>
+      <Image style={imageStyles} src={BPLogo} alt="Blueprint Logo" />
+      <p>Open up app/page.tsx to get started!</p>
+      <p>
+        <b>Projects:</b>
+      </p>
+      {projects ? (
+        projects?.map(project => {
+          return <div key={project.id}>{project.project_name}</div>;
+        })
+      ) : (
+        <div>Loading...</div>
+      )}
+      {error ? <div style={errorStyles}>{error}</div> : null}
+    </main>
+  );
+}
+
+// CSS styles
+
+const mainStyles: CSSProperties = {
+  width: '100%',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const imageStyles: CSSProperties = {
+  width: '80px',
+  height: '80px',
+  marginBottom: '0.5rem',
+};
+
+const errorStyles: CSSProperties = {
+  color: '#D22B2B',
+};

next.config.mjs

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  compiler: {
+    // Enables the styled-components SWC transform
+    styledComponents: true,
+  },
+};
 
 export default nextConfig;

package.json

@@ -15,16 +15,22 @@
   },
   "dependencies": {
     "@types/react-modal": "^3.16.3",
+    "react-modal": "^3.16.1"
+    "@googlemaps/markerclusterer": "^2.5.3",
+    "@react-google-maps/api": "^2.19.3",
+    "@supabase/supabase-js": "^2.45.4",
+    "dotenv": "^16.4.5",
     "next": "^14.2.13",
     "react": "^18",
     "react-dom": "^18",
-    "react-modal": "^3.16.1"
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@types/node": "^20.16.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
     "eslint": "^8",
     "eslint-config-next": "14.2.8",
     "eslint-config-prettier": "^9.1.0",