From c7f05b73980ba15102affa6208cab6d26f62bd55 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Fri, 8 Nov 2024 22:30:42 -0800 Subject: [PATCH 01/45] [chore] refactored to MapViewScreen --- app/page.tsx | 4 ++-- components/Map/index.tsx | 25 --------------------- components/MapViewScreen/index.tsx | 35 ++++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 components/MapViewScreen/index.tsx diff --git a/app/page.tsx b/app/page.tsx index 8584c51..cdce903 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { CSSProperties, useEffect, useState } from 'react'; -import Map from '@/components/Map'; +import MapViewScreen from '@/components/MapViewScreen'; import queryProjects from '../api/supabase/queries/query'; import { Project } from '../types/schema'; @@ -20,7 +20,7 @@ export default function Home() { return (
{error ?
{error}
: null} - {projects ? : null} + {projects ? : null}
); } diff --git a/components/Map/index.tsx b/components/Map/index.tsx index db7dc80..dd127ea 100644 --- a/components/Map/index.tsx +++ b/components/Map/index.tsx @@ -5,18 +5,6 @@ import AddMarkers from '../../api/maps/AddMarkers'; import { Project } from '../../types/schema'; import './styles.css'; import { CSSProperties } from 'react'; -import { FaMapMarkerAlt } from 'react-icons/fa'; -import { FaBolt } from 'react-icons/fa6'; -import { IoIosCheckmarkCircleOutline } from 'react-icons/io'; -import { MdLightbulbOutline } from 'react-icons/md'; -import { FilterBar } from '../FilterBar'; -import { SearchBar } from '../SearchBar'; - -interface Filter { - id: string; - label: string; - icon: React.ReactNode; -} const containerStyle: CSSProperties = { width: '100%', @@ -33,22 +21,9 @@ const center = { const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker -const filters = [ - { id: 'status', label: 'STATUS', icon: }, - { id: 'technology', label: 'TECHNOLOGY', icon: }, - { id: 'projectSize', label: 'PROJECT SIZE', icon: }, - { id: 'location', label: 'LOCATION', icon: }, -]; - -const handleFilterChange = (filter: Filter) => { - console.log(filter); -}; - export default function Map(props: { projects: Project[] | null }) { return ( - - }, + { id: 'technology', label: 'TECHNOLOGY', icon: }, + { id: 'projectSize', label: 'PROJECT SIZE', icon: }, + { id: 'location', label: 'LOCATION', icon: }, + ]; + + const handleFilterChange = (filter: Filter) => { + console.log(filter); + }; + + return ( + <> + + + + + ); +} From 4b8155c1d7d7a2dd99d3ddc503ba75f1b0257fec Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:08:21 -0800 Subject: [PATCH 02/45] [chore] fixed filter button stylings --- components/FilterBar/index.tsx | 14 +++++++++----- components/FilterBar/styles.ts | 18 +++++++++++++----- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index f30704c..185255d 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -1,7 +1,11 @@ import React from 'react'; import { RiArrowDropDownLine } from 'react-icons/ri'; import Filter from '../../types/helper'; -import { FilterBarStyles, FilterButtonStyles } from './styles'; +import { + FilterBackgroundStyles, + FilterButtonStyles, + FilterContainerStyles, +} from './styles'; interface Filter { id: string; @@ -17,9 +21,9 @@ export const FilterBar = ({ onFilterChange: (filter: Filter) => void; }) => { return ( - + {filters.map(filter => ( -
+ onFilterChange(filter)} @@ -28,8 +32,8 @@ export const FilterBar = ({ {filter.label} -
+ ))} - + ); }; diff --git a/components/FilterBar/styles.ts b/components/FilterBar/styles.ts index 62ebc51..a93d8fe 100644 --- a/components/FilterBar/styles.ts +++ b/components/FilterBar/styles.ts @@ -1,9 +1,17 @@ import styled from 'styled-components'; import { FilterHeadingUnused } from '@/styles/texts'; -export const FilterBarStyles = styled.div` +export const FilterContainerStyles = styled.div` display: flex; - position: absolute; + flex-direction: row; + justify-content: flex-end; + width: 100%; + margin-right: 15%; + flex-wrap: wrap; +`; + +export const FilterBackgroundStyles = styled.div` + margin-right: 2%; top: 1.5%; right: 1.5%; background: linear-gradient( @@ -12,16 +20,15 @@ export const FilterBarStyles = styled.div` rgba(238, 238, 238, 0.65) 100% ); backdrop-filter: blur(7.5px); - padding: 0.4rem 0.5rem; + padding: 0.35rem 0.35rem; border-radius: 6.25rem; - z-index: 1000; + z-index: 5; border: 0.05rem solid #fff; margin-top: 1.5%; `; export const FilterButtonStyles = styled.button` ${FilterHeadingUnused} - padding: 0.5rem 0.5rem; background: #fff; border: none; border-radius: 6.25rem; @@ -30,4 +37,5 @@ export const FilterButtonStyles = styled.button` display: flex; align-items: center; gap: 0.75rem; + padding: 0.5rem 0.8rem; `; From b4331d14c2d05c4c6e8937572fc3547b9cce05b6 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:12:46 -0800 Subject: [PATCH 03/45] added z index to button --- components/FilterBar/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/FilterBar/styles.ts b/components/FilterBar/styles.ts index a93d8fe..25b1c2d 100644 --- a/components/FilterBar/styles.ts +++ b/components/FilterBar/styles.ts @@ -38,4 +38,5 @@ export const FilterButtonStyles = styled.button` align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; + z-index: 6; `; From d48a051e5998953d52a8450c60a3dd2e8155347a Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:20:18 -0800 Subject: [PATCH 04/45] added z index to button --- components/FilterBar/styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/components/FilterBar/styles.ts b/components/FilterBar/styles.ts index 25b1c2d..a93d8fe 100644 --- a/components/FilterBar/styles.ts +++ b/components/FilterBar/styles.ts @@ -38,5 +38,4 @@ export const FilterButtonStyles = styled.button` align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; - z-index: 6; `; From ed38662b3648e194dfd2f452d47833d6f2309bfb Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:28:07 -0800 Subject: [PATCH 05/45] [chore] widened --- components/FilterBar/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/FilterBar/styles.ts b/components/FilterBar/styles.ts index a93d8fe..dd9fcbb 100644 --- a/components/FilterBar/styles.ts +++ b/components/FilterBar/styles.ts @@ -37,5 +37,5 @@ export const FilterButtonStyles = styled.button` display: flex; align-items: center; gap: 0.75rem; - padding: 0.5rem 0.8rem; + padding: 0.5rem 1rem; `; From f6c79299aa55e91c9f132c0d523fc9e6cb78c6a3 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:51:04 -0800 Subject: [PATCH 06/45] created filterdropdown and added dropdown data --- components/FilterDropdown/index.tsx | 3 +++ components/FilterDropdown/styles.ts | 0 components/MapViewScreen/index.tsx | 40 ++++++++++++++++++++++++++--- 3 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 components/FilterDropdown/index.tsx create mode 100644 components/FilterDropdown/styles.ts diff --git a/components/FilterDropdown/index.tsx b/components/FilterDropdown/index.tsx new file mode 100644 index 0000000..0955f33 --- /dev/null +++ b/components/FilterDropdown/index.tsx @@ -0,0 +1,3 @@ +export default function FilterDropdown() { + return
FilterDropdown
; +} diff --git a/components/FilterDropdown/styles.ts b/components/FilterDropdown/styles.ts new file mode 100644 index 0000000..e69de29 diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 61bebfd..367ca3d 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -15,10 +15,42 @@ interface Filter { export default function MapViewScreen(props: { projects: Project[] | null }) { const filters = [ - { id: 'status', label: 'STATUS', icon: }, - { id: 'technology', label: 'TECHNOLOGY', icon: }, - { id: 'projectSize', label: 'PROJECT SIZE', icon: }, - { id: 'location', label: 'LOCATION', icon: }, + { + id: 'status', + label: 'STATUS', + icon: , + categories: [], + }, + { + id: 'technology', + label: 'TECHNOLOGY', + icon: , + categories: [ + { + category: 'Source', + options: [ + 'Land-based Wind', + 'Hydroelectric', + 'Offshore Wind', + 'Solar Power', + 'Geothermal', + ], + }, + { category: 'Storage', options: ['Energy Storage', 'Pumped Storage'] }, + ], + }, + { + id: 'projectSize', + label: 'PROJECT SIZE', + icon: , + categories: [], + }, + { + id: 'location', + label: 'LOCATION', + icon: , + categories: [], + }, ]; const handleFilterChange = (filter: Filter) => { From 427b5b23e8b56beedf9310bbca2ffb7c09bdf4ff Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:57:43 -0800 Subject: [PATCH 07/45] [chore] made filter interface importable --- components/FilterBar/index.tsx | 8 +------- components/MapViewScreen/index.tsx | 7 +------ types/schema.d.ts | 9 +++++++++ 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index 185255d..655c443 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -1,18 +1,12 @@ import React from 'react'; import { RiArrowDropDownLine } from 'react-icons/ri'; -import Filter from '../../types/helper'; +import { Filter } from '@/types/schema'; import { FilterBackgroundStyles, FilterButtonStyles, FilterContainerStyles, } from './styles'; -interface Filter { - id: string; - label: string; - icon: React.ReactNode; -} - export const FilterBar = ({ filters, onFilterChange, diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 367ca3d..385345e 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -5,14 +5,9 @@ import { MdLightbulbOutline } from 'react-icons/md'; import { FilterBar } from '@/components/FilterBar'; import Map from '@/components/Map'; import { SearchBar } from '@/components/SearchBar'; +import { Filter } from '@/types/schema'; import { Project } from '../../types/schema'; -interface Filter { - id: string; - label: string; - icon: React.ReactNode; -} - export default function MapViewScreen(props: { projects: Project[] | null }) { const filters = [ { diff --git a/types/schema.d.ts b/types/schema.d.ts index 74560a8..59e8a74 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -1,3 +1,5 @@ +import React from 'react'; + export type Project = { id: number; project_name: string; @@ -19,3 +21,10 @@ export type Project = { proposed_cod: Date; approved: boolean; }; + +export interface Filter { + id: string; + label: string; + icon: React.ReactNode; + categories: { category: string; options: string[] }[]; +} From 9a999729d9357f07c2c1faedfafc633506e7b618 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sat, 9 Nov 2024 00:59:00 -0800 Subject: [PATCH 08/45] specified type --- components/MapViewScreen/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 385345e..8871c0a 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -9,7 +9,7 @@ import { Filter } from '@/types/schema'; import { Project } from '../../types/schema'; export default function MapViewScreen(props: { projects: Project[] | null }) { - const filters = [ + const filters: Filter[] = [ { id: 'status', label: 'STATUS', From 5d2b95a2569278fe47c7805293fd183cfa7dac1b Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sun, 10 Nov 2024 03:20:29 -0800 Subject: [PATCH 09/45] [feat] dropdown works --- components/FilterBar/index.tsx | 43 +++++++++++++++++++++++++++-- components/FilterBar/styles.ts | 15 ++++++++++ components/FilterDropdown/index.tsx | 27 ++++++++++++++++-- 3 files changed, 80 insertions(+), 5 deletions(-) diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index 655c443..2e3bd50 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -1,10 +1,12 @@ -import React from 'react'; +import React, { useState } from 'react'; import { RiArrowDropDownLine } from 'react-icons/ri'; import { Filter } from '@/types/schema'; import { + CheckboxStyles, FilterBackgroundStyles, FilterButtonStyles, FilterContainerStyles, + FilterDropdownStyles, } from './styles'; export const FilterBar = ({ @@ -14,18 +16,55 @@ export const FilterBar = ({ filters: Filter[]; onFilterChange: (filter: Filter) => void; }) => { + const [selectedOptions, setSelectedOptions] = useState([]); + const [activeFilter, setActiveFilter] = useState(null); + + const handleButtonClick = (filter: Filter) => { + console.log(activeFilter); + setActiveFilter(activeFilter?.id === filter.id ? null : filter); + console.log(activeFilter); + onFilterChange(filter); + }; + return ( {filters.map(filter => ( onFilterChange(filter)} + onClick={() => handleButtonClick(filter)} > {filter.icon} {filter.label} + {activeFilter?.id === filter.id && ( + + {filter.categories.map(category => ( +
+

{category.category}

+ {category.options.map(option => ( + + ))} +
+ ))} + + )} ))} diff --git a/components/FilterBar/styles.ts b/components/FilterBar/styles.ts index dd9fcbb..03b92cc 100644 --- a/components/FilterBar/styles.ts +++ b/components/FilterBar/styles.ts @@ -39,3 +39,18 @@ export const FilterButtonStyles = styled.button` gap: 0.75rem; padding: 0.5rem 1rem; `; + +export const FilterDropdownStyles = styled.div` + position: absolute; + background: #fff; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); + margin-top: 0.5rem; + width: 100%; +`; + +export const CheckboxStyles = styled.div` + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +`; diff --git a/components/FilterDropdown/index.tsx b/components/FilterDropdown/index.tsx index 0955f33..f227782 100644 --- a/components/FilterDropdown/index.tsx +++ b/components/FilterDropdown/index.tsx @@ -1,3 +1,24 @@ -export default function FilterDropdown() { - return
FilterDropdown
; -} +// import React, { useState } from "react"; +// import { MultiSelect } from "react-multi-select-component"; + +// const options = [ +// { label: "Grapes 🍇", value: "grapes" }, +// { label: "Mango 🥭", value: "mango" }, +// { label: "Strawberry 🍓", value: "strawberry", disabled: true }, +// ]; + +// export default function FilterDropdown() { +// const [selected, setSelected] = useState([]); +// return ( +//
+//

Select Fruits

+// 
{JSON.stringify(selected)}
+// +//
+// ); +// } From a593d970c98f731f01cf79ebca394367c957f83d Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Sun, 10 Nov 2024 03:35:55 -0800 Subject: [PATCH 10/45] [feat] added icon --- assets/DropdownIcons/PumpedStorage.svg | 3 +++ components/FilterBar/index.tsx | 15 +++++++++------ components/MapViewScreen/index.tsx | 18 ++++++++++++------ types/schema.d.ts | 7 ++++++- 4 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 assets/DropdownIcons/PumpedStorage.svg diff --git a/assets/DropdownIcons/PumpedStorage.svg b/assets/DropdownIcons/PumpedStorage.svg new file mode 100644 index 0000000..9ff216b --- /dev/null +++ b/assets/DropdownIcons/PumpedStorage.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index 2e3bd50..1308fcc 100644 --- a/components/FilterBar/index.tsx +++ b/components/FilterBar/index.tsx @@ -44,20 +44,23 @@ export const FilterBar = ({

{category.category}

{category.options.map(option => ( -