Gettign going

admin/src/System/ListSystems.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { Component, useRef } from "react";
 import SystemCard from "./SystemCard";
 import {
   Container,
@@ -8,37 +8,40 @@ import {
   Icon,
   Button,
 } from "semantic-ui-react";
+import { useGetSystemsQuery, } from '../features/api/apiSlice'
+import { useDispatch } from 'react-redux'
+import {  push } from '@lagunovsky/redux-react-router'
 
 
 // ----------------------------------------------------
-class ListSystems extends Component {
-
-  state = {
+const ListSystems = (props) => {
+  const { data, isSuccess } = useGetSystemsQuery();
+  const dispatch = useDispatch();
 
+  let systems = false;
+  if (isSuccess) {
+    systems = data.systems;
   }
-  componentDidMount() {
-  		this.props.fetchSystems();
-  	}
 
 //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
 //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
-  render() {
-    const systems = this.props.system.items;
+
     return (
       <div>
         <Container>
           <Header as="h1">Radio Systems</Header>
-            <Button onClick={(e) => this.props.changeUrl("/create-system")}><Icon name='plus' />Add System</Button>
+            <Button onClick={(e) => dispatch(push("/create-system"))}><Icon name='plus' />Add System</Button>
             <Divider />
           <Card.Group itemsPerRow={4}>
-          {systems.map((system) =>
-            <SystemCard system={system} key={system.shortName} onClick={(e) => this.props.changeUrl("/system/" + system.shortName)}/>
+          {systems &&
+            systems.map((system) =>
+            <SystemCard system={system} key={system.shortName} onClick={(e) => dispatch(push("/system/" + system.shortName))}/>
           )}
           </Card.Group>
         </Container>
       </div>
     );
-  }
+
 }
 
 export default ListSystems;

admin/src/System/SystemCard.js

@@ -9,15 +9,13 @@ import {
 
 
 
-class SystemCard extends Component {
-
-render() {
+const SystemCard = (props) => {
   var location = "";
-  const system = this.props.system;
+  const { system } = props;
+
 
-  
   if (system) {
-    
+
 
     switch (system.systemType) {
       case "state":
@@ -37,26 +35,26 @@ render() {
     }
   }
   return (
-    <Card link onClick={this.props.onClick}>
-    
-    <Card.Content>
-    <Header size='medium'>
-    <Header.Content>
-    {system.name}
-      <Header.Subheader>{system.screenName}</Header.Subheader>
-    </Header.Content>
-  </Header>
-   </Card.Content><Card.Content>
+    <Card link onClick={props.onClick}>
 
-   <Card.Description>{system.description}</Card.Description>
-   </Card.Content>
-   <Card.Content extra>
-     <Icon name='marker' />
-     {location}
-   </Card.Content>
- </Card>
+      <Card.Content>
+        <Header size='medium'>
+          <Header.Content>
+            {system.name}
+            <Header.Subheader>{system.screenName}</Header.Subheader>
+          </Header.Content>
+        </Header>
+      </Card.Content><Card.Content>
+
+        <Card.Description>{system.description}</Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        <Icon name='marker' />
+        {location}
+      </Card.Content>
+    </Card>
   );
-}
+
 }
 
 export default SystemCard;

admin/src/System/error-actions.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 //import { browserHistory } from "react-router"
 import * as types from "./error-constants";
-import { push } from  'connected-react-router';
+import { push } from  '@lagunovsky/redux-react-router';
 
 
 function beginFetch() {

admin/src/System/system-actions.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 //import { browserHistory } from "react-router"
 import * as types from "./system-constants";
-import { push } from  'connected-react-router';
+import { push } from  '@lagunovsky/redux-react-router';
 
 
 // "Log In" action creators