ui: Simplify projects page

This change simplifies the logic and components of the projects page and
reduces its dependency on Redux for simple operations.

1 files changed, 39 insertions, 0 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
new file mode 100644
index 00000000..90d42326
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Authorization } from '../../shapes'
+import ProjectRow from './ProjectRow'
+
+const ProjectList = ({ authorizations }) => {
+    return (
+        <div className="vertically-expanding-container">
+            {authorizations.length === 0 ? (
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
+                </div>
+            ) : (
+                <table className="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Project name</th>
+                            <th>Last edited</th>
+                            <th>Access rights</th>
+                            <th />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {authorizations.map((authorization) => (
+                            <ProjectRow projectAuth={authorization} key={authorization.project._id} />
+                        ))}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    )
+}
+
+ProjectList.propTypes = {
+    authorizations: PropTypes.arrayOf(Authorization).isRequired,
+}
+
+export default ProjectList