Skip to content

Commit

Permalink
[feat] Make Projects Listing Modal (#71)
Browse files Browse the repository at this point in the history
* Created AllProjectsModal component

rebasing

* fixes
  • Loading branch information
jjstnlee authored Nov 14, 2024
1 parent 7b90c40 commit 8706272
Show file tree
Hide file tree
Showing 11 changed files with 175 additions and 77 deletions.
4 changes: 2 additions & 2 deletions api/maps/MarkerInfoWindow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -111,7 +111,7 @@ export const MarkerInfoWindow = ({
</AdvancedMarker>
{infoWindowShown && (
<InfoWindow anchor={marker} onClose={handleClose} disableAutoPan={true}>
<TagText2>{projectName}</TagText2>
<TagText1>{projectName}</TagText1>
</InfoWindow>
)}
</>
Expand Down
8 changes: 5 additions & 3 deletions api/supabase/queries/query.ts
Original file line number Diff line number Diff line change
@@ -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> {
Expand Down
2 changes: 1 addition & 1 deletion app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Home() {
useEffect(() => {
queryProjects()
.then(data => {
setProjects(data.projects);
setProjects(data);
})
.catch(err => setError(err));
}, []);
Expand Down
10 changes: 8 additions & 2 deletions components/MapViewScreen/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@ import Map from '@/components/Map';
import { SearchBar } from '@/components/SearchBar';
import { FilterType } from '@/types/schema';
import { Project } from '../../types/schema';
import ProjectsListingModal from '../ProjectsListingModal';

export default function MapViewScreen(props: { projects: Project[] | null }) {
export default function MapViewScreen({
projects,
}: {
projects: Project[] | null;
}) {
const filters: FilterType[] = [
{
id: 'status',
Expand Down Expand Up @@ -42,7 +47,8 @@ export default function MapViewScreen(props: { projects: Project[] | null }) {
<>
<SearchBar />
<FilterBar filters={filters} onFilterChange={handleFilterChange} />
<Map projects={props.projects} />
<Map projects={projects} />
<ProjectsListingModal projects={projects} />
</>
);
}
8 changes: 4 additions & 4 deletions components/ProjectItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 8 additions & 0 deletions components/ProjectItem/styles.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 = {
Expand Down
102 changes: 50 additions & 52 deletions components/ProjectModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
39 changes: 39 additions & 0 deletions components/ProjectsListingModal/index.tsx
Original file line number Diff line number Diff line change
@@ -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 ProjectsListingModal({
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>
);
}
47 changes: 47 additions & 0 deletions components/ProjectsListingModal/styles.ts
Original file line number Diff line number Diff line change
@@ -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;
`;
1 change: 0 additions & 1 deletion styles/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const COLORS = {
green: '#0E7B30',
earthyGreen: '#4D8B31',
navy: '#2E3A59',
navy75: '#626C83',
electricBlue: '#4974E0',
lightBlue: '#92ACED',
teal: '#4896BC',
Expand Down
23 changes: 11 additions & 12 deletions styles/texts.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use client';

import styled, { css } from 'styled-components';
import COLORS from './colors';
import { CoinbaseMono, CoinbaseSans, CoinbaseText } from './fonts';
Expand Down Expand Up @@ -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};
Expand Down Expand Up @@ -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};
Expand Down

0 comments on commit 8706272

Please sign in to comment.