refactor(eslint): update eslint rules

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      {
+        "functions": false,
+        "classes": true,
+        "variables": true,
+        "typedefs": true
+      }
+    ],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "import/extensions": "off",
+    "react/prop-types": "off",
+    "header/header": "off",
+    "consistent-return": "off",
+    "import/no-dynamic-require": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-object-spread": "warn",
+    "@next/next/no-img-element": "off"
+  }
+}

package.json

@@ -155,7 +155,11 @@
     "@types/browser-image-compression": "1.0.9",
     "@types/react-tag-input": "6.6.1",
     "@types/sharedworker": "0.0.88",
+    "@typescript-eslint/eslint-plugin": "5.56.0",
+    "@typescript-eslint/parser": "5.56.0",
     "@webbtc/webln-types": "1.0.10",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
     "eslint-plugin-unused-imports": "2.0.0"
   }
 }

src/components/ContributorCalendar/Calendar.tsx

@@ -4,10 +4,10 @@ import Calendar from 'react-github-contribution-calendar';
 import { Event, WellKnownEventKind } from 'service/api';
 import { CallRelayType } from 'service/worker/type';
 
-var panelColors = ['#EEEEEE', '#D6E685', '#8CC665', '#44A340', '#1E6823'];
-var panelAttributes = { rx: 6, ry: 6 };
-var weekNames = ['s', 'm', 't', 'w', 't', 'f', 's'];
-var monthNames = [
+const panelColors = ['#EEEEEE', '#D6E685', '#8CC665', '#44A340', '#1E6823'];
+const panelAttributes = { rx: 6, ry: 6 };
+const weekNames = ['s', 'm', 't', 'w', 't', 'f', 's'];
+const monthNames = [
   '1',
   '2',
   '3',

src/components/inputs/Select.tsx

@@ -6,26 +6,16 @@ import {
   SelectChangeEvent,
 } from '@mui/material';
 
-interface Props<T> {
-  options: T[];
-  callBack: (option: string) => any;
-  defaultOption?: string;
-}
-
-const SimpleSelect = <T extends unknown>({
+const SimpleSelect = ({
   options,
   callBack,
-  defaultOption,
-}: Props<T>) => {
-  const [value, setValue] = useState<string>(defaultOption || '');
+  defaultOption = '',
+}) => {
+  const [value, setValue] = useState<string>(defaultOption);
 
-  const handleChange = (event: SelectChangeEvent<string>) => {
-    setValue(event.target.value);
-  };
+  const handleChange = (event: SelectChangeEvent<string>) => setValue(event.target.value);
 
-  useEffect(() => {
-    callBack(value);
-  }, [value]);
+  useEffect(() => callBack(value), [value]);
 
   return (
     <FormControl>

src/components/layout/BaseLayout.tsx

@@ -146,6 +146,20 @@ export interface BaseLayoutProps {
   };
 }
 
+export interface LeftProps {
+  children: React.ReactNode;
+}
+export const Left: React.FC<LeftProps> = ({ children }) => (
+  <div>{children}</div>
+);
+
+export interface RightProps {
+  children?: React.ReactNode;
+}
+export const Right: React.FC<RightProps> = ({ children }) => (
+  <div>{children}</div>
+);
+
 export const BaseLayout: React.FC<BaseLayoutProps> = ({
   children,
   silent,
@@ -199,14 +213,14 @@ export const BaseLayout: React.FC<BaseLayoutProps> = ({
     }
   }, [newConn]);
 
-  const left: React.ReactNode[] = [];
-  const right: React.ReactNode[] = [];
+  const leftNodes: React.ReactNode[] = [];
+  const rightNodes: React.ReactNode[] = [];
   React.Children.forEach(children, (child: React.ReactNode) => {
     if (React.isValidElement(child) && child.type === Left) {
-      left.push(child);
+      leftNodes.push(child);
     }
     if (React.isValidElement(child) && child.type === Right) {
-      right.push(child);
+      rightNodes.push(child);
     }
   });
 
@@ -284,7 +298,7 @@ export const BaseLayout: React.FC<BaseLayoutProps> = ({
                 </div>
               </Hidden>
 
-              <div style={styles.left}>{left}</div>
+              <div style={styles.left}>{leftNodes}</div>
             </Grid>
             <Grid
               item
@@ -317,7 +331,7 @@ export const BaseLayout: React.FC<BaseLayoutProps> = ({
                 </div>
               </Hidden>
 
-              <div>{right}</div>
+              <div>{rightNodes}</div>
 
               <Hidden mdUp>
                 <div
@@ -354,17 +368,3 @@ export const BaseLayout: React.FC<BaseLayoutProps> = ({
     </div>
   );
 };
-
-export interface LeftProps {
-  children: React.ReactNode;
-}
-export const Left: React.FC<LeftProps> = ({ children }) => (
-  <div>{children}</div>
-);
-
-export interface RightProps {
-  children?: React.ReactNode;
-}
-export const Right: React.FC<RightProps> = ({ children }) => (
-  <div>{children}</div>
-);

src/components/layout/DiscoverFriend.tsx

@@ -1,8 +1,18 @@
 import Link from 'next/link';
+import { Paths } from 'constants/path';
 import { UserMap } from 'service/type';
 import { ProfileAvatar } from './msg/TextMsg';
 import { useTranslation } from 'next-i18next';
-import { Paths } from 'constants/path';
+
+export const UserName = ({ name, pk }: { name?: string; pk: string }) => {
+  return (
+    <div>
+      <Link style={{ fontSize: '14px' }} href={`${Paths.user + pk}`}>
+        @{name || '__'}
+      </Link>
+    </div>
+  );
+};
 
 export const DiscoveryFriend = ({
   pks,
@@ -50,13 +60,3 @@ export const DiscoveryFriend = ({
     </div>
   );
 };
-
-export const UserName = ({ name, pk }: { name?: string; pk: string }) => {
-  return (
-    <div>
-      <Link style={{ fontSize: '14px' }} href={`${Paths.user + pk}`}>
-        @{name || '__'}
-      </Link>
-    </div>
-  );
-};

src/components/layout/LoginCard.tsx

@@ -154,8 +154,7 @@ const LoginCard = ({
       return;
     }
 
-    let pubKey = getPublicKey(privKey);
-
+    const pubKey = getPublicKey(privKey);
     const loginRequest: LoginRequest = {
       mode: LoginMode.local,
       publicKey: pubKey,

src/components/layout/NavHeader.tsx

@@ -48,33 +48,6 @@ export interface NavHeaderProps {
   link?: string;
 }
 
-export function NavHeader({ title, link }: NavHeaderProps) {
-  const { t } = useTranslation();
-
-  return (
-    <Grid container>
-      <Grid item xs={12} sm={6}>
-        <div>
-          <Grid container>
-            <div style={styles.title}>
-              <Link href={link || Paths.home}>
-                {title || t('nav.menu.home')}
-              </Link>
-            </div>
-          </Grid>
-        </div>
-      </Grid>
-      {
-        <Grid item xs={12} sm={6}>
-          <div style={{ textAlign: 'right' }}>
-            <SearchBox />
-          </div>
-        </Grid>
-      }
-    </Grid>
-  );
-}
-
 export const SearchBox = () => {
   return (
     <div
@@ -119,6 +92,33 @@ export const SearchBox = () => {
   );
 };
 
+export function NavHeader({ title, link }: NavHeaderProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={12} sm={6}>
+        <div>
+          <Grid container>
+            <div style={styles.title}>
+              <Link href={link || Paths.home}>
+                {title || t('nav.menu.home')}
+              </Link>
+            </div>
+          </Grid>
+        </div>
+      </Grid>
+      {
+        <Grid item xs={12} sm={6}>
+          <div style={{ textAlign: 'right' }}>
+            <SearchBox />
+          </div>
+        </Grid>
+      }
+    </Grid>
+  );
+}
+
 export const MenuListDefault = connect(loginMapStateToProps)(Nav);
 
 export const LoginFormTip = ({