world map appending additional country fix

Author: TheEugeniaKim

.env

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://127.0.0.1:5000/
+NODE_ENV=development

.env.sample

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=
+NODE_ENV=

.production.env

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=https://humaniki-staging.wmflabs.org/api/
+NODE_ENV=development

src/Components/WorldMap.js

@@ -11,8 +11,7 @@ function WorldMap1({ mapData, property }) {
   // will be called initially and on every data change
   useEffect(() => {
     const svg = select(svgRef.current);
-      const g = svg.append('g');
-
+    const g = svg.select(".countries")
 
       const {width, height} = dimensions || wrapperRef.current.getBoundingClientRect() ;
       const projection = geoMercator().fitSize([width,height], mapData);
@@ -32,10 +31,10 @@ function WorldMap1({ mapData, property }) {
         .selectAll(".country")
         .data(mapData.features)
         .join("path")
+        .attr("class", "country")
         .on("click", feature => {
           setSelectedCountry(selectedCountry === feature ? null : feature);
         })
-        .attr("class", "country")
         .attr("fill", feature => colorScale(feature.properties[property]))
         .attr("d", feature => pathGenerator(feature))
         .append("title")
@@ -57,7 +56,9 @@ function WorldMap1({ mapData, property }) {
 
   return (
     <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
-      <svg className="world-map"ref={svgRef}></svg>
+      <svg className="world-map"ref={svgRef}>
+        <g className="countries"></g>
+      </svg>
     </div>
   );
 }

src/Containers/AppContainer.js

@@ -18,8 +18,7 @@ function AppContainer() {
       {navBar === "gender-by-country" ? <GenderByCountryView /> : null}
       {navBar === "gender-by-DOB" ? <GenderByDOBView /> : null}  
       {navBar === "language" ? <GenderByLanguageView /> : null}  
-      <br />
-      <Footer />
+      <Footer className="fixed-bottom" />
     </div>
   );
 }

src/Views/AdvancedSearchView.js

@@ -46,7 +46,10 @@ function AdvancedSearchView(){
   function setFetchURL(formState){
     // let url = `http://localhost:5000/v1/gender/gap/${formState.snapshot ? formState.snapshot : "latest"}/${selectedWikipediaHumanType}/properties?`
     // let url = `https://humaniki-staging.wmflabs.org/api/v1/gender/gap/${formState.snapshot ? formState.snapshot : "latest"}/${selectedWikipediaHumanType}/properties?`
-    let url = `http://127.0.0.1:5000/v1/gender/gap/${formState.snapshot ? formState.snapshot : "latest"}/${selectedWikipediaHumanType}/properties?`
+    // let baseURL = "http://127.0.0.1:5000/v1/gender/gap/"
+
+    let baseURL = process.env.REACT_APP_API_URL
+    let url = `${baseURL}v1/gender/gap/${formState.snapshot ? formState.snapshot : "latest"}/${selectedWikipediaHumanType}/properties?`
     if (formState.year) {
       url = url + `&date_of_birth=${formState.year}`
     }

src/Views/GenderByCountryView.js

@@ -43,7 +43,9 @@ function GenderByCountryView(props){
   function fetchData() {
     // fetch(`http://localhost:3000/v1/${selectedWikipediaHumanType}/gender/aggregated/2020-09-15/geography/${selectBirthVsCitizenship}.json`)
     // fetch('http://localhost:3000/v1/all-wikidata/gender/aggregated/2020-09-15/geography/citizenship.json')
-    fetch("http://127.0.0.1:5000/v1/gender/gap/latest/gte_one_sitelink/properties?citizenship=all")
+    let baseURL = process.env.REACT_APP_API_URL
+    let url = baseURL + "v1/gender/gap/latest/gte_one_sitelink/properties?citizenship=all"
+    fetch(url)
       .then(response => response.json())
       .then(fetchData => {
         setAPIData(fetchData)

src/Views/GenderByDOBView.js

@@ -124,7 +124,9 @@ function GenderByDOBView(){
   }
 
   useEffect(() => {
-    fetch('http://127.0.0.1:5000/v1/gender/gap/latest/gte_one_sitelink/properties?date_of_birth=all&label_lang=en')
+    let baseURL = process.env.REACT_APP_API_URL
+    let url = baseURL + "v1/gender/gap/latest/gte_one_sitelink/properties?date_of_birth=all&label_lang=en"
+    fetch(url)
       .then(response => response.json())
       .then(data => processData(data))
   }, [])

src/Views/GenderByLanguageView.js

@@ -18,7 +18,10 @@ function GenderByLanguageView(){
   const [tableColumns, setTableColumns] = useState([])
 
   function fetchData(){
-    fetch('http://127.0.0.1:5000/v1/gender/gap/latest/all_wikidata/properties?project=all&label_lang=en') 
+    let baseURL = process.env.REACT_APP_API_URL
+    let url = baseURL + 'v1/gender/gap/latest/all_wikidata/properties?project=all&label_lang=en'
+    console.log("BASE URL", baseURL)
+    fetch(url) 
       .then(response => response.json())
       .then(data => processData(data))
   }