From 031e9096450f035808b0fcf32b8e3da9d5e0f350 Mon Sep 17 00:00:00 2001 From: louai98 Date: Thu, 23 May 2024 15:25:08 +0200 Subject: [PATCH] Details Section --- package-lock.json | 101 +++++++- package.json | 1 + src/App.js | 24 +- ...ntrolInAfrica.js => ControlInAfricaMap.js} | 8 +- .../Layout/ControlInAfrica/DetailsSection.jsx | 221 ++++++++++++++++++ src/Components/Pages/ControlInAfrica.js | 22 +- src/Context/DataContext.js | 25 ++ 7 files changed, 376 insertions(+), 26 deletions(-) rename src/Components/Layout/ControlInAfrica/{ControlInAfrica.js => ControlInAfricaMap.js} (99%) create mode 100644 src/Components/Layout/ControlInAfrica/DetailsSection.jsx create mode 100644 src/Context/DataContext.js diff --git a/package-lock.json b/package-lock.json index 865a26f..3037fdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-leaflet": "^4.2.1", + "react-query": "^3.39.3", "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "react-select": "^5.8.0", @@ -1953,9 +1954,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", + "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -6061,6 +6062,14 @@ "node": ">= 8.0.0" } }, + "node_modules/big-integer": { + "version": "1.6.52", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", + "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -6191,6 +6200,21 @@ "node": ">=8" } }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "node_modules/browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -12901,6 +12925,11 @@ "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==" }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -13330,6 +13359,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/match-sorter": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", + "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", + "dependencies": { + "@babel/runtime": "^7.23.8", + "remove-accents": "0.5.0" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -13433,6 +13471,11 @@ "node": ">=8.6" } }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -13727,6 +13770,14 @@ "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz", "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==" }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "dependencies": { + "big-integer": "^1.6.16" + } + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", @@ -14248,6 +14299,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -16333,6 +16389,31 @@ "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==" }, + "node_modules/react-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -16763,6 +16844,11 @@ "node": ">= 0.10" } }, + "node_modules/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -19024,6 +19110,15 @@ "node": ">= 10.0.0" } }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 2a946d6..ea618b1 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-leaflet": "^4.2.1", + "react-query": "^3.39.3", "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "react-select": "^5.8.0", diff --git a/src/App.js b/src/App.js index d641a05..8dd02c3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,19 @@ import logo from "./logo.svg"; import "./App.css"; import NavBarSalw from "./Components/Layout/NavBarSalw/NavBarSalw.js"; -import SwiperSalw from "./Components/Layout/SwiperSalw/SwiperSalw.js"; -import MainDescription from "./Components/Layout/MainDescription/MainDescription.js"; -import WeaponAmmuBut from "./Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js"; -import CarouselsSalw from "./Components/Layout/CarouselsSalw/CarouselsSalw.js"; +import { QueryClient, QueryClientProvider } from "react-query"; +import { DataProvider } from "./Context/DataContext.js"; +const queryClient = new QueryClient(); - -function App() { - +const App = () => { return ( - <> - - {/* */} - {/* */} - {/* */} - + + + + + ); -} +}; export default App; diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfrica.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js similarity index 99% rename from src/Components/Layout/ControlInAfrica/ControlInAfrica.js rename to src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index 40bb8b2..3226d28 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfrica.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -1,4 +1,4 @@ -import React, { createRef } from "react"; +import React, { createRef, useContext } from "react"; import Stack from "react-bootstrap/Stack"; import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet"; import L, { control } from "leaflet"; @@ -33,7 +33,7 @@ import Icon24 from "../../../Icons/icon24.svg"; import Icon25 from "../../../Icons/icon25.svg"; import Icon26 from "../../../Icons/icon26.svg"; -class ControlInAfrica extends React.Component { +class ControlInAfricaMap extends React.Component { constructor(props) { super(props); @@ -168,6 +168,8 @@ class ControlInAfrica extends React.Component { return; } this.setState({ selectedCountry: countryName }); + + this.props.updateCountryID(e.target.feature.properties.id); }; handleOrganizationClick = (name, status, color) => { @@ -656,4 +658,4 @@ class ControlInAfrica extends React.Component { } } -export default ControlInAfrica; +export default ControlInAfricaMap; diff --git a/src/Components/Layout/ControlInAfrica/DetailsSection.jsx b/src/Components/Layout/ControlInAfrica/DetailsSection.jsx new file mode 100644 index 0000000..9523372 --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/DetailsSection.jsx @@ -0,0 +1,221 @@ +import React, { useState, useEffect } from "react"; +import Card_ from "../../UI/Card_/Card_"; +import { useAfricaData } from "../../../Context/DataContext"; + +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 international_guidelines = [ + { + name: "UN Programme of Action", + name2: "UNProgrammeofAction", + icon_eligible: Icon15, + }, + { + name: "International Tracing Instrument", + name2: "InternationalTracingInstrument", + icon_eligible: Icon15, + }, +]; + +const african_guidelines = [ + { + name: "Silencing the Guns in Africa Programme of Action", + name2: "StG-PoA", + icon_eligible: Icon15, + }, +]; + +const DetailesSection = (props) => { + const { data, error, isLoading } = useAfricaData(); + const countryID = props.countryID; + + const [selectedCountry, setSelectedCountry] = useState(""); + const [selectedRegionalOrganisations, setSelectedRegionalOrganisations] = + useState([]); + const [selectedRegionalTreaties, setSelectedRegionalTreaties] = useState([]); + const [selectedInternationalTreaties, setSelectedInternationalTreaties] = + useState([]); + const [selectedInternationalGuidelines, setSelectedInternationalGuidelines] = + useState([]); + const [selectedAfricanGuidelines, setSelectedAfricanGuidelines] = useState( + [] + ); + + useEffect(() => { + if (data && countryID != null) { + const foundCountry = data.features.find( + (item) => item.properties.id === countryID + ); + setSelectedCountry(foundCountry); + + const regionalOrgs = regional_organisations.filter( + (item) => foundCountry.properties[item.name] === 1 + ); + setSelectedRegionalOrganisations(regionalOrgs); + + const regionalTreats = regional_treaties.filter( + (item) => foundCountry.properties[item.name2] != "0" + ); + setSelectedRegionalTreaties(regionalTreats); + } + }, [data, countryID]); + + useEffect(() => { + console.log(selectedRegionalTreaties); + }, [selectedRegionalTreaties]); + + if (isLoading) { + return
Loading...
; + } + if (error) { + return
Error
; + } + + return ( + + {selectedCountry && ( +
+

{selectedCountry.properties.name}

+

+ Regional Organisations:{" "} + {selectedRegionalOrganisations.map((item) => { + return ( + + {item.name} + + ); + })} +

+

Regional Treaties: + {selectedRegionalTreaties.map((item) => { + return ( + + {item.name} + + ); + })} +

+

International Treaties:

+

International Guidelines & Instruments:

+

African Guidelines & Instrumentss:

+
+ )} + + ); +}; + +export default DetailesSection; diff --git a/src/Components/Pages/ControlInAfrica.js b/src/Components/Pages/ControlInAfrica.js index 3938b33..c38894f 100644 --- a/src/Components/Pages/ControlInAfrica.js +++ b/src/Components/Pages/ControlInAfrica.js @@ -1,15 +1,25 @@ -import React from "react"; +import React, {useState} from "react"; import Container from "react-bootstrap/Container"; -import ControlInAfrica from "../Layout/ControlInAfrica/ControlInAfrica"; +import ControlInAfricaMap from "../Layout/ControlInAfrica/ControlInAfricaMap"; import Title from "../Layout/ControlInAfrica/Title"; -const Treaties = () => { +import DetailsSection from "../Layout/ControlInAfrica/DetailsSection"; + +const ControlInAfrica = (props) => { + + const [countryID, setCountryID] = useState(null); + + const updateCountryID = (countryID) => { + setCountryID(countryID) + } + + return ( - - + + ); }; -export default Treaties; +export default ControlInAfrica; diff --git a/src/Context/DataContext.js b/src/Context/DataContext.js new file mode 100644 index 0000000..2272b5b --- /dev/null +++ b/src/Context/DataContext.js @@ -0,0 +1,25 @@ +import React, { createContext, useContext } from 'react'; +import { useQuery } from 'react-query'; +import Africa from "../Data/ControlinAfrica.geojson"; + +const DataContext = createContext(); + +export const DataProvider = ({ children }) => { + const fetchData = async () => { + const response = await fetch(Africa); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }; + + const { data, error, isLoading } = useQuery('dataKey', fetchData); + + return ( + + {children} + + ); +}; + +export const useAfricaData = () => useContext(DataContext); \ No newline at end of file