diff --git a/.eslintrc.json b/.eslintrc.json index 1ce4521..e2f6d40 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -6,8 +6,9 @@ "cypress/globals": true }, "extends": [ - "plugin:react/recommended", - "airbnb", + "next", + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended", "prettier" ], "parserOptions": { @@ -18,7 +19,7 @@ "sourceType": "module" }, "plugins": [ - "react", + "@typescript-eslint", "cypress", "simple-import-sort", "prettier" @@ -26,7 +27,12 @@ "rules": { "no-console": "off", "react/no-unescaped-entities": "off", - "prettier/prettier": "error", + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ], "react/react-in-jsx-scope": "off", "react/jsx-filename-extension": [ 2, diff --git a/.prettierrc.json b/.prettierrc.json index 3181cc9..3f7543a 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,5 +1,9 @@ { + "semi": true, + "trailingComma": "es5", "singleQuote": true, "tabWidth": 2, - "semi": true + "useTabs": true, + "endOfLine": "auto", + "printWidth": 100 } \ No newline at end of file diff --git a/components/AuthText.js b/components/AuthText.js index 7fbe50f..a6be41d 100644 --- a/components/AuthText.js +++ b/components/AuthText.js @@ -2,22 +2,18 @@ import Image from 'next/image'; import authImage from 'public/auth.png'; const AuthText = () => ( -
-
- -
-

- Join SupaNexTail for free! -

-

- 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. -

-
+
+
+ +
+

+ Join SupaNexTail for free! +

+

+ 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. +

+
); export default AuthText; diff --git a/components/Avatar.js b/components/Avatar.js index 75701a5..f50bef7 100644 --- a/components/Avatar.js +++ b/components/Avatar.js @@ -6,99 +6,105 @@ You can tweak the max size, line 47 import { useEffect, useState } from 'react'; +import Image from 'next/image'; import { supabase } from 'utils/supabaseClient'; const Avatar = ({ url, size, onUpload }) => { - const [avatarUrl, setAvatarUrl] = useState(null); - const [uploading, setUploading] = useState(false); + const [avatarUrl, setAvatarUrl] = useState(null); + const [uploading, setUploading] = useState(false); - useEffect(() => { - if (url) downloadImage(url); - }, [url]); + const customImgLoader = ({ src }) => { + return `${src}`; + }; - async function downloadImage(path) { - try { - const { data, error } = await supabase.storage - .from('avatars') - .download(path); - if (error) { - throw error; - } - const url = URL.createObjectURL(data); - setAvatarUrl(url); - } catch (error) { - console.log('Error downloading image: ', error.message); - } - } + useEffect(() => { + if (url) downloadImage(url); + }, [url]); - async function uploadAvatar(event) { - try { - setUploading(true); + async function downloadImage(path) { + try { + const { data, error } = await supabase.storage.from('avatars').download(path); + if (error) { + throw error; + } + const url = URL.createObjectURL(data); + setAvatarUrl(url); + } catch (error) { + console.log('Error downloading image: ', error.message); + } + } - if (!event.target.files || event.target.files.length === 0) { - throw new Error('You must select an image to upload.'); - } + async function uploadAvatar(event) { + try { + setUploading(true); - const file = event.target.files[0]; - const fileExt = file.name.split('.').pop(); - const fileName = `${Math.random()}.${fileExt}`; - const filePath = `${fileName}`; + if (!event.target.files || event.target.files.length === 0) { + throw new Error('You must select an image to upload.'); + } - if (event.target.files[0].size > 150000) { - alert('File is too big!'); - event.target.value = ''; - setUploading(false); - return; - } + const file = event.target.files[0]; + const fileExt = file.name.split('.').pop(); + const fileName = `${Math.random()}.${fileExt}`; + const filePath = `${fileName}`; - const { error: uploadError } = await supabase.storage - .from('avatars') - .upload(filePath, file); + if (event.target.files[0].size > 150000) { + alert('File is too big!'); + event.target.value = ''; + setUploading(false); + return; + } - if (uploadError) { - throw uploadError; - } + const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file); - onUpload(filePath); - } catch (error) { - alert(error.message); - } finally { - setUploading(false); - } - } + if (uploadError) { + throw uploadError; + } - return ( -
- {avatarUrl ? ( - Avatar - ) : ( -
- )} -
- - -
-
- ); + onUpload(filePath); + } catch (error) { + alert(error.message); + } finally { + setUploading(false); + } + } + + return ( +
+ {avatarUrl ? ( +
+ Avatar +
+ ) : ( +
+ )} +
+ + +
+
+ ); }; export default Avatar; diff --git a/components/CardsLanding.js b/components/CardsLanding.js index b1f259e..20a3384 100644 --- a/components/CardsLanding.js +++ b/components/CardsLanding.js @@ -8,53 +8,48 @@ import cardStripe from 'public/landing/stripe.svg'; import cardTheme from 'public/landing/theme.svg'; const CardsLanding = () => ( -
-

- We've got you covered -

-

- Don’t waste your time and reinvent the wheel, we have provided you with a - maximum of features so that you only have one goal, to make your SaaS a - reality. -

-
- - - - - - - -
-
+
+

+ We've got you covered +

+

+ Don’t waste your time and reinvent the wheel, we have provided you with a maximum of features + so that you only have one goal, to make your SaaS a reality. +

+
+ + + + + + + +
+
); export default CardsLanding; diff --git a/components/Contact.js b/components/Contact.js index 9c878ed..f2c0cd3 100644 --- a/components/Contact.js +++ b/components/Contact.js @@ -10,92 +10,92 @@ import axios from 'axios'; import { toast } from 'react-toastify'; const Contact = () => { - const sendEmail = () => { - const name = document.getElementById('name').value; - const email = document.getElementById('email').value; - const message = document.getElementById('message').value; + const sendEmail = () => { + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const message = document.getElementById('message').value; - if (name && email && message) { - axios - .post('/api/sendgrid', { email, name, message }) - .then((result) => { - if (result.data.success === true) { - toast.success(result.data.message); - document.getElementById('name').value = ''; - document.getElementById('email').value = ''; - document.getElementById('message').value = ''; - } - }) - .catch((err) => { - console.log(err); - }); - } else { - toast.info('Please enter at least one URL', { - position: 'top-center', - autoClose: 2000, - hideProgressBar: true, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } - }; - return ( -
-
-
-

- Contact -

-
-

- Do you have a question about SupaNexTail? A cool feature you'd like us - to integrate? A bug to report? Don't hesitate! -

-
-
-
-

Your Name

- -
-
-

Your email

- -
-
-

Message

-