clipper: added error handling texts

extensions/web-clipper/src/stores/app-store.tsx

@@ -28,6 +28,7 @@ interface AppStore {
   notebooks: NotebookReference[];
   tags: ItemReference[];
   route: string;
+  error: boolean;
 
   login(openNew?: boolean): Promise<void>;
   navigate(route: string): void;
@@ -40,6 +41,7 @@ export const useAppStore = create<AppStore>((set) => ({
   notes: [],
   tags: [],
   route: "/login",
+  error: false,
 
   navigate(route) {
     set({ route });
@@ -55,7 +57,8 @@ export const useAppStore = create<AppStore>((set) => ({
         isLoggingIn: false,
         notes: [],
         notebooks: [],
-        tags: []
+        tags: [],
+        error: true
       });
     });
 

extensions/web-clipper/src/views/login.tsx

@@ -25,6 +25,7 @@ export function Login() {
   const [error, setError] = useState<string>();
   const isLoggingIn = useAppStore((s) => s.isLoggingIn);
   const login = useAppStore((s) => s.login);
+  const disconnectError = useAppStore((s) => s.error);
 
   useEffect(() => {
     (async () => {
@@ -71,6 +72,11 @@ export function Login() {
           {error}
         </Text>
       )}
+      {disconnectError && (
+        <Text variant="error" sx={{ mt: 2 }}>
+          {"Please refresh notesnook app to connect with clipper."}
+        </Text>
+      )}
     </Flex>
   );
 }

extensions/web-clipper/src/views/main.tsx

@@ -83,6 +83,21 @@ const clipModes: { name: string; id: ClipMode; icon: string; pro?: boolean }[] =
     }
   ];
 
+const restrictedUrls = [
+  /chrome:\/\/newtab\//gm,
+  /https:\/\/app\.notesnook\.com\/.*/gm
+];
+
+const errors = {
+  connection: "Could not establish connection. Receiving end does not exist."
+};
+
+function getErrorText(error: string) {
+  if (error === errors.connection)
+    return "Please refresh this page to use the clipper";
+  else return error;
+}
+
 export function Main() {
   const [error, setError] = useState<string>();
   // const [colorMode, setColorMode] = useColorMode();
@@ -109,6 +124,7 @@ export function Main() {
   const [tags, setTags] = usePersistentState<string[]>("tags", []);
   const [clipData, setClipData] = useState<ClipData>();
   const pageTitle = useRef<string>();
+  const [restrictedUrl, setRestrictedUrl] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -117,6 +133,7 @@ export function Main() {
       setTitle(tab?.title ? tab.title : "Untitled");
       setUrl(tab?.url);
       pageTitle.current = tab.title;
+      setRestrictedUrl(restrictedUrls.some((rex) => rex.test(tab.url!)));
     })();
   }, []);
 
@@ -290,12 +307,17 @@ export function Main() {
               setClipNonce((s) => ++s);
             }}
           >
-            {error}
-            <br />
-            Click here to retry.
+            {restrictedUrl ? (
+              "This site is restricted"
+            ) : (
+              <>
+                {getErrorText(error)}
+                <br />
+                Click here to retry.
+              </>
+            )}
           </Text>
         )}
-
         <Text
           variant="subtitle"
           sx={{ mt: 1, mb: 2, color: "icon", fontSize: "body" }}