Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Make Projects Listing Modal #71

Merged
merged 2 commits into from
Nov 14, 2024
Merged

[feat] Make Projects Listing Modal #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5b730e
Created AllProjectsModal component
jjstnlee Nov 13, 2024
fc29c9a
fixes
jjstnlee Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions api/maps/MarkerInfoWindow.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: we will need to find a solution + fix when the text overflows

<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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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