add ImportExportDelete to AddDevice Card

Author: T0biii

website/src/components/AddDevice.tsx

@@ -30,9 +30,11 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Box from '@mui/material/Box';
 import { Warning } from '@mui/icons-material';
+import { ImportExportDelete } from './ImportExportDelete';
 
 interface Props {
   onAdd: () => void;
+  onRefresh: () => void;
 }
 
 export const AddDevice = observer(
@@ -158,7 +160,9 @@ export const AddDevice = observer(
       return (
         <>
           <Card>
-            <CardHeader title="Add A Device" />
+            <CardHeader title="Add A Device" 
+              action={<ImportExportDelete onRefresh={() => this.props.onRefresh()} />}
+            />
             <CardContent>
               <form onSubmit={this.submit}>
                 <FormControl fullWidth>

website/src/components/Devices.tsx

@@ -61,20 +61,20 @@ export const Devices = observer(
         );
       }
       return (
-        <Grid container spacing={3} justifyContent="center">
-          <Grid item xs={12}>
-            <Grid container spacing={3}>
-              {this.devices.current.map((device, i) => (
-                <Grid key={i} item xs={12} sm={6} md={4} lg={3}>
-                  <DeviceListItem device={device} onRemove={() => this.devices.refresh()} />
-                </Grid>
-              ))}
+          <Grid container spacing={3} justifyContent="center">
+            <Grid item xs={12}>
+              <Grid container spacing={3}>
+                {this.devices.current.map((device, i) => (
+                  <Grid key={i} item xs={12} sm={6} md={4} lg={3}>
+                    <DeviceListItem device={device} onRemove={() => this.devices.refresh()} />
+                  </Grid>
+                ))}
+              </Grid>
+            </Grid>
+            <Grid item xs={12} sm={10} md={10} lg={6}>
+              <AddDevice onAdd={() => this.devices.refresh()} onRefresh={() => this.devices.refresh()} />
             </Grid>
           </Grid>
-          <Grid item xs={12} sm={10} md={10} lg={6}>
-            <AddDevice onAdd={() => this.devices.refresh()} />
-          </Grid>
-        </Grid>
       );
     }
   },

website/src/components/ImportExportDelete.tsx

@@ -11,7 +11,7 @@ import { toast } from './Toast';
 import { confirm } from './Present';
 
 
-export function ImportExportDelete() {
+export function ImportExportDelete({ onRefresh }: { onRefresh?: () => void }) {
   const handleExport = async () => {
     try {
       const response = await grpc.devices.listDevices({});
@@ -54,7 +54,8 @@ export function ImportExportDelete() {
         });
       }
 
-      toast({ text: 'Devices imported successfully', intent: 'success' });
+  toast({ text: 'Devices imported successfully', intent: 'success' });
+  if (onRefresh) onRefresh();
     } catch (error) {
       toast({ text: 'Failed to import devices: ' + (error as Error).message, intent: 'error' });
     }
@@ -72,7 +73,8 @@ export function ImportExportDelete() {
           });
         }
 
-        toast({ text: 'All devices deleted successfully', intent: 'success' });
+  toast({ text: 'All devices deleted successfully', intent: 'success' });
+  if (onRefresh) onRefresh();
       } catch (error) {
         toast({ text: 'Failed to delete devices: ' + (error as Error).message, intent: 'error' });
       }