Improvements 01 28 (#264)

* improving footer

* improve ui

* upgrading dependencies

* adding glow to all boxes on dashboard

* introducing single listing view

* next release version

* improve screenshots and login page

ui/src/views/listings/Map.jsx

@@ -11,14 +11,14 @@ import { useSelector, useActions } from '../../services/state/store.js';
 import { distanceMeters, generateCircleCoords, getBoundsFromCenter, getBoundsFromCoords } from './mapUtils.js';
 import { Select, Space, Typography, Button, Popover, Divider, Switch, Banner, Toast } from '@douyinfe/semi-ui-19';
 import { IconFilter, IconLink } from '@douyinfe/semi-icons';
-import { IconDelete } from '@douyinfe/semi-icons';
+import { IconDelete, IconEyeOpened } from '@douyinfe/semi-icons';
 
 import no_image from '../../assets/no_image.jpg';
 import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
 import './Map.less';
 import { xhrDelete } from '../../services/xhr.js';
-import { Link } from 'react-router';
+import { Link, useNavigate } from 'react-router-dom';
 
 const { Text } = Typography;
 
@@ -73,6 +73,7 @@ export default function MapView() {
   const markers = useRef([]);
   const homeMarker = useRef(null);
   const actions = useActions();
+  const navigate = useNavigate();
   const listings = useSelector((state) => state.listingsData.mapListings);
   const homeAddress = useSelector((state) => state.userSettings.settings.home_address);
   const [style, setStyle] = useState('STANDARD');
@@ -113,10 +114,15 @@ export default function MapView() {
       }
     };
 
+    window.viewDetails = (id) => {
+      navigate(`/listings/listing/${id}`);
+    };
+
     return () => {
       delete window.deleteListing;
+      delete window.viewDetails;
     };
-  }, []);
+  }, [navigate]);
 
   useEffect(() => {
     if (map.current) return;
@@ -349,7 +355,15 @@ export default function MapView() {
       }
     };
 
-    addCircleLayer();
+    const updateLayers = () => {
+      addCircleLayer();
+    };
+
+    if (map.current.isStyleLoaded()) {
+      updateLayers();
+    } else {
+      map.current.on('load', updateLayers);
+    }
 
     filterListings().forEach((listing) => {
       if (
@@ -378,6 +392,13 @@ export default function MapView() {
                     ${renderToString(<IconLink />)}
                   </a>
                 </div>
+                <button
+                  class="map-popup-content__detailsButton"
+                  title="View Details"
+                  onclick="viewDetails('${listing.id}')"
+                >
+                  ${renderToString(<IconEyeOpened />)}
+                </button>
                 <button
                   class="map-popup-content__deleteButton"
                   title="Remove"