Clean code (prettier/eslint) + update packages

Feature/clean
Etheonor · Dec 26, 2021 · 8579861 · 8579861
2 parents ab9e373 + 450f8b0
commit 8579861
Show file tree

Hide file tree

Showing 50 changed files with 2,403 additions and 2,149 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,8 +8,7 @@
     "extends": [
         "next",
         "next/core-web-vitals",
-        "plugin:@typescript-eslint/recommended",
-        "prettier"
+        "plugin:@typescript-eslint/recommended-requiring-type-checking"
     ],
     "parserOptions": {
         "ecmaFeatures": {
@@ -30,9 +29,18 @@
         "prettier/prettier": [
             "error",
             {
-                "endOfLine": "auto"
+                "semi": true,
+                "trailingComma": "es5",
+                "singleQuote": true,
+                "tabWidth": 2,
+                "useTabs": false,
+                "endOfLine": "auto",
+                "printWidth": 80,
+                "bracketSameLine": true,
+                "bracketSpacing": true
             }
         ],
+        "react/prop-types": "off",
         "react/react-in-jsx-scope": "off",
         "react/jsx-filename-extension": [
             2,
@@ -44,6 +52,15 @@
                     ".tsx"
                 ]
             }
+        ],
+        "@typescript-eslint/explicit-function-return-type": [
+            "warn",
+            {
+                "allowExpressions": true,
+                "allowTypedFunctionExpressions": true,
+                "allowHigherOrderFunctions": true,
+                "allowConciseArrowFunctionExpressionsStartingWithVoid": true
+            }
         ]
     },
     "settings": {

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,7 +3,9 @@
     "trailingComma": "es5",
     "singleQuote": true,
     "tabWidth": 2,
-    "useTabs": true,
+    "useTabs": false,
     "endOfLine": "auto",
-    "printWidth": 100
+    "printWidth": 80,
+    "bracketSameLine": true,
+    "bracketSpacing": true
 }
diff --git a/components/AuthText.tsx b/components/AuthText.tsx
@@ -2,23 +2,23 @@ import Image from 'next/image';
 import authImage from 'public/auth.png';
 
 const AuthText = (): JSX.Element => (
-	<div className="lg:mt-0 max-w-lg flex flex-col text-xl">
-		<div className="mt-10 mb-3 m-auto">
-			<Image
-				src={authImage}
-				width={authImage.width / 1.5}
-				height={authImage.height / 1.5}
-				alt="A rocketship"
-			/>
-		</div>
-		<h2 className="text-4xl font-title font-semibold text-center">
-			Join SupaNexTail for <span className="text-primary">free</span>!
-		</h2>
-		<p className="mb-5 mt-8 leading-9">
-			Create your website in a few minutes with our boilerplate. You can use the login system, this
-			will allow you to discover the sample dashboard page.
-		</p>
-	</div>
+  <div className="flex flex-col max-w-lg text-xl lg:mt-0">
+    <div className="m-auto mt-10 mb-3">
+      <Image
+        src={authImage}
+        width={authImage.width / 1.5}
+        height={authImage.height / 1.5}
+        alt="A rocketship"
+      />
+    </div>
+    <h2 className="text-4xl font-semibold text-center font-title">
+      Join SupaNexTail for <span className="text-primary">free</span>!
+    </h2>
+    <p className="mt-8 mb-5 leading-9">
+      Create your website in a few minutes with our boilerplate. You can use the
+      login system, this will allow you to discover the sample dashboard page.
+    </p>
+  </div>
 );
 
 export default AuthText;
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
@@ -10,113 +10,116 @@ import Image from 'next/image';
 import { supabase } from 'utils/supabaseClient';
 
 type AvatarProps = {
-	url: string;
-	size: number;
-	onUpload: (filePath: string) => void;
+  url: string;
+  size: number;
+  onUpload: (filePath: string) => void;
 };
 
 const Avatar = ({ url, size, onUpload }: AvatarProps): JSX.Element => {
-	const [avatarUrl, setAvatarUrl] = useState('');
-	const [uploading, setUploading] = useState(false);
-
-	const customImgLoader = ({ src }: { src: string }) => {
-		return `${src}`;
-	};
-
-	useEffect(() => {
-		if (url) downloadImage(url);
-	}, [url]);
-
-	async function downloadImage(path: string) {
-		try {
-			const { data, error } = await supabase.storage.from('avatars').download(path);
-			if (error) {
-				throw error;
-			}
-			if (data) {
-				const url = URL.createObjectURL(data);
-				setAvatarUrl(url);
-			}
-		} catch (error: unknown) {
-			if (error instanceof Error) {
-				console.log('Error downloading image: ', error.message);
-			}
-		}
-	}
-
-	async function uploadAvatar(event: React.ChangeEvent<HTMLInputElement>) {
-		try {
-			setUploading(true);
-
-			if (!event.target.files || event.target.files.length === 0) {
-				throw new Error('You must select an image to upload.');
-			}
-
-			const file = event.target.files[0];
-			const fileExt = file.name.split('.').pop();
-			const fileName = `${Math.random()}.${fileExt}`;
-			const filePath = `${fileName}`;
-
-			if (event.target.files[0].size > 150000) {
-				alert('File is too big!');
-				event.target.value = '';
-				setUploading(false);
-				return;
-			}
-
-			const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file);
-
-			if (uploadError) {
-				throw uploadError;
-			}
-
-			onUpload(filePath);
-		} catch (error: unknown) {
-			if (error instanceof Error) {
-				alert(error.message);
-			}
-		} finally {
-			setUploading(false);
-		}
-	}
-
-	return (
-		<div className="m-auto mb-5">
-			{avatarUrl ? (
-				<div className="w-full flex justify-center">
-					<Image
-						loader={customImgLoader} //Using custom loader because of this issue https://github.com/vercel/next.js/discussions/19732
-						src={avatarUrl}
-						height={100}
-						width={100}
-						alt="Avatar"
-						className="avatar rounded-full w-28 h-28"
-					/>
-				</div>
-			) : (
-				<div className="avatar rounded-full w-28 h-28" />
-			)}
-			<div style={{ width: size }}>
-				<label
-					className="mt-2 btn btn-primary text-center cursor-pointer text-xs btn-sm"
-					htmlFor="single"
-				>
-					{uploading ? 'Uploading ...' : 'Update my avatar'}
-				</label>
-				<input
-					style={{
-						visibility: 'hidden',
-						position: 'absolute',
-					}}
-					type="file"
-					id="single"
-					accept="image/*"
-					onChange={uploadAvatar}
-					disabled={uploading}
-				/>
-			</div>
-		</div>
-	);
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const [uploading, setUploading] = useState(false);
+
+  const customImgLoader = ({ src }: { src: string }) => {
+    return `${src}`;
+  };
+
+  useEffect(() => {
+    if (url) downloadImage(url);
+  }, [url]);
+
+  async function downloadImage(path: string) {
+    try {
+      const { data, error } = await supabase.storage
+        .from('avatars')
+        .download(path);
+      if (error) {
+        throw error;
+      }
+      if (data) {
+        const url = URL.createObjectURL(data);
+        setAvatarUrl(url);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.log('Error downloading image: ', error.message);
+      }
+    }
+  }
+
+  async function uploadAvatar(event: React.ChangeEvent<HTMLInputElement>) {
+    try {
+      setUploading(true);
+
+      if (!event.target.files || event.target.files.length === 0) {
+        throw new Error('You must select an image to upload.');
+      }
+
+      const file = event.target.files[0];
+      const fileExt = file.name.split('.').pop();
+      const fileName = `${Math.random()}.${fileExt}`;
+      const filePath = `${fileName}`;
+
+      if (event.target.files[0].size > 150000) {
+        alert('File is too big!');
+        event.target.value = '';
+        setUploading(false);
+        return;
+      }
+
+      const { error: uploadError } = await supabase.storage
+        .from('avatars')
+        .upload(filePath, file);
+
+      if (uploadError) {
+        throw uploadError;
+      }
+
+      onUpload(filePath);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        alert(error.message);
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <div className="m-auto mb-5">
+      {avatarUrl ? (
+        <div className="flex justify-center w-full">
+          <Image
+            loader={customImgLoader} //Using custom loader because of this issue https://github.com/vercel/next.js/discussions/19732
+            src={avatarUrl}
+            height={100}
+            width={100}
+            alt="Avatar"
+            className="rounded-full w-28 h-28 avatar"
+          />
+        </div>
+      ) : (
+        <div className="rounded-full w-28 h-28 avatar" />
+      )}
+      <div style={{ width: size }}>
+        <label
+          className="mt-2 text-xs text-center cursor-pointer btn btn-primary btn-sm"
+          htmlFor="single">
+          {uploading ? 'Uploading ...' : 'Update my avatar'}
+        </label>
+        <input
+          style={{
+            visibility: 'hidden',
+            position: 'absolute',
+          }}
+          type="file"
+          id="single"
+          accept="image/*"
+          onChange={uploadAvatar}
+          disabled={uploading}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default Avatar;