implement last available slots info

components/alert.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+
+type Props = { children: ReactNode };
+
+export default function Alert({ children }: Props) {
+  return (
+    <div
+      className="mb-4 rounded-lg bg-indigo-50 px-5 py-4 text-base text-indigo-500"
+      role="alert"
+    >
+      {children}
+    </div>
+  );
+}

components/lastAvailableSlotsInfo.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import Alert from './alert';
+import { useGetLastAvailableSlotsDate } from '@/lib/api-hooks';
+
+export default function LastAvailableSlotsInfo() {
+  const [lastAvailableSlotsDate, getLastAvailableSlotsDate] =
+    useGetLastAvailableSlotsDate();
+
+  useEffect(() => {
+    getLastAvailableSlotsDate();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Alert>
+      Last available slots were spotted on {lastAvailableSlotsDate}.
+    </Alert>
+  );
+}

lib/api-hooks.ts

@@ -85,3 +85,37 @@ export function useUnsubscribe() {
 
   return [fetchState, unsubscribe] as const;
 }
+
+export function useGetLastAvailableSlotsDate() {
+  const [lastAvailableSlotsDate, setLastAvailableSlotsDate] = useState(
+    '----------------------'
+  );
+  const getLastAvailableSlotsDate = async (): Promise<boolean> => {
+    try {
+      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);
+      }
+
+      return true;
+    } catch (err) {
+      return false;
+    }
+  };
+
+  return [lastAvailableSlotsDate, getLastAvailableSlotsDate] as const;
+}

lib/types.ts

@@ -16,6 +16,7 @@ export enum ApiEndpoint {
   SUBSCRIPTION_REQUESTS = '/subscription-requests',
   SUBSCRIPTION_REQUEST_VERIFY = '/subscription-requests/:id/verify',
   SUBSCRIPTION = '/subscriptions/contact-mode/:contact-mode/topics/:topic',
+  LAST_AVAILABLE_SLOTS_INFO = '/japan-visa-checker/last-available-slots-info',
 }
 
 export enum FetchState {

pages/index.page.tsx

@@ -1,9 +1,11 @@
 import { ExternalUrl } from '@/lib/types';
 import SubscribeForm from '@/components/subscribeForm';
+import LastAvailableSlotsInfo from '@/components/lastAvailableSlotsInfo';
 
 export default function Home() {
   return (
     <>
+      <LastAvailableSlotsInfo />
       <p>
         Are you tired of constantly checking the Embassy of Japan in Singapore
         website for an available visa appointment slot for visa (tourism)