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
index aa98cd09dcb350434f41ed5c89c7cec9b70f962c..35cdafc07d6c60b1f534eac4307ef0a683be51cf 100644 (file)
--- a/src/app/components/VPN/VPNContext.jsx
+++ b/src/app/components/VPN/VPNContext.jsx
@@ -1,5 +1,6 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import { VPNService } from '../../services';
+import { CreateVPNClientDialog, ConfirmRevoke } from '../index';
 
 const VPNContext = createContext( undefined );
 
@@ -66,5 +67,8 @@ export const VPNProvider = ( { children } ) => {
     handleRevokeClientSubmit
   };
 
-  return <VPNContext.Provider value={ value }>{ children }</VPNContext.Provider>;
+  return <VPNContext.Provider value={ value }>{children}
+    {revokeOpen && <ConfirmRevoke open={revokeOpen} onClose={() => setRevokeOpen(false)} onConfirm={handleRevokeClientSubmit}/>}
+    {createOpen && <CreateVPNClientDialog open={createOpen} onClose={() => setCreateOpen(false)} onCreate={handleCreateClientSubmit}/>}
+    { children }</VPNContext.Provider>;
 };

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index d0d0981b9377eb341fced2a2c8c9454179c40b6a..959a2eaf47fdea15b692f3739303be8c6d09846c 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -1,19 +1,14 @@
 import { Container, Typography, Button, Grid } from '@mui/material';
 import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
-import { ConfirmRevoke, CreateVPNClientDialog } from '../../components';
 import { useVPN } from '../../components/VPN/VPNContext';
 
 const VPN = () => {
-  const { revokeOpen,
-    setRevokeOpen,
+  const { setRevokeOpen,
     setRevokeClientName,
     clients,
     availableClients,
     message,
-    createOpen,
-    setCreateOpen,
-    handleCreateClientSubmit,
-    handleRevokeClientSubmit } = useVPN();
+    setCreateOpen } = useVPN();
   const clientTable = useMaterialReactTable( {
     columns: [
       { accessorKey: 'name', header: 'Name' },
@@ -67,7 +62,6 @@ const VPN = () => {
     data: availableClients,
     renderTopToolbarCustomActions: () => (
       <>
-        {createOpen && <CreateVPNClientDialog open={createOpen} onClose={() => setCreateOpen(false)} onCreate={handleCreateClientSubmit}/>}
         <Button variant="contained"
                 color="primary"
                 onClick={ () => setCreateOpen( true ) }>
@@ -79,13 +73,6 @@ const VPN = () => {
 
   return (
     <Container>
-      { revokeOpen &&
-        <ConfirmRevoke
-          open={revokeOpen}
-          onClose={() => setRevokeOpen(false)}
-          onConfirm={handleRevokeClientSubmit}
-        />}
-
       <Typography variant="h5" className="mt-6">Available OpenVPN Clients</Typography>
       <MaterialReactTable table={ availableTable } />