Merge pull request meshery#11628 from senthil-athiban/RTK-migration-e…

…xtension [UI]: RTK Migration for Extension Page
singh1203 · Aug 21, 2024 · 5d4955c · 5d4955c
2 parents 3befbc6 + d555ff2
commit 5d4955c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 40 deletions.
diff --git a/ui/pages/extensions.js b/ui/pages/extensions.js
@@ -1,22 +1,22 @@
-import { Grid, Typography, Button, Switch } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import Head from 'next/head';
 import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Button, Grid, Switch, Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { CatalogIcon } from '@layer5/sistent';
+import { useGetUserPrefQuery, useUpdateUserPrefMutation } from '@/rtk-query/user';
+import { UsesSistent } from '@/components/SistentWrapper';
+import { Adapters } from '../components/extensions';
+import DefaultError from '@/components/General/error-404';
 import { toggleCatalogContent } from '../lib/store';
-import Head from 'next/head';
-import dataFetch from '../lib/data-fetch';
+import { EVENT_TYPES } from '../lib/event-types';
 import { EXTENSIONS } from '../utils/Enum';
-import { extensionStyles as styles } from '../css/icons.styles';
-import { Adapters } from '../components/extensions';
-import { LARGE_6_MED_12_GRID_STYLE } from '../css/grid.style';
 import { useNotification } from '../utils/hooks/useNotification';
-import { EVENT_TYPES } from '../lib/event-types';
-import DefaultError from '@/components/General/error-404';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
-import { UsesSistent } from '@/components/SistentWrapper';
-import { CatalogIcon } from '@layer5/sistent';
+import { LARGE_6_MED_12_GRID_STYLE } from '../css/grid.style';
+import { extensionStyles as styles } from '../css/icons.styles';
 
 const INITIAL_GRID_SIZE = { lg: 6, md: 12, xs: 12 };
 
@@ -209,49 +209,47 @@ const Extensions = ({ classes, toggleCatalogContent, capabilitiesRegistry }) =>
   const [extensionPreferences, setExtensionPreferences] = useState({});
   const [hasAccessToMeshMap, setHasAccessToMeshMap] = useState(false);
   const { notify } = useNotification();
+  const [updateUserPref] = useUpdateUserPrefMutation();
+
+  const {
+    data: userData,
+    isSuccess: userDataFetched,
+    isError: isUserError,
+    error: userError,
+  } = useGetUserPrefQuery();
 
   const handleToggle = () => {
     toggleCatalogContent({ catalogVisibility: !catalogContent });
     setCatalogContent(!catalogContent);
     handleCatalogPreference(!catalogContent);
   };
 
+  const fetchUser = () => {
+    if (userDataFetched && userData) {
+      setExtensionPreferences(userData?.usersExtensionPreferences);
+      setCatalogContent(userData?.usersExtensionPreferences?.catalogContent);
+    } else if (isUserError) {
+      console.log(userError);
+    }
+  };
   useEffect(() => {
-    dataFetch(
-      '/api/user/prefs',
-      {
-        method: 'GET',
-        credentials: 'include',
-      },
-      (result) => {
-        if (result) {
-          setExtensionPreferences(result?.usersExtensionPreferences);
-          setCatalogContent(result?.usersExtensionPreferences?.catalogContent);
-        }
-      },
-      (err) => console.error(err),
-    );
-  }, []);
+    fetchUser();
+  }, [userData]);
 
   const handleCatalogPreference = (catalogPref) => {
     let body = Object.assign({}, extensionPreferences);
     body['catalogContent'] = catalogPref;
-
-    dataFetch(
-      '/api/user/prefs',
-      {
-        method: 'POST',
-        credentials: 'include',
-        body: JSON.stringify({ usersExtensionPreferences: body }),
-      },
-      () => {
+    updateUserPref({ usersExtensionPreferences: body })
+      .unwrap()
+      .then(() => {
         notify({
           message: `Catalog Content was ${catalogPref ? 'enab' : 'disab'}led`,
           event_type: EVENT_TYPES.SUCCESS,
         });
-      },
-      (err) => console.error(err),
-    );
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   useEffect(() => {

diff --git a/ui/rtk-query/user.js b/ui/rtk-query/user.js
@@ -23,7 +23,7 @@ const userApi = api.injectEndpoints({
       query: (queryArg) => ({
         url: 'user/prefs',
         method: 'POST',
-        body: queryArg,
+        body: queryArg.usersExtensionPreferences,
         credentials: 'include',
       }),
     }),