diff --git a/src/constants/unsdgs.ts b/src/constants/unsdgs.ts index 50decc9bee..373d1b6ff0 100644 --- a/src/constants/unsdgs.ts +++ b/src/constants/unsdgs.ts @@ -1,4 +1,4 @@ -import { UNSDG_NUMS } from "types/lists"; +import { SDGGroup, UNSDG_NUMS } from "types/lists"; type UNSDG = { text_light: string; @@ -221,3 +221,32 @@ export const unsdgs: { [index in UNSDG_NUMS]: UNSDG } = { }; export const MAX_SDGS = 8; + +export const categories: { + [K in SDGGroup]: { name: string; sdgs: UNSDG_NUMS[] }; +} = { + 1: { + name: "Reducing overall inequality", + sdgs: [1, 2, 3], + }, + 2: { + name: "Access to safe conditions", + sdgs: [3, 6, 7], + }, + 3: { + name: "Sustainable growth", + sdgs: [8, 9, 16], + }, + 4: { + name: "Equality through education", + sdgs: [4, 5], + }, + 5: { + name: "Sustainable partnerships", + sdgs: [11, 12, 17], + }, + 6: { + name: "Holistic climate action", + sdgs: [13, 14, 15], + }, +}; diff --git a/src/pages/Marketplace/ActiveFilters.tsx b/src/pages/Marketplace/ActiveFilters.tsx index 17a0f6c8a0..ec5f63cb3d 100644 --- a/src/pages/Marketplace/ActiveFilters.tsx +++ b/src/pages/Marketplace/ActiveFilters.tsx @@ -6,12 +6,12 @@ import { setCountries, setDesignations, setKYCOnly, - setSdgs, + setSDGgroups, } from "slices/components/marketFilter"; -import { unsdgs } from "constants/unsdgs"; +import { categories } from "constants/unsdgs"; export default function ActiveFilters() { - const { endow_designation, sdgs, countries, kyc_only } = useGetter( + const { endow_designation, sdgGroups, countries, kyc_only } = useGetter( (state) => state.component.marketFilter ); @@ -32,12 +32,14 @@ export default function ActiveFilters() { )); - const sdgFilters = sdgs.map((sdgNum) => ( + const sdgFilters = sdgGroups.map((groupNum) => ( dispatch(setSdgs(sdgs.filter((s) => s !== sdgNum)))} + key={groupNum} + onRemove={() => + dispatch(setSDGgroups(sdgGroups.filter((s) => s !== groupNum))) + } > - SDG {sdgNum}: {unsdgs[sdgNum].title} + {categories[groupNum].name} )); diff --git a/src/pages/Marketplace/Cards/useCards.ts b/src/pages/Marketplace/Cards/useCards.ts index 5f7189d8fb..a362895aad 100644 --- a/src/pages/Marketplace/Cards/useCards.ts +++ b/src/pages/Marketplace/Cards/useCards.ts @@ -5,13 +5,16 @@ import { } from "services/aws/aws"; import { useGetter, useSetter } from "store/accessors"; import { isEmpty } from "helpers"; +import { categories } from "constants/unsdgs"; export default function useCards() { const dispatch = useSetter(); - const { sort, searchText, ...params } = useGetter( + const { sort, searchText, sdgGroups, ...params } = useGetter( (state) => state.component.marketFilter ); + const sdgs = sdgGroups.flatMap((g) => categories[g].sdgs); + const _params = Object.entries(params).reduce( (prev, [key, val]) => ({ ...prev, @@ -27,6 +30,7 @@ export default function useCards() { page: 1, // always starts at page 1 hits: 15, published: "true", + sdgs: sdgs.join(","), ..._params, }); diff --git a/src/pages/Marketplace/Filter/Categories.tsx b/src/pages/Marketplace/Filter/Categories.tsx new file mode 100644 index 0000000000..b6f5afe5a3 --- /dev/null +++ b/src/pages/Marketplace/Filter/Categories.tsx @@ -0,0 +1,26 @@ +import { SDGGroup } from "types/lists"; +import { useGetter, useSetter } from "store/accessors"; +import { setSDGgroups } from "slices/components/marketFilter"; +import { categories } from "constants/unsdgs"; +import { FlatFilter } from "./common"; + +export default function Categories() { + const sdgGroups = useGetter( + (state) => state.component.marketFilter.sdgGroups + ); + + const dispatch = useSetter(); + + return ( + ({ + key: num, + value: +num as SDGGroup, + displayText: name, + }))} + onChange={(value) => dispatch(setSDGgroups(value))} + /> + ); +} diff --git a/src/pages/Marketplace/Filter/Filter.tsx b/src/pages/Marketplace/Filter/Filter.tsx index f6d3edcf17..da402e490d 100644 --- a/src/pages/Marketplace/Filter/Filter.tsx +++ b/src/pages/Marketplace/Filter/Filter.tsx @@ -3,10 +3,10 @@ import Icon from "components/Icon"; import Modal from "components/Modal"; import { useSetter } from "store/accessors"; import { reset } from "slices/components/marketFilter"; +import Categories from "./Categories"; import Countries from "./Countries"; import Designations from "./Designations"; import KYCFilter from "./KYCFilter"; -import SDGs from "./SDGs"; export default function Filter({ classes = "" }: { classes?: string }) { const { closeModal } = useModalContext(); @@ -41,7 +41,7 @@ export default function Filter({ classes = "" }: { classes?: string }) {
- +
); diff --git a/src/pages/Marketplace/Filter/SDGs.tsx b/src/pages/Marketplace/Filter/SDGs.tsx deleted file mode 100644 index b3bbe72550..0000000000 --- a/src/pages/Marketplace/Filter/SDGs.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { UNSDG_NUMS } from "types/lists"; -import { useGetter, useSetter } from "store/accessors"; -import { setSdgs } from "slices/components/marketFilter"; -import { unsdgs } from "constants/unsdgs"; -import { FlatFilter } from "./common"; - -export default function SDGs() { - const sdgs = useGetter((state) => state.component.marketFilter.sdgs); - const dispatch = useSetter(); - - return ( - ({ - key: sdgNum, - value: +sdgNum as UNSDG_NUMS, - displayText: `${sdgNum} : ${title}`, - }))} - onChange={(value) => dispatch(setSdgs(value))} - /> - ); -} diff --git a/src/slices/components/marketFilter/constants.ts b/src/slices/components/marketFilter/constants.ts index 16b487ad14..6754586e2d 100644 --- a/src/slices/components/marketFilter/constants.ts +++ b/src/slices/components/marketFilter/constants.ts @@ -1,7 +1,7 @@ import { FilterState } from "./types"; export const initialState: FilterState = { - sdgs: [], + sdgGroups: [], countries: [], searchText: "", endow_designation: [], diff --git a/src/slices/components/marketFilter/marketFilter.ts b/src/slices/components/marketFilter/marketFilter.ts index f2c21a8fc6..89c397b7e3 100644 --- a/src/slices/components/marketFilter/marketFilter.ts +++ b/src/slices/components/marketFilter/marketFilter.ts @@ -1,7 +1,7 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit"; import { Sort } from "./types"; import { EndowDesignation } from "types/aws"; -import { UNSDG_NUMS } from "types/lists"; +import { SDGGroup } from "types/lists"; import { initialState } from "./constants"; const marketFilter = createSlice({ @@ -11,8 +11,8 @@ const marketFilter = createSlice({ reset: () => { return initialState; }, - setSdgs: (state, { payload }: PayloadAction) => { - state.sdgs = payload; + setSDGgroups: (state, { payload }: PayloadAction) => { + state.sdgGroups = payload; }, setCountries: (state, { payload }: PayloadAction) => { state.countries = payload; @@ -36,7 +36,7 @@ const marketFilter = createSlice({ }); export const { - setSdgs, + setSDGgroups, reset, setDesignations, setCountries, diff --git a/src/slices/components/marketFilter/types.ts b/src/slices/components/marketFilter/types.ts index 6da512dd71..388f11b180 100644 --- a/src/slices/components/marketFilter/types.ts +++ b/src/slices/components/marketFilter/types.ts @@ -1,5 +1,5 @@ import { EndowDesignation, EndowmentsSortKey, SortDirection } from "types/aws"; -import { UNSDG_NUMS } from "types/lists"; +import { SDGGroup } from "types/lists"; export type Sort = { key: EndowmentsSortKey; direction: SortDirection }; @@ -7,7 +7,7 @@ export type FilterState = { searchText: string; endow_designation: EndowDesignation[]; sort?: Sort; - sdgs: UNSDG_NUMS[]; + sdgGroups: SDGGroup[]; countries: string[]; kyc_only: boolean[]; }; diff --git a/src/types/lists.ts b/src/types/lists.ts index c57ec7c2ef..d1ef1cc914 100644 --- a/src/types/lists.ts +++ b/src/types/lists.ts @@ -20,6 +20,8 @@ export type UNSDG_NUMS = | 16 | 17; +export type SDGGroup = 1 | 2 | 3 | 4 | 5 | 6; + export type TransactionStatus = "open" | "approved" | "expired"; export type EndowmentType = "charity" | "ast" | "daf";