From 8abb24b49226480e928ce100c8b6f3d12bc260fa Mon Sep 17 00:00:00 2001
From: Gautier Bureau <gautier.bureau@rte-france.com>
Date: Mon, 4 Apr 2022 11:52:56 +0200
Subject: [PATCH 1/3] Add dialog to delete network.

Signed-off-by: Gautier Bureau <gautier.bureau@rte-france.com>
---
 src/components/2-molecules/AttachDialog.jsx | 28 +++++++++++++++++++++
 src/redux/slices/Network.js                 | 26 +++++++++++++++++++
 src/redux/slices/Script.js                  |  1 +
 src/rest/networkAPI.js                      | 12 +++++++++
 4 files changed, 67 insertions(+)

diff --git a/src/components/2-molecules/AttachDialog.jsx b/src/components/2-molecules/AttachDialog.jsx
index 029db08..887519f 100644
--- a/src/components/2-molecules/AttachDialog.jsx
+++ b/src/components/2-molecules/AttachDialog.jsx
@@ -14,8 +14,13 @@ 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;
@@ -23,6 +28,8 @@ const AttachDialog = (props) => {
     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
diff --git a/src/redux/slices/Network.js b/src/redux/slices/Network.js
index 4cb943d..e71ff20 100644
--- a/src/redux/slices/Network.js
+++ b/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({
diff --git a/src/redux/slices/Script.js b/src/redux/slices/Script.js
index 7f7aad8..4b445f1 100644
--- a/src/redux/slices/Script.js
+++ b/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 }) => {
diff --git a/src/rest/networkAPI.js b/src/rest/networkAPI.js
index b2e8485..60e98b7 100644
--- a/src/rest/networkAPI.js
+++ b/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',
+    });
+}

From 4e82eb7a187944de7640aa24318c79d60c319e49 Mon Sep 17 00:00:00 2001
From: Thang PHAM <phamthang37@gmail.com>
Date: Sat, 18 Feb 2023 16:29:56 +0100
Subject: [PATCH 2/3] Use backendFetchJson for delete network

---
 src/components/2-molecules/AttachDialog.jsx | 39 +++++++++++++--------
 src/containers/MappingContainer.jsx         |  6 ++++
 src/redux/slices/Network.js                 |  7 +---
 src/rest/networkAPI.js                      |  2 +-
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/2-molecules/AttachDialog.jsx b/src/components/2-molecules/AttachDialog.jsx
index 7d2e2ff..7e3c460 100644
--- a/src/components/2-molecules/AttachDialog.jsx
+++ b/src/components/2-molecules/AttachDialog.jsx
@@ -16,24 +16,29 @@ import {
     Divider,
     Grid,
     Typography,
-    ListItem,
     ListItemText,
     List,
+    IconButton,
+    ListItem,
 } from '@mui/material';
 import PropTypes from 'prop-types';
 import { useStyles } from './AttachDialogStyles';
 import Autocomplete from '../1-atoms/Autocomplete';
-import { useDispatch } from 'react-redux';
-import { deleteNetwork as deleteMappingAction } from '../../redux/slices/Network';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 
 const AttachDialog = (props) => {
-    const { open, handleClose, attachWithFile, networks, attachWithId } = props;
+    const {
+        open,
+        handleClose,
+        attachWithFile,
+        networks,
+        attachWithId,
+        onDeleteNetwork,
+    } = props;
     const [file, setFile] = useState(null);
     const [networkId, setNetworkId] = useState('');
     const classes = useStyles();
 
-    const dispatch = useDispatch();
-
     const onChangeFile = (event) => {
         setFile(event.target.files[0]);
     };
@@ -53,10 +58,6 @@ const AttachDialog = (props) => {
         setNetworkId('');
     };
 
-    const deleteNetwork = (networkId) => {
-        dispatch(deleteMappingAction(networkId));
-    };
-
     return (
         <Dialog
             open={open}
@@ -123,13 +124,21 @@ const AttachDialog = (props) => {
                 <List>
                     {networks.map((network) => (
                         <ListItem
-                            button
                             key={network.networkName}
-                            onClick={() => deleteNetwork(network.networkId)}
+                            divider
+                            secondaryAction={
+                                <IconButton
+                                    onClick={() =>
+                                        onDeleteNetwork(network.networkId)
+                                    }
+                                    edge="end"
+                                    aria-label="delete"
+                                >
+                                    <DeleteForeverIcon />
+                                </IconButton>
+                            }
                         >
-                            <ListItemText>
-                                primary={`${network.networkName}`}
-                            </ListItemText>
+                            <ListItemText primary={`${network.networkName}`} />
                         </ListItem>
                     ))}
                 </List>
diff --git a/src/containers/MappingContainer.jsx b/src/containers/MappingContainer.jsx
index c3690cd..24d3d1e 100644
--- a/src/containers/MappingContainer.jsx
+++ b/src/containers/MappingContainer.jsx
@@ -19,6 +19,7 @@ import {
 } from '../redux/slices/Mapping';
 import { convertScript } from '../redux/slices/Script';
 import {
+    deleteNetwork,
     getCurrentNetworkObj,
     getNetworkNames,
     getPropertyValuesFromFile,
@@ -128,6 +129,10 @@ const MappingContainer = () => {
         dispatch(getPropertyValuesFromFile(file));
     }
 
+    const handleDeleteNetwork = (networkId) => {
+        dispatch(deleteNetwork(networkId));
+    };
+
     function setFilteredType(type) {
         dispatch(MappingSlice.actions.changeFilteredType(type));
     }
@@ -256,6 +261,7 @@ const MappingContainer = () => {
                 handleClose={() => setIsAttachedModalOpen(false)}
                 attachWithId={attachWithId}
                 attachWithFile={attachWithFile}
+                onDeleteNetwork={handleDeleteNetwork}
             />
             {editParameters && (
                 <ParametersContainer
diff --git a/src/redux/slices/Network.js b/src/redux/slices/Network.js
index f7e6cc0..dbb570a 100644
--- a/src/redux/slices/Network.js
+++ b/src/redux/slices/Network.js
@@ -115,12 +115,7 @@ 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();
+        return await networkAPI.deleteNetwork(networkId, token);
     }
 );
 
diff --git a/src/rest/networkAPI.js b/src/rest/networkAPI.js
index 7b0c7d1..be27f0a 100644
--- a/src/rest/networkAPI.js
+++ b/src/rest/networkAPI.js
@@ -76,7 +76,7 @@ export function getNetworkMatchesFromRule(networkId, ruleToMatch, token) {
 }
 
 export function deleteNetwork(networkId, token) {
-    return fetch(`${API_URL}/${networkId}`, {
+    return backendFetchJson(`${API_URL}/${networkId}`, {
         method: 'DELETE',
         headers: {
             Accept: 'application/json',

From bb99a19bb8010fb68404dd1a75ee99180071bbe7 Mon Sep 17 00:00:00 2001
From: Thang PHAM <phamthang37@gmail.com>
Date: Mon, 20 Feb 2023 11:06:38 +0100
Subject: [PATCH 3/3] Naming correction

---
 src/redux/slices/Network.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/redux/slices/Network.js b/src/redux/slices/Network.js
index dbb570a..72de592 100644
--- a/src/redux/slices/Network.js
+++ b/src/redux/slices/Network.js
@@ -166,9 +166,9 @@ const extraReducers = {
     },
     [deleteNetwork.fulfilled]: (state, action) => {
         state.status = RequestStatus.SUCCESS;
-        const name = action.payload;
+        const networkId = action.payload;
         state.knownNetworks = state.knownNetworks.filter(
-            (network) => network.networkId !== name
+            (network) => network.networkId !== networkId
         );
     },
     [deleteNetwork.rejected]: (state, _action) => {