Creating VPNContext.jsx to share state through all vpn components.

diff --git a/src/app/components/VPN/VPNContext.jsx b/src/app/components/VPN/VPNContext.jsx
new file mode 100644 (file)
index 0000000..aa98cd0
--- /dev/null
+++ b/src/app/components/VPN/VPNContext.jsx
@@ -0,0 +1,70 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { VPNService } from '../../services';
+
+const VPNContext = createContext( undefined );
+
+export const useVPN = () => useContext( VPNContext );
+
+export const VPNProvider = ( { children } ) => {
+  const [revokeOpen, setRevokeOpen] = useState( false );
+  const [revokeClientName, setRevokeClientName] = useState( '' );
+  const [clients, setClients] = useState( [] );
+  const [availableClients, setAvailableClients] = useState( [] );
+  const [message, setMessage] = useState( '' );
+  const [createOpen, setCreateOpen] = useState( false );
+
+  const fetchClients = async () => {
+    await VPNService.fetchClients()
+      .then( res => setClients( res ) )
+      .catch( err => setMessage( err ) );
+  };
+
+  const fetchAvailableClients = async () => {
+    await VPNService.fetchAvailableClients()
+      .then( res => setAvailableClients( res ) )
+      .catch( err => setMessage( err ) );
+  };
+
+  const handleCreateClientSubmit = async ( e, data ) => {
+    const { clientName, useStaticIp, staticIp } = data;
+    e.preventDefault();
+    setMessage( await VPNService.createClient( { clientName, useStaticIp, staticIp }, fetchClients ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
+    setCreateOpen( false );
+  };
+
+  const handleRevokeClientSubmit = async () => {
+    setMessage( await VPNService.revokeClient( { revokeClientName }, fetchClients ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
+    setRevokeOpen( false );
+  };
+
+  useEffect( () => {
+    fetchClients().catch( e => setMessage( e ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
+
+    const interval = setInterval( () => {
+      fetchClients().catch( e => setMessage( e ) );
+      fetchAvailableClients().catch( e => setMessage( e ) );
+    }, 10000 * 120 );
+
+    return () => clearInterval( interval );
+  }, [] );
+
+  const value = {
+    revokeOpen,
+    setRevokeOpen,
+    revokeClientName,
+    setRevokeClientName,
+    clients,
+    availableClients,
+    message,
+    setMessage,
+    createOpen,
+    setCreateOpen,
+    handleCreateClientSubmit,
+    handleRevokeClientSubmit
+  };
+
+  return <VPNContext.Provider value={ value }>{ children }</VPNContext.Provider>;
+};

diff --git a/src/app/routes.js b/src/app/routes.js
index 72b3019fe9e9e62d1e698af7dcbdd07778bfd2e9..7138ecde055ee44174b64413ccb49ca64e55c1a0 100755 (executable)
--- a/src/app/routes.js
+++ b/src/app/routes.js
@@ -1,8 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
 import { Login, NotFound, Dashboard, Git, VPN, Docker } from './views';
-/*import NotFound from './views/404/Error404Page';
-import Dashboard from './views/Dashboard/Dashboard';
-import Git from './views/Git/Git';*/
+
+import { VPNProvider } from './components/VPN/VPNContext';
 
 
 export default function AppRoutes() {
@@ -11,7 +10,7 @@ export default function AppRoutes() {
       <Route path="/" element={<Dashboard />} />
       <Route path="/login" element={<Login />} />
       <Route path="/git" element={<Git />} />
-      <Route path="/vpn" element={<VPN />} />
+      <Route path="/vpn" element={ <VPNProvider><VPN/></VPNProvider>} />
       <Route path="/docker" element={<Docker />} />
       <Route path="*" element={<NotFound />} />
     </Routes>

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 9b5dcb4f00aaf9329821eb14eb1fbb66ae63aec8..d0d0981b9377eb341fced2a2c8c9454179c40b6a 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Typography, Button } from '@mui/material';
+import { Container, Typography, Button, Grid } from '@mui/material';
 import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
-import { VPNService } from '../../services';
 import { ConfirmRevoke, CreateVPNClientDialog } from '../../components';
+import { useVPN } from '../../components/VPN/VPNContext';
 
 const VPN = () => {
-  const [revokeOpen, setRevokeOpen] = useState( false );
-  const [revokeClientName, setRevokeClientName] = useState('');
-  const [clients, setClients] = useState([]);
-  const [availableClients, setAvailableClients] = useState( [] );
-  const [message, setMessage] = useState('');
-  const [createOpen, setCreateOpen] = useState( false );
+  const { revokeOpen,
+    setRevokeOpen,
+    setRevokeClientName,
+    clients,
+    availableClients,
+    message,
+    createOpen,
+    setCreateOpen,
+    handleCreateClientSubmit,
+    handleRevokeClientSubmit } = useVPN();
   const clientTable = useMaterialReactTable( {
     columns: [
       { accessorKey: 'name', header: 'Name' },
@@ -28,18 +31,36 @@ const VPN = () => {
       { accessorFn: row => clients.find( c => c.name === row.clientName ) ? 'Yes' : 'No', header: 'Connected' },
       { accessorFn: row => row.hasOvpn ? 'Yes' : 'No', header: 'Has Profile' },
       {
-        header: 'Revoke',
+        header: 'Banning',
         Cell: ({ row }) => (
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              setRevokeClientName( row.original.clientName );
-              setRevokeOpen( true );
-            }}
-          >
-            Revoke
-          </Button>
+          <Grid container spacing={1} alignItems='center'>
+            <Grid item xs={6}>
+              <Button
+                size='small'
+                variant='contained'
+                color='secondary'
+                onClick={() => {
+                  setRevokeClientName( row.original.clientName );
+                  setRevokeOpen( true );
+                }}
+              >
+                Revoke
+              </Button>
+            </Grid>
+            <Grid item xs={6}>
+              <Button
+                size='small'
+                variant='contained'
+                color='secondary'
+                onClick={() => {
+                  setRevokeClientName( row.original.clientName );
+                  setRevokeOpen( true );
+                }}
+              >
+                Suspend
+              </Button>
+            </Grid>
+          </Grid>
         ),
       },
     ],
@@ -56,38 +77,6 @@ const VPN = () => {
     )
   });
 
-  const fetchClients = async () => {
-    await VPNService.fetchClients().then( res => setClients( res ) ).catch( err => setMessage( err ) );
-  };
-
-  const fetchAvailableClients = async () => {
-    await VPNService.fetchAvailableClients().then( res => setAvailableClients( res ) ).catch( err => setMessage( err ) );
-  };
-
-  useEffect( () => {
-    fetchClients().catch( e => setMessage( e ) );
-    fetchAvailableClients().catch( e => setMessage( e ) );
-  }, [] );
-
-  const handleCreateClientSubmit = async (e, data) => {
-    const { clientName, useStaticIp, staticIp } = data;
-    e.preventDefault();
-    setMessage( await VPNService.createClient({ clientName, useStaticIp, staticIp }, fetchClients ) );
-    fetchAvailableClients().catch( e => setMessage( e ) );
-    setCreateOpen( false );
-  };
-
-  const handleRevokeClientSubmit = async () => {
-    setMessage( await VPNService.revokeClient( { revokeClientName }, fetchClients ) );
-    fetchAvailableClients().catch( e => setMessage( e ) );
-    setRevokeOpen( false );
-  };
-
-  setTimeout( () => {
-    fetchClients().catch( e => setMessage( e ) );
-    fetchAvailableClients().catch( e => setMessage( e ) );
-  }, 10000 * 120 );
-
   return (
     <Container>
       { revokeOpen &&
@@ -96,8 +85,6 @@ const VPN = () => {
           onClose={() => setRevokeOpen(false)}
           onConfirm={handleRevokeClientSubmit}
         />}
-      {/*<Button variant="contained" color="primary" onClick={() => setCreateOpen(true)}>Create Client</Button>
-      {createOpen && <CreateVPNClientDialog open={createOpen} onClose={() => setCreateOpen(false)} onCreate={handleCreateClientSubmit}/>}*/}
 
       <Typography variant="h5" className="mt-6">Available OpenVPN Clients</Typography>
       <MaterialReactTable table={ availableTable } />