From e12b9ecac8617c0dfa6fac31b1dc123750709372 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Thu, 8 Apr 2021 18:48:49 +0200
Subject: [PATCH] fix: excessive autorun calls

---
 .../components/NoAccountWarning.tsx           |  4 +-
 .../javascripts/components/SearchOptions.tsx  | 13 ++++---
 .../javascripts/components/SessionsModal.tsx  | 39 ++++++++++---------
 app/assets/javascripts/components/utils.ts    | 30 +++++---------
 4 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/components/NoAccountWarning.tsx
index f9f8ea719..680393604 100644
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/app/assets/javascripts/components/NoAccountWarning.tsx
@@ -5,7 +5,9 @@ import { AppState } from '@/ui_models/app_state';
 type Props = { appState: AppState };
 
 function NoAccountWarning({ appState }: Props) {
-  const canShow = useAutorunValue(() => appState.noAccountWarning.show);
+  const canShow = useAutorunValue(() => appState.noAccountWarning.show, [
+    appState,
+  ]);
   if (!canShow) {
     return null;
   }
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 8d1d93eea..fca445481 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -24,11 +24,14 @@ function SearchOptions({ appState }: Props) {
     includeProtectedContents,
     includeArchived,
     includeTrashed,
-  } = useAutorunValue(() => ({
-    includeProtectedContents: searchOptions.includeProtectedContents,
-    includeArchived: searchOptions.includeArchived,
-    includeTrashed: searchOptions.includeTrashed,
-  }));
+  } = useAutorunValue(
+    () => ({
+      includeProtectedContents: searchOptions.includeProtectedContents,
+      includeArchived: searchOptions.includeArchived,
+      includeTrashed: searchOptions.includeTrashed,
+    }),
+    [searchOptions]
+  );
 
   const [
     togglingIncludeProtectedContents,
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/components/SessionsModal.tsx
index e00b07a26..b8c82daf4 100644
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/app/assets/javascripts/components/SessionsModal.tsx
@@ -15,7 +15,7 @@ import {
   AlertDialogDescription,
   AlertDialogLabel,
 } from '@reach/alert-dialog';
-import { toDirective, useAutorun } from './utils';
+import { toDirective, useAutorunValue } from './utils';
 import { WebApplication } from '@/ui_models/application';
 
 type Session = RemoteSession & {
@@ -211,22 +211,22 @@ const SessionsModal: FunctionComponent<{
                       <p>{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>
                     <div className="flex my-1 gap-2">
-                        <button
-                          className="sn-button neutral sk-label"
-                          ref={cancelRevokeRef}
-                          onClick={closeRevokeSessionAlert}
-                        >
-                          <span>{SessionStrings.RevokeCancelButton}</span>
-                        </button>
-                        <button
-                          className="sn-button danger sk-label"
-                          onClick={() => {
-                            closeRevokeSessionAlert();
-                            revokeSession(confirmRevokingSessionUuid);
-                          }}
-                        >
-                          <span>{SessionStrings.RevokeConfirmButton}</span>
-                        </button>
+                      <button
+                        className="sn-button neutral sk-label"
+                        ref={cancelRevokeRef}
+                        onClick={closeRevokeSessionAlert}
+                      >
+                        <span>{SessionStrings.RevokeCancelButton}</span>
+                      </button>
+                      <button
+                        className="sn-button danger sk-label"
+                        onClick={() => {
+                          closeRevokeSessionAlert();
+                          revokeSession(confirmRevokingSessionUuid);
+                        }}
+                      >
+                        <span>{SessionStrings.RevokeConfirmButton}</span>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -243,8 +243,9 @@ const Sessions: FunctionComponent<{
   appState: AppState;
   application: WebApplication;
 }> = ({ appState, application }) => {
-  const [showModal, setShowModal] = useState(false);
-  useAutorun(() => setShowModal(appState.isSessionsModalVisible));
+  const showModal = useAutorunValue(() => appState.isSessionsModalVisible, [
+    appState,
+  ]);
 
   if (showModal) {
     return <SessionsModal application={application} appState={appState} />;
diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
index eb0f6465b..33e437c46 100644
--- a/app/assets/javascripts/components/utils.ts
+++ b/app/assets/javascripts/components/utils.ts
@@ -1,25 +1,18 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { autorun, IAutorunOptions, IReactionPublic } from 'mobx';
+import { autorun } from 'mobx';
 import { FunctionComponent, h, render } from 'preact';
-import { useEffect } from 'preact/hooks';
-import { useState } from 'react';
+import { Inputs, useEffect, useState } from 'preact/hooks';
 
-export function useAutorunValue<T>(query: () => T): T {
+export function useAutorunValue<T>(query: () => T, inputs: Inputs): T {
   const [value, setValue] = useState(query);
-  useAutorun(() => {
-    setValue(query());
-  });
+  useEffect(() => {
+    return autorun(() => {
+      setValue(query());
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, inputs);
   return value;
 }
 
-export function useAutorun(
-  view: (r: IReactionPublic) => unknown,
-  opts?: IAutorunOptions
-): void {
-  useEffect(() => autorun(view, opts), [view, opts]);
-}
-
 export function toDirective<Props>(
   component: FunctionComponent<Props>,
   scope: Record<string, '=' | '&'> = {}
@@ -37,10 +30,7 @@ export function toDirective<Props>(
           }
           return {
             $onChanges() {
-              render(
-                h(component, $scope),
-                $element[0]
-              );
+              render(h(component, $scope), $element[0]);
             },
           };
         },