Merge pull request #177 from Etheonor/feature/clean

Eslint massive clean
Etheonor · Jan 15, 2022 · 390a529 · 390a529
2 parents 8579861 + d8f3af6
commit 390a529
Show file tree

Hide file tree

Showing 47 changed files with 1,281 additions and 437 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,20 +8,30 @@
     "extends": [
         "next",
         "next/core-web-vitals",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:sonarjs/recommended",
+        "plugin:unicorn/recommended"
     ],
     "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
+        "project": [
+            "./tsconfig.json"
+        ]
     },
+    "parser": "@typescript-eslint/parser",
+    "ignorePatterns": [
+        "node_modules/*",
+        ".next/*",
+        ".out/*",
+        "!.prettierrc.js",
+        "types/*",
+        "next-env.d.ts"
+    ],
     "plugins": [
         "@typescript-eslint",
         "cypress",
         "simple-import-sort",
-        "prettier"
+        "prettier",
+        "sonarjs"
     ],
     "rules": {
         "no-console": "off",
@@ -61,6 +71,16 @@
                 "allowHigherOrderFunctions": true,
                 "allowConciseArrowFunctionExpressionsStartingWithVoid": true
             }
+        ],
+        "unicorn/no-null": "off",
+        "unicorn/filename-case": [
+            "error",
+            {
+                "cases": {
+                    "camelCase": true,
+                    "pascalCase": true
+                }
+            }
         ]
     },
     "settings": {

diff --git a/.estlintignore b/.estlintignore
@@ -1,3 +1,4 @@
 .next
 dist
-node_modules/
+node_modules/
+types/
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 ## Welcome to SupaNexTail!
 
 ## Documentation 2.0
-A new documentation is available here : https://doc.supanextail.dev/ 
 
+A new documentation is available here : https://doc.supanextail.dev/
 
 ## ![](https://lh4.googleusercontent.com/0qrns6BGMEh95de3BAE12YRRJceEACWdH09Yj6r7J5MswKG_R6zv7jcHEOUWFiWa7_2Yr6n6m0gSHg7iLa4lb-E0jEqZH6uJHJg3aNjbYO9LGWtCVV4dIi6BKKYUAMiFfvEOtefl)
 
@@ -18,7 +18,7 @@ Simply follow the installation process. You need to have some knowledge with Rea
 
 #### SupaNexTail project
 
-You'll need to fork this repository. I suggest to keep your repository sync with SupaNexTail, in order to get all future updates. 
+You'll need to fork this repository. I suggest to keep your repository sync with SupaNexTail, in order to get all future updates.
 
 To do that, you'll have extended information on this page: https://docs.github.com/en/github/collaborating-with-pull-requests/working-with-forks/syncing-a-fork
 
@@ -79,7 +79,7 @@ Notes:
 If you want to use Stripe, be sure to set up your webhooks in the dashboard. If you want to test it locally, install Stripe CLI and use this command line:
 
 ```
-stripe listen --forward-to localhost:3000/api/stripe/stripe-webhook
+stripe listen --forward-to localhost:3000/api/stripe/webhook
 ```
 
 The two event needed are:

diff --git a/components/Avatar.tsx b/components/Avatar.tsx
@@ -9,25 +9,25 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { supabase } from 'utils/supabaseClient';
 
-type AvatarProps = {
+type AvatarProperties = {
   url: string;
   size: number;
   onUpload: (filePath: string) => void;
 };
 
-const Avatar = ({ url, size, onUpload }: AvatarProps): JSX.Element => {
+const customImgLoader = ({ src }: { src: string }): string => {
+  return `${src}`;
+};
+
+const Avatar = ({ url, size, onUpload }: AvatarProperties): JSX.Element => {
   const [avatarUrl, setAvatarUrl] = useState('');
   const [uploading, setUploading] = useState(false);
 
-  const customImgLoader = ({ src }: { src: string }) => {
-    return `${src}`;
-  };
-
   useEffect(() => {
-    if (url) downloadImage(url);
+    if (url) void downloadImage(url);
   }, [url]);
 
-  async function downloadImage(path: string) {
+  async function downloadImage(path: string): Promise<void> {
     try {
       const { data, error } = await supabase.storage
         .from('avatars')
@@ -41,12 +41,14 @@ const Avatar = ({ url, size, onUpload }: AvatarProps): JSX.Element => {
       }
     } catch (error: unknown) {
       if (error instanceof Error) {
-        console.log('Error downloading image: ', error.message);
+        console.log('Error downloading image:', error.message);
       }
     }
   }
 
-  async function uploadAvatar(event: React.ChangeEvent<HTMLInputElement>) {
+  async function uploadAvatar(
+    event: React.ChangeEvent<HTMLInputElement>
+  ): Promise<void> {
     try {
       setUploading(true);
 
@@ -55,11 +57,11 @@ const Avatar = ({ url, size, onUpload }: AvatarProps): JSX.Element => {
       }
 
       const file = event.target.files[0];
-      const fileExt = file.name.split('.').pop();
-      const fileName = `${Math.random()}.${fileExt}`;
+      const fileExtension = file.name.split('.').pop();
+      const fileName = fileExtension ? `${Math.random()}.${fileExtension}` : '';
       const filePath = `${fileName}`;
 
-      if (event.target.files[0].size > 150000) {
+      if (event.target.files[0].size > 150_000) {
         alert('File is too big!');
         event.target.value = '';
         setUploading(false);

diff --git a/components/CardsLanding.tsx b/components/CardsLanding.tsx
@@ -19,37 +19,37 @@ const CardsLanding = (): JSX.Element => (
     </p>
     <div className="flex flex-wrap justify-center mt-10">
       <CardLanding
-        image={cardPage}
+        image={cardPage as string}
         text="7 pages fully designed and easily customizable"
         title="Templates"
       />
       <CardLanding
-        image={cardServer}
+        image={cardServer as string}
         text="Integrated backend already setup with Next.js API Routes"
         title="Backend"
       />
       <CardLanding
-        image={cardAuth}
+        image={cardAuth as string}
         text="Auth and user management with Supabase"
         title="Auth"
       />
       <CardLanding
-        image={cardResponsive}
+        image={cardResponsive as string}
         text="Mobile ready, fully responsive and customizable with Tailwind CSS"
         title="Responsive"
       />
       <CardLanding
-        image={cardTheme}
+        image={cardTheme as string}
         text="Custom themes available and easily switch to dark mode"
         title="Themes"
       />
       <CardLanding
-        image={cardStripe}
+        image={cardStripe as string}
         text="Stripe integration. Fully functional subscription system"
         title="Payment"
       />
       <CardLanding
-        image={cardFee}
+        image={cardFee as string}
         text="One-time fee. No subscription, you’ll have access to all the updates"
         title="Lifetime access"
       />

diff --git a/components/Contact.tsx b/components/Contact.tsx
@@ -9,39 +9,47 @@ the axios.post here, line 18.
 import axios from 'axios';
 import { toast } from 'react-toastify';
 
-const Contact = (): JSX.Element => {
-  const sendEmail = () => {
-    const name = (document.getElementById('name') as HTMLInputElement).value;
-    const email = (document.getElementById('email') as HTMLInputElement).value;
-    const message = (document.getElementById('message') as HTMLInputElement)
-      .value;
+const sendEmail = (): void => {
+  const name = (document.querySelector('#name') as HTMLInputElement).value;
+  const email = (document.querySelector('#email') as HTMLInputElement).value;
+  const message = (document.querySelector('#message') as HTMLInputElement)
+    .value;
 
-    if (name && email && message) {
-      axios
-        .post('/api/sendgrid', { email, name, message })
-        .then((result) => {
+  if (name && email && message) {
+    axios
+      .post('/api/sendgrid', { email, name, message })
+      .then(
+        (result: {
+          data: {
+            success: boolean;
+            message: string;
+          };
+        }) => {
           if (result.data.success === true) {
             toast.success(result.data.message);
-            (document.getElementById('name') as HTMLInputElement).value = '';
-            (document.getElementById('email') as HTMLInputElement).value = '';
-            (document.getElementById('message') as HTMLInputElement).value = '';
+            (document.querySelector('#name') as HTMLInputElement).value = '';
+            (document.querySelector('#email') as HTMLInputElement).value = '';
+            (document.querySelector('#message') as HTMLInputElement).value = '';
           }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } else {
-      toast.info('Please fill all the fields ', {
-        position: 'top-center',
-        autoClose: 2000,
-        hideProgressBar: true,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
+        }
+      )
+      .catch((error) => {
+        console.log(error);
       });
-    }
-  };
+  } else {
+    toast.info('Please fill all the fields ', {
+      position: 'top-center',
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  }
+};
+
+const Contact = (): JSX.Element => {
   return (
     <div className="max-w-xl px-5 py-10 m-auto">
       <div>
@@ -87,8 +95,8 @@ const Contact = (): JSX.Element => {
         <button
           type="button"
           className="btn btn-primary btn-sm"
-          onClick={(e) => {
-            e.preventDefault();
+          onClick={(event) => {
+            event.preventDefault();
             sendEmail();
           }}>
           Submit{' '}

diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
@@ -16,7 +16,7 @@ import { supabase } from '../utils/supabaseClient';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
 
-type DashboardProps = {
+type DashboardProperties = {
   profile: { username: string; website: string; avatar_url: string };
   session: Session;
   planName: string;
@@ -26,7 +26,7 @@ const Dashboard = ({
   profile,
   session,
   planName,
-}: DashboardProps): JSX.Element => {
+}: DashboardProperties): JSX.Element => {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [username, setUsername] = useState(profile?.username || '');
@@ -48,7 +48,7 @@ const Dashboard = ({
     username: string;
     website: string;
     avatar_url: string;
-  }) {
+  }): Promise<void> {
     try {
       setLoading(true);
       const user = supabase.auth.user();
@@ -89,7 +89,7 @@ const Dashboard = ({
           size={150}
           onUpload={(url) => {
             setAvatarUrl(url);
-            updateProfile({ username, website, avatar_url: url });
+            void updateProfile({ username, website, avatar_url: url });
           }}
         />
         <div className="flex flex-col mb-5">
@@ -113,7 +113,7 @@ const Dashboard = ({
             id="username"
             type="text"
             value={username || ''}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(event) => setUsername(event.target.value)}
           />
         </div>
         <div className="flex flex-col mb-5">
@@ -125,7 +125,7 @@ const Dashboard = ({
             id="website"
             type="website"
             value={website || ''}
-            onChange={(e) => setWebsite(e.target.value)}
+            onChange={(event) => setWebsite(event.target.value)}
           />
         </div>
 
@@ -140,7 +140,7 @@ const Dashboard = ({
       </div>
 
       <div className="flex flex-row flex-wrap w-full max-w-xl p-5 m-auto my-5 border-2 shadow-lg bordered border-primary">
-        <Image src={Plan} alt="credit card" />
+        <Image src={Plan as string} alt="credit card" />
         <div className="flex flex-col m-auto">
           <h2>Your current plan</h2>
           <p className="">{planName}</p>

diff --git a/components/Landing.tsx b/components/Landing.tsx
@@ -20,7 +20,7 @@ const Landing = (): JSX.Element => (
       </div>
       <div className="max-w-xl">
         <Image
-          src={landTop}
+          src={landTop as string}
           height={417}
           width={583}
           alt="Construction of a website"
@@ -40,7 +40,7 @@ const Landing = (): JSX.Element => (
         </p>
       </div>
       <div className="max-w-xl">
-        <Image src={start} alt="screenshot of the website" />
+        <Image src={start as string} alt="screenshot of the website" />
       </div>
     </div>
     <div className="flex flex-wrap justify-around max-w-6xl m-auto mt-24">
@@ -60,7 +60,10 @@ const Landing = (): JSX.Element => (
         </p>
       </div>
       <div className="flex order-2 max-w-md lg:order-1">
-        <Image src={supabaseImage} alt="screenshot of the Supabase website" />
+        <Image
+          src={supabaseImage as string}
+          alt="screenshot of the Supabase website"
+        />
       </div>
     </div>
     <MailingList />

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -18,11 +18,11 @@ import Nav from './Nav';
 import { ToastContainer } from 'react-toastify';
 import { useAuth } from 'utils/AuthContext';
 
-type LayoutProps = {
+type LayoutProperties = {
   children: JSX.Element;
 };
 
-const Layout = ({ children }: LayoutProps): JSX.Element => {
+const Layout = ({ children }: LayoutProperties): JSX.Element => {
   const { user, signOut } = useAuth();
 
   return (