From c7d0592a331abcd6bef1c081fd3a56e0fd61adf7 Mon Sep 17 00:00:00 2001
From: Vijaykant Yadav <vjy239@gmail.com>
Date: Wed, 17 Apr 2024 23:13:48 +0530
Subject: [PATCH] initial changes

---
 frontend/src/Editor/Editor.jsx                | 14 ---------
 .../RightTopHeaderButtons/ManageAppUsers.jsx  | 29 ++-----------------
 .../ActionConfigurationPanels/GotoApp.jsx     | 18 +++++++++++-
 .../src/Editor/Inspector/EventManager.jsx     | 21 ++++++++++++--
 .../_components/NotificationCenter/index.jsx  |  7 +----
 5 files changed, 40 insertions(+), 49 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 57c465e8a2..d6381cd802 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -389,19 +389,6 @@ const EditorComponent = (props) => {
     return editorRef;
   };
 
-  const fetchApps = async (page) => {
-    const { apps } = await appService.getAll(page);
-
-    updateState({
-      apps: apps.map((app) => ({
-        id: app.id,
-        name: app.name,
-        slug: app.slug,
-        current_version_id: app.current_version_id,
-      })),
-    });
-  };
-
   const fetchOrgEnvironmentVariables = () => {
     orgEnvironmentVariableService.getVariables().then((data) => {
       const client_variables = {};
@@ -506,7 +493,6 @@ const EditorComponent = (props) => {
     useResolveStore.getState().actions.updateJSHints();
 
     await fetchApp(props.params.pageHandle, true);
-    await fetchApps(0);
     await fetchOrgEnvironmentVariables();
     await fetchOrgEnvironmentConstants();
     initComponentVersioning();
diff --git a/frontend/src/Editor/Header/RightTopHeaderButtons/ManageAppUsers.jsx b/frontend/src/Editor/Header/RightTopHeaderButtons/ManageAppUsers.jsx
index 8c0d8f32cb..8f626441b9 100644
--- a/frontend/src/Editor/Header/RightTopHeaderButtons/ManageAppUsers.jsx
+++ b/frontend/src/Editor/Header/RightTopHeaderButtons/ManageAppUsers.jsx
@@ -23,7 +23,6 @@ class ManageAppUsersComponent extends React.Component {
     this.state = {
       showModal: false,
       appId: null,
-      isLoading: true,
       isSlugVerificationInProgress: false,
       addingUser: false,
       newUser: {},
@@ -51,26 +50,9 @@ class ManageAppUsersComponent extends React.Component {
 
   componentDidMount() {
     const appId = this.props.appId;
-    this.fetchAppUsers(appId);
     this.setState({ appId });
   }
 
-  fetchAppUsers = (appId) => {
-    appsService
-      .getAppUsers(appId)
-      .then((data) =>
-        this.setState({
-          users: data.users,
-          isLoading: false,
-        })
-      )
-      .catch((error) => {
-        this.setState({ isLoading: false });
-        const errorMessage = error?.message || 'Something went wrong';
-        toast.error(errorMessage);
-      });
-  };
-
   hideModal = () => {
     this.setState({
       showModal: false,
@@ -95,7 +77,6 @@ class ManageAppUsersComponent extends React.Component {
       .then(() => {
         this.setState({ addingUser: false, newUser: {} });
         toast.success('Added user successfully');
-        this.fetchAppUsers(this.state.appId);
       })
       .catch(({ error }) => {
         this.setState({ addingUser: false });
@@ -190,7 +171,7 @@ class ManageAppUsersComponent extends React.Component {
   };
 
   render() {
-    const { isLoading, appId, isSlugVerificationInProgress, newSlug, isSlugUpdated } = this.state;
+    const { appId, isSlugVerificationInProgress, newSlug, isSlugUpdated } = this.state;
 
     const appLink = `${getHostURL()}/applications/`;
     const shareableLink = appLink + (this.props.slug || appId);
@@ -238,11 +219,7 @@ class ManageAppUsersComponent extends React.Component {
               </span>
             </Modal.Header>
             <Modal.Body>
-              {isLoading ? (
-                <div style={{ width: '100%' }} className="p-5">
-                  <Skeleton count={5} />
-                </div>
-              ) : (
+              {
                 <div class="shareable-link-container">
                   <div className="make-public mb-3">
                     <div className="form-check form-switch d-flex align-items-center">
@@ -402,7 +379,7 @@ class ManageAppUsersComponent extends React.Component {
                     </div>
                   )}
                 </div>
-              )}
+              }
             </Modal.Body>
 
             <Modal.Footer className="manage-app-users-footer">
diff --git a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
index e6700ccd6f..680714b0d6 100644
--- a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
+++ b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
@@ -5,6 +5,9 @@ import { useTranslation } from 'react-i18next';
 import CodeHinter from '@/Editor/CodeEditor';
 
 export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMode }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [appOptions, setAppOptions] = useState([]);
+
   const queryParamChangeHandler = (index, key, value) => {
     event.queryParams[index][key] = value;
     handlerChanged(eventIndex, 'queryParams', event.queryParams);
@@ -37,6 +40,17 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
     }
   });
 
+  useEffect(() => {
+    getAllApps()
+      .then((apps) => {
+        setAppOptions(apps);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const styles = {
     ...defaultStyles(darkMode),
     menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
@@ -49,12 +63,14 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
     <div className="p-1 go-to-app">
       <label className="form-label mt-1">App</label>
       <Select
-        options={getAllApps()}
+        options={appOptions}
         search={true}
         value={event.slug}
         onChange={(value) => {
           handlerChanged(eventIndex, 'slug', value);
         }}
+        isDisabled={isLoading}
+        isLoading={isLoading}
         placeholder={t('globals.select', 'Select') + '...'}
         styles={styles}
         useMenuPortal={false}
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index b723f17180..b2ff695b9d 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -25,6 +25,7 @@ import CodeHinter from '../CodeEditor';
 import { diff } from 'deep-object-diff';
 import { useEditorStore } from '@/_stores/editorStore';
 import { handleLowPriorityWork } from '@/_helpers/editorHelpers';
+import { appService } from '@/_services';
 
 export const EventManager = ({
   sourceId,
@@ -70,7 +71,7 @@ export const EventManager = ({
 
   const { handleYmapEventUpdates } = useContext(EditorContext) || {};
 
-  const { updateAppVersionEventHandlers, createAppVersionEventHandlers, deleteAppVersionEventHandler } =
+  const { updateAppVersionEventHandlers, createAppVersionEventHandlers, deleteAppVersionEventHandler, updateState } =
     useAppDataActions();
 
   const currentEvents = allAppEvents?.filter((event) => {
@@ -234,7 +235,23 @@ export const EventManager = ({
     return defaultParams;
   }
 
-  function getAllApps() {
+  const fetchApps = async (page) => {
+    const { apps } = await appService.getAll(page);
+
+    updateState({
+      apps: apps.map((app) => ({
+        id: app.id,
+        name: app.name,
+        slug: app.slug,
+        current_version_id: app.current_version_id,
+      })),
+    });
+
+    return apps;
+  };
+
+  async function getAllApps() {
+    const apps = await fetchApps(0);
     let appsOptionsList = [];
     apps
       .filter((item) => item.slug !== undefined && item.id !== appId && item.current_version_id)
diff --git a/frontend/src/_components/NotificationCenter/index.jsx b/frontend/src/_components/NotificationCenter/index.jsx
index 5202683e83..d5fb84b64c 100644
--- a/frontend/src/_components/NotificationCenter/index.jsx
+++ b/frontend/src/_components/NotificationCenter/index.jsx
@@ -36,11 +36,6 @@ export const NotificationCenter = ({ darkMode }) => {
     fetchData();
   };
 
-  React.useEffect(() => {
-    fetchData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRead]);
-
   const overlay = (
     <div
       className={`notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card ${
@@ -113,7 +108,7 @@ export const NotificationCenter = ({ darkMode }) => {
   );
 
   return (
-    <OverlayTrigger rootClose trigger="click" placement="right" overlay={overlay}>
+    <OverlayTrigger onEntering={fetchData} rootClose trigger="click" placement="right" overlay={overlay}>
       <div>
         <ToolTip message="Comment notifications" placement="right">
           <div className="notification-center-nav-item cursor-pointer tj-leftsidebar-icon-items">