From 4172d1f941e50d72c67e7b49cf0ddd3287cbce53 Mon Sep 17 00:00:00 2001 From: louai98 Date: Wed, 5 Jun 2024 11:21:28 +0200 Subject: [PATCH] split components --- .../ControlInAfrica/ControlInAfricaMap.js | 324 +++--------------- .../Layout/ControlInAfrica/CountryPopup.jsx | 209 +++++++++++ .../Layout/ControlInAfrica/FilterBox.jsx | 308 +++++++++++++++++ .../Layout/ControlInAfrica/MarkerIcon.jsx | 1 - src/Styles/Layout/_filters.scss | 1 + 5 files changed, 564 insertions(+), 279 deletions(-) create mode 100644 src/Components/Layout/ControlInAfrica/CountryPopup.jsx create mode 100644 src/Components/Layout/ControlInAfrica/FilterBox.jsx diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index ea67368..2fccf54 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -6,7 +6,9 @@ import Africa from "../../../Data/ControlinAfrica.geojson"; import "../../../Styles/main.scss"; import { CountryStyle, CountrySelectedStyle } from "./countryStyles"; import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component -import MarkerIcon, { iconMarker } from "./MarkerIcon"; +import MarkerIcon from "./MarkerIcon"; +import CountryPopup from "./CountryPopup"; +import FilterBox from "./FilterBox"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; @@ -164,17 +166,17 @@ class ControlInAfricaMap extends React.Component { { name2: "UNProgrammeofAction", name: "UN Programme of Action", - icon: Icon16, + icon: Icon20, }, { name2: "InternationalTracingInstrument", name: "International Tracing Instrument", - icon: Icon1, + icon: Icon16, }, { name2: "StG-PoA", name: "Silencing the Guns in Africa Programme of Action", - icon: Icon20, + icon: Icon1, }, ]; @@ -387,7 +389,6 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesRegions, prevStatuesTreaty, africaCountries, - selectedIcon, } = this.state; // get the icon of the selected treaty based on the name and status of the treaty @@ -397,13 +398,22 @@ class ControlInAfricaMap extends React.Component { this.regional_treaties.find((org) => org.name2 === name) || this.international_treaties.find((org) => org.name2 === name); + let instrument = this.intsruments.find( + (instrument) => instrument.name2 === name + ); + if (org) { - //console.log(org[`icon_${status.toLowerCase()}`]); this.setState({ selectedIcon: org[`icon_${status.toLowerCase()}`] || "none", }); } + if (instrument) { + this.setState({ + selectedIcon: instrument[`icon`] || "none", + }); + } + // if the same treaty is selected previously and the region is not selected // then the treaty will be deselected if ( @@ -463,7 +473,7 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties: intersection, selectedCountry: "", selectedTreaty: name, - prevStatuesTreaty: status, + prevStatuesTreaty: status || "checked", showInfoBox: true, }); return; @@ -473,7 +483,7 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties, selectedCountry: "", selectedTreaty: name, - prevStatuesTreaty: status, + prevStatuesTreaty: status || "checked", selectedCountriesFeaturesTreaties, }); @@ -556,31 +566,33 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties, selectedCountryColor ) => { - if (feature.properties.name === selectedCountry) { + const { name } = feature.properties; + // select one country + if (name === selectedCountry) { console.log("one country selected"); return CountrySelectedStyle(selectedCountryColor); - } else if ( - selectedCountriesNamesRegions.includes(feature.properties.name) && - selectedCountriesNamesTreaties.length === 0 - ) { + } + + const inSelectedRegions = selectedCountriesNamesRegions.includes(name); + const inSelectedTreaties = selectedCountriesNamesTreaties.includes(name); + // select one region + if (inSelectedRegions && !selectedCountriesNamesTreaties.length) { console.log("region selected"); return CountrySelectedStyle(selectedCountryColor); - } else if ( - selectedCountriesNamesRegions.includes(feature.properties.name) && - selectedCountriesNamesTreaties.includes(feature.properties.name) === false - ) { + } + // select one treaty + if (inSelectedRegions && !inSelectedTreaties) { console.log("region and treaty selected 1"); return CountrySelectedStyle(selectedCountryColor); - } else if ( - selectedCountriesNamesRegions.includes(feature.properties.name) && - selectedCountriesNamesTreaties.includes(feature.properties.name) - ) { + } + // select region and treaty + if (inSelectedRegions && inSelectedTreaties) { console.log("region and treaty selected 2"); return CountrySelectedStyle(selectedCountryColor, 0.7); - } else { - console.log("default"); - return CountryStyle(); } + // default style + console.log("default"); + return CountryStyle(); }; render() { @@ -613,184 +625,13 @@ class ControlInAfricaMap extends React.Component { -
-
-
African Countries
- - -
-
-
-
Regional Organisations
-
- {this.regional_organisations.map((org, index) => ( -
- this.handleOrganizationClick(org.name, "", org.color) - } - > -
{org.name}
-
- ))} -
- -
-
-
-
Regional Treaties
-
- {this.regional_treaties.map((treaty) => ( -
-
{treaty.name}
- - {treaty.icon_eligible && ( - {`${treaty.name}-Eligible`} - this.handleTreatiesClick(treaty.name2, "Eligible") - } - /> - )} - {treaty.icon_signed && ( - {`${treaty.name}-Signed`} - this.handleTreatiesClick(treaty.name2, "Signed") - } - /> - )} - {treaty.icon_ratified && ( - {`${treaty.name}-Ratified`} - this.handleTreatiesClick(treaty.name2, "Ratified") - } - /> - )} -
- ))} -
-
-
-
-
International Treaties
- {this.international_treaties.map((treaty) => ( -
-
{treaty.name}
- - {treaty.icon_eligible && ( - {`${treaty.name}-Eligible`} - this.handleTreatiesClick(treaty.name2, "Eligible") - } - /> - )} - {treaty.icon_signed && ( - {`${treaty.name}-Signed`} - this.handleTreatiesClick(treaty.name2, "Signed") - } - /> - )} - {treaty.icon_ratified && ( - {`${treaty.name}-Ratified`} - this.handleTreatiesClick(treaty.name2, "Ratified") - } - /> - )} -
- ))} -
-
-
-
- International Guidelines & Instruments
- - (countries with recent activities only, 2014 - 2019) - -
-
-
UN Programme of Action
- - this.handleTreatiesClick("UNProgrammeofAction") - } - /> -
-
-
- International Tracing Instrument -
- - this.handleTreatiesClick("InternationalTracingInstrument") - } - /> -
-
-
-
-
African Guidelines & Instrumentss
-
-
- Silencing the Guns in Africa Programme of Action -
- this.handleTreatiesClick("StG-PoA")} - /> -
-
-
+
@@ -840,82 +681,9 @@ class ControlInAfricaMap extends React.Component { permanent className="tooltip-custom" > -
{feature.properties.name}
-
- {this.regional_organisations.map((org) => ( -
- ))} -
-
- {this.regional_treaties.map((org) => ( -
- -
- ))} -
-
- {this.international_treaties.map((org) => ( -
- -
- ))} -
-
-
- {feature.properties.UNProgrammeofAction === - 1 && } -
-
- {feature.properties - .InternationalTracingInstrument === 1 && ( - - )} -
-
- {feature.properties["StG-PoA"] === 1 && ( - - )} -
-
+ ); diff --git a/src/Components/Layout/ControlInAfrica/CountryPopup.jsx b/src/Components/Layout/ControlInAfrica/CountryPopup.jsx new file mode 100644 index 0000000..55da60a --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/CountryPopup.jsx @@ -0,0 +1,209 @@ +import React from "react"; +import "../../../Styles/main.scss"; + +import Icon1 from "../../../Icons/icon1.svg"; +import Icon2 from "../../../Icons/icon2.svg"; +import Icon3 from "../../../Icons/icon3.svg"; +import Icon4 from "../../../Icons/icon4.svg"; +import Icon5 from "../../../Icons/icon5.svg"; +import Icon6 from "../../../Icons/icon6.svg"; +import Icon7 from "../../../Icons/icon7.svg"; +import Icon8 from "../../../Icons/icon8.svg"; +import Icon9 from "../../../Icons/icon9.svg"; +import Icon10 from "../../../Icons/icon10.svg"; +import Icon11 from "../../../Icons/icon11.svg"; +import Icon12 from "../../../Icons/icon12.svg"; +import Icon13 from "../../../Icons/icon13.svg"; +import Icon14 from "../../../Icons/icon14.svg"; +import Icon15 from "../../../Icons/icon15.svg"; +import Icon16 from "../../../Icons/icon16.svg"; +import Icon17 from "../../../Icons/icon17.svg"; +import Icon18 from "../../../Icons/icon18.svg"; +import Icon19 from "../../../Icons/icon19.svg"; +import Icon20 from "../../../Icons/icon20.svg"; +import Icon21 from "../../../Icons/icon21.svg"; +import Icon22 from "../../../Icons/icon22.svg"; +import Icon23 from "../../../Icons/icon23.svg"; +import Icon24 from "../../../Icons/icon24.svg"; +import Icon25 from "../../../Icons/icon25.svg"; +import Icon26 from "../../../Icons/icon26.svg"; + +const regional_organisations = [ + { name: "AU", color: "#b2df8a" }, + { name: "EAC", color: "#33a02c" }, + { name: "IGAD", color: "#fb9a99" }, + { name: "UMA", color: "#e31a1c" }, + { name: "COMESA", color: "#fdbf6f" }, + { name: "ECOWAS", color: "#ff7f00" }, + { name: "CEN-SAD", color: "#cab2d6" }, + { name: "SADC", color: "#6a3d9a" }, + { name: "ECCAS", color: "#ffff99" }, + { name: "ICGLR", color: "#b15928" }, + { name: "RECSA", color: "#a6cee3" }, + { name: "SARCOM", color: "#1f78b4" }, +]; + +const regional_treaties = [ + { + name: "Bamako Declaration", + name2: "BamakoDeclaration", + icon_eligible: Icon26, + icon_signed: Icon24, + icon_ratified: null, + }, + { + name: "Kinshasa Convention", + name2: "KinshasaConvention", + icon_eligible: Icon4, + icon_signed: Icon6, + icon_ratified: Icon5, + }, + { + name: "ECOWAS Convention", + name2: "ECOWASConvention", + icon_eligible: Icon2, + icon_signed: Icon3, + icon_ratified: null, + }, + { + name: "Khartoum Declaration", + name2: "KhartoumDeclaration", + icon_eligible: Icon21, + icon_signed: Icon23, + icon_ratified: null, + }, + { + name: "Nairobi Protocol", + name2: "NairobiProtocol", + icon_eligible: Icon22, + icon_signed: Icon25, + icon_ratified: null, + }, + { + name: "SADC Firearms Protocol", + name2: "SADCFirearmsProtocol", + icon_eligible: Icon8, + icon_signed: Icon7, + icon_ratified: Icon9, + }, +]; + +const international_treaties = [ + { + name: "Arms Trade Treaty", + name2: "ArmsTradeTreaty", + icon_eligible: Icon19, + icon_signed: Icon17, + icon_ratified: Icon18, + }, + { + name: "Firearms Protocol", + name2: "FirearmsProtocol", + icon_eligible: Icon12, + icon_signed: Icon10, + icon_ratified: Icon11, + }, + { + name: "Wassenaar Agreement", + name2: "WassenaarAgreement", + icon_eligible: Icon15, + icon_signed: Icon13, + icon_ratified: Icon14, + }, +]; +const intsruments = [ + { + name2: "UNProgrammeofAction", + name: "UN Programme of Action", + icon: Icon20, + }, + { + name2: "InternationalTracingInstrument", + name: "International Tracing Instrument", + icon: Icon16, + }, + { + name2: "StG-PoA", + name: "Silencing the Guns in Africa Programme of Action", + icon: Icon1, + }, +]; + +const findColorByName = (name) => { + const org = regional_organisations.find((org) => org.name === name); + return org ? org.color : ""; // Return color value if found, otherwise return an empty string +}; + +const CountryPopup = (props) => { + const { feature } = props; + return ( + <> +
{feature.properties.name}
+
+ {regional_organisations.map((org) => ( +
+ ))} +
+
+ {regional_treaties.map((treaty) => ( +
+ +
+ ))} +
+ +
+ {international_treaties.map((treaty) => ( +
+ +
+ ))} +
+ +
+
+ {feature.properties.UNProgrammeofAction === 1 && ( + + )} +
+
+ {feature.properties.InternationalTracingInstrument === 1 && ( + + )} +
+
+ {feature.properties["StG-PoA"] === 1 && ( + + )} +
+
+ + ); +}; + +export default CountryPopup; diff --git a/src/Components/Layout/ControlInAfrica/FilterBox.jsx b/src/Components/Layout/ControlInAfrica/FilterBox.jsx new file mode 100644 index 0000000..638ce9f --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/FilterBox.jsx @@ -0,0 +1,308 @@ +import React from "react"; +import "../../../Styles/main.scss"; + +import Icon1 from "../../../Icons/icon1.svg"; +import Icon2 from "../../../Icons/icon2.svg"; +import Icon3 from "../../../Icons/icon3.svg"; +import Icon4 from "../../../Icons/icon4.svg"; +import Icon5 from "../../../Icons/icon5.svg"; +import Icon6 from "../../../Icons/icon6.svg"; +import Icon7 from "../../../Icons/icon7.svg"; +import Icon8 from "../../../Icons/icon8.svg"; +import Icon9 from "../../../Icons/icon9.svg"; +import Icon10 from "../../../Icons/icon10.svg"; +import Icon11 from "../../../Icons/icon11.svg"; +import Icon12 from "../../../Icons/icon12.svg"; +import Icon13 from "../../../Icons/icon13.svg"; +import Icon14 from "../../../Icons/icon14.svg"; +import Icon15 from "../../../Icons/icon15.svg"; +import Icon16 from "../../../Icons/icon16.svg"; +import Icon17 from "../../../Icons/icon17.svg"; +import Icon18 from "../../../Icons/icon18.svg"; +import Icon19 from "../../../Icons/icon19.svg"; +import Icon20 from "../../../Icons/icon20.svg"; +import Icon21 from "../../../Icons/icon21.svg"; +import Icon22 from "../../../Icons/icon22.svg"; +import Icon23 from "../../../Icons/icon23.svg"; +import Icon24 from "../../../Icons/icon24.svg"; +import Icon25 from "../../../Icons/icon25.svg"; +import Icon26 from "../../../Icons/icon26.svg"; + +const regional_organisations = [ + { name: "AU", color: "#b2df8a" }, + { name: "EAC", color: "#33a02c" }, + { name: "IGAD", color: "#fb9a99" }, + { name: "UMA", color: "#e31a1c" }, + { name: "COMESA", color: "#fdbf6f" }, + { name: "ECOWAS", color: "#ff7f00" }, + { name: "CEN-SAD", color: "#cab2d6" }, + { name: "SADC", color: "#6a3d9a" }, + { name: "ECCAS", color: "#ffff99" }, + { name: "ICGLR", color: "#b15928" }, + { name: "RECSA", color: "#a6cee3" }, + { name: "SARCOM", color: "#1f78b4" }, +]; + +const regional_treaties = [ + { + name: "Bamako Declaration", + name2: "BamakoDeclaration", + icon_eligible: Icon26, + icon_signed: Icon24, + icon_ratified: null, + }, + { + name: "Kinshasa Convention", + name2: "KinshasaConvention", + icon_eligible: Icon4, + icon_signed: Icon6, + icon_ratified: Icon5, + }, + { + name: "ECOWAS Convention", + name2: "ECOWASConvention", + icon_eligible: Icon2, + icon_signed: Icon3, + icon_ratified: null, + }, + { + name: "Khartoum Declaration", + name2: "KhartoumDeclaration", + icon_eligible: Icon21, + icon_signed: Icon23, + icon_ratified: null, + }, + { + name: "Nairobi Protocol", + name2: "NairobiProtocol", + icon_eligible: Icon22, + icon_signed: Icon25, + icon_ratified: null, + }, + { + name: "SADC Firearms Protocol", + name2: "SADCFirearmsProtocol", + icon_eligible: Icon8, + icon_signed: Icon7, + icon_ratified: Icon9, + }, +]; + +const international_treaties = [ + { + name: "Arms Trade Treaty", + name2: "ArmsTradeTreaty", + icon_eligible: Icon19, + icon_signed: Icon17, + icon_ratified: Icon18, + }, + { + name: "Firearms Protocol", + name2: "FirearmsProtocol", + icon_eligible: Icon12, + icon_signed: Icon10, + icon_ratified: Icon11, + }, + { + name: "Wassenaar Agreement", + name2: "WassenaarAgreement", + icon_eligible: Icon15, + icon_signed: Icon13, + icon_ratified: Icon14, + }, +]; +const intsruments = [ + { + name2: "UNProgrammeofAction", + name: "UN Programme of Action", + icon: Icon20, + }, + { + name2: "InternationalTracingInstrument", + name: "International Tracing Instrument", + icon: Icon16, + }, + { + name2: "StG-PoA", + name: "Silencing the Guns in Africa Programme of Action", + icon: Icon1, + }, +]; + +const FilterBox = (props) => { + const { selectedCountry, countriesNames, handleCountryChange, handleOrganizationClick, handleTreatiesClick } = props; + + return ( +
+
+
African Countries
+ + +
+
+
+
Regional Organisations
+
+ {regional_organisations.map((org, index) => ( +
+ handleOrganizationClick(org.name, "", org.color) + } + > +
{org.name}
+
+ ))} +
+ +
+
+
+
Regional Treaties
+
+ {regional_treaties.map((treaty) => ( +
+
{treaty.name}
+ + {treaty.icon_eligible && ( + {`${treaty.name}-Eligible`} + handleTreatiesClick(treaty.name2, "Eligible") + } + /> + )} + {treaty.icon_signed && ( + {`${treaty.name}-Signed`} + handleTreatiesClick(treaty.name2, "Signed") + } + /> + )} + {treaty.icon_ratified && ( + {`${treaty.name}-Ratified`} + handleTreatiesClick(treaty.name2, "Ratified") + } + /> + )} +
+ ))} +
+
+
+
+
International Treaties
+ {international_treaties.map((treaty) => ( +
+
{treaty.name}
+ + {treaty.icon_eligible && ( + {`${treaty.name}-Eligible`} + handleTreatiesClick(treaty.name2, "Eligible") + } + /> + )} + {treaty.icon_signed && ( + {`${treaty.name}-Signed`} handleTreatiesClick(treaty.name2, "Signed")} + /> + )} + {treaty.icon_ratified && ( + {`${treaty.name}-Ratified`} + handleTreatiesClick(treaty.name2, "Ratified") + } + /> + )} +
+ ))} +
+
+
+
+ International Guidelines & Instruments
+ (countries with recent activities only, 2014 - 2019) +
+
+
UN Programme of Action
+ handleTreatiesClick("UNProgrammeofAction", "Checked")} + /> +
+
+
+ International Tracing Instrument +
+ + handleTreatiesClick("InternationalTracingInstrument", "Checked") + } + /> +
+
+
+
+
African Guidelines & Instrumentss
+
+
+ Silencing the Guns in Africa Programme of Action +
+ handleTreatiesClick("StG-PoA", "Checked")} + /> +
+
+
+ ); +}; + +export default FilterBox; diff --git a/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx index 808eb72..5f48899 100644 --- a/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx +++ b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx @@ -30,7 +30,6 @@ import Icon25 from "../../../Icons/icon25.svg"; import Icon26 from "../../../Icons/icon26.svg"; const MarkerIcon = (props) => { - console.log(props.icon) return (