another

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

src/App.css

@@ -2,37 +2,3 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,33 +1,24 @@
 import React, {useState} from 'react';
 import './App.css';
-import SearchBar from './SearchBar';
-import Map from "./Map"
+import SearchBar from './components/searchbar/SearchBar';
+import Map from "./components/map/Map"
 import "@material-tailwind/react/tailwind.css";
-import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet'
-function App() {
-
-  const [input, setinput] = useState("");
 
-  let appJsProps = {
-    color: input
-  }
+function App() {
 
-  function changeInput(e: React.ChangeEvent<HTMLInputElement>) {
-    let newInput : string = e.target.value;
-    setinput(newInput);
-
+  const [curentOrg, setcurentOrg] = useState("")
+  function changeCurrentOrg(org: string) {
+   setcurentOrg(org)
   }
 
-
   return (
     <div className="App ">
       <div className="flex gap-4 ">
-        <SearchBar ></SearchBar> 
-        <Map></Map>
+        <SearchBar changeCurrentOrg={changeCurrentOrg}></SearchBar> 
+        <Map organization={curentOrg}></Map>
       </div>
-
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/map/Map.tsx

@@ -0,0 +1,91 @@
+import { Feature, FeatureCollection, Geometry, GeoJsonProperties} from 'geojson';
+
+import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet'
+
+//leaflet coordinates for all states in the world
+import countries  from '../../data/world_countries_featureCollection.json'
+
+//object of inter governmental organisations (IGOs), each organisation is an array in the structure [ state, status in IGO]  
+import organizations from "../../data/IGOs.json"
+
+
+  interface mapProps {
+    organization: string;
+  }
+const Map = (props : mapProps) => {
+
+
+    const membersWithoutStatusStyle = {
+      style:  {
+        "color": "red",
+        "weight": 5,
+        "opacity": 0.15
+    }}
+    let membersWithoutStatus :  Feature[]= {...countries}.features
+    .filter(e => organizations[props.organization  as keyof typeof organizations].some((org : Array<string>) => org[0] === e.properties.name && org[1] === "")) 
+    .map(e => {
+      return e as Feature
+    })
+
+
+
+    const membersWithStatusStyle = {
+    style:  {
+      "color": "red",
+      "weight": 5,
+      "opacity": 1
+    }}
+    let membersWithStatus: Feature[] = {...countries}.features
+    .filter(e => organizations[props.organization  as keyof typeof organizations]
+      .some((org : Array<string>) => org[0] === e.properties.name && org[1] !== ""))
+      .map(org => org as Feature)
+
+ let membersWithStatusCopy = [...membersWithStatus]
+
+
+ //   membersWithStatus = membersWithStatus.map((e, index) => {
+    //   // let membersWithStatusCopy = [...membersWithStatus]
+    //   console.info(organizations[props.organization  as keyof typeof organizations][index], "THIS SHIT HITS HOME");
+    //   let propertiestWithStatus = Object.assign({status: "ss"}, e.properties);
+    //   let eventWithStatus = Object.assign(e, {properties: propertiestWithStatus});
+    //   console.warn("logging event with status", eventWithStatus);
+
+    //   return eventWithStatus as Feature
+    // })
+
+
+
+
+
+  return (
+    <>
+    <MapContainer style = {{width: "200vh", height: "100vh"}} center={[49.505, 25.09]} zoom={5}>
+        <TileLayer
+            attribution= {`&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`}
+            url='https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=3f19809ebd064b10a80b4ea7d2035c35'
+        />
+
+        {
+          membersWithoutStatus.map(e => {
+            return <GeoJSON {...membersWithStatusStyle} data = {e} >
+              <Popup>
+              {e.properties ? e.properties.sovereignt : "data of this country could not be loaded"}
+              </Popup>
+            </GeoJSON>
+          })
+        }
+        {
+          membersWithStatus.map(e => {
+            return <GeoJSON {...membersWithoutStatusStyle}  data = {e}>
+              <Popup>
+                {e.properties ? e.properties.status : "data of this country could not be loaded"}
+              </Popup>
+            </GeoJSON>
+          })
+        }        
+    </MapContainer>   
+    </>
+  )
+}
+
+export default Map