Permissions

Author: Matthew Grill

src/components/05_pages/Permissions/Permissions.js

@@ -1,17 +1,98 @@
-import React from 'react';
-import { css } from 'emotion';
+import React, { Fragment, Component } from 'react';
+import Loading from '../../Helpers/Loading';
 
-const styles = {
-  title: css`
-    text-decoration: underline;
-  `,
+const Permissions = class Permissions extends Component {
+  state = {
+    loaded: false,
+  };
+  componentDidMount() {
+    Promise.all([
+      fetch(
+        `${process.env.REACT_APP_DRUPAL_BASE_URL}/permissions?_format=json`,
+      ).then(res => res.json()),
+      fetch(
+        `${process.env.REACT_APP_DRUPAL_BASE_URL}/jsonapi/user_role/user_role`,
+      ).then(res => res.json()),
+    ])
+      .then(([permissions, { data: roles }]) =>
+        this.setState({ permissions, roles, loaded: true }),
+      )
+      .catch(err => this.setState({ loaded: false, err }));
+  }
+  groupPermissions = permissions =>
+    Object.entries(
+      Object.keys(permissions)
+        .map(key => permissions[key])
+        .reduce((acc, cur) => {
+          acc[cur.provider] = acc[cur.provider] || [];
+          acc[cur.provider].push(cur);
+          return acc;
+        }, {}),
+    );
+  render() {
+    return (
+      <Fragment>
+        {!this.state.loaded ? (
+          <Loading />
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                {[
+                  'PERMISSION',
+                  ...this.state.roles.map(role =>
+                    role.attributes.label.toUpperCase(),
+                  ),
+                ].map(label => <td key={`column-${label}`}>{label}</td>)}
+              </tr>
+            </thead>
+            <tbody>
+              {this.groupPermissions(this.state.permissions).map(
+                ([permissionGroupName, permissions]) =>
+                  permissions.length && (
+                    <Fragment key={`fragment-${permissionGroupName}`}>
+                      <tr key={`permissionGroup-${permissionGroupName}`}>
+                        <td colSpan={this.state.roles.length + 1}>
+                          <b>{permissionGroupName}</b>
+                        </td>
+                      </tr>
+                      {permissions.map(permission => (
+                        <tr
+                          key={`permissionGroup-${permissionGroupName}-${
+                            permission.title
+                          }`}
+                        >
+                          <td>{permission.title}</td>
+                          {this.state.roles.map(({ attributes }) => (
+                            <td
+                              key={`role-${attributes.id}-permission-${
+                                permission.id
+                              }`}
+                            >
+                              {attributes.is_admin &&
+                              attributes.id === 'administrator' ? (
+                                <input type="checkbox" checked />
+                              ) : (
+                                <input
+                                  type="checkbox"
+                                  checked={attributes.permissions.includes(
+                                    permission.id,
+                                  )}
+                                />
+                              )}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </Fragment>
+                  ),
+              )}
+            </tbody>
+          </table>
+        )}
+      </Fragment>
+    );
+  }
 };
 
-const Permissions = () => (
-  <div>
-    <h1 className={styles.title}>Permissions</h1>
-    <p>This will be the permissions page.</p>
-  </div>
-);
-
 export default Permissions;

src/components/Helpers/Loading.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { css } from 'emotion';
+
+const spinner = css`
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+  > div {
+    width: 10px;
+    height: 10px;
+    background-color: #333;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+  .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  @-webkit-keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+    }
+  }
+  @keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+`;
+
+const Loading = () => (
+  <div className={spinner}>
+    <div className="bounce1" />
+    <div className="bounce2" />
+    <div className="bounce3" />
+  </div>
+);
+
+export default Loading;