Add dialog to delete network.

Signed-off-by: Gautier Bureau <[email protected]>

Author: gautierbureau

src/components/2-molecules/AttachDialog.jsx

@@ -14,15 +14,22 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import PropTypes from 'prop-types';
 import { Divider, Grid, Typography } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import List from '@material-ui/core/List';
 import { useStyles } from './AttachDialogStyles';
 import Autocomplete from '../1-atoms/Autocomplete';
+import { useDispatch } from 'react-redux';
+import { deleteNetwork as deleteMappingAction } from '../../redux/slices/Network';
 
 const AttachDialog = (props) => {
     const { open, handleClose, attachWithFile, networks, attachWithId } = props;
     const [file, setFile] = useState(null);
     const [networkId, setNetworkId] = useState('');
     const classes = useStyles();
 
+    const dispatch = useDispatch();
+
     const onChangeFile = (event) => {
         setFile(event.target.files[0]);
     };
@@ -42,6 +49,10 @@ const AttachDialog = (props) => {
         setNetworkId('');
     };
 
+    const deleteNetwork = (networkId) => {
+        dispatch(deleteMappingAction(networkId));
+    };
+
     return (
         <Dialog
             open={open}
@@ -103,6 +114,23 @@ const AttachDialog = (props) => {
                 )}
             </DialogContent>
             <Divider />
+            <DialogContent>
+                <Typography>Delete a known network :</Typography>
+                <List>
+                    {networks.map((network) => (
+                        <ListItem
+                            button
+                            key={network.networkName}
+                            onClick={() => deleteNetwork(network.networkId)}
+                        >
+                            <ListItemText>
+                                primary={`${network.networkName}`}
+                            </ListItemText>
+                        </ListItem>
+                    ))}
+                </List>
+            </DialogContent>
+            <Divider />
             <DialogActions>
                 <Button onClick={closeDialog} color="primary">
                     Cancel

src/redux/slices/Network.js

@@ -95,6 +95,19 @@ export const getNetworkNames = createAsyncThunk(
     }
 );
 
+export const deleteNetwork = createAsyncThunk(
+    'network/delete',
+    async (networkId, { getState }) => {
+        const token = getState()?.user.user?.id_token;
+        const response = await networkAPI.deleteNetwork(networkId, token);
+
+        if (!response.ok) {
+            throw response;
+        }
+        return response.text();
+    }
+);
+
 const reducers = {
     cleanNetwork: (state) => {
         state.propertyValues = [];
@@ -140,6 +153,19 @@ const extraReducers = {
     [getNetworkNames.pending]: (state, _action) => {
         state.status = RequestStatus.PENDING;
     },
+    [deleteNetwork.fulfilled]: (state, action) => {
+        state.status = RequestStatus.SUCCESS;
+        const name = action.payload;
+        state.knownNetworks = state.knownNetworks.filter(
+            (network) => network.networkId !== name
+        );
+    },
+    [deleteNetwork.rejected]: (state, _action) => {
+        state.status = RequestStatus.ERROR;
+    },
+    [deleteNetwork.pending]: (state, _action) => {
+        state.status = RequestStatus.PENDING;
+    },
 };
 
 export const NetworkSlice = createSlice({

src/redux/slices/Script.js

@@ -93,6 +93,7 @@ export const deleteScript = createAsyncThunk(
         return response.text();
     }
 );
+
 export const copyScript = createAsyncThunk(
     'scripts/copy',
     async ({ originalName, copyName }, { getState }) => {

src/rest/networkAPI.js

@@ -63,3 +63,15 @@ export function getNetworkMatchesFromRule(networkId, ruleToMatch, token) {
         body: JSON.stringify(ruleToMatch),
     });
 }
+
+export function deleteNetwork(networkId, token) {
+    return fetch(`${API_URL}/${networkId}`, {
+        method: 'DELETE',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token,
+        },
+        cache: 'default',
+    });
+}