Assorted cleanup, minor bug fixes, styling fixes, eslint rules (#5165

* fix: Logic error in toast
fix: Remove useless component

* fix: Logout not clearing all stores

* Add icons to notification settings

* Add eslint rule to enforce spaced comment

* Add eslint rule for arrow-body-style

* Add eslint rule to enforce self-closing components

* Add menu to api key settings
Fix: Deleting webhook subscription does not remove from UI
Split webhook subscriptions into active and inactive
Styling updates

app/hooks/useBuildTheme.ts

@@ -21,17 +21,19 @@ export default function useBuildTheme(customTheme: Partial<CustomTheme> = {}) {
   const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
   const isPrinting = useMediaQuery("print");
 
-  const theme = React.useMemo(() => {
-    return isPrinting
-      ? buildLightTheme(customTheme)
-      : isMobile
-      ? ui.resolvedTheme === "dark"
-        ? buildPitchBlackTheme(customTheme)
-        : buildLightTheme(customTheme)
-      : ui.resolvedTheme === "dark"
-      ? buildDarkTheme(customTheme)
-      : buildLightTheme(customTheme);
-  }, [customTheme, isMobile, isPrinting, ui.resolvedTheme]);
+  const theme = React.useMemo(
+    () =>
+      isPrinting
+        ? buildLightTheme(customTheme)
+        : isMobile
+        ? ui.resolvedTheme === "dark"
+          ? buildPitchBlackTheme(customTheme)
+          : buildLightTheme(customTheme)
+        : ui.resolvedTheme === "dark"
+        ? buildDarkTheme(customTheme)
+        : buildLightTheme(customTheme),
+    [customTheme, isMobile, isPrinting, ui.resolvedTheme]
+  );
 
   return theme;
 }

app/hooks/useDictionary.ts

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 export default function useDictionary() {
   const { t } = useTranslation();
 
-  return React.useMemo(() => {
-    return {
+  return React.useMemo(
+    () => ({
       addColumnAfter: t("Insert column after"),
       addColumnBefore: t("Insert column before"),
       addRowAfter: t("Insert row after"),
@@ -79,8 +79,9 @@ export default function useDictionary() {
       insertDate: t("Current date"),
       insertTime: t("Current time"),
       insertDateTime: t("Current date and time"),
-    };
-  }, [t]);
+    }),
+    [t]
+  );
 }
 
 export type Dictionary = ReturnType<typeof useDictionary>;

app/hooks/useSettingsActions.tsx

@@ -7,18 +7,20 @@ import useSettingsConfig from "./useSettingsConfig";
 
 const useSettingsActions = () => {
   const config = useSettingsConfig();
-  const actions = React.useMemo(() => {
-    return config.map((item) => {
-      const Icon = item.icon;
-      return {
-        id: item.path,
-        name: item.name,
-        icon: <Icon color="currentColor" />,
-        section: NavigationSection,
-        perform: () => history.push(item.path),
-      };
-    });
-  }, [config]);
+  const actions = React.useMemo(
+    () =>
+      config.map((item) => {
+        const Icon = item.icon;
+        return {
+          id: item.path,
+          name: item.name,
+          icon: <Icon color="currentColor" />,
+          section: NavigationSection,
+          perform: () => history.push(item.path),
+        };
+      }),
+    [config]
+  );
 
   const navigateToSettings = React.useMemo(
     () =>

app/hooks/useSettingsConfig.ts

@@ -160,16 +160,18 @@ const useSettingsConfig = () => {
         icon: ExportIcon,
       },
       // Integrations
-      ...mapValues(PluginLoader.plugins, (plugin) => {
-        return {
-          name: plugin.config.name,
-          path: integrationSettingsPath(plugin.id),
-          group: t("Integrations"),
-          component: plugin.settings,
-          enabled: !!plugin.settings && can.update,
-          icon: plugin.icon,
-        } as ConfigItem;
-      }),
+      ...mapValues(
+        PluginLoader.plugins,
+        (plugin) =>
+          ({
+            name: plugin.config.name,
+            path: integrationSettingsPath(plugin.id),
+            group: t("Integrations"),
+            component: plugin.settings,
+            enabled: !!plugin.settings && can.update,
+            icon: plugin.icon,
+          } as ConfigItem)
+      ),
       SelfHosted: {
         name: t("Self Hosted"),
         path: integrationSettingsPath("self-hosted"),

app/hooks/useUnmount.ts

@@ -4,11 +4,12 @@ const useUnmount = (callback: (...args: Array<any>) => any) => {
   const ref = React.useRef(callback);
   ref.current = callback;
 
-  React.useEffect(() => {
-    return () => {
+  React.useEffect(
+    () => () => {
       ref.current();
-    };
-  }, []);
+    },
+    []
+  );
 };
 
 export default useUnmount;