fix hooks

Author: pengx17

package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "@logseq/libs": "^0.0.1-alpha.10",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react-dom": "^17.0.0",
+    "react-use": "^17.2.4"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

src/App.tsx

@@ -1,35 +1,21 @@
-import React, { useRef, useState } from "react";
-
-const useAppVisible = () => {
-  const [visible, setVisible] = useState(logseq.isMainUIVisible);
-  React.useEffect(() => {
-    const eventName = "ui:visible:changed";
-    const handler = async ({ visible }: any) => {
-      setVisible(visible);
-    };
-    logseq.on(eventName, handler);
-    return () => {
-      logseq.off(eventName, handler);
-    };
-  }, []);
-  return visible;
-};
+import React, { useRef } from "react";
+import { useAppVisible } from "./utils";
 
 function App() {
   const innerRef = useRef<HTMLDivElement>(null);
   const visible = useAppVisible();
   if (visible) {
     return (
-      <main
-        className="backdrop-filter backdrop-blur-md top-0 bottom-0 left-0 right-0 fixed flex items-center justify-center"
+      <main        
+        className="backdrop-filter backdrop-blur-md fixed inset-0 flex items-center justify-center"
         onClick={(e) => {
           if (!innerRef.current?.contains(e.target as any)) {
             window.logseq.hideMainUI();
           }
         }}
       >
         <div ref={innerRef} className="text-size-2em">
-          Welcome to Logseq Plugins!
+          Welcome to [[Logseq]] Plugins!
         </div>
       </main>
     );

src/utils.ts

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { useMountedState } from "react-use";
+
+export const useAppVisible = () => {
+  const [visible, setVisible] = useState(logseq.isMainUIVisible);
+  const isMounted = useMountedState();
+  React.useEffect(() => {
+    const eventName = "ui:visible:changed";
+    const handler = async ({ visible }: any) => {
+      if (isMounted()) {
+        setVisible(visible);
+      }
+    };
+    logseq.on(eventName, handler);
+    return () => {
+      logseq.off(eventName, handler);
+    };
+  }, []);
+  return visible;
+};
+
+export const useSidebarVisible = () => {
+  const [visible, setVisible] = useState(false);
+  const isMounted = useMountedState();
+  React.useEffect(() => {
+    logseq.App.onSidebarVisibleChanged(({ visible }) => {
+      if (isMounted()) {
+        setVisible(visible);
+      }
+    });
+  }, []);
+  return visible;
+};