style: apply new rules

pure-js · Nov 9, 2024 · c785c8d · c785c8d
1 parent 92e41be
commit c785c8d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 34 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -4,9 +4,9 @@ env:
   node: true
 extends:
   # - love
-  - plugin:@typescript-eslint/recommended
-  - plugin:react/recommended
+  - plugin:@typescript-eslint/strict
   - plugin:react/jsx-runtime
+  - plugin:react/all
   - prettier
 parser: '@typescript-eslint/parser'
 parserOptions:
@@ -16,5 +16,12 @@ plugins:
   - react
   - '@typescript-eslint'
 rules:
+  'react/jsx-filename-extension': [2, { 'extensions': ['.tsx'] }]
   '@typescript-eslint/explicit-function-return-type': 'off'
+  'react/react-in-jsx-scope': 'off'
+  'react/jsx-uses-react': 'off'
+  'react/jsx-curly-brace-presence': 'off'
+  'react/jsx-max-depth': 'off'
+  'react/jsx-no-bind': 'off'
+  # '@typescript-eslint/naming-convention': 'error'
 root: true
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -6,8 +6,8 @@ export default function Error({
   error,
   reset,
 }: {
-  error: Error;
-  reset: () => void;
+  readonly error: Error;
+  readonly reset: () => void;
 }) {
   useEffect(() => {
     // TODO: Log the error to an error reporting service
@@ -16,14 +16,14 @@ export default function Error({
 
   return (
     <div>
-      <h2>Something went wrong!</h2>
+      <h2>{'Something went wrong!'}</h2>
       <button
-        type="button"
         onClick={() => {
           reset();
         }}
+        type="button"
       >
-        Try again
+        {'Try again'}
       </button>
     </div>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,20 +5,20 @@ import './App.css';
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  readonly children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <head>
         <meta charSet="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Auto Manufacturers</title>
+        <link href="/src/favicon.svg" rel="icon" type="image/svg+xml" />
+        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        <title>{'Auto Manufacturers'}</title>
       </head>
       <body>
         <header className="App-header">
           <h1 className="main-heading">
-            <Link href="/">Vehicle manufacturers</Link>
+            <Link href="/">{'Vehicle manufacturers'}</Link>
           </h1>
         </header>
         {children}

diff --git a/src/app/manufacturers/[id]/page.tsx b/src/app/manufacturers/[id]/page.tsx
@@ -16,7 +16,7 @@ export async function generateStaticParams() {
 export default async function Manufacturer({
   params,
 }: {
-  params: Promise<{ id: string }>;
+  readonly params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
 

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -3,10 +3,10 @@ import Link from 'next/link';
 export default function NotFound() {
   return (
     <div>
-      <h2>Not Found</h2>
-      <p>Could not find requested resource</p>
+      <h2>{'Not Found'}</h2>
+      <p>{'Could not find requested resource'}</p>
       <p>
-        View <Link href="/">main page</Link>
+        {'View'} <Link href="/">{'main page'}</Link>
       </p>
     </div>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,14 +4,14 @@ import Table from '@/components/table';
 
 import { getManufacturers } from '@/api/index';
 
-const HomePage = async () => {
+async function HomePage() {
   const manufacturers = await getManufacturers().then((data) => data.Results);
 
   return (
     <main className={styles.container}>
       <Table manufacturers={manufacturers} />
     </main>
   );
-};
+}
 
 export default HomePage;
diff --git a/src/components/loader/Loader.tsx b/src/components/loader/Loader.tsx
@@ -1,10 +1,12 @@
 import loader from './loader.module.css';
 
-const Loader = () => (
-  <>
-    <div className={loader['loading-icon_animated']} />
-    <h3>Loading...</h3>
-  </>
-);
+function Loader() {
+  return (
+    <>
+      <div className={loader['loading-icon_animated']} />
+      <h3>{'Loading...'}</h3>
+    </>
+  );
+}
 
 export default Loader;
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
@@ -11,7 +11,7 @@ import '@/helpers/helpers.css';
 import table from './table.module.css';
 
 interface TableProps {
-  manufacturers:
+  readonly manufacturers:
     | [
         {
           Mfr_ID: number;
@@ -23,18 +23,18 @@ interface TableProps {
     | null;
 }
 
-const Table = ({ manufacturers }: TableProps) => {
+function Table({ manufacturers }: TableProps) {
   const router = useRouter();
 
   return (
     <table className={table.default}>
       <thead>
         <tr>
-          <td className={[table.heading, 'txt-right'].join(' ')}>ID</td>
+          <td className={[table.heading, 'txt-right'].join(' ')}>{'ID'}</td>
           <td className={[table.heading, 'txt-right'].join(' ')}>
-            Common name
+            {'Common name'}
           </td>
-          <td className={table.heading}>Country</td>
+          <td className={table.heading}>{'Country'}</td>
           <td className={table.heading} />
         </tr>
       </thead>
@@ -46,7 +46,7 @@ const Table = ({ manufacturers }: TableProps) => {
             Mfr_CommonName: name,
             Mfr_Name: legalName,
           }) => (
-            <tr key={id} className={table.row}>
+            <tr className={table.row} key={id}>
               <td
                 className={[table.cell, 'txt-right', table.cell_secondary].join(
                   ' ',
@@ -62,15 +62,15 @@ const Table = ({ manufacturers }: TableProps) => {
               </td>
               <td>
                 <a
+                  className={table.cell__link}
+                  href={`/manufacturers/${id}`}
                   onClick={(e) => {
                     e.preventDefault();
                     router.push(`/manufacturers/${id}`);
                   }}
-                  href={`/manufacturers/${id}`}
-                  className={table.cell__link}
                   title="View Manufacturer Details"
                 >
-                  <ArrowTopRightOnSquareIcon width={18} height={18} />
+                  <ArrowTopRightOnSquareIcon height={18} width={18} />
                 </a>
               </td>
             </tr>
@@ -79,5 +79,5 @@ const Table = ({ manufacturers }: TableProps) => {
       </tbody>
     </table>
   );
-};
+}
 export default Table;