BG-957: SDG Groupings

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],
+ },
+};

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() {
  </Item>
  ));
 
- const sdgFilters = sdgs.map((sdgNum) => (
+ const sdgFilters = sdgGroups.map((groupNum) => (
  <Item
- key={sdgNum}
- onRemove={() => 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}
  </Item>
  ));
 

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,
  });
 

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 (
+ <FlatFilter
+ label="Categories"
+ selectedValues={sdgGroups}
+ options={Object.entries(categories).map(([num, { name }]) => ({
+ key: num,
+ value: +num as SDGGroup,
+ displayText: name,
+ }))}
+ onChange={(value) => dispatch(setSDGgroups(value))}
+ />
+ );
+}

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 }) {
  <div className="px-2 divide-y divide-prim">
  <Designations />
  <KYCFilter />
- <SDGs />
+ <Categories />
  </div>
  </Modal>
  );

src/slices/components/marketFilter/constants.ts

@@ -1,7 +1,7 @@
 import { FilterState } from "./types";
 
 export const initialState: FilterState = {
- sdgs: [],
+ sdgGroups: [],
  countries: [],
  searchText: "",
  endow_designation: [],

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<UNSDG_NUMS[]>) => {
- state.sdgs = payload;
+ setSDGgroups: (state, { payload }: PayloadAction<SDGGroup[]>) => {
+ state.sdgGroups = payload;
  },
  setCountries: (state, { payload }: PayloadAction<string[]>) => {
  state.countries = payload;
@@ -36,7 +36,7 @@ const marketFilter = createSlice({
 });
 
 export const {
- setSdgs,
+ setSDGgroups,
  reset,
  setDesignations,
  setCountries,

src/slices/components/marketFilter/types.ts

@@ -1,13 +1,13 @@
 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 };
 
 export type FilterState = {
  searchText: string;
  endow_designation: EndowDesignation[];
  sort?: Sort;
- sdgs: UNSDG_NUMS[];
+ sdgGroups: SDGGroup[];
  countries: string[];
  kyc_only: boolean[];
 };

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";