Details Section

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",
+      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
-      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "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",

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

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 { QueryClient, QueryClientProvider } from "react-query";
-import MainDescription from "./Components/Layout/MainDescription/MainDescription.js";
+import { DataProvider } from "./Context/DataContext.js";
-import WeaponAmmuBut from "./Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js";
-import CarouselsSalw from "./Components/Layout/CarouselsSalw/CarouselsSalw.js";
 
+const queryClient = new QueryClient();
 
-
+const App = () => {
-function App() {
-
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
-      <NavBarSalw></NavBarSalw>
+      <DataProvider>
-      {/* <CarouselsSalw></CarouselsSalw> */}
+        <NavBarSalw></NavBarSalw>
-      {/* <MainDescription></MainDescription> */}
+      </DataProvider>
-      {/* <WeaponAmmuBut></WeaponAmmuBut> */}
+    </QueryClientProvider>
-    </>
   );
-}
+};
 
 export default App;

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;

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

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 (
     <Container fluid className="p-5">
       <Title></Title>
-
+      <ControlInAfricaMap updateCountryID={updateCountryID}></ControlInAfricaMap>
-      <ControlInAfrica></ControlInAfrica>
+      <DetailsSection countryID={countryID}></DetailsSection>
     </Container>
   );
 };
 
-export default Treaties;
+export default ControlInAfrica;

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 (
+    <DataContext.Provider value={{ data, error, isLoading }}>
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export const useAfricaData = () => useContext(DataContext);