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, 12 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index bea9ad93..dd61751f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
-import NewProjectModal from '../../containers/modals/NewProjectModal'
-import NewProjectButtonContainer from '../../containers/projects/NewProjectButtonContainer'
+import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth/hook'
+import { Container } from 'reactstrap'
 
 function Projects() {
+    useRequireAuth()
+
     const dispatch = useDispatch()
+    const [filter, setFilter] = useState('SHOW_ALL')
 
-    useRequireAuth()
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()), [])
 
     return (
         <>
@@ -22,12 +24,11 @@ function Projects() {
             </Head>
             <div className="full-height">
                 <AppNavbarContainer fullWidth={false} />
-                <div className="container text-page-container full-height">
-                    <ProjectFilterPanel />
-                    <VisibleProjectList />
-                    <NewProjectButtonContainer />
-                </div>
-                <NewProjectModal />
+                <Container className="text-page-container">
+                    <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
+                    <VisibleProjectList filter={filter} />
+                    <NewProjectContainer />
+                </Container>
             </div>
         </>
     )