From b21d9ba99c9c637343955d33f07fb359761661eb Mon Sep 17 00:00:00 2001
From: Sheikh Jamir Alam <alamjamir15@gmail.com>
Date: Tue, 4 Apr 2023 16:02:45 +0530
Subject: [PATCH] Moved entirely to react-toastify

---
 package.json           |  2 +-
 src/Controls/index.jsx | 47 +++++++++++++++++++++---------------------
 src/Map/Map.jsx        | 17 ++++++++++++---
 src/index.css          |  2 +-
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index d6cd435..620a780 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "react-modern-drawer": "^1.1.2",
     "react-redux": "^8.0.4",
     "react-scripts": "^5.0.1",
-    "react-semantic-toasts": "^0.6.6",
+    "react-toastify": "^9.1.2",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
diff --git a/src/Controls/index.jsx b/src/Controls/index.jsx
index c45d036..a574388 100644
--- a/src/Controls/index.jsx
+++ b/src/Controls/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Drawer from 'react-modern-drawer'
 import 'react-modern-drawer/dist/index.css'
-import { SemanticToastContainer, toast } from 'react-semantic-toasts'
+import { toast } from 'react-toastify'
 import DirectionsControl from './Directions'
 import IsochronesControl from './Isochrones'
 import DirectionOutputControl from './Directions/OutputControl'
@@ -52,24 +52,21 @@ class MainControl extends React.Component {
   componentDidMount = () => {
     const { dispatch } = this.props
 
-    // toast({
-    //   type: 'warning',
-    //   icon: 'desktop',
-    //   title: 'Expected Downtime',
-    //   description:
-    //     'Due to server maintenance, Valhalla is offline until the evening of January 10th.',
-    //   time: 5000
-    // })
-
     this.getLastUpdate()
 
-    toast({
-      type: 'success',
-      icon: 'heart',
-      title: 'Welcome to Valhalla!',
-      description: 'Global Routing Service - funded by FOSSGIS e.V.',
-      time: 5000,
-    })
+    toast.success(
+      'Welcome to Valhalla! Global Routing Service - funded by FOSSGIS e.V.',
+      {
+        position: 'bottom-center',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: 'light',
+      }
+    )
 
     const params = Object.fromEntries(new URL(document.location).searchParams)
 
@@ -137,12 +134,15 @@ class MainControl extends React.Component {
   componentDidUpdate = (prevProps) => {
     const { message } = this.props
     if (message.receivedAt > prevProps.message.receivedAt) {
-      toast({
-        type: message.type,
-        icon: message.icon,
-        title: message.topic,
-        description: message.description,
-        time: 5000,
+      toast.message.type(message.description, {
+        position: 'bottom-center',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: 'light',
       })
     }
   }
@@ -259,7 +259,6 @@ class MainControl extends React.Component {
               : '0000-00-00, 00:00'}
           </div>
         </Drawer>
-        <SemanticToastContainer position="bottom-center" maxToasts={1} />
       </>
     )
   }
diff --git a/src/Map/Map.jsx b/src/Map/Map.jsx
index 7ae6e69..00229c6 100644
--- a/src/Map/Map.jsx
+++ b/src/Map/Map.jsx
@@ -17,6 +17,7 @@ import axios from 'axios'
 import * as R from 'ramda'
 import ExtraMarkers from './extraMarkers'
 import { Button, Label, Icon, Popup } from 'semantic-ui-react'
+import { ToastContainer } from 'react-toastify'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import {
   fetchReverseGeocode,
@@ -646,12 +647,9 @@ class Map extends React.Component {
       }
       excludePolygons.push(lngLatArray)
     })
-
     const { dispatch } = this.props
-
     const name = 'exclude_polygons'
     const value = excludePolygons
-
     dispatch(
       updateSettings({
         name,
@@ -1034,6 +1032,19 @@ class Map extends React.Component {
     return (
       <React.Fragment>
         <div>
+          <ToastContainer
+            position="bottom-center"
+            autoClose={5000}
+            limit={1}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+          />
           <div id="map" className="map-style" />
           <button
             className="ui primary button"
diff --git a/src/index.css b/src/index.css
index ecd573c..d024dac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
 @import '~semantic-ui-css/semantic.css';
 @import '~leaflet/dist/leaflet.css';
 @import '~tachyons/css/tachyons.css';
-@import '~react-semantic-toasts/styles/react-semantic-alert.css';
+@import '~react-toastify/dist/ReactToastify.css';
 @import '~leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css';
 
 body {