Use the store to persist tags UI state

trento-project · Mar 30, 2022 · 8c18dda · 8c18dda
1 parent 7d94c04
commit 8c18dda
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 deletions.
diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx
@@ -5,6 +5,7 @@ import { Menu, Transition } from '@headlessui/react';
 import axios from 'axios';
 import Table from './Table';
 import Tags from './Tags';
+import { addTagToCluster, removeTagFromCluster } from '@state/clusters';
 
 import { EOS_EDIT, EOS_RUN_CIRCLE, EOS_LUNCH_DINING } from 'eos-icons-react';
 
@@ -101,8 +102,18 @@ const ClustersList = () => {
           <Tags
             tags={content}
             onChange={() => {}}
-            onAdd={(tag) => addTag(tag, item.id)}
-            onRemove={(tag) => removeTag(tag, item.id)}
+            onAdd={(tag) => {
+              addTag(tag, item.id);
+              dispatch(
+                addTagToCluster({ tags: [{ value: tag }], id: item.id })
+              );
+            }}
+            onRemove={(tag) => {
+              removeTag(tag, item.id);
+              dispatch(
+                removeTagFromCluster({ tags: [{ value: tag }], id: item.id })
+              );
+            }}
           />
         ),
       },

diff --git a/assets/js/components/DatabasesOverview/DatabasesOverview.jsx b/assets/js/components/DatabasesOverview/DatabasesOverview.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
 import HealthIcon from '@components/Health';
 import Table from '@components/Table';
 import DatabaseItemOverview from './DatabaseItemOverview';
 import Tags from '@components/Tags';
+import { addTagToDatabase, removeTagFromDatabase } from '@state/databases';
 
 import { logError } from '@lib/log';
 
@@ -31,6 +32,7 @@ const DatabasesOverview = () => {
   const { databases, databaseInstances, loading } = useSelector(
     (state) => state.databasesList
   );
+  const dispatch = useDispatch();
   const config = {
     columns: [
       {
@@ -99,8 +101,14 @@ const DatabasesOverview = () => {
           <Tags
             tags={content}
             onChange={() => {}}
-            onAdd={(tag) => addTag(tag, item.id)}
-            onRemove={(tag) => removeTag(tag, item.id)}
+            onAdd={(tag) => {
+              addTag(tag, item.id);
+              dispatch(addTagToDatabase(tag, item.id));
+            }}
+            onRemove={(tag) => {
+              removeTag(tag, item.id);
+              dispatch(removeTagFromDatabase(tag, item.id));
+            }}
           />
         ),
       },

diff --git a/assets/js/components/HostsList.jsx b/assets/js/components/HostsList.jsx
@@ -3,8 +3,9 @@ import { Link } from 'react-router-dom';
 import axios from 'axios';
 import Table from './Table';
 import Tags from './Tags';
+import { addTagToHost, removeTagFromHost } from '@state/hosts';
 
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
 import { EOS_LENS_FILLED } from 'eos-icons-react';
 
@@ -40,6 +41,7 @@ const removeTag = (tag, hostId) => {
 const HostsList = () => {
   const hosts = useSelector((state) => state.hostsList.hosts);
   const clusters = useSelector((state) => state.clustersList.clusters);
+  const dispatch = useDispatch();
 
   const config = {
     columns: [
@@ -99,8 +101,16 @@ const HostsList = () => {
           <Tags
             tags={content}
             onChange={() => {}}
-            onAdd={(tag) => addTag(tag, item.id)}
-            onRemove={(tag) => removeTag(tag, item.id)}
+            onAdd={(tag) => {
+              addTag(tag, item.id);
+              dispatch(addTagToHost({ tags: [{ value: tag }], id: item.id }));
+            }}
+            onRemove={(tag) => {
+              removeTag(tag, item.id);
+              dispatch(
+                removeTagFromHost({ tags: [{ value: tag }], id: item.id })
+              );
+            }}
           />
         ),
       },

diff --git a/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx b/assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
 import HealthIcon from '@components/Health';
 import Table from '@components/Table';
 import SAPSystemItemOverview from '@components/SapSystemsOverview/SapSystemItemOverview';
 import Tags from '@components/Tags';
 
+import { addTagToSAPSystem, removeTagFromSAPSystem } from '@state/sapSystems';
+
 import { logError } from '@lib/log';
 
 const bySapSystem = (id) => (instance) => instance.sap_system_id === id;
@@ -30,6 +32,7 @@ const removeTag = (tag, sapSystemId) => {
 const SapSystemsOverview = () => {
   const { sapSystems, applicationInstances, databaseInstances, loading } =
     useSelector((state) => state.sapSystemsList);
+  const dispatch = useDispatch();
   const config = {
     columns: [
       {
@@ -86,8 +89,14 @@ const SapSystemsOverview = () => {
           <Tags
             tags={content}
             onChange={() => {}}
-            onAdd={(tag) => addTag(tag, item.id)}
-            onRemove={(tag) => removeTag(tag, item.id)}
+            onAdd={(tag) => {
+              addTag(tag, item.id);
+              dispatch(addTagToSAPSystem(tag, item.id));
+            }}
+            onRemove={(tag) => {
+              removeTag(tag, item.id);
+              dispatch(removeTagFromSAPSystem(tag, item.id));
+            }}
           />
         ),
       },

diff --git a/assets/js/state/sapSystems.js b/assets/js/state/sapSystems.js
@@ -70,7 +70,6 @@ export const sapSystemsListSlice = createSlice({
     },
     addTagToSAPSystem: (state, action) => {
       state.sapSystems = state.sapSystems.map((sapSystem) => {
-        console.log('sapSystem: ', sapSystem);
         if (sapSystem.id === action.payload.id) {
           sapSystem.tags = [...sapSystem.tags, ...action.payload.tags];
         }
@@ -79,7 +78,6 @@ export const sapSystemsListSlice = createSlice({
     },
     removeTagFromSAPSystem: (state, action) => {
       state.sapSystems = state.sapSystems.map((sapSystem) => {
-        console.log('sapSystem: ', sapSystem);
         if (sapSystem.id === action.payload.id) {
           sapSystem.tags = sapSystem.tags.filter(
             (tag) => tag.value !== action.payload.tags[0].value