Revert " first comment functionality (#29)" (#42)

This reverts commit 5995153.
OSS-team-zulu · Jul 8, 2020 · bb4f492 · bb4f492
1 parent ac5e53a
commit bb4f492
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 78 deletions.
diff --git a/frontend/zulu/src/components/CardComponent/CardComponent.jsx b/frontend/zulu/src/components/CardComponent/CardComponent.jsx
diff --git a/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx b/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx
@@ -1,9 +1,9 @@
-import React, {useEffect, useState} from 'react';
-import {FeatureGroup, Marker, Popup} from 'react-leaflet';
+import React, {useState, useEffect} from 'react';
+import {Marker, FeatureGroup, Popup} from 'react-leaflet';
 import MarkerClusterGroup from "react-leaflet-markercluster";
-import {iconWiki} from '../../Icons/Icon.Wiki';
+import Card from '../Card/Card'
+import { iconWiki } from '../../Icons/Icon.Wiki';
 import "./GeoWiki.css";
-import {CardComponent} from "../CardComponent/CardComponent";
 
 
 var fetchData = function fetchData(lat, lng, maxDist, options) {
@@ -21,10 +21,13 @@ var fetchData = function fetchData(lat, lng, maxDist, options) {
         });    
 }
 
-function get_comments(){
-    return ["thats amazing!","unbelivable!"]
-}
 
+function parseImagePath(thumbnailPath) {
+    const lastSlashIndex = thumbnailPath.lastIndexOf("/");
+    var path = thumbnailPath.slice(0, lastSlashIndex);
+    path = path.replace("thumb/", "");
+    return path
+}
 
 
 export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) {
@@ -47,7 +50,7 @@ export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) {
     }, [lat, lng, maxDist]);
 
     var GroupComponent = cluster ? MarkerClusterGroup : FeatureGroup;
-    
+
     return (
         <GroupComponent>
 
@@ -58,11 +61,29 @@ export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) {
                     icon={iconWiki}
                 >
 
-                    <Popup minWidth={300} closeButton={true} closeOnClick={false} autoClose={false}>
+                        <Popup minWidth={300}  closeButton={true} closeOnClick={false} autoClose={false}>
+
+                            <Card background='#2980B9' height="200"  >
+                            <div  style={{marginLeft:"auto" ,marginRight:"auto", height: "200px", overflowY: "scroll"} }>
+                            <a href={"https://en.wikipedia.org/?curid="+f.pageid} style={{color:"black",textDecoration:"none"}}>
+
+                            <h3>{f.title}</h3>
+                            </a>
+                            { f.hasOwnProperty('thumbnail') ? 
+                                <img display="inline-block" src={parseImagePath(f.thumbnail.source)} style={{maxHeight: "200px", maxWidth: "200px"}}></img>
+                                 :
+                                <p ></p> 
+                            }
+
+<p id="desc" style={{float:"left",dir:"rtl",color: "black",fontWeight: "bold" ,lineHeight: "18px"}}>
+
+{f.extract}
+</p>
+</div>
 
-                        <CardComponent f={f}/>
+                            </Card>
 
-                    </Popup>
+                    </Popup>    
 
 
                 </Marker>