From feddda9c4eb24edb8a95dafd6b90f0d37f579bfb Mon Sep 17 00:00:00 2001
From: Luke Berndt <lukekb@gmail.com>
Date: Sat, 24 Dec 2022 22:15:30 -0500
Subject: [PATCH] It might be working

---
 frontend/src/Call/CallPlayerContainer.js | 36 ++++++++++++++++++++----
 frontend/src/index.js                    | 31 ++++++++------------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/frontend/src/Call/CallPlayerContainer.js b/frontend/src/Call/CallPlayerContainer.js
index 1273ed9..fb12af3 100644
--- a/frontend/src/Call/CallPlayerContainer.js
+++ b/frontend/src/Call/CallPlayerContainer.js
@@ -5,8 +5,31 @@ import * as groupActionCreators from "../Group/group-actions"
 import * as systemActionCreators from "../System/system-actions"
 import { bindActionCreators } from 'redux'
 import CallPlayer from "./CallPlayer"
+import {
+  useLocation,
+  useNavigate,
+  useParams
+} from "react-router-dom";
+
+// glorious solution here: https://stackoverflow.com/questions/71097375/how-can-i-use-withrouter-in-react-router-v6-for-passing-props
+function withRouter(Component) {
+  function ComponentWithRouterProp(props) {
+    let location = useLocation();
+    let navigate = useNavigate();
+    let params = useParams();
+    return (
+      <Component
+        {...props}
+        router={{ location, navigate, params }}
+      />
+    );
+  }
+
+  return ComponentWithRouterProp;
+}
 
 function mapStateToProps(state, props) {
+  const  shortName  = props.router.params.shortName;
   return {
 		callsById: state.call.byId,
     callsAllIds: state.call.allIds,
@@ -18,14 +41,15 @@ function mapStateToProps(state, props) {
     filterTalkgroups: state.call.filterTalkgroups,
     filterGroupId: state.call.filterGroupId,
     filterStarred: state.call.filterStarred,
-    system: state.system.items.find((item) =>  item.shortName === props.match.params.shortName),
-    groups: state.group.items[props.match.params.shortName],
-    talkgroups: state.talkgroup.items[props.match.params.shortName],
+    system: state.system.items.find((item) =>  item.shortName === shortName),
+    groups: state.group.items[shortName],
+    talkgroups: state.talkgroup.items[shortName],
     callsIsWaiting: state.call.isWaiting,
     systemIsWaiting: state.system.isWaiting,
     talkgroupsIsWaiting: state.talkgroup.isWaiting,
     groupsIsWaiting: state.group.isWaiting,
-    shortName: props.match.params.shortName
+    location: props.router.location,
+    shortName: shortName
 	}
 }
 
@@ -39,7 +63,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 
-export default connect(
+export default withRouter(connect(
 	mapStateToProps,
 	mapDispatchToProps
-)(CallPlayer)
+)(CallPlayer))
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 9264a3e..d6d68a1 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,17 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux'
 import { Routes ,Route } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router'
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from 'react-redux'
 import configureStore, { history } from './redux-router/configureStore'
-import ReactGA from 'react-ga';
-
 
 import 'semantic-ui-css/semantic.min.css'
-/*
+
 // withTracker
-import withTracker from './withTracker';
+//import withTracker from './withTracker';
 
 // Main
 import MainContainer from "./Main/MainContainer"
@@ -22,26 +19,22 @@ import ListSystemsContainer from "./System/ListSystemsContainer"
 // Call
 import CallPlayerContainer from "./Call/CallPlayerContainer"
 
-import AboutComponent from "./About/AboutComponent"*/
+import AboutComponent from "./About/AboutComponent"
 
-ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS);
 
 const store = configureStore(/* provide initial state if any */)
 const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(
   <Provider store={store}>
-    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
-      <> { /* your usual react-router v4/v5 routing */ }
+  <BrowserRouter>
         <Routes>
-          {/* 
-          <Route exact path="/" component={withTracker(MainContainer)} />
-          <Route exact path="/systems" component={withTracker(ListSystemsContainer)} />
-          <Route exact path="/system/:shortName" component={withTracker(CallPlayerContainer)} />
-          <Route exact path="/about" component={withTracker(AboutComponent)} />*/}
-          <Route render={() => (<div>Miss</div>)} />
+          <Route exact path="/" element={<MainContainer/>} />
+          <Route exact path="/systems" element={<ListSystemsContainer/>} />
+          <Route exact path="/system/:shortName" element={<CallPlayerContainer/>} />
+          <Route exact path="/about" element={<AboutComponent/>} />
+
         </Routes>
-      </>
-    </ConnectedRouter>
+        </BrowserRouter>
   </Provider>
 )
\ No newline at end of file