categories

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, unsdgs } 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/Filter/SDGs.tsx

@@ -1,23 +1,26 @@
-import { UNSDG_NUMS } from "types/lists";
+import { SDGGroup } from "types/lists";
 import { useGetter, useSetter } from "store/accessors";
-import { setSdgs } from "slices/components/marketFilter";
-import { unsdgs } from "constants/unsdgs";
+import { setSDGgroups } from "slices/components/marketFilter";
+import { categories } from "constants/unsdgs";
 import { FlatFilter } from "./common";
 
-export default function SDGs() {
- const sdgs = useGetter((state) => state.component.marketFilter.sdgs);
+export default function Categories() {
+ const sdgGroups = useGetter(
+ (state) => state.component.marketFilter.sdgGroups
+ );
+
  const dispatch = useSetter();
 
  return (
  <FlatFilter
  label="SDGs"
- selectedValues={sdgs}
- options={Object.entries(unsdgs).map(([sdgNum, { title }]) => ({
- key: sdgNum,
- value: +sdgNum as UNSDG_NUMS,
- displayText: `${sdgNum} : ${title}`,
+ selectedValues={sdgGroups}
+ options={Object.entries(categories).map(([num, { name }]) => ({
+ key: num,
+ value: +num as SDGGroup,
+ displayText: name,
  }))}
- onChange={(value) => dispatch(setSdgs(value))}
+ onChange={(value) => dispatch(setSDGgroups(value))}
  />
  );
 }

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