Utilities

package.json

@@ -13,10 +13,13 @@
  "dependencies": {
  "formik": "^2.1.4",
  "history": "^4.10.1",
+ "moment": "^2.27.0",
+ "moment-timezone": "^0.5.31",
  "prop-types": "^15.7.2",
  "query-string": "^6.11.0",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
+ "react-moment": "^0.9.7",
  "react-router-dom": "^5.0.0",
  "rxjs": "^6.3.3",
  "yup": "^0.28.1"

src/_components/Nav.jsx

@@ -39,6 +39,7 @@ function AdminNav({ match }) {
  <nav className="admin-nav navbar navbar-expand navbar-light">
  <div className="navbar-nav">
  <NavLink to={`${path}/users`} className="nav-item nav-link">Users</NavLink>
+ <NavLink to={`${path}/utilities`} className="nav-item nav-link">Utilities</NavLink>
  </div>
  </nav>
  );

src/_services/index.js

@@ -1,2 +1,3 @@
 export * from './account.service';
 export * from './alert.service';
+export * from './utilities.service';

src/_services/utilities.service.js

@@ -0,0 +1,48 @@
+import { BehaviorSubject } from 'rxjs';
+
+import config from 'config';
+import { fetchWrapper } from '@/_helpers';
+
+const utilitySubject = new BehaviorSubject(null);
+const baseUrl = `${config.apiUrl}/utilities`;
+
+export const utilitiesService = {
+ enable,
+ disable,
+ getAll,
+ getById,
+ create,
+ update,
+ delete: _delete,
+ user: utilitySubject.asObservable(),
+ get utilityValue () { return utilitySubject.value }
+};
+
+function enable(id) {
+ return fetchWrapper.post(`${baseUrl}/enable/${id}`);
+}
+
+function disable(id) {
+ return fetchWrapper.post(`${baseUrl}/disable/${id}`);
+}
+
+function getAll() {
+ return fetchWrapper.get(baseUrl);
+}
+
+function getById(id) {
+ return fetchWrapper.get(`${baseUrl}/${id}`);
+}
+
+function create(params) {
+ return fetchWrapper.post(baseUrl, params);
+}
+
+function update(id, params) {
+ return fetchWrapper.put(`${baseUrl}/${id}`, params)
+}
+
+// prefixed with underscore because 'delete' is a reserved word in javascript
+function _delete(id) {
+ return fetchWrapper.delete(`${baseUrl}/${id}`)
+}

src/admin/Index.jsx

@@ -3,6 +3,7 @@ import { Route, Switch } from 'react-router-dom';
 
 import { Overview } from './Overview';
 import { Users } from './users';
+import { Utilities } from './utilities';
 
 function Admin({ match }) {
  const { path } = match;
@@ -13,6 +14,7 @@ function Admin({ match }) {
  <Switch>
  <Route exact path={path} component={Overview} />
  <Route path={`${path}/users`} component={Users} />
+ <Route path={`${path}/utilities`} component={Utilities} />
  </Switch>
  </div>
  </div>

src/admin/Overview.jsx

@@ -8,7 +8,10 @@ function Overview({ match }) {
  <div>
  <h1>Admin</h1>
  <p>This section can only be accessed by administrators.</p>
- <p><Link to={`${path}/users`}>Manage Users</Link></p>
+ <p>
+ <Link to={`${path}/users`} className="mr-4">Manage Users</Link>
+ <Link to={`${path}/utilities`} className="mr-4">Manage Utilities</Link>
+ </p>
  </div>
  );
 }

src/admin/utilities/AddEdit.jsx

@@ -0,0 +1,102 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Formik, Field, Form, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+
+import { utilitiesService, alertService } from '@/_services';
+
+function AddEdit({ history, match }) {
+ const { id } = match.params;
+ const isAddMode = !id;
+
+ const initialValues = {
+ name: '',
+ status: 'true'
+ };
+
+ const validationSchema = Yup.object().shape({
+ name: Yup.string()
+ .required('Utility name is required'),
+ status: Yup.boolean()
+ .required('Utility status is required')
+ });
+
+ function onSubmit(fields, { setStatus, setSubmitting }) {
+ setStatus();
+ if (isAddMode) {
+ createUtility(fields, setSubmitting);
+ } else {
+ updateUtility(id, fields, setSubmitting);
+ }
+ }
+
+ function createUtility(fields, setSubmitting) {
+ utilitiesService.create(fields)
+ .then(() => {
+ alertService.success('Utility added successfully', { keepAfterRouteChange: true });
+ history.push('.');
+ })
+ .catch(error => {
+ setSubmitting(false);
+ alertService.error(error);
+ });
+ }
+
+ function updateUtility(id, fields, setSubmitting) {
+ utilitiesService.update(id, fields)
+ .then(() => {
+ alertService.success('Update successful', { keepAfterRouteChange: true });
+ history.push('..');
+ })
+ .catch(error => {
+ setSubmitting(false);
+ alertService.error(error);
+ });
+ }
+
+ return (
+ <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
+ {({ errors, touched, isSubmitting, setFieldValue }) => {
+ useEffect(() => {
+ if (!isAddMode) {
+ // get utility and set form fields
+ utilitiesService.getById(id).then(utility => {
+ const fields = ['name', 'status'];
+ fields.forEach(field => setFieldValue(field, utility[field], false));
+ });
+ }
+ }, []);
+
+ return (
+ <Form>
+ <h1>{isAddMode ? 'Add Utility' : 'Edit Utility'}</h1>
+ <div className="form-row">
+ <div className="form-group col-5">
+ <label>Utility Name</label>
+ <Field name="name" type="text" className={'form-control' + (errors.name && touched.name ? ' is-invalid' : '')} />
+ <ErrorMessage name="name" component="div" className="invalid-feedback" />
+ </div>
+ <div className="form-group col-2">
+ <label>Utility Status</label>
+ <Field name="status" as="select" className={'form-control' + (errors.status && touched.status ? ' is-invalid' : '')}>
+ <option value="true">Enabled</option>
+ <option value="false">Disabled</option>
+ </Field>
+ <ErrorMessage name="status" component="div" className="invalid-feedback" />
+ </div>
+ </div>
+ <div className="form-group">
+ <button type="submit" disabled={isSubmitting} className="btn btn-primary">
+ {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
+ {isAddMode ? 'Add' : 'Save'}
+ </button>
+ <Link to={isAddMode ? '.' : '..'} className="btn btn-link">Cancel</Link>
+ </div>
+ </Form>
+ );
+ }}
+ </Formik>
+ );
+}
+
+export { AddEdit };

src/admin/utilities/Index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { List } from './List';
+import { AddEdit } from './AddEdit';
+
+function Utilities({ match }) {
+ const { path } = match;
+
+ return (
+ <Switch>
+ <Route exact path={path} component={List} />
+ <Route path={`${path}/add`} component={AddEdit} />
+ <Route path={`${path}/edit/:id`} component={AddEdit} />
+ </Switch>
+ );
+}
+
+export { Utilities };

src/admin/utilities/List.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Moment from 'react-moment';
+
+import { utilitiesService } from '@/_services';
+
+function List({ match }) {
+ const { path } = match;
+ const [utilities, setUtilities] = useState(null);
+
+ useEffect(() => {
+ utilitiesService.getAll().then(x => setUtilities(x));
+ }, []);
+
+ function enableUtility(id) {
+ utilitiesService.enable(id).then(() => {
+ utilitiesService.getAll().then(x => setUtilities(x));
+ });
+ }
+
+ function disableUtility(id) {
+ utilitiesService.disable(id).then(() => {
+ utilitiesService.getAll().then(x => setUtilities(x));
+ });
+ }
+
+ function deleteUtility(id) {
+ setUtilities(utilities.map(x => {
+ if (x.id === id) { x.isDeleting = true; }
+ return x;
+ }));
+ utilitiesService.delete(id).then(() => {
+ setUtilities(utilities => utilities.filter(x => x.id !== id));
+ });
+ }
+
+ function utilityStatus(status) {
+ if (status) { return <span role="img" aria-label="green-circle">🟢</span>; }
+ else if (!status) { return <span role="img" aria-label="red-circle">🔴</span>; }
+ else { return <span role="img" aria-label="warning">⚠️</span>; }
+ }
+
+ function toggleUtility(id, status) {
+ if (status) {
+ disableUtility(id)
+ } else if (!status) {
+ enableUtility(id)
+ }
+ }
+
+ function defaultChecked(status) {
+ if (status) { return "checked"; }
+ else { return null; }
+ }
+
+ function parseDateTime(timestamp) {
+ return <Moment fromNow>{timestamp}</Moment>;
+ } 
+
+ return (
+ <div>
+ <h1>Utilities</h1>
+ <p>All utilities from secure (admin only) api end point:</p>
+ <Link to={`${path}/add`} className="btn btn-sm btn-success mb-2">Add Utility</Link>
+ <table className="table table-striped">
+ <thead>
+ <tr>
+ <th style={{ width: '10%' }} className="text-center">Status</th>
+ <th style={{ width: '40%' }}>Utility</th>
+ <th style={{ width: '40%' }}>Last Modified</th>
+ <th style={{ width: '10%' }}></th>
+ </tr>
+ </thead>
+ <tbody>
+ {utilities && utilities.map(utility =>
+ <tr key={utility.id}>
+ <td className="text-center align-middle">{utilityStatus(utility.status)}</td>
+ <td className="align-middle">{utility.name}</td>
+ <td className="align-middle">{parseDateTime(utility.modified)}</td>
+ <td className="align-middle" style={{ whiteSpace: 'nowrap' }}>
+ <div className="d-inline custom-control custom-switch mr-2 align-middle">
+ <input type="checkbox" onClick={() => toggleUtility(utility.id, utility.status)} defaultChecked={defaultChecked(utility.status)} className="custom-control-input" id={utility.id}/>
+ <label className="custom-control-label" htmlFor={utility.id}/>
+ </div>
+ <button onClick={() => deleteUtility(utility.id)} className="d-inline btn btn-sm btn-danger" style={{ width: '60px' }} disabled={utility.isDeleting}>
+ {utility.isDeleting 
+ ? <span className="spinner-border spinner-border-sm"></span>
+ : <span>Delete</span>
+ }
+ </button>
+ </td>
+ </tr>
+ )}
+ {!utilities &&
+ <tr>
+ <td colSpan="4" className="text-center">
+ <span className="spinner-border spinner-border-lg align-center"></span>
+ </td>
+ </tr>
+ }
+ </tbody>
+ </table>
+ </div>
+ );
+}
+
+export { List };