Added loading screen and loading spinner; added rounded corners on ca…

…rousel indicators; GDPR is now required; adjusted prettier configs

.prettierrc

@@ -5,5 +5,6 @@
     "arrowParens": "always",
     "jsxSingleQuote": true,
     "printWidth": 120,
-    "quoteProps": "preserve"
+    "quoteProps": "preserve",
+    "trailingComma": "none"
 }

components/carousel/carousel.module.scss

@@ -35,7 +35,7 @@
   }
 
   &__button {
-    @apply bg-white h-1 w-4 md:w-8;
+    @apply bg-white h-1 w-4 md:w-8 rounded;
 
     &__active {
       background: #356287;

components/carousel/Carousel.tsx → components/carousel/index.tsx

@@ -44,7 +44,7 @@ const Carousel = ({ children, timeout }: Props) => {
 
   const swipeHandlers = useSwipeable({
     onSwipedLeft: () => updateSlide(slide + 1),
-    onSwipedRight: () => updateSlide(slide - 1),
+    onSwipedRight: () => updateSlide(slide - 1)
   });
 
   return (

components/contact-section/ContactSection.tsx

@@ -1,29 +1,41 @@
 import Image from 'next/image';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import ContactFormInterface from '../../interfaces/ContactFormInterface';
 import { sendMessage } from '../../services/contact';
 import Contact from '../forms/contact/ContactForm';
+import LoadingScreen from '../loading-screen';
+import LoadingSpinner from '../loading-spinner';
 import { ModalService } from '../modal/service';
 
 const ContactSection = () => {
+  const [submitting, setSubmitting] = useState(false);
   const onFormSubmit = useCallback((data: ContactFormInterface, recaptchaToken: string | undefined) => {
+    setSubmitting(true);
     sendMessage({ ...data, token: recaptchaToken })
       .then(() => {
         ModalService.success({
           title: 'Message sent',
-          description: 'Your message has been sent. You will receive the reply in your email shortly.',
+          description: 'Your message has been sent. You will receive the reply in your email shortly.'
         });
       })
       .catch((error) => {
         ModalService.error({
           title: 'Error',
-          description: error.response.data.message,
+          description:
+            error.response?.data?.message || 'Connection error. Please try again later or email us at [email protected]'
         });
-      });
+      })
+      .finally(() => setSubmitting(false));
   }, []);
 
   return (
     <section className='section'>
+      {submitting && (
+        <LoadingScreen>
+          <LoadingSpinner />
+        </LoadingScreen>
+      )}
+
       <h1>
         <span>Contact us</span>
       </h1>

components/forms/contact/ContactForm.tsx

@@ -13,7 +13,7 @@ const ContactForm = ({ onSubmit }: Props) => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors }
   } = useForm<ContactFormInterface>();
 
   const { executeRecaptcha } = useGoogleReCaptcha();
@@ -32,8 +32,6 @@ const ContactForm = ({ onSubmit }: Props) => {
     handleReCaptchaVerify().then((token) => {
       onSubmit(data, token);
     });
-    console.log(errors);
-    console.log(data);
   };
 
   return (
@@ -47,8 +45,8 @@ const ContactForm = ({ onSubmit }: Props) => {
             required: true,
             pattern: {
               value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-              message: 'Invalid email address',
-            },
+              message: 'Invalid email address'
+            }
           })}
           error={errors?.email}
         />
@@ -77,7 +75,7 @@ const ContactForm = ({ onSubmit }: Props) => {
             message.*'
           name='Agreement'
           type='checkbox'
-          register={register('gdprAgreed')}
+          register={register('gdprAgreed', { required: true })}
           error={errors?.gdprAgreed}
         />
 

components/forms/download/DownloadForm.tsx

@@ -17,7 +17,7 @@ const DownloadForm = ({ countries, release, onSubmit }: Props) => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors }
   } = useForm<DownloadFormInterface>();
 
   const { executeRecaptcha } = useGoogleReCaptcha();
@@ -50,8 +50,8 @@ const DownloadForm = ({ countries, release, onSubmit }: Props) => {
               required: true,
               pattern: {
                 value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                message: 'Invalid email address',
-              },
+                message: 'Invalid email address'
+              }
             })}
             error={errors?.email}
           />
@@ -118,7 +118,7 @@ const DownloadForm = ({ countries, release, onSubmit }: Props) => {
             request.*'
             name='Agreement'
             type='checkbox'
-            register={register('gdprAgreed')}
+            register={register('gdprAgreed', { required: true })}
             error={errors?.gdprAgreed}
           />
 

components/loading-screen/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './loading-screen.module.scss';
+
+interface Props {
+  children: JSX.Element;
+}
+
+const LoadingScreen = ({ children }: Props) => {
+  return (
+    <div className={styles.loading}>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default LoadingScreen;

components/loading-screen/loading-screen.module.scss

@@ -0,0 +1,3 @@
+.loading {
+  @apply fixed left-0 top-0 z-50 h-full w-full overflow-auto bg-black bg-opacity-40 flex justify-center items-center;
+}

components/loading-spinner/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './loading-spinner.module.scss';
+
+const LoadingSpinner = () => {
+  return (
+    <div className={styles.loading__spinner}>
+      <div className={styles.loading}>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

components/loading-spinner/loading-spinner.module.scss

@@ -0,0 +1,42 @@
+/* generated by https://loading.io/ */
+
+@keyframes loading {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.loading {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(1);
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+
+  div {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    border: 25px solid #286090;
+    border-top-color: transparent;
+    border-radius: 50%;
+
+    animation: loading 1s linear infinite;
+    top: 103px;
+    left: 103px;
+
+    box-sizing: content-box;
+  }
+
+  &__spinner {
+    width: 207px;
+    height: 207px;
+    display: inline-block;
+    overflow: hidden;
+    background: none;
+  }
+}

components/tab-view/references.tsx

@@ -7,8 +7,6 @@ interface Props {
 }
 
 const ReferenceTabbedView = ({ references }: Props) => {
-  useEffect(() => console.log(references), [references]);
-
   const journals = useRef([]);
   const conferences = useRef([]);
   const magazines = useRef([]);