Call Player is now functional

frontend/src/Talkgroups/ListTalkgroups.js

@@ -0,0 +1,66 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import { Link } from 'react-router-dom'
+import {
+  Container,
+  Header,
+  Form,
+  Grid,
+  Segment,
+  Input,
+  Button,
+  Message,
+  Icon,
+  Table
+} from "semantic-ui-react";
+
+// ----------------------------------------------------
+
+
+
+// ----------------------------------------------------
+class ListTalkgroups extends Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+
+//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 talkgroups = this.props.talkgroups;
+    if (talkgroups) {
+    return (
+
+      <Table celled>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>Mode</Table.HeaderCell>
+      <Table.HeaderCell>Number</Table.HeaderCell>
+      <Table.HeaderCell>Alpha</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {talkgroups.map((talkgroup, i) => (
+      <Table.Row key={talkgroup.num + "-" + i}>
+        <Table.Cell>{talkgroup.mode}</Table.Cell>
+        <Table.Cell>{talkgroup.num}</Table.Cell>
+        <Table.Cell>{talkgroup.alpha}</Table.Cell>
+        <Table.Cell>{talkgroup.description}</Table.Cell>
+      </Table.Row>
+    ))}
+  </Table.Body>
+</Table>
+
+    );
+  } else {
+    return (
+      <div/>
+    );
+  }
+}
+}
+
+export default ListTalkgroups;

frontend/src/Talkgroups/talkgroup-actions.js

@@ -0,0 +1,108 @@
+import axios from 'axios';
+//import { browserHistory } from "react-router"
+import * as types from "./talkgroup-constants";
+import { push } from 'connected-react-router';
+
+// "Log In" action creators
+function beginImportTalkgroup() {
+  return { type: types.IMPORT_TALKGROUP };
+}
+
+function importTalkgroupSuccess(data) {
+  return {
+    type: types.IMPORT_SUCCESS_TALKGROUP,
+    data
+  };
+}
+
+function importTalkgroupError(data) {
+  return {
+    type: types.IMPORT_ERROR_TALKGROUP,
+    data
+  };
+}
+
+function beginExportTalkgroup() {
+  return { type: types.EXPORT_TALKGROUP };
+}
+
+function exportTalkgroupSuccess() {
+  return { type: types.EXPORT_SUCCESS_TALKGROUP };
+}
+
+function exportTalkgroupError() {
+  return { type: types.EXPORT_ERROR_TALKGROUP };
+}
+
+
+function beginFetchTalkgroup() {
+  return { type: types.FETCH_TALKGROUP };
+}
+
+function fetchTalkgroupSuccess(data) {
+  return { type: types.FETCH_SUCCESS_TALKGROUP,
+  data };
+}
+
+function fetchTalkgroupError(data) {
+  return { type: types.FETCH_ERROR_TALKGROUP,
+  data };
+}
+
+
+function makeUserRequest(method, data, api) {
+  // returns a Promise
+  return axios({
+    method: method,
+    url: api,
+    data: data
+  });
+}
+
+export function changeUrl(url) {
+  return dispatch => {
+    dispatch(push(url));
+  };
+}
+
+
+// https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react
+
+
+
+function shouldFetchTalkgroups(state, shortName) {
+  if (!state.talkgroup.items.hasOwnProperty(shortName)) {
+    return true
+  } else if (state.talkgroup.isWaiting) {
+    return false
+  } else {
+    return false
+  }
+}
+
+export function fetchTalkgroups(shortName) {
+  return (dispatch, getState) => {
+    if (shouldFetchTalkgroups(getState(), shortName)) {
+    dispatch(beginFetchTalkgroup());
+
+    return axios
+      .get(process.env.REACT_APP_BACKEND_SERVER + "/" + shortName + "/talkgroups")
+      .then(response => {
+        if (response.data) {
+          var data = {shortName: shortName, talkgroups: response.data.talkgroups}
+          dispatch(fetchTalkgroupSuccess( data));
+        } else {
+          dispatch(fetchTalkgroupError());
+          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/Talkgroups/talkgroup-constants.js

@@ -0,0 +1,9 @@
+export const IMPORT_TALKGROUP = "IMPORT_TALKGROUP"
+export const IMPORT_SUCCESS_TALKGROUP = "IMPORT_SUCCESS_TALKGROUP"
+export const IMPORT_ERROR_TALKGROUP = "IMPORT_ERROR_TALKGROUP"
+export const EXPORT_TALKGROUP = "EXPORT_TALKGROUP"
+export const EXPORT_SUCCESS_TALKGROUP = "EXPORT_SUCCESS_TALKGROUP"
+export const EXPORT_ERROR_TALKGROUP = "EXPORT_ERROR_TALKGROUP"
+export const FETCH_TALKGROUP = "FETCH_TALKGROUP"
+export const FETCH_SUCCESS_TALKGROUP = "FETCH_SUCCESS_TALKGROUP"
+export const FETCH_ERROR_TALKGROUP = "FETCH_ERROR_TALKGROUP"

frontend/src/Talkgroups/talkgroup-reducer.js

@@ -0,0 +1,72 @@
+import {
+  IMPORT_TALKGROUP,
+  IMPORT_SUCCESS_TALKGROUP,
+  IMPORT_ERROR_TALKGROUP,
+  EXPORT_TALKGROUP,
+  EXPORT_SUCCESS_TALKGROUP,
+  EXPORT_ERROR_TALKGROUP,
+  FETCH_TALKGROUP,
+  FETCH_SUCCESS_TALKGROUP,
+  FETCH_ERROR_TALKGROUP
+} from "./talkgroup-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 updateItemInArray(array, itemId, updateItemCallback) {
+    const updatedItems = array.map(item => {
+        if(item.id !== itemId) {
+            // Since we only want to update one item, preserve all others as they are now
+            return item;
+        }
+
+        // Use the provided callback to create an updated item
+        const updatedItem = updateItemCallback(item);
+        return updatedItem;
+    });
+
+    return updatedItems;
+}
+
+const talkgroup = (
+  state = {
+    isWaiting: false,
+    items: {}},
+  action
+) => {
+  switch (action.type) {
+
+    case FETCH_TALKGROUP:
+    case IMPORT_TALKGROUP:
+    case EXPORT_TALKGROUP:
+      return Object.assign({}, state, { isWaiting: true});
+
+    case IMPORT_SUCCESS_TALKGROUP:
+    case FETCH_SUCCESS_TALKGROUP:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: {
+          ...state.items,
+          [action.data.shortName]: action.data.talkgroups
+        }
+      });
+
+
+
+    case FETCH_ERROR_TALKGROUP:
+    case IMPORT_ERROR_TALKGROUP:
+    case EXPORT_ERROR_TALKGROUP:
+    case EXPORT_SUCCESS_TALKGROUP:
+      return Object.assign({}, state, {
+        isWaiting: false
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default talkgroup;