Have main and listSystems working

frontend/src/System/ListSystems.js

@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom'
+import SystemCard from "./SystemCard";
+import {
+  Container,
+  Header,
+  Card,
+  Icon,
+  Menu,
+  Divider
+} from "semantic-ui-react";
+
+
+// ----------------------------------------------------
+class ListSystems extends Component {
+
+  state = {
+    requestMessage: "",
+  }
+  
+  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>
+        <Menu fixed="top">
+          <Link to="/"><Menu.Item link><Icon name='arrow left' /> Home</Menu.Item></Link>
+          <Link to="/about"><Menu.Item link>About</Menu.Item></Link>
+        </Menu>
+        <Container >
+          <Divider horizontal style={{paddingTop:"5em", paddingBottom:"2em"}}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
+          <Card.Group itemsPerRow={4} stackable={true}>
+          {systems.map((system) =>
+            system.active&&<SystemCard system={system} key={system.shortName} onClick={(e) => this.props.changeUrl("/system/" + system.shortName)}/>
+            // <SystemCard system={system} key={system.shortName} onClick={(e) => this.props.changeUrl("/system/" + system.shortName)}/>
+         )}
+          </Card.Group>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default ListSystems;

frontend/src/System/ListSystemsContainer.js

@@ -0,0 +1,16 @@
+import { connect } from "react-redux"
+import * as systemActions from "./system-actions"
+import ListSystems from "./ListSystems"
+
+function mapStateToProps(state) {
+  return {
+		system: state.system
+	}
+}
+
+
+
+export default connect(
+	mapStateToProps,
+	systemActions
+)(ListSystems)

frontend/src/System/SystemCard.js

@@ -0,0 +1,71 @@
+import React, { Component } from "react";
+import {
+  Card,
+  Icon,
+  Label,
+  Grid
+} from "semantic-ui-react";
+
+
+class SystemCard extends Component {
+
+  render() {
+    var location = "";
+    const system = this.props.system;
+    var clientCount = "";
+    var callAvg = "";
+    var description = system.description;
+    if (this.props.keepShort && (description.length > 100)) {
+      description = description.substring(0, 96) + "...";
+    }
+    if (system.callAvg) {
+      callAvg = Math.round(system.callAvg * 10) / 10 + " call/min"
+    }
+    if (system.clientCount === 1) {
+      clientCount = "1 listener";
+    } else if (system.clientCount > 1) {
+      clientCount = system.clientCount + " listeners"
+    }
+    if (system) {
+      switch (system.systemType) {
+        case "state":
+          location = system.state;
+          break;
+        case "city":
+          location = system.city + ", " + system.state;
+          break;
+        case "county":
+          location = system.county + ", " + system.state;
+          break;
+        case "international":
+          location = system.country;
+          break;
+        default:
+          location = system.city + ", " + system.state;
+      }
+    }
+    return (
+      <Card link onClick={this.props.onClick} raised={true} centered={true} >
+        <Card.Content>
+          <Card.Header >{system.name}</Card.Header>
+          <Card.Meta>{system.screenName && <Label size="mini"><Icon name='user' /> {system.screenName}</Label>}</Card.Meta>
+        </Card.Content>
+        <Card.Content description={description} />
+        <Card.Content extra>
+          <Icon name='marker' />
+          {location}
+          <Grid columns={2}>
+            <Grid.Column>
+              {clientCount && <div><Icon name='headphones' />{clientCount}</div>}
+            </Grid.Column>
+            <Grid.Column>
+              {callAvg && <div><Icon name='file audio outline' />{callAvg}</div>}
+            </Grid.Column>
+          </Grid>
+        </Card.Content>
+      </Card>
+    );
+  }
+}
+
+export default SystemCard;

frontend/src/System/system-actions.js

@@ -0,0 +1,77 @@
+import axios from "axios";
+//import { browserHistory } from "react-router"
+import * as types from "./system-constants";
+import { push } from 'connected-react-router';
+
+const FETCH_SUCCESS_STATISTIC = "FETCH_SUCCESS_STATISTIC"
+
+function beginFetchSystem() {
+  return { type: types.FETCH_SYSTEM };
+}
+
+function fetchSystemSuccess(data) {
+  return { type: types.FETCH_SUCCESS_SYSTEM,
+  data };
+}
+
+function fetchSystemError(data) {
+  return { type: types.FETCH_ERROR_SYSTEM,
+  data };
+}
+
+
+function makeUserRequest(method, data, api = "/login") {
+  // returns a Promise
+  return axios({
+    method: method,
+    url: api,
+    data: data
+  });
+}
+
+export function changeUrl(url) {
+  return dispatch => {
+    dispatch(push(url));
+  };
+}
+
+// Example of an Async Action Creator
+// http://redux.js.org/docs/advanced/AsyncActions.html
+
+function shouldFetchSystems(state, subreddit) {
+  if ((!state.system.items) || (state.system.items.length <1)) {
+    return true
+  } else if (state.system.isWaiting) {
+    return false
+  } else {
+    return false
+  }
+}
+
+
+
+export function fetchSystems() {
+  return (dispatch, getState) => {
+    if (shouldFetchSystems(getState())) {
+    dispatch(beginFetchSystem());
+
+    return axios
+      .get(process.env.REACT_APP_BACKEND_SERVER + "/systems")
+      .then(response => {
+        if (response.data.success) {
+          dispatch(fetchSystemSuccess(response.data.systems));
+        } else {
+          dispatch(fetchSystemError());
+          let registerMessage = response.data.message;
+          return registerMessage;
+        }
+      })
+      .catch(response => {
+        if (response instanceof Error) {
+          // Something happened in setting up the request that triggered an Error
+          console.log("Error", response.message);
+        }
+      });
+  };
+};
+}

frontend/src/System/system-constants.js

@@ -0,0 +1,3 @@
+export const FETCH_SYSTEM = "FETCH_SYSTEM"
+export const FETCH_SUCCESS_SYSTEM = "FETCH_SUCCESS_SYSTEM"
+export const FETCH_ERROR_SYSTEM = "FETCH_ERROR_SYSTEM"

frontend/src/System/system-reducer.js

@@ -0,0 +1,71 @@
+import {
+  CREATE_SYSTEM,
+  CREATE_SUCCESS_SYSTEM,
+  CREATE_ERROR_SYSTEM,
+  UPDATE_SYSTEM,
+  UPDATE_SUCCESS_SYSTEM,
+  UPDATE_ERROR_SYSTEM,
+  DELETE_SYSTEM,
+  DELETE_SUCCESS_SYSTEM,
+  DELETE_ERROR_SYSTEM,
+  FETCH_SYSTEM,
+  FETCH_SUCCESS_SYSTEM,
+  FETCH_ERROR_SYSTEM
+} from "./system-constants";
+
+function updateObject(oldObject, newValues) {
+    // Encapsulate the idea of passing a new object as the first parameter
+    // to Object.assign to ensure we correctly copy data instead of mutating
+    return Object.assign({}, oldObject, newValues);
+}
+
+function updateObjectInArray(array, shortName, updatedItem) {
+    return array.map( item => {
+        if(item.shortName !== shortName) {
+            // This isn't the item we care about - keep it as-is
+            return item;
+        }
+
+        // Otherwise, this is the one we want - return an updated value
+        return {
+            ...item,
+            ...updatedItem
+        };
+    });
+}
+
+
+const system = (
+  state = {
+    isWaiting: false,
+    items: []},
+  action
+) => {
+  switch (action.type) {
+
+    case FETCH_SYSTEM:
+
+      return Object.assign({}, state, { isWaiting: true});
+
+
+    case FETCH_SUCCESS_SYSTEM:
+      const activeSystems = action.data.filter(system =>{
+        if (system.active) {return true}
+        return false;
+       });
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: activeSystems
+      });
+
+    case FETCH_ERROR_SYSTEM:
+      return Object.assign({}, state, {
+        isWaiting: false
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default system;