ui: Simplify projects page

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

6 files changed, 42 insertions, 63 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
deleted file mode 100644
index 664f9b46..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const FilterButton = ({ active, children, onClick }) => (
-    <button
-        className={classNames('btn btn-secondary', { active: active })}
-        onClick={() => {
-            if (!active) {
-                onClick()
-            }
-        }}
-    >
-        {children}
-    </button>
-)
-
-FilterButton.propTypes = {
-    active: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default FilterButton
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 89b483fb..5129c013 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,13 +1,28 @@
 import React from 'react'
-import FilterLink from '../../containers/projects/FilterLink'
+import PropTypes from 'prop-types'
+import { Button, ButtonGroup } from 'reactstrap'
 import { filterPanel } from './FilterPanel.module.scss'
 
-const FilterPanel = () => (
-    <div className={`btn-group ${filterPanel} mb-2`}>
-        <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
-        <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
-        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-    </div>
+export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
+
+const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
+    <ButtonGroup className={`${filterPanel} mb-2`}>
+        {Object.keys(FILTERS).map((filter) => (
+            <Button
+                color="secondary"
+                key={filter}
+                onClick={() => activeFilter === filter || onSelect(filter)}
+                active={activeFilter === filter}
+            >
+                {FILTERS[filter]}
+            </Button>
+        ))}
+    </ButtonGroup>
 )
 
+FilterPanel.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    activeFilter: PropTypes.string,
+}
+
 export default FilterPanel
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
deleted file mode 100644
index 312671c6..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const NewProjectButtonComponent = ({ onClick }) => (
-    <div className="bottom-btn-container">
-        <div className="btn btn-primary float-right" onClick={onClick}>
-            <span className="fa fa-plus mr-2" />
-            New Project
-        </div>
-    </div>
-)
-
-NewProjectButtonComponent.propTypes = {
-    onClick: PropTypes.func.isRequired,
-}
-
-export default NewProjectButtonComponent
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 48cce019..96970fd9 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -1,24 +1,29 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
+import { Button } from 'reactstrap'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
         <Link href={`/projects/${projectId}`}>
-            <a className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
+            <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
                 <span className="fa fa-play" />
-            </a>
+            </Button>
         </Link>
-        <div
-            className="btn btn-outline-success btn-sm disabled mr-2"
+        <Button
+            color="success"
+            outline
+            size="sm"
+            disabled
+            className="mr-2"
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
             <span className="fa fa-users" />
-        </div>
-        <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
+        </Button>
+        <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
             <span className="fa fa-trash" />
-        </div>
+        </Button>
     </td>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index 15147e08..90d42326 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Authorization } from '../../shapes'
-import ProjectAuthRow from './ProjectAuthRow'
+import ProjectRow from './ProjectRow'
 
-const ProjectAuthList = ({ authorizations }) => {
+const ProjectList = ({ authorizations }) => {
     return (
         <div className="vertically-expanding-container">
             {authorizations.length === 0 ? (
@@ -23,7 +23,7 @@ const ProjectAuthList = ({ authorizations }) => {
                     </thead>
                     <tbody>
                         {authorizations.map((authorization) => (
-                            <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
+                            <ProjectRow projectAuth={authorization} key={authorization.project._id} />
                         ))}
                     </tbody>
                 </table>
@@ -32,8 +32,8 @@ const ProjectAuthList = ({ authorizations }) => {
     )
 }
 
-ProjectAuthList.propTypes = {
+ProjectList.propTypes = {
     authorizations: PropTypes.arrayOf(Authorization).isRequired,
 }
 
-export default ProjectAuthList
+export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
index 1c1d5cd8..bc63c805 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -5,7 +5,7 @@ import { Authorization } from '../../shapes/index'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
 
-const ProjectAuthRow = ({ projectAuth }) => (
+const ProjectRow = ({ projectAuth }) => (
     <tr>
         <td className="pt-3">{projectAuth.project.name}</td>
         <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
@@ -17,8 +17,8 @@ const ProjectAuthRow = ({ projectAuth }) => (
     </tr>
 )
 
-ProjectAuthRow.propTypes = {
+ProjectRow.propTypes = {
     projectAuth: Authorization.isRequired,
 }
 
-export default ProjectAuthRow
+export default ProjectRow