Cleaned up Admin

2026-11-12 16:57:39 -05:00 · 2021-01-24 22:12:55 -05:00
parent 11eed81e80
commit 4892fd7c71
11 changed files with 133 additions and 128 deletions
--- a/admin/src/App/Restricted.js
+++ b/admin/src/App/Restricted.js
@@ -7,49 +7,48 @@ import axios from "axios";
 * Higher-order component (HOC) to wrap restricted pages
 */
 const restricted = (BaseComponent, store) => {
-    class Restricted extends Component {
-        componentWillMount() {
-            this.checkAuthentication(this.props);
-        }
-
-        componentWillReceiveProps(nextProps) {
-            if (nextProps.location !== this.props.location) {
-                this.checkAuthentication(nextProps);
-            }
-        }
-
-        checkAuthentication(params) {
-            const authenticated = store.getState().user.authenticated;
-            if (!authenticated) {
-              axios
-                .get(process.env.REACT_APP_ACCOUNT_SERVER + "/authenticated", {withCredentials: true})
-                .then(response => {
-                  if (response.data.success) {
-                    const user = response.data.user
-                    store.dispatch({
-                      type: types.LOGIN_SUCCESS_USER,
-                      data: user
-                    });
-                  } else {
-                    window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
-                    /*history.replace({ pathname: '/login',
-            				state: { nextPathname: params.location.pathname } });*/
-                  }
-                })
-                .catch(response => {
-                  if (response instanceof Error) {
-                    window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
-                    // Something happened during logout that triggered an Error
-                    console.log("Error", response.message);
-                  }
-                });
-
-            }
-        }
-        render() {
-            return <BaseComponent {...this.props} />;
-        }
+  class Restricted extends Component {
+    componentDidMount() {
+      this.checkAuthentication(this.props);
    }
-    return withRouter(Restricted);
+
+    componentDidUpdate(prevProps) {
+      if (prevProps.location !== this.props.location) {
+        this.checkAuthentication(this.props);
+      }
+    }
+
+    checkAuthentication(params) {
+      const authenticated = store.getState().user.authenticated;
+      if (!authenticated) {
+        axios
+          .get(process.env.REACT_APP_ACCOUNT_SERVER + "/authenticated", { withCredentials: true })
+          .then(response => {
+            if (response.data.success) {
+              const user = response.data.user
+              store.dispatch({
+                type: types.LOGIN_SUCCESS_USER,
+                data: user
+              });
+            } else {
+              window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
+              /*history.replace({ pathname: '/login',
+              state: { nextPathname: params.location.pathname } });*/
+            }
+          })
+          .catch(response => {
+            if (response instanceof Error) {
+              window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
+              // Something happened during logout that triggered an Error
+              console.log("Error", response.message);
+            }
+          });
+      }
+    }
+    render() {
+      return <BaseComponent {...this.props} />;
+    }
+  }
+  return withRouter(Restricted);
 }
 export default restricted
--- a/admin/src/Group/GroupModal.js
+++ b/admin/src/Group/GroupModal.js
@@ -1,9 +1,5 @@
 import React, { Component } from "react";
-import ReactDOM from "react-dom";
 import {
-  Container,
-  Header,
-  Form,
  Grid,
  Modal,
  Rail,
@@ -11,15 +7,10 @@ import {
  List,
  Input,
  Button,
-  Message,
  Icon,
  Table
 } from "semantic-ui-react";

-// ----------------------------------------------------
-const requestMessageStyle = {
-  color: "red"
-};

 // ----------------------------------------------------
 class GroupModal extends Component {
@@ -46,14 +37,17 @@ class GroupModal extends Component {
    this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
  }

-  componentWillReceiveProps(nextProps) {
-    if (nextProps.talkgroups && nextProps.groups && nextProps.editGroupId) {
-      var editGroup = nextProps.groups.find(
-        group => group._id === nextProps.editGroupId
+  componentDidUpdate(prevProps) {
+
+    // This determines if you are trying to edit a group. 
+    // In this case, the value of editGroupID will chane to the group being edited
+    if (this.props.talkgroups && this.props.groups && this.props.editGroupId && !prevProps.editGroupId) {
+      var editGroup = this.props.groups.find(
+        group => group._id === this.props.editGroupId
      );
      var items = [];

-      var talkgroups = nextProps.talkgroups;
+      var talkgroups = this.props.talkgroups;
      for (var i = 0; i < editGroup.talkgroups.length; i++) {
        const talkgroupId = editGroup.talkgroups[i];
        const index = talkgroups.findIndex(tg => tg.num === talkgroupId);
@@ -68,19 +62,23 @@ class GroupModal extends Component {
            .concat(talkgroups.slice(index + 1));
        }
      }
-    const group = {name: editGroup.groupName, items: items}
-    this.setState({group: group, talkgroups: talkgroups, groupName: editGroup.groupName});
-  } else {
-    this.setState({ talkgroups: nextProps.talkgroups })
-
-  }
-
-  if (!nextProps.editGroupId && (this.props.editGroupId != nextProps.editGroupId)) {
-    this.setState({ groupName: "", group: {
-      name: "",
-      items: []
-    }});
-  }
+      // we want to remove that are part of the Group from the list on the Left
+      const group = { name: editGroup.groupName, items: items }
+      this.setState({ group: group, talkgroups: talkgroups, groupName: editGroup.groupName });
+    } else {
+      // If we are not editing, make sure there is the full list on the left.
+      this.setState({ talkgroups: this.props.talkgroups })
+    }
+    
+    // If we are done editing, clear out the modal
+    if (!this.props.editGroupId && (this.props.editGroupId !== prevProps.editGroupId)) {
+      this.setState({
+        groupName: "", group: {
+          name: "",
+          items: []
+        }
+      });
+    }
  }

  removeTalkgroup(event, index) {
@@ -125,11 +123,7 @@ class GroupModal extends Component {
  handleClose = () => this.props.onClose(false);
  handleSubmit() {
    var talkgroupNums = this.state.group.items.map(a => a.num);
-    const data = {
-      shortName: this.props.shortName,
-      groupName: this.state.groupName,
-      talkgroups: JSON.stringify(talkgroupNums)
-    };
+    
    if (this.props.editGroupId) {
      const data = {
        _id: this.props.editGroupId,
--- a/admin/src/Group/group-actions.js
+++ b/admin/src/Group/group-actions.js
@@ -80,7 +80,7 @@ function makeUserRequest(method, data, api = "/login") {
    method: method,
    url: api,
    data: data,
-    config: {withCredentials: true}
+    withCredentials: true
  });
 }

--- a/admin/src/Permission/AddPermissionModal.js
+++ b/admin/src/Permission/AddPermissionModal.js
@@ -41,9 +41,7 @@ class AddPermissionModal extends Component {

  }

-  componentWillReceiveProps(nextProps) {

-  }

  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
  handleChange = (e, { newRole }) => this.setState({ newRole })
--- a/admin/src/System/System.js
+++ b/admin/src/System/System.js
@@ -163,12 +163,15 @@ class System extends Component {
    }
  }

-  componentWillReceiveProps(nextProp) {
-    if (!this.props.errors && nextProp.errors) {
-      this.processErrors(nextProp.errors);
+  componentDidReceiveProps(prevProp) {
+
+    // If we just received the error statistics for a system, for the first time, proccess them.
+    if (this.props.errors && !prevProp.errors) {
+      this.processErrors(this.prop.errors);
    }
-    if (!this.props.statistic && nextProp.statistic) {
-      this.processStatistics(nextProp.statistic);
+    // If we just received the call statistics for a system, for the first time, proccess them.
+    if (this.props.statistic && !prevProp.statistic) {
+      this.processStatistics(this.prop.statistic);
    }
  }

--- a/admin/src/System/SystemForm.js
+++ b/admin/src/System/SystemForm.js
@@ -54,8 +54,7 @@ class SystemForm extends Component {
      countryError: false,
      isEditing: this.props.isEditing
    };
-    if (this.props.isEditing && this.props.system)
-    {
+    if (this.props.isEditing && this.props.system) {
      this.state.name = this.props.system.name;
      this.state.shortName = this.props.system.shortName;
      this.state.description = this.props.system.description;
@@ -67,18 +66,19 @@ class SystemForm extends Component {
      this.state.showScreenName = this.props.system.showScreenName;
    }
  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isEditing && nextProps.system) {
+  // If we directly to an updating url, the system fetch will come back after the constructer, so we need to catch this and update the values
+  componentDidUpdate(prevProps) {
+    if (this.props.isEditing && this.props.system && !prevProps.system) {
      this.setState({
-        name: nextProps.system.name,
-        shortName: nextProps.system.shortName,
-        description: nextProps.system.description,
-        systemType: nextProps.system.systemType,
-        state: nextProps.system.state,
-        county: nextProps.system.county,
-        country: nextProps.system.country,
-        showScreenName: nextProps.system.showScreenName,
+        name: this.props.system.name,
+        shortName: this.props.system.shortName,
+        description: this.props.system.description,
+        systemType: this.props.system.systemType,
+        city: this.props.system.city,
+        state: this.props.system.state,
+        county: this.props.system.county,
+        country: this.props.system.country,
+        showScreenName: this.props.system.showScreenName,
      });
    }
  }
@@ -162,7 +162,7 @@ class SystemForm extends Component {

  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
  handleCheckboxChange() {
-    this.setState({showScreenName: !this.state.showScreenName});
+    this.setState({ showScreenName: !this.state.showScreenName });
  }

  handleSubmit(event) {
@@ -266,7 +266,7 @@ class SystemForm extends Component {
          <Message.Content>
            <Message.Header>Problems...</Message.Header>
            <ul>
-              {this.state.checkInputMessages.map(function(listValue) {
+              {this.state.checkInputMessages.map(function (listValue) {
                return <li key={`ListItem_${counter++}`}>{listValue}</li>;
              })}
              {this.props.requestMessage.length > 0 && (
@@ -310,9 +310,9 @@ class SystemForm extends Component {

            <p>Your Screen Name: {this.props.screenName}</p>
            <Checkbox
-            onChange={this.handleCheckboxChange}
-            checked={this.state.showScreenName}
-            label="Show in System Listing" />
+              onChange={this.handleCheckboxChange}
+              checked={this.state.showScreenName}
+              label="Show in System Listing" />

          </Form.Field>
          <Divider horizontal />
@@ -360,8 +360,8 @@ class SystemForm extends Component {
          </Form.Group>
          <Form.Group widths="equal">

-              {this.state.systemType === "city" && (
-                <Form.Field>
+            {this.state.systemType === "city" && (
+              <Form.Field>
                <Form.Input
                  type="text"
                  name="city"
@@ -372,9 +372,9 @@ class SystemForm extends Component {
                  placeholder="City..."
                />
              </Form.Field>
-              )}
-              {this.state.systemType === "county" && (
-                <Form.Field>
+            )}
+            {this.state.systemType === "county" && (
+              <Form.Field>
                <Form.Input
                  type="text"
                  name="county"
@@ -385,9 +385,9 @@ class SystemForm extends Component {
                  placeholder="County..."
                />
              </Form.Field>
-              )}
-              {this.state.systemType === "international" ? (
-                <Form.Field>
+            )}
+            {this.state.systemType === "international" ? (
+              <Form.Field>
                <Form.Input
                  type="text"
                  name="country"
@@ -397,18 +397,18 @@ class SystemForm extends Component {
                  label="Country"
                  placeholder="Country..."
                />
-                </Form.Field>
-              ) : (
+              </Form.Field>
+            ) : (
                <Form.Field>
-                <Form.Dropdown
-                  name="state"
-                  onChange={this.handleInputChange}
-                  error={this.state.stateError}
-                  value={this.state.state}
-                  options={stateOptions}
-                  label="State"
-                  placeholder="Select State..."
-                />
+                  <Form.Dropdown
+                    name="state"
+                    onChange={this.handleInputChange}
+                    error={this.state.stateError}
+                    value={this.state.state}
+                    options={stateOptions}
+                    label="State"
+                    placeholder="Select State..."
+                  />
                </Form.Field>
              )}

--- a/admin/src/System/system-actions.js
+++ b/admin/src/System/system-actions.js
@@ -86,7 +86,8 @@ function makeUserRequest(method, data, api = "/login") {
  return axios({
    method: method,
    url: api,
-    data: data
+    data: data,
+    withCredentials: true
  });
 }

@@ -187,7 +188,7 @@ export function deleteSystem(shortName) {
  return dispatch => {
    dispatch(beginDeleteSystem());

-    return makeUserRequest("delete", null, process.env.REACT_APP_ADMIN_SERVER + "/systems/"+shortName,  {withCredentials: true})
+    return makeUserRequest("delete", null, process.env.REACT_APP_ADMIN_SERVER + "/systems/"+shortName)
      .then(response => {
        if (response.data.success) {
          dispatch(deleteSystemSuccess({shortName: shortName}));