Created AllProjectsModal component

rebasing
calblueprint · Nov 13, 2024 · a5b730e · a5b730e
1 parent 7b90c40
commit a5b730e
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 75 deletions.
diff --git a/api/maps/MarkerInfoWindow.tsx b/api/maps/MarkerInfoWindow.tsx
@@ -7,7 +7,7 @@ import {
   Pin,
   useAdvancedMarkerRef,
 } from '@vis.gl/react-google-maps';
-import { TagText2 } from '@/styles/texts';
+import { TagText1 } from '@/styles/texts';
 import energyStorage from '../../assets/Custom-Markers/energy_storage.svg';
 import geothermal from '../../assets/Custom-Markers/geothermal.svg';
 import hydroelectric from '../../assets/Custom-Markers/hydroelectric.svg';
@@ -111,7 +111,7 @@ export const MarkerInfoWindow = ({
       </AdvancedMarker>
       {infoWindowShown && (
         <InfoWindow anchor={marker} onClose={handleClose} disableAutoPan={true}>
-          <TagText2>{projectName}</TagText2>
+          <TagText1>{projectName}</TagText1>
         </InfoWindow>
       )}
     </>

diff --git a/api/supabase/queries/query.ts b/api/supabase/queries/query.ts
@@ -1,15 +1,17 @@
 import { Project } from '../../../types/schema';
 import supabase from '../createClient';
 
-export default async function queryProjects() {
+export default async function queryProjects(): Promise<Project[]> {
   const { data: projects, error } = await supabase
     .from('Projects')
     .select('*')
     .eq('approved', true);
 
-  console.log('PROJECTS', projects, 'ERROR', error);
+  if (error) {
+    throw new Error(`Error fetching projects: ${error.message}`);
+  }
 
-  return { projects, error };
+  return projects;
 }
 
 export async function queryProjectbyId(id: number): Promise<Project> {

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { CSSProperties, useEffect, useState } from 'react';
+import AllProjectsModal from '@/components/AllProjectsModal';
 import MapViewScreen from '@/components/MapViewScreen';
 import queryProjects from '../api/supabase/queries/query';
 import { Project } from '../types/schema';
@@ -12,7 +13,7 @@ export default function Home() {
   useEffect(() => {
     queryProjects()
       .then(data => {
-        setProjects(data.projects);
+        setProjects(data);
       })
       .catch(err => setError(err));
   }, []);
@@ -21,6 +22,7 @@ export default function Home() {
     <main style={mainStyles}>
       {error ? <div style={errorStyles}>{error}</div> : null}
       {projects ? <MapViewScreen projects={projects} /> : null}
+      <AllProjectsModal projects={projects} />
     </main>
   );
 }

diff --git a/components/AllProjectsModal/index.tsx b/components/AllProjectsModal/index.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import Modal from 'react-modal';
+import { SubHeading2 } from '@/styles/texts';
+import { Project } from '../../types/schema';
+import ProjectItem from '../ProjectItem';
+import {
+  AllProjectsHeader,
+  modalContentStyles,
+  modalOverlayStyles,
+  ProjectDetails,
+} from './styles';
+
+export default function AllProjectsModal({
+  projects,
+}: {
+  projects: Project[] | null;
+}) {
+  const projectItems = projects?.map((project: Project) => {
+    return <ProjectItem key={project.id} project_id={project.id} />;
+  });
+
+  return (
+    <Modal
+      isOpen={true}
+      style={{
+        overlay: modalOverlayStyles,
+        content: modalContentStyles,
+      }}
+    >
+      <ProjectDetails>
+        <AllProjectsHeader>
+          <SubHeading2>ALL PROJECTS</SubHeading2>
+        </AllProjectsHeader>
+        {projectItems}
+      </ProjectDetails>
+    </Modal>
+  );
+}
diff --git a/components/AllProjectsModal/styles.ts b/components/AllProjectsModal/styles.ts
@@ -0,0 +1,47 @@
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const modalOverlayStyles: CSSProperties = {
+  width: '21.25rem',
+  height: '100%',
+  backgroundColor: 'transparent',
+};
+
+export const modalContentStyles: CSSProperties = {
+  display: 'flex',
+  top: '5.3125rem',
+  left: '1.25rem',
+  width: '90vw',
+  maxWidth: '22.25rem',
+  height: '85vh',
+  borderRadius: 'var(--Spacing-Small, 16px)',
+  border: '0.75px solid var(--WorldPeas-White, #fff)',
+  background:
+    'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)',
+  backdropFilter: 'blur(7.5px)',
+  paddingTop: '0.625rem',
+  paddingBottom: '0.625rem',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+export const ProjectDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--Spacing-Small, 16px);
+  height: 100%;
+  background: ${COLORS.white};
+  width: 21.25rem;
+  overflow-y: auto;
+  gap: 0.75rem;
+  padding-bottom: 0.8125rem;
+`;
+
+export const AllProjectsHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.4375rem;
+`;
diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx
@@ -21,7 +21,7 @@ import {
   SolarPvIcon,
 } from '@/assets/Technology-Tag-Icons/icons';
 import COLORS from '@/styles/colors';
-import { Heading2, TagText2 } from '@/styles/texts';
+import { Heading2, TagText1 } from '@/styles/texts';
 import { Project } from '@/types/schema';
 import ProjectModal from '../ProjectModal';
 import {
@@ -162,16 +162,16 @@ export default function ProjectItem({ project_id }: { project_id: number }) {
         </Heading2>
         <ProjectStatus>
           {statusIcon}
-          <TagText2>{projectStatus}</TagText2>
+          <TagText1>{projectStatus}</TagText1>
         </ProjectStatus>
         <ProjectSizeAndType>
           <ProjectSize>
             <SmallSizeIcon />
-            <TagText2>{size} MW</TagText2>
+            <TagText1>{size} MW</TagText1>
           </ProjectSize>
           <ProjectType>
             {energyTypeIconMap[renewable_energy_technology ?? '']}
-            <TagText2>{renewable_energy_technology}</TagText2>
+            <TagText1>{renewable_energy_technology}</TagText1>
           </ProjectType>
         </ProjectSizeAndType>
       </ProjectInfo>

diff --git a/components/ProjectItem/styles.ts b/components/ProjectItem/styles.ts
@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import styled from 'styled-components';
+import COLORS from '@/styles/colors';
 
 export const StyledProjectItem = styled.button`
   display: flex;
@@ -15,6 +16,13 @@ export const StyledProjectItem = styled.button`
   background: rgba(255, 255, 255, 0.9);
   padding-top: 0;
   padding-bottom: 0;
+  &:hover {
+    border: 1px solid rgba(46, 58, 89, 0.05);
+    background: ${COLORS.white};
+    box-shadow:
+      0px 1px 4px 0px rgba(77, 87, 114, 0.4),
+      0px -2px 6px 0px rgba(255, 255, 255, 0.1);
+  }
 `;
 
 export const projectImageStyles: CSSProperties = {

diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx
@@ -118,57 +118,55 @@ export default function ProjectModal({
       : 'No image available';
 
   return (
-    <div>
-      <Modal
-        isOpen={openFirst}
-        style={{
-          overlay: modalOverlayStyles,
-          content: modalContentStyles,
-        }}
-      >
-        <ProjectDetails>
-          <Image
-            src={getProjectImageSrc()}
-            alt={projectImageAlt}
-            width={340}
-            height={250}
-            style={projectImageStyles}
-          />
-          <ProjectOverview>
-            <Developer>
-              <BodyText1>Developer ‣ {developer}</BodyText1>
-              <CloseButton onClick={closeModal}>
-                <FiX size={20} color="#000" />
-              </CloseButton>
-            </Developer>
-            <ProjectName>
-              <Heading1>{project_name?.toUpperCase()}</Heading1>
-            </ProjectName>
-            <ProjectFilterWrapper>
-              <StatusTags projectStatus={project_status} cod={proposed_cod} />
-              <TechnologyTags technology={renewable_energy_technology} />
-            </ProjectFilterWrapper>
-          </ProjectOverview>
-          <ProjectSize>
-            <AccentText1>
-              <FiZap size={42} />
-              {size}
-            </AccentText1>
-            <AccentText2>Megawatts</AccentText2>
-          </ProjectSize>
-          <Divider />
-          <AllKDMS>{KDMs}</AllKDMS>
-          <AdditionalInfo>
-            <DetailsContainer>
-              <BodyText1>DETAILS</BodyText1>
-              <Divider />
-            </DetailsContainer>
-            <AdditionalText>
-              <BodyText1>{additional_information}</BodyText1>
-            </AdditionalText>
-          </AdditionalInfo>
-        </ProjectDetails>
-      </Modal>
-    </div>
+    <Modal
+      isOpen={openFirst}
+      style={{
+        overlay: modalOverlayStyles,
+        content: modalContentStyles,
+      }}
+    >
+      <ProjectDetails>
+        <Image
+          src={getProjectImageSrc()}
+          alt={projectImageAlt}
+          width={340}
+          height={250}
+          style={projectImageStyles}
+        />
+        <ProjectOverview>
+          <Developer>
+            <BodyText1>Developer ‣ {developer}</BodyText1>
+            <CloseButton onClick={closeModal}>
+              <FiX size={20} color="#000" />
+            </CloseButton>
+          </Developer>
+          <ProjectName>
+            <Heading1>{project_name?.toUpperCase()}</Heading1>
+          </ProjectName>
+          <ProjectFilterWrapper>
+            <StatusTags projectStatus={project_status} cod={proposed_cod} />
+            <TechnologyTags technology={renewable_energy_technology} />
+          </ProjectFilterWrapper>
+        </ProjectOverview>
+        <ProjectSize>
+          <AccentText1>
+            <FiZap size={42} />
+            {size}
+          </AccentText1>
+          <AccentText2>Megawatts</AccentText2>
+        </ProjectSize>
+        <Divider />
+        <AllKDMS>{KDMs}</AllKDMS>
+        <AdditionalInfo>
+          <DetailsContainer>
+            <BodyText1>DETAILS</BodyText1>
+            <Divider />
+          </DetailsContainer>
+          <AdditionalText>
+            <BodyText1>{additional_information}</BodyText1>
+          </AdditionalText>
+        </AdditionalInfo>
+      </ProjectDetails>
+    </Modal>
   );
 }
diff --git a/styles/colors.ts b/styles/colors.ts
@@ -6,7 +6,6 @@ const COLORS = {
   green: '#0E7B30',
   earthyGreen: '#4D8B31',
   navy: '#2E3A59',
-  navy75: '#626C83',
   electricBlue: '#4974E0',
   lightBlue: '#92ACED',
   teal: '#4896BC',

diff --git a/styles/texts.ts b/styles/texts.ts
@@ -1,5 +1,3 @@
-'use client';
-
 import styled, { css } from 'styled-components';
 import COLORS from './colors';
 import { CoinbaseMono, CoinbaseSans, CoinbaseText } from './fonts';
@@ -61,6 +59,16 @@ export const SubHeading1 = styled.h2<TextProps>`
   line-height: normal;
 `;
 
+export const SubHeading2 = styled.h2<TextProps>`
+  ${TextStylesCoinbaseMono}
+  font-size: 0.625rem;
+  color: ${COLORS.navy};
+  font-style: normal;
+  font-weight: 300;
+  opacity: 0.75;
+  line-height: 120%;
+`;
+
 export const BodyText1 = styled.p<TextProps>`
   ${TextStylesCoinbaseMono}
   color: ${COLORS.navy};
@@ -105,20 +113,11 @@ export const TagText1 = styled.p<TextProps>`
   color: ${COLORS.navy};
   font-size: 0.625rem;
   font-style: normal;
-  font-weight: 300;
+  font-weight: 200;
   opacity: 0.75;
   line-height: normal;
 `;
 
-export const TagText2 = styled.p<TextProps>`
-  ${TextStylesCoinbaseText}
-  color: ${COLORS.navy75};
-  font-size: 0.625rem;
-  font-style: normal;
-  font-weight: 300;
-  line-height: normal;
-`;
-
 export const FilterHeadingUnused = styled.h3<TextProps>`
   ${TextStylesCoinbaseText}
   color: ${COLORS.navy};