From cc657561a74139c1f5a143d1131d70ceca1e59e0 Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Thu, 11 Jan 2024 23:15:08 +0800
Subject: [PATCH 1/3] categories
---
src/constants/unsdgs.ts | 31 ++++++++++++++++++-
src/pages/Marketplace/ActiveFilters.tsx | 16 +++++-----
src/pages/Marketplace/Filter/SDGs.tsx | 25 ++++++++-------
.../components/marketFilter/constants.ts | 2 +-
.../components/marketFilter/marketFilter.ts | 8 ++---
src/slices/components/marketFilter/types.ts | 4 +--
src/types/lists.ts | 2 ++
7 files changed, 62 insertions(+), 26 deletions(-)
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..123ef80bce 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, 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() {
));
- 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/Filter/SDGs.tsx b/src/pages/Marketplace/Filter/SDGs.tsx
index b3bbe72550..dacd677c48 100644
--- a/src/pages/Marketplace/Filter/SDGs.tsx
+++ b/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 (
({
- 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))}
/>
);
}
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";
From 3827f69eeb920b043c18fa22f3e8b3e527819aa2 Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Thu, 11 Jan 2024 23:19:20 +0800
Subject: [PATCH 2/3] use in query
---
src/pages/Marketplace/ActiveFilters.tsx | 2 +-
src/pages/Marketplace/Cards/useCards.ts | 6 +++++-
2 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/pages/Marketplace/ActiveFilters.tsx b/src/pages/Marketplace/ActiveFilters.tsx
index 123ef80bce..ec5f63cb3d 100644
--- a/src/pages/Marketplace/ActiveFilters.tsx
+++ b/src/pages/Marketplace/ActiveFilters.tsx
@@ -8,7 +8,7 @@ import {
setKYCOnly,
setSDGgroups,
} from "slices/components/marketFilter";
-import { categories, unsdgs } from "constants/unsdgs";
+import { categories } from "constants/unsdgs";
export default function ActiveFilters() {
const { endow_designation, sdgGroups, countries, kyc_only } = useGetter(
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,
});
From 661c74c012dea59336ac578368a9519ca278475f Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Thu, 11 Jan 2024 23:20:58 +0800
Subject: [PATCH 3/3] rename file
---
src/pages/Marketplace/Filter/{SDGs.tsx => Categories.tsx} | 2 +-
src/pages/Marketplace/Filter/Filter.tsx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
rename src/pages/Marketplace/Filter/{SDGs.tsx => Categories.tsx} (96%)
diff --git a/src/pages/Marketplace/Filter/SDGs.tsx b/src/pages/Marketplace/Filter/Categories.tsx
similarity index 96%
rename from src/pages/Marketplace/Filter/SDGs.tsx
rename to src/pages/Marketplace/Filter/Categories.tsx
index dacd677c48..b6f5afe5a3 100644
--- a/src/pages/Marketplace/Filter/SDGs.tsx
+++ b/src/pages/Marketplace/Filter/Categories.tsx
@@ -13,7 +13,7 @@ export default function Categories() {
return (
({
key: num,
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 }) {
-
+
);