added page component

scm-ui/src/components/Page.js

@@ -0,0 +1,46 @@
+//@flow
+import * as React from "react";
+import Loading from "./Loading";
+import ErrorNotification from "./ErrorNotification";
+
+type Props = {
+  title: string,
+  subtitle?: string,
+  loading?: boolean,
+  error?: Error,
+  children: React.Node
+};
+
+class Page extends React.Component<Props> {
+  render() {
+    const { title, error } = this.props;
+    return (
+      <section className="section">
+        <div className="container">
+          <h1 className="title">{title}</h1>
+          {this.renderSubtitle()}
+          <ErrorNotification error={error} />
+          {this.renderContent()}
+        </div>
+      </section>
+    );
+  }
+
+  renderSubtitle() {
+    const { subtitle } = this.props;
+    if (subtitle) {
+      return <h2 className="subtitle">Users</h2>;
+    }
+    return null;
+  }
+
+  renderContent() {
+    const { loading, children } = this.props;
+    if (loading) {
+      return <Loading />;
+    }
+    return children;
+  }
+}
+
+export default Page;

scm-ui/src/users/containers/UserRow.js

@@ -7,13 +7,12 @@ import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
   entry: UserEntry,
-  deleteUser: User => void,
+  deleteUser: User => void
-  editUser: User => void
 };
 
 export default class UserRow extends React.Component<Props> {
   render() {
-    const { entry, deleteUser, editUser } = this.props;
+    const { entry, deleteUser } = this.props;
     const user = entry.entry;
     return (
       <tr>
@@ -27,7 +26,7 @@ export default class UserRow extends React.Component<Props> {
           <DeleteUserButton entry={entry} deleteUser={deleteUser} />
         </td>
         <td>
-          <EditUserButton entry={entry} editUser={editUser} />
+          <EditUserButton entry={entry} />
         </td>
       </tr>
     );

scm-ui/src/users/containers/UserTable.js

@@ -6,13 +6,12 @@ import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
   entries: Array<UserEntry>,
-  deleteUser: User => void,
+  deleteUser: User => void
-  editUser: User => void
 };
 
 class UserTable extends React.Component<Props> {
   render() {
-    const { deleteUser, editUser } = this.props;
+    const { deleteUser } = this.props;
     const entries = this.props.entries;
     return (
       <table className="table is-hoverable is-fullwidth">
@@ -29,12 +28,7 @@ class UserTable extends React.Component<Props> {
         <tbody>
           {entries.map((entry, index) => {
             return (
-              <UserRow
+              <UserRow key={index} entry={entry} deleteUser={deleteUser} />
-                key={index}
-                entry={entry}
-                deleteUser={deleteUser}
-                editUser={editUser}
-              />
             );
           })}
         </tbody>

scm-ui/src/users/containers/Users.js

@@ -3,7 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { fetchUsers, deleteUser, getUsersFromState } from "../modules/users";
-import Loading from "../../components/Loading";
+import Page from "../../components/Page";
 import ErrorNotification from "../../components/ErrorNotification";
 import UserTable from "./UserTable";
 import type { User } from "../types/User";
@@ -11,7 +11,7 @@ import AddButton from "../../components/AddButton";
 import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
-  login: boolean,
+  loading?: boolean,
   error: Error,
   userEntries: Array<UserEntry>,
   fetchUsers: () => void,
@@ -25,30 +25,18 @@ class Users extends React.Component<Props, User> {
   }
 
   render() {
+    const { userEntries, deleteUser, loading, error } = this.props;
     return (
-      <section className="section">
+      <Page
-        <div className="container">
+        title="Users"
-          <h1 className="title">SCM</h1>
+        subtitle="Create, read, update and delete users"
-          <h2 className="subtitle">Users</h2>
+        loading={loading || !userEntries}
-          {this.renderContent()}
+        error={error}
-          {this.renderAddButton()}
+      >
-        </div>
-      </section>
-    );
-  }
-
-  renderContent() {
-    const { userEntries, deleteUser, error } = this.props;
-    if (userEntries) {
-      return (
-        <div>
-          <ErrorNotification error={error} />
         <UserTable entries={userEntries} deleteUser={deleteUser} />
-        </div>
+        {this.renderAddButton()}
+      </Page>
     );
-    } else {
-      return <Loading />;
-    }
   }
 
   renderAddButton() {
@@ -67,14 +55,17 @@ class Users extends React.Component<Props, User> {
 const mapStateToProps = state => {
   const userEntries = getUsersFromState(state);
   let error = null;
+  let loading = false;
   let canAddUsers = false;
   if (state.users && state.users.users) {
     error = state.users.users.error;
     canAddUsers = state.users.users.userCreatePermission;
+    loading = state.users.users.loading;
   }
   return {
     userEntries,
     error,
+    loading,
     canAddUsers
   };
 };