Merge pull request #69 from Web-Dev-Path/chore/add-prettier-config

Adding prettier config file
Web-Dev-Path · Feb 3, 2022 · 48b2f8c · 48b2f8c
2 parents eb78efd + 91707c1
commit 48b2f8c
Show file tree

Hide file tree

Showing 23 changed files with 320 additions and 305 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/components/Footer.js b/components/Footer.js
@@ -1,16 +1,16 @@
-import Link from "next/link";
-import footerStyles from "../styles/Footer.module.scss";
-import { linksNav, linksSocial } from "../utils/links";
-import NewsletterSubscribe from "./mailchimp/NewsletterSubscribe";
-import Image from "next/image";
+import Link from 'next/link';
+import footerStyles from '../styles/Footer.module.scss';
+import { linksNav, linksSocial } from '../utils/links';
+import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import Image from 'next/image';
 
 export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
       <div className={footerStyles.container}>
         <div className={footerStyles.columnLeft}>
           <ul className={footerStyles.footerList}>
-            {linksNav.map((link) => (
+            {linksNav.map(link => (
               <li className={footerStyles.footerItem} key={link.href}>
                 <Link href={link.href}>
                   <a title={link.text}>{link.text}</a>
@@ -36,10 +36,15 @@ export default function Footer() {
             <p>*Unsubscribe anytime</p>
           </div>
           <div className={footerStyles.socialMedia}>
-            {linksSocial.map((link) => (
+            {linksSocial.map(link => (
               <Link href={link.href} key={link.text} passHref>
                 <a>
-                  <Image width={32} height={32} src={link.src} alt={link.text} />
+                  <Image
+                    width={32}
+                    height={32}
+                    src={link.src}
+                    alt={link.text}
+                  />
                 </a>
               </Link>
             ))}

diff --git a/components/Layout.js b/components/Layout.js
@@ -1,7 +1,7 @@
-import Nav from "./Nav";
-import Meta from "./Meta";
-import styles from "../styles/Layout.module.scss";
-import Footer from "./Footer";
+import Nav from './Nav';
+import Meta from './Meta';
+import styles from '../styles/Layout.module.scss';
+import Footer from './Footer';
 
 export default function Layout({ children }) {
   return (

diff --git a/components/Meta.js b/components/Meta.js
@@ -1,5 +1,5 @@
-import Head from "next/head";
-import { meta } from "../utils/meta";
+import Head from 'next/head';
+import { meta } from '../utils/meta';
 
 export default function Meta() {
   return (

diff --git a/components/Nav.js b/components/Nav.js
@@ -1,8 +1,8 @@
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import styles from "../styles/Nav.module.scss";
-import { linksNav } from "../utils/links";
-import Image from "next/image";
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import styles from '../styles/Nav.module.scss';
+import { linksNav } from '../utils/links';
+import Image from 'next/image';
 
 export default function Nav() {
   const [active, setActive] = useState(false);
@@ -12,13 +12,13 @@ export default function Nav() {
     function setTrueSize() {
       if (window.innerWidth >= 768) setActive(false);
     }
-    window.addEventListener("resize", setTrueSize);
+    window.addEventListener('resize', setTrueSize);
 
-    return () => window.removeEventListener("resize", setTrueSize);
+    return () => window.removeEventListener('resize', setTrueSize);
   });
 
   const toggleActive = () => {
-    setActive((active) => !active);
+    setActive(active => !active);
   };
 
   return (
@@ -46,7 +46,7 @@ export default function Nav() {
         </div>
         <nav className={`${active ? styles.navVisible : styles.nav}`}>
           <ul className={styles.navList}>
-            {linksNav.map((link) => (
+            {linksNav.map(link => (
               <li className={styles.navItem} key={link.href}>
                 <Link href={link.href}>
                   <a className={styles.navLink} title={link.text}>

diff --git a/components/mailchimp/NewsletterForm.js b/components/mailchimp/NewsletterForm.js
@@ -1,38 +1,36 @@
 import { useState } from 'react';
 import { decode } from 'html-entities';
-import newsletterStyles from "../../styles/Newsletter.module.scss";
+import newsletterStyles from '../../styles/Newsletter.module.scss';
 
-const NewsletterForm = ( { status, message, onValidated }) => {
-
-  const [ error, setError ] = useState(null);
-  const [ email, setEmail ] = useState(null);
+const NewsletterForm = ({ status, message, onValidated }) => {
+  const [error, setError] = useState(null);
+  const [email, setEmail] = useState(null);
 
   /**
    * Handle form submit.
    *
    * @return {{value}|*|boolean|null}
    */
   const handleFormSubmit = () => {
-
     setError(null);
 
-    if ( ! email ) {
-      setError( 'Please enter a valid email address' );
+    if (!email) {
+      setError('Please enter a valid email address');
       return null;
     }
 
     const isFormValidated = onValidated({ EMAIL: email });
 
     // On success return true
-    return email && email.indexOf("@") > -1 && isFormValidated;
-  }
+    return email && email.indexOf('@') > -1 && isFormValidated;
+  };
 
   /**
    * Handle Input Key Event.
    *
    * @param event
    */
-  const handleInputKeyEvent = ( event ) => {
+  const handleInputKeyEvent = event => {
     setError(null);
     // Number 13 is the "Enter" key on the keyboard
     if (event.keyCode === 13) {
@@ -41,53 +39,58 @@ const NewsletterForm = ( { status, message, onValidated }) => {
       // Trigger the button element with a click
       handleFormSubmit();
     }
-  }
+  };
 
   /**
    * Extract message from string.
    *
    * @param {String} message
    * @return {null|*}
    */
-  const getMessage = (message) => {
-    if ( !message ) {
+  const getMessage = message => {
+    if (!message) {
       return null;
     }
     const result = message?.split('-') ?? null;
-    if ( "0" !== result?.[0]?.trim() ) {
+    if ('0' !== result?.[0]?.trim()) {
       return decode(message);
     }
     const formattedMessage = result?.[1]?.trim() ?? null;
-    return formattedMessage ? decode( formattedMessage ) : null;
-  }
+    return formattedMessage ? decode(formattedMessage) : null;
+  };
 
   return (
     <>
       <div>
         <input
-          onChange={(event) => setEmail(event?.target?.value ?? '')}
+          onChange={event => setEmail(event?.target?.value ?? '')}
           type="email"
           placeholder="Your email"
-          onKeyUp={(event) => handleInputKeyEvent(event)}
+          onKeyUp={event => handleInputKeyEvent(event)}
         />
-        <button onClick={handleFormSubmit}>
-          Submit
-        </button>
+        <button onClick={handleFormSubmit}>Submit</button>
       </div>
-      <div className={ newsletterStyles.newsletterFormInfo }>
-        {status === "sending" && <div className={ newsletterStyles.newsletterFormSending }>Sending...</div>}
-        {status === "error" || error ? (
+      <div className={newsletterStyles.newsletterFormInfo}>
+        {status === 'sending' && (
+          <div className={newsletterStyles.newsletterFormSending}>
+            Sending...
+          </div>
+        )}
+        {status === 'error' || error ? (
+          <div
+            className={newsletterStyles.newsletterFormError}
+            dangerouslySetInnerHTML={{ __html: error || getMessage(message) }}
+          />
+        ) : null}
+        {status === 'success' && status !== 'error' && !error && (
           <div
-            className={ newsletterStyles.newsletterFormError }
-            dangerouslySetInnerHTML={{ __html: error || getMessage( message ) }}
+            className={newsletterStyles.newsletterFormSuccess}
+            dangerouslySetInnerHTML={{ __html: decode(message) }}
           />
-        ) : null }
-        {status === "success" && status !== "error" && !error && (
-          <div className={ newsletterStyles.newsletterFormSuccess } dangerouslySetInnerHTML={{ __html: decode(message) }} />
         )}
       </div>
     </>
   );
-}
+};
 
 export default NewsletterForm;
diff --git a/components/mailchimp/NewsletterSubscribe.js b/components/mailchimp/NewsletterSubscribe.js
@@ -2,22 +2,21 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import NewsletterForm from './NewsletterForm';
 
 const NewsletterSubscribe = () => {
-
   const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL;
 
   return (
     <MailchimpSubscribe
-      url={ MAILCHIMP_URL }
-      render={(props) => {
+      url={MAILCHIMP_URL}
+      render={props => {
         const { subscribe, status, message } = props || {};
         return (
           <NewsletterForm
-            status={ status }
-            message={ message }
-            onValidated={ formData => subscribe( formData ) }
+            status={status}
+            message={message}
+            onValidated={formData => subscribe(formData)}
           />
         );
-      } }
+      }}
     />
   );
 };

diff --git a/pages/404.js b/pages/404.js
@@ -1,11 +1,16 @@
-import Link from 'next/link'
+import Link from 'next/link';
 const NotFound = () => {
   return (
     <div className="not-found">
       <h1>Ooops...</h1>
       <h2>That page cannot be found :(</h2>
-      <p>Go back to the <Link href="/"><a>Homepage</a></Link></p>
+      <p>
+        Go back to the{' '}
+        <Link href="/">
+          <a>Homepage</a>
+        </Link>
+      </p>
     </div>
   );
-}
-export default NotFound;
+};
+export default NotFound;
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,12 +1,12 @@
-import Layout from "../components/Layout";
-import "../styles/globals.scss";
+import Layout from '../components/Layout';
+import '../styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
-	return (
-		<Layout>
-			<Component {...pageProps} />
-		</Layout>
-	);
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
 // Only uncomment this method if you have blocking data requirements for

diff --git a/pages/about-us.js b/pages/about-us.js
@@ -1,3 +1,3 @@
 export default function AboutUs() {
-	return <h1>Hello from About Us</h1>;
+  return <h1>Hello from About Us</h1>;
 }
diff --git a/pages/blog/first-post.js b/pages/blog/first-post.js
@@ -1,3 +1,3 @@
 export default function FirstPost() {
-  return <h1>First Post</h1>
+  return <h1>First Post</h1>;
 }
diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from 'next/link';
 
 export default function Blog() {
   return (
@@ -11,9 +11,6 @@ export default function Blog() {
           </Link>
         </li>
       </ul>
-
     </div>
-
-  )
-
+  );
 }
diff --git a/pages/contact-us.js b/pages/contact-us.js
@@ -1,3 +1,3 @@
 export default function ContactUs() {
-	return <h1>Hello from Contact Us</h1>;
+  return <h1>Hello from Contact Us</h1>;
 }
diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import styles from "../styles/Home.module.scss";
+import Link from 'next/link';
+import styles from '../styles/Home.module.scss';
 
 export default function Home() {
   return (

diff --git a/styles/Footer.module.scss b/styles/Footer.module.scss
@@ -1,5 +1,5 @@
-@import "mixins";
-@import "variables";
+@import 'mixins';
+@import 'variables';
 
 .footer {
   width: 100%;