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/components/Sidebar/components/Collections.tsx

@@ -34,9 +34,7 @@ function Collections() {
         fractionalIndex(null, orderedCollections[0].index)
       );
     },
-    canDrop: (item) => {
-      return item.id !== orderedCollections[0].id;
-    },
+    canDrop: (item) => item.id !== orderedCollections[0].id,
     collect: (monitor) => ({
       isCollectionDropping: monitor.isOver(),
       isDraggingAnyCollection: monitor.getItemType() === "collection",

app/components/Sidebar/components/DocumentLink.tsx

@@ -76,18 +76,20 @@ function InnerDocumentLink(
     [collection, node]
   );
 
-  const showChildren = React.useMemo(() => {
-    return !!(
-      hasChildDocuments &&
-      activeDocument &&
-      collection &&
-      (collection
-        .pathToDocument(activeDocument.id)
-        .map((entry) => entry.id)
-        .includes(node.id) ||
-        isActiveDocument)
-    );
-  }, [hasChildDocuments, activeDocument, isActiveDocument, node, collection]);
+  const showChildren = React.useMemo(
+    () =>
+      !!(
+        hasChildDocuments &&
+        activeDocument &&
+        collection &&
+        (collection
+          .pathToDocument(activeDocument.id)
+          .map((entry) => entry.id)
+          .includes(node.id) ||
+          isActiveDocument)
+      ),
+    [hasChildDocuments, activeDocument, isActiveDocument, node, collection]
+  );
 
   const [expanded, setExpanded] = React.useState(showChildren);
 

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -56,12 +56,9 @@ function DraggableCollectionLink({
         fractionalIndex(collection.index, belowCollectionIndex)
       );
     },
-    canDrop: (item) => {
-      return (
-        collection.id !== item.id &&
-        (!belowCollection || item.id !== belowCollection.id)
-      );
-    },
+    canDrop: (item) =>
+      collection.id !== item.id &&
+      (!belowCollection || item.id !== belowCollection.id),
     collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
       isCollectionDropping: monitor.isOver(),
       isDraggingAnyCollection: monitor.canDrop(),

app/components/Sidebar/components/NavLink.tsx

@@ -21,15 +21,13 @@ const resolveToLocation = (
 const normalizeToLocation = (
   to: LocationDescriptor,
   currentLocation: Location
-) => {
-  return typeof to === "string"
+) =>
+  typeof to === "string"
     ? createLocation(to, null, undefined, currentLocation)
     : to;
-};
 
-const joinClassnames = (...classnames: (string | undefined)[]) => {
-  return classnames.filter((i) => i).join(" ");
-};
+const joinClassnames = (...classnames: (string | undefined)[]) =>
+  classnames.filter((i) => i).join(" ");
 
 export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   activeClassName?: string;
@@ -103,16 +101,13 @@ const NavLink = ({
   }, [linkRef, scrollIntoViewIfNeeded, isActive]);
 
   const shouldFastClick = React.useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>): boolean => {
-      return (
-        event.button === 0 && // Only intercept left clicks
-        !event.defaultPrevented &&
-        !rest.target &&
-        !event.altKey &&
-        !event.metaKey &&
-        !event.ctrlKey
-      );
-    },
+    (event: React.MouseEvent<HTMLAnchorElement>): boolean =>
+      event.button === 0 && // Only intercept left clicks
+      !event.defaultPrevented &&
+      !rest.target &&
+      !event.altKey &&
+      !event.metaKey &&
+      !event.ctrlKey,
     [rest.target]
   );
 
@@ -153,7 +148,7 @@ const NavLink = ({
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
-      //onMouseDown={handleClick}
+      // onMouseDown={handleClick}
       onKeyDown={(event) => {
         if (["Enter", " "].includes(event.key)) {
           navigateTo();

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -42,9 +42,9 @@ function DocumentLink(
     !!node.children.length || activeDocument?.parentDocumentId === node.id;
   const document = documents.get(node.id);
 
-  const showChildren = React.useMemo(() => {
-    return !!hasChildDocuments;
-  }, [hasChildDocuments]);
+  const showChildren = React.useMemo(() => !!hasChildDocuments, [
+    hasChildDocuments,
+  ]);
 
   const [expanded, setExpanded] = React.useState(showChildren);
 
@@ -111,9 +111,7 @@ function DocumentLink(
         scrollIntoViewIfNeeded={!document?.isStarred}
         isDraft={isDraft}
         ref={ref}
-        isActive={() => {
-          return !!isActiveDocument;
-        }}
+        isActive={() => !!isActiveDocument}
       />
       {expanded &&
         nodeChildren.map((childNode, index) => (

app/components/Sidebar/components/Starred.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import Star from "~/models/Star";
 import Flex from "~/components/Flex";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
@@ -22,7 +21,6 @@ function Starred() {
   const [displayedStarsCount, setDisplayedStarsCount] = React.useState(
     STARRED_PAGINATION_LIMIT
   );
-  const { showToast } = useToasts();
   const { stars } = useStores();
   const { t } = useTranslation();
 
@@ -34,13 +32,10 @@ function Starred() {
           offset,
         });
       } catch (error) {
-        showToast(t("Starred documents could not be loaded"), {
-          type: "error",
-        });
         setFetchError(error);
       }
     },
-    [stars, showToast, t]
+    [stars]
   );
 
   React.useEffect(() => {