Details Section
This commit is contained in:
louai98
parent
feee8eb239
commit
031e909645
101
package-lock.json
generated
101
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
22
src/App.js
22
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 (
|
||||
<>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<DataProvider>
|
||||
<NavBarSalw></NavBarSalw>
|
||||
{/* <CarouselsSalw></CarouselsSalw> */}
|
||||
{/* <MainDescription></MainDescription> */}
|
||||
{/* <WeaponAmmuBut></WeaponAmmuBut> */}
|
||||
</>
|
||||
</DataProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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;
|
||||
221
src/Components/Layout/ControlInAfrica/DetailsSection.jsx
Normal file
221
src/Components/Layout/ControlInAfrica/DetailsSection.jsx
Normal file
@ -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 <div>Loading...</div>;
|
||||
}
|
||||
if (error) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card_ className="mt-3 p-3">
|
||||
{selectedCountry && (
|
||||
<div>
|
||||
<h2>{selectedCountry.properties.name}</h2>
|
||||
<p>
|
||||
Regional Organisations:{" "}
|
||||
{selectedRegionalOrganisations.map((item) => {
|
||||
return (
|
||||
<span
|
||||
key={item.name}
|
||||
style={{ color: item.color, padding: "0 5px" }}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</p>
|
||||
<p>Regional Treaties:
|
||||
{selectedRegionalTreaties.map((item) => {
|
||||
return (
|
||||
<span
|
||||
key={item.name}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</p>
|
||||
<p>International Treaties: </p>
|
||||
<p>International Guidelines & Instruments: </p>
|
||||
<p>African Guidelines & Instrumentss: </p>
|
||||
</div>
|
||||
)}
|
||||
</Card_>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailesSection;
|
||||
@ -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 (
|
||||
<Container fluid className="p-5">
|
||||
<Title></Title>
|
||||
|
||||
<ControlInAfrica></ControlInAfrica>
|
||||
<ControlInAfricaMap updateCountryID={updateCountryID}></ControlInAfricaMap>
|
||||
<DetailsSection countryID={countryID}></DetailsSection>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Treaties;
|
||||
export default ControlInAfrica;
|
||||
|
||||
25
src/Context/DataContext.js
Normal file
25
src/Context/DataContext.js
Normal file
@ -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 (
|
||||
<DataContext.Provider value={{ data, error, isLoading }}>
|
||||
{children}
|
||||
</DataContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAfricaData = () => useContext(DataContext);
|
||||
Loading…
Reference in New Issue
Block a user