refactor: run eslint on the whole project

.eslintignore

@@ -0,0 +1,14 @@
+# all
+build
+coverage
+node_modules
+dist
+
+# mobile
+apps/mobile/native/
+
+# web
+apps/web/public/an.js
+
+# editor
+packages/editor/styles/

.eslintrc.js

@@ -0,0 +1,74 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime"
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  plugins: [
+    "react",
+    "@typescript-eslint",
+    "unused-imports",
+    "detox",
+    "jest",
+    "react-native"
+  ],
+  rules: {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_"
+      }
+    ],
+    "linebreak-style": ["error", "unix"],
+    quotes: [
+      "error",
+      "double",
+      { avoidEscape: true, allowTemplateLiterals: true }
+    ],
+    semi: ["error", "always"],
+    "@typescript-eslint/no-empty-function": "off",
+    "react/prop-types": "off"
+  },
+  settings: {
+    react: {
+      version: "17"
+    }
+  },
+  overrides: [
+    {
+      files: ["apps/mobile/**/**/*.{jsx,tsx,ts,js}"],
+      env: {
+        "react-native/react-native": true,
+        es2021: true,
+        browser: true,
+        jest: true,
+        "jest/globals": true,
+        "detox/detox": true
+      },
+      rules: {
+        // TODO: remove this gradually
+        "@typescript-eslint/ban-ts-comment": "off"
+      }
+    }
+  ]
+};

apps/mobile/__tests__/App-test.js

@@ -2,7 +2,6 @@
  * @format
  */
 
-import React from "react";
 import "react-native";
 // Note: test renderer must be required after react-native.
 import renderer from "react-test-renderer";

apps/mobile/app/app.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { withErrorBoundry } from "./components/exception-handler";

apps/mobile/app/common/analytics/index.js

@@ -2,12 +2,12 @@ import { Platform } from "react-native";
 import { MMKV } from "../database/mmkv";
 import { useSettingStore } from "../../stores/use-setting-store";
 
-const WEBSITE_ID = `3c6890ce-8410-49d5-8831-15fb2eb28a21`;
-const baseUrl = `https://analytics.streetwriters.co/api/collect`;
+const WEBSITE_ID = "3c6890ce-8410-49d5-8831-15fb2eb28a21";
+const baseUrl = "https://analytics.streetwriters.co/api/collect";
 
 const UA =
   Platform.OS === "ios"
-    ? `Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1`
+    ? "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"
     : `
 Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36`;
 

apps/mobile/app/common/database/encryption.js

@@ -21,10 +21,12 @@ export async function deriveCryptoKey(name, data) {
       KEYSTORE_CONFIG
     );
     return credentials.key;
-  } catch (e) {}
+  } catch (e) {
+    console.error(e);
+  }
 }
 
-export async function getCryptoKey(name) {
+export async function getCryptoKey(_name) {
   try {
     if (await Keychain.hasInternetCredentials("notesnook")) {
       let credentials = await Keychain.getInternetCredentials(
@@ -35,14 +37,18 @@ export async function getCryptoKey(name) {
     } else {
       return null;
     }
-  } catch (e) {}
+  } catch (e) {
+    console.error(e);
+  }
 }
 
-export async function removeCryptoKey(name) {
+export async function removeCryptoKey(_name) {
   try {
     let result = await Keychain.resetInternetCredentials("notesnook");
     return result;
-  } catch (e) {}
+  } catch (e) {
+    console.error(e);
+  }
 }
 
 export async function getRandomBytes(length) {

apps/mobile/app/common/database/storage.js

@@ -99,7 +99,6 @@ async function checkAndCreateDir(path) {
     }
   } catch (e) {
     await RNFetchBlob.fs.mkdir(dir);
-  } finally {
   }
   return dir;
 }

apps/mobile/app/common/filesystem/download.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
 import Sodium from "react-native-sodium";
@@ -138,7 +137,7 @@ export async function downloadAttachment(hash, global = true) {
     console.log("saved file uri: ", fileUri);
 
     presentSheet({
-      title: `File downloaded`,
+      title: "File downloaded",
       paragraph: `${attachment.metadata.filename} saved to ${
         Platform.OS === "android"
           ? "selected path"

apps/mobile/app/common/filesystem/io.js

@@ -35,15 +35,15 @@ export async function writeEncrypted(filename, { data, type, key }) {
   console.log(filepath);
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
   let output = await Sodium.encryptFile(key, {
-    uri: Platform.OS === "ios" ? filepath : `file://` + filepath,
+    uri: Platform.OS === "ios" ? filepath : "file://" + filepath,
     type: "url"
   });
   RNFetchBlob.fs.unlink(filepath).catch(console.log);
 
   console.log("encrypted file output: ", output);
   return {
     ...output,
-    alg: `xcha-stream`
+    alg: "xcha-stream"
   };
 }
 

apps/mobile/app/common/logger/index.ts

@@ -1,17 +1,17 @@
-function info(context: string, ...logs: any[]) {
+function info(context: string, ...logs: unknown[]) {
   console.log(`${new Date().toLocaleDateString()}::info::${context}:`, ...logs);
 }
 
-function error(context: string, ...logs: any[]) {
+function error(context: string, ...logs: unknown[]) {
   console.log(
     `${new Date().toLocaleDateString()}::error::${context}: `,
     ...logs
   );
 }
 
 type Logger = {
-  info: (context: string, ...logs: any[]) => void;
-  error: (context: string, ...logs: any[]) => void;
+  info: (context: string, ...logs: unknown[]) => void;
+  error: (context: string, ...logs: unknown[]) => void;
 };
 
 declare global {

apps/mobile/app/components/announcements/announcement.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { FlatList, View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useMessageStore } from "../../stores/use-message-store";

apps/mobile/app/components/announcements/body.js

@@ -1,11 +1,7 @@
-import React from "react";
-import { useThemeStore } from "../../stores/use-theme-store";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
 export const Body = ({ text, style = {} }) => {
-  const colors = useThemeStore((state) => state.colors);
-
   return (
     <Paragraph
       style={{

apps/mobile/app/components/announcements/cta.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from "../../services/event-manager";
@@ -83,7 +82,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
             ))}
 
           {buttons.length > 1 &&
-            buttons.slice(1, 2).map((item, index) => (
+            buttons.slice(1, 2).map((item) => (
               <Button
                 key={item.title}
                 title={item.title}
@@ -128,7 +127,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
             ))}
 
           {buttons.length > 1 &&
-            buttons.slice(1, 2).map((item, index) => (
+            buttons.slice(1, 2).map((item) => (
               <Button
                 key={item.title}
                 title={item.title}

apps/mobile/app/components/announcements/description.js

@@ -1,11 +1,8 @@
-import React from "react";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
 export const Description = ({ text, style = {}, inline }) => {
-  const colors = useThemeStore((state) => state.colors);
   return (
     <Paragraph
       style={{

apps/mobile/app/components/announcements/functions.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { View } from "react-native";
 import { allowedPlatforms } from "../../stores/use-message-store";
 import { ProFeatures } from "../dialogs/result/pro-features";

apps/mobile/app/components/announcements/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FlatList, View } from "react-native";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useMessageStore } from "../../stores/use-message-store";

apps/mobile/app/components/announcements/list.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
 export const List = ({ items, listType, style = {} }) => {
-  const colors = useThemeStore((state) => state.colors);
-
   return (
     <View
       style={{

apps/mobile/app/components/announcements/photo.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Image } from "react-native";
 import { getStyle } from "./functions";
 

apps/mobile/app/components/announcements/subheading.js

@@ -1,12 +1,8 @@
-import React from "react";
-import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
 
 export const SubHeading = ({ text, style = {} }) => {
-  const colors = useThemeStore((state) => state.colors);
-
   return (
     <Heading
       size={SIZE.md + 2}

apps/mobile/app/components/announcements/title.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
 import { SIZE } from "../../utils/size";

apps/mobile/app/components/attachments/actions.js

@@ -1,5 +1,5 @@
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import picker from "../../screens/editor/tiptap/picker";
@@ -35,8 +35,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
   const colors = useThemeStore((state) => state.colors);
   const contextId = attachment.metadata.hash;
   const [filename, setFilename] = useState(attachment.metadata.filename);
-  const [currentProgress, setCurrentProgress] =
-    useAttachmentProgress(attachment);
+  const [currentProgress] = useAttachmentProgress(attachment);
   const [failed, setFailed] = useState(attachment.failed);
   const [notes, setNotes] = useState([]);
   const [loading, setLoading] = useState({