Feature abeer

AppView.drawio

@@ -19,8 +19,8 @@
                 <mxCell id="13" value="" style="edgeStyle=none;shape=flexArrow;html=1;" parent="1" source="3" target="12" edge="1">
                     <mxGeometry relative="1" as="geometry"/>
                 </mxCell>
-                <mxCell id="3" value="Dashboard&lt;br&gt;&lt;font style=&quot;font-size: 8px&quot;&gt;(Renders a scrollable table that displays two dropdowns that list all capital cities. First drop down is labeled From city. Second is To City. The table would render initially all flights from the city selected in the first&amp;nbsp; dropdown. Two Links in each row that render the flight details or Location details based on the button clicked&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-                    <mxGeometry x="190" y="-70" width="180" height="170" as="geometry"/>
+                <mxCell id="3" value="Dashboard&lt;br&gt;&lt;font style=&quot;font-size: 12px&quot;&gt;(Renders a scrollable table that displays two dropdowns that list all capital cities. First drop down is labeled From city. Second is To City. The table would render initially all flights from the city selected in the first&amp;nbsp; dropdown. Two Links in each row that render the flight details or Location details based on the button clicked&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="190" y="-130" width="230" height="230" as="geometry"/>
                 </mxCell>
                 <mxCell id="5" value="Tooltip" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="220" y="300" width="120" height="60" as="geometry"/>

build/bundle.js.LICENSE.txt

@@ -4,6 +4,17 @@ object-assign
 @license MIT
 */
 
+/**
+ * React Router v6.0.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

client/App.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import ReactDOM from "react-dom"
-import Dashboard from './Components/Dashboard.jsx'
+import Dashboard from '../client/Components/Dashboard.jsx';
 import MapChart from './Components/MapChart.jsx';
 import ReactTooltip from "react-tooltip";
 import style from "./styles.css";

client/Components/Dashboard.jsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import countryCityObj from "../../seeds/countryCapital.js";
-
+import store from '../store';
 const example = {
   "providerCoverage":"ALL",
   "itineraryType":"ONE_WAY",
@@ -45,6 +45,11 @@ const Dashboard = () => {
     <>
         <div>
         <h3>Dashboard</h3>
+        <button
+        onClick={() =>
+          store.dispatch({ type: "SET_CURRENT_CITY", payload: "Toronto" })
+        }
+      >Click me !!</button>
         <hr></hr>
         {/* <input className='dashDropdown' placeholder='FROM'></input>
         <input className='dashDropdown' placeholder='TO'></input>

client/Components/MapChart.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import {
   ZoomableGroup,
   ComposableMap,
@@ -7,13 +7,16 @@ import {
   // Graticule
 } from "react-simple-maps";
 
-import Trip from './Trip.jsx'
+import Trip from './Trip.jsx';
+import store from '../store';
 
 const geoUrl =
   "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
 
 
 const MapChart = ({ setTooltipContent }) => {
+  let currentState = store.getState();
+
   return (
     <>
     <div style={{height: "800px", width: "800px"}}>
@@ -28,7 +31,7 @@ const MapChart = ({ setTooltipContent }) => {
                   geography={geo}
                   onMouseEnter={() => {
                     const { NAME} = geo.properties;
-                    setTooltipContent(<Trip geo = {geo} NAME={NAME}/>);
+                    setTooltipContent(<Trip currentCity = {currentState.currentCity} geo = {geo} NAME={NAME}/>);
                   }}
                   onMouseLeave={() => {
                     setTooltipContent("");

client/Components/Trip.jsx

@@ -1,22 +1,25 @@
-import React, {useState, useEffect} from "react";
-import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
+import React, { useState, useEffect } from "react";
 import countryCityObj from '../../seeds/countryCapital.js'
 
 const Trip = (props) => {
-const [city, setCity] = useState('');
+  const [city, setCity] = useState("");
+  const [curr, setCurr] = useState("");
+  useEffect(() => {
+    let val = findCountry(countryCityObj, props.NAME);
+    setCity(val);
+    console.log("city", city);
+  }, [props.NAME]);
 
-useEffect(() => {
-  let val = findCountry(countryCityObj, props.NAME)
-  setCity(val);
-  console.log("city", city);
-}, [props.NAME])
+  useEffect(() => {
+  setCurr(props.currentCity);
+  console.log("props.currentCity", props.currentCity);
+  }, [props.currentCity, curr]);
 
   const findCountry = (arr, val) => {
-   const res = arr.filter((element) => element.country === val);
-  
-   return res[0]?.city;
-  }
+    const res = arr.filter((element) => element.country === val);
+
+    return res[0]?.city;
+  };
 
   return (
     <>
@@ -29,4 +32,4 @@ useEffect(() => {
   );
 };
 
-export default Trip;
+export default Trip;

client/actions/mapActions.js

@@ -0,0 +1,7 @@
+const setCurrentCity = (currentCity) => {
+  return {
+    type: "SET_CURRENT_CITY",
+    payload: currentCity,
+  };
+};
+export default setCurrentCity;

client/index.js

@@ -1,8 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from '../client/App.jsx'
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "../client/App.jsx";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Provider } from "react-redux";
+import store from "./store";
+import Dashboard from "./Components/Dashboard.jsx";
 
 ReactDOM.render(
-    <App />,
-  document.getElementById('root')
-);
+  <Provider store={store}>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}></Route>
+        <Route path="/dashboard" element={<Dashboard />}></Route>
+      </Routes>
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById("root")
+);

client/reducers/mapReducer.js

@@ -0,0 +1,14 @@
+const initialState = { currentCity: '' };
+const mapReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case "SET_CURRENT_CITY": {
+      return {
+        ...state,
+        currentCity: action.payload,
+      };
+    }
+    default:
+      return state;
+  }
+};
+export default mapReducer;

client/store.js

@@ -0,0 +1,6 @@
+import { createStore } from "redux";
+import mapReducer from "./reducers/mapReducer";
+
+const store = createStore(mapReducer);
+
+export default store;