From: charleswrayjr <charleswrayjr@gmail.com>
Date: Tue, 9 Sep 2025 17:25:48 +0000 (-0500)
Subject: Creating VPNContext.jsx to share state through all vpn components.
X-Git-Url: https://git.phasecustomsoft.com/?a=commitdiff_plain;h=3a3375eac5c2529297080259a0abc27612015372;p=phs-admin.git

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 aa98cd0..35cdafc 100644
--- 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 d0d0981..959a2ea 100644
--- 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 } />