improve page layout and transition

components/lastAvailableSlotsInfo.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
+import cn from 'classnames';
 import Alert from './alert';
 import { useGetLastAvailableSlotsDate } from '@/lib/api-hooks';
+import { FetchState } from '@/lib/types';
 
 export default function LastAvailableSlotsInfo() {
-  const [lastAvailableSlotsDate, getLastAvailableSlotsDate] =
+  const [fetchState, lastAvailableSlotsDate, getLastAvailableSlotsDate] =
     useGetLastAvailableSlotsDate();
 
   useEffect(() => {
@@ -12,9 +14,16 @@ export default function LastAvailableSlotsInfo() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return (
+  return fetchState !== FetchState.ERROR ? (
     <Alert>
-      Last available slots were spotted on {lastAvailableSlotsDate}.
+      <div
+        className={cn(
+          'transition-opacity duration-300',
+          fetchState !== FetchState.SUCCESS ? 'opacity-0' : 'opacity-100'
+        )}
+      >
+        Last available slots were spotted on {lastAvailableSlotsDate}.
+      </div>
     </Alert>
-  );
+  ) : null;
 }

components/layout.tsx

@@ -17,21 +17,11 @@ export default function Layout({ children }: Props) {
         <SvgGraphs />
       </div>
       <main className="mx-auto max-w-xl">
-        <AdUnit
-          adSlot={GoogleAdSenseUnitSlot.PROJECT_HEADER}
-          adFormat={GoogleAdSenseUnitFormat.FLUID}
-          className="mb-8"
-        />
         <PageTitle>
           Embassy of Japan in Singapore Visa Appointment Notification Service
           for Visa (Tourism) applications
         </PageTitle>
         <PageBody>{children}</PageBody>
-        <AdUnit
-          adSlot={GoogleAdSenseUnitSlot.PROJECT_FOOTER}
-          adFormat={GoogleAdSenseUnitFormat.FLUID}
-          className="mt-8"
-        />
       </main>
       <Footer className="mt-10" />
     </div>

components/subscribeForm.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import React, { useState } from 'react';
+import cn from 'classnames';
 import { useSubmitSubscribeRequest } from '@/lib/api-hooks';
+import { useIsCookieBannerClosed } from '@/lib/custom-hooks';
 import { trackEvent } from '@/lib/google-analytics';
 import { FetchState, GoogleAnalyticsEvent, Route } from '@/lib/types';
 import Button from './button';
@@ -13,6 +15,7 @@ import Input from './input';
 export default function SubscribeForm() {
   const submitText = 'Subscribe Now';
   const [fetchState, submitSubscriptionRequest] = useSubmitSubscribeRequest();
+  const isCookieBannerClosed = useIsCookieBannerClosed();
   const [submittedEmail, setSubmittedEmail] = useState('');
   const isLoading = fetchState === FetchState.LOADING;
   const formOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -31,7 +34,13 @@ export default function SubscribeForm() {
   };
 
   return (
-    <Form className="sticky bottom-6" onSubmit={formOnSubmit}>
+    <Form
+      className={cn(
+        'sticky transition-all duration-500 delay-700',
+        isCookieBannerClosed ? 'bottom-6' : 'bottom-32 xl:bottom-6'
+      )}
+      onSubmit={formOnSubmit}
+    >
       <FormBody>
         {fetchState !== FetchState.SUCCESS ? (
           <>

lib/api-hooks.ts

@@ -87,35 +87,43 @@ export function useUnsubscribe() {
 }
 
 export function useGetLastAvailableSlotsDate() {
+  const [fetchState, setFetchState] = useState(FetchState.DEFAULT);
   const [lastAvailableSlotsDate, setLastAvailableSlotsDate] = useState(
     '----------------------'
   );
-  const getLastAvailableSlotsDate = async (): Promise<boolean> => {
+  const getLastAvailableSlotsDate = async () => {
     try {
+      setFetchState(FetchState.LOADING);
+
       const axios = (await import('axios')).default;
       const res = await axios.get(
         `${API_URL}${ApiEndpoint.LAST_AVAILABLE_SLOTS_INFO}`
       );
 
-      if (res.data && res.data.updatedAt) {
-        const date = new Date(res.data.updatedAt);
-        const formattedDate = new Intl.DateTimeFormat('en-GB', {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-          hour: 'numeric',
-          minute: 'numeric',
-          hour12: true,
-        }).format(date);
-
-        setLastAvailableSlotsDate(formattedDate);
+      if (!res.data || !res.data.updatedAt) {
+        throw new Error('No data');
       }
 
-      return true;
+      const date = new Date(res.data.updatedAt);
+      const formattedDate = new Intl.DateTimeFormat('en-GB', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+      }).format(date);
+
+      setLastAvailableSlotsDate(formattedDate);
+      setFetchState(FetchState.SUCCESS);
     } catch (err) {
-      return false;
+      setFetchState(FetchState.ERROR);
     }
   };
 
-  return [lastAvailableSlotsDate, getLastAvailableSlotsDate] as const;
+  return [
+    fetchState,
+    lastAvailableSlotsDate,
+    getLastAvailableSlotsDate,
+  ] as const;
 }

lib/constants.ts

@@ -13,3 +13,5 @@ export const MAIN_URL = `${MAIN_ORIGIN}${MAIN_PATH}`;
 export const API_URL = 'https://api.dominicarrojado.com';
 
 export const GOOGLE_ADSENSE_CLIENT_ID = 'ca-pub-3632473845121107';
+
+export const COOKIE_BANNER_IS_CLOSED_KEY = 'isCookieBannerClosed';

lib/custom-hooks.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { checkIsLocalhost } from './location';
+import { COOKIE_BANNER_IS_CLOSED_KEY } from './constants';
+
+export function useIsCookieBannerClosed() {
+  const [isCookieBannerClosed, setIsCookieBannerClosed] = useState(true);
+
+  useEffect(() => {
+    setIsCookieBannerClosed(
+      checkIsLocalhost() ||
+        localStorage.getItem(COOKIE_BANNER_IS_CLOSED_KEY) === '1'
+    );
+  }, []);
+
+  return isCookieBannerClosed;
+}

lib/types.ts

@@ -33,7 +33,7 @@ export enum GoogleAnalyticsEvent {
 }
 
 export enum GoogleAdSenseUnitSlot {
-  PROJECT_HEADER = '2299922139',
+  PROJECT_BODY = '2574409710',
   PROJECT_FOOTER = '3221836158',
 }
 

pages/index.page.tsx

@@ -1,6 +1,11 @@
-import { ExternalUrl } from '@/lib/types';
 import SubscribeForm from '@/components/subscribeForm';
 import LastAvailableSlotsInfo from '@/components/lastAvailableSlotsInfo';
+import AdUnit from '@/components/adUnit';
+import {
+  ExternalUrl,
+  GoogleAdSenseUnitFormat,
+  GoogleAdSenseUnitSlot,
+} from '@/lib/types';
 
 export default function Home() {
   return (
@@ -19,6 +24,11 @@ export default function Home() {
         visa applications, and sends out email notifications to my subscribers
         the moment a slot becomes available.
       </p>
+      <AdUnit
+        adSlot={GoogleAdSenseUnitSlot.PROJECT_BODY}
+        adFormat={GoogleAdSenseUnitFormat.FLUID}
+        className="my-4"
+      />
       <p>
         I created this service because I had the same problem when applying for
         my Japan tourist visa. The embassy had turned off the waitlist feature,
@@ -53,6 +63,11 @@ export default function Home() {
         . <br />
         Thank you!
       </p>
+      <AdUnit
+        adSlot={GoogleAdSenseUnitSlot.PROJECT_FOOTER}
+        adFormat={GoogleAdSenseUnitFormat.FLUID}
+        className="mt-8"
+      />
     </>
   );
 }

pages/subscribe.page.tsx

@@ -3,8 +3,14 @@ import React, { useEffect } from 'react';
 import { NextSeo } from 'next-seo';
 import ButtonLink from '@/components/buttonLink';
 import PageSubtitle from '@/components/pageSubtitle';
+import AdUnit from '@/components/adUnit';
 import { useVerifySubscription } from '@/lib/api-hooks';
-import { FetchState, Route } from '@/lib/types';
+import {
+  FetchState,
+  GoogleAdSenseUnitFormat,
+  GoogleAdSenseUnitSlot,
+  Route,
+} from '@/lib/types';
 
 export default function Subscribe() {
   const [fetchState, verifySubscription] = useVerifySubscription();
@@ -68,6 +74,11 @@ export default function Subscribe() {
           </p>
         </>
       )}
+      <AdUnit
+        adSlot={GoogleAdSenseUnitSlot.PROJECT_FOOTER}
+        adFormat={GoogleAdSenseUnitFormat.FLUID}
+        className="mt-8"
+      />
     </>
   );
 }

pages/unsubscribe.page.tsx

@@ -1,7 +1,12 @@
 import { NextSeo } from 'next-seo';
-import UnsubscribeForm from '@/components/unsubscribeForm';
 import { getMetaTitle, getRouteCanonical } from '@/lib/meta';
-import { Route } from '@/lib/types';
+import UnsubscribeForm from '@/components/unsubscribeForm';
+import AdUnit from '@/components/adUnit';
+import {
+  GoogleAdSenseUnitFormat,
+  GoogleAdSenseUnitSlot,
+  Route,
+} from '@/lib/types';
 
 export default function Unsubscribe() {
   const metaUrl = getRouteCanonical(Route.UNSUBSCRIBE);
@@ -19,6 +24,11 @@ export default function Unsubscribe() {
         below and confirm. Thank you for your interest in my content.
       </p>
       <UnsubscribeForm />
+      <AdUnit
+        adSlot={GoogleAdSenseUnitSlot.PROJECT_FOOTER}
+        adFormat={GoogleAdSenseUnitFormat.FLUID}
+        className="mt-8"
+      />
     </>
   );
 }