imrpove: refresh lists when adding new elements - closes #468

Signed-off-by: Marcin Fabrykowski <git@fabrykowski.pl>

app/src/components/apps/appDomain.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import { Container } from 'react-bootstrap'
 import AppDomainAdd from './appDomainAdd'
 import AppDomainList from './appDomainList'
 import PropTypes from 'prop-types'
 
 function AppDomain (props) {
+  const [refreshList, setRefreshList] = useState(false)
+  const handleAddElement = () => {
+    setRefreshList(!refreshList)
+  }
+
   return (
       <React.Fragment>
           <Container>
             <h1>Domain</h1>
           </Container>
           <Container className='my-3'>
-            <AppDomainAdd org={props.org} />
+            <AppDomainAdd org={props.org} onAddElement={handleAddElement} />
           </Container>
           <Container className='my-3'>
-            <AppDomainList org={props.org} />
+            <AppDomainList org={props.org} refreshList={refreshList} />
           </Container>
       </React.Fragment>
   )

app/src/components/apps/appDomainAdd.jsx

@@ -34,6 +34,7 @@ function AppDomainAdd (props) {
       .request(requestOptions)
       .then(function (response) {
         setMessage('added')
+        props.onAddElement()
         return 0
       })
       .catch(function (err) {
@@ -74,7 +75,8 @@ function AppDomainAdd (props) {
 }
 
 AppDomainAdd.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  onAddElement: PropTypes.func.isRequired
 }
 
 export default AppDomainAdd

app/src/components/apps/appDomainList.jsx

@@ -61,6 +61,10 @@ function AppDomainList (props) {
     }
   }, [props.org])
 
+  useEffect(() => {
+    loadApps()
+  }, [props.refreshList])
+
   return (
         <React.Fragment>
         <Table striped bordered hover>
@@ -78,7 +82,8 @@ function AppDomainList (props) {
 }
 
 AppDomainList.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  refreshList: PropTypes.bool.isRequired
 }
 
 export default AppDomainList

app/src/components/apps/appEmail.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import { Container } from 'react-bootstrap'
 import AppEmailAdd from './appEmailAdd'
 import AppEmailList from './appEmailList'
 import PropTypes from 'prop-types'
 
 function AppEmail (props) {
+  const [refreshList, setRefreshList] = useState(false)
+  const handleAddElement = () => {
+    setRefreshList(!refreshList)
+  }
+
   return (
       <React.Fragment>
           <Container>
             <h1>Emails</h1>
           </Container>
           <Container className='my-3'>
-            <AppEmailAdd org={props.org} />
+            <AppEmailAdd org={props.org} onAddElement={handleAddElement} />
           </Container>
           <Container className='my-3'>
-            <AppEmailList org={props.org} />
+            <AppEmailList org={props.org} refreshList={refreshList} />
           </Container>
       </React.Fragment>
   )

app/src/components/apps/appEmailAdd.jsx

@@ -35,6 +35,7 @@ function AppEmailAdd (props) {
       .request(requestOptions)
       .then(function (response) {
         setMessage('added ' + response.data.password)
+        props.onAddElement()
         return 0
       })
       .catch(function (err) {
@@ -89,7 +90,8 @@ function AppEmailAdd (props) {
 }
 
 AppEmailAdd.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  onAddElement: PropTypes.func.isRequired
 }
 
 export default AppEmailAdd

app/src/components/apps/appEmailAdd.test.jsx

@@ -25,8 +25,9 @@ describe('AppEmailAdd', () => {
   })
 
   test('show apps in console page', () => {
+    const dummyFunc = () => {}
     act(() => {
-      render(<AppEmailAdd org="test-org"/>)
+      render(<AppEmailAdd org="test-org" onAddElement={dummyFunc} />)
     })
     expect(screen.queryByText(/Email:/)).toBeInTheDocument()
     expect(screen.queryByText(/Name:/)).toBeInTheDocument()
@@ -50,8 +51,9 @@ describe('AppEmailAdd', () => {
       .post('/api/users/v1/emails/')
       .query(true)
       .reply(400)
+    const dummyFunc = () => {}
     act(() => {
-      render(<AppEmailAdd org="test-org"/>)
+      render(<AppEmailAdd org="test-org" onAddElement={dummyFunc} />)
     })
     fireEvent.change(screen.getByTestId('email-add-mail'), { target: { value: 'test-aa' } })
     fireEvent.change(screen.getByTestId('email-add-cn'), { target: { value: 'test-aa' } })
@@ -62,8 +64,9 @@ describe('AppEmailAdd', () => {
 
   test('submit email', async () => {
     window.API_URL = 'http://localhost:8080'
+    const dummyFunc = () => {}
     act(() => {
-      render(<AppEmailAdd org="qwe"/>)
+      render(<AppEmailAdd org="qwe" onAddElement={dummyFunc} />)
     })
     expect(screen.getByTestId('email-add-org')).toHaveDisplayValue('qwe')
     fireEvent.change(screen.getByTestId('email-add-mail'), { target: { value: 'test-aa' } })
@@ -95,8 +98,9 @@ describe('AppEmailAdd', () => {
   // })
   //
   test('submit email no name', async () => {
+    const dummyFunc = () => {}
     act(() => {
-      render(<AppEmailAdd org="test-org"/>)
+      render(<AppEmailAdd org="test-org" onAddElement={dummyFunc} />)
     })
     fireEvent.click(screen.getByText('Create'))
     await waitFor(() => expect(screen.getByTestId('email-add-message')).toHaveTextContent('no field Mail'))

app/src/components/apps/appEmailList.jsx

@@ -70,6 +70,10 @@ function AppEmailList (props) {
     }
   }, [props.org])
 
+  useEffect(() => {
+    loadEmails()
+  }, [props.refreshList])
+
   return (
         <React.Fragment>
         <Table striped bordered hover>
@@ -89,7 +93,8 @@ function AppEmailList (props) {
 }
 
 AppEmailList.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  refreshList: PropTypes.bool.isRequired
 }
 
 export default AppEmailList

app/src/components/apps/appNginx.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import { Container } from 'react-bootstrap'
 import AppNginxAdd from './appNginxAdd'
 import AppNginxList from './appNginxList'
 import PropTypes from 'prop-types'
 
 function AppNginx (props) {
+  const [refreshList, setRefreshList] = useState(false)
+  const handleAddElement = () => {
+    setRefreshList(!refreshList)
+  }
+
   return (
       <React.Fragment>
           <Container>
             <h1>Nginx</h1>
           </Container>
           <Container className='my-3'>
-            <AppNginxAdd org={props.org} />
+            <AppNginxAdd org={props.org} onAddElement={handleAddElement} />
           </Container>
           <Container className='my-3'>
-            <AppNginxList org={props.org} />
+            <AppNginxList org={props.org} refreshList={refreshList} />
           </Container>
       </React.Fragment>
   )

app/src/components/apps/appNginxAdd.jsx

@@ -44,6 +44,7 @@ function AppNginxAdd (props) {
       .request(requestOptions)
       .then(function (response) {
         setMessage('added')
+        props.onAddElement()
         return 0
       })
       .catch(function (err) {
@@ -97,7 +98,8 @@ function AppNginxAdd (props) {
 }
 
 AppNginxAdd.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  onAddElement: PropTypes.func.isRequired
 }
 
 export default AppNginxAdd

app/src/components/apps/appNginxList.jsx

@@ -84,6 +84,10 @@ function AppNginxList (props) {
     }
   }, [props.org])
 
+  useEffect(() => {
+    loadApps()
+  }, [props.refreshList])
+
   return (
         <React.Fragment>
         <Table striped bordered hover>
@@ -103,7 +107,8 @@ function AppNginxList (props) {
 }
 
 AppNginxList.propTypes = {
-  org: PropTypes.string.isRequired
+  org: PropTypes.string.isRequired,
+  refreshList: PropTypes.bool.isRequired
 }
 
 export default AppNginxList