From e55d08279bce7362957673fee9f76bda03342f47 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 22 Oct 2022 17:46:35 +0800
Subject: [PATCH] [ui] add toasts

---
 apps/portal/src/pages/_app.tsx           |   9 +-
 apps/portal/src/pages/index.tsx          |  23 +----
 apps/portal/src/pages/test__.tsx         |  51 +++++++++++
 packages/ui/src/Toast/Toast.tsx          | 108 +++++++++++++++++++++++
 packages/ui/src/Toast/ToastsProvider.tsx |  72 +++++++++++++++
 packages/ui/src/index.tsx                |   6 ++
 6 files changed, 244 insertions(+), 25 deletions(-)
 create mode 100644 apps/portal/src/pages/test__.tsx
 create mode 100644 packages/ui/src/Toast/Toast.tsx
 create mode 100644 packages/ui/src/Toast/ToastsProvider.tsx

diff --git a/apps/portal/src/pages/_app.tsx b/apps/portal/src/pages/_app.tsx
index 11606124..9914942e 100644
--- a/apps/portal/src/pages/_app.tsx
+++ b/apps/portal/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
 import React from 'react';
 import superjson from 'superjson';
+import { ToastsProvider } from '@tih/ui';
 import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
 import { loggerLink } from '@trpc/client/links/loggerLink';
 import { withTRPC } from '@trpc/next';
@@ -19,9 +20,11 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <SessionProvider session={session}>
-      <AppShell>
-        <Component {...pageProps} />
-      </AppShell>
+      <ToastsProvider>
+        <AppShell>
+          <Component {...pageProps} />
+        </AppShell>
+      </ToastsProvider>
     </SessionProvider>
   );
 };
diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx
index 360c81e8..51f58469 100644
--- a/apps/portal/src/pages/index.tsx
+++ b/apps/portal/src/pages/index.tsx
@@ -1,32 +1,11 @@
-import { useState } from 'react';
-import type { TypeaheadOption } from '@tih/ui';
-import { HorizontalDivider } from '@tih/ui';
-
-import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
-import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
-import MonthYearPicker from '~/components/shared/MonthYearPicker';
-
 export default function HomePage() {
-  const [selectedCompany, setSelectedCompany] =
-    useState<TypeaheadOption | null>(null);
-  const [monthYear, setMonthYear] = useState<MonthYear>({
-    month: (new Date().getMonth() + 1) as Month,
-    year: new Date().getFullYear(),
-  });
-
   return (
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
         <div className="space-y-4">
           <h1 className="text-primary-600 text-center text-4xl font-bold">
-            Homepage
+            Tech Interview Handbook Portal
           </h1>
-          <CompaniesTypeahead
-            onSelect={(option) => setSelectedCompany(option)}
-          />
-          <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
-          <HorizontalDivider />
-          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
         </div>
       </div>
     </main>
diff --git a/apps/portal/src/pages/test__.tsx b/apps/portal/src/pages/test__.tsx
new file mode 100644
index 00000000..26859c56
--- /dev/null
+++ b/apps/portal/src/pages/test__.tsx
@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import type { TypeaheadOption } from '@tih/ui';
+import { Button } from '@tih/ui';
+import { useToast } from '@tih/ui';
+import { HorizontalDivider } from '@tih/ui';
+
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
+import MonthYearPicker from '~/components/shared/MonthYearPicker';
+
+export default function HomePage() {
+  const [selectedCompany, setSelectedCompany] =
+    useState<TypeaheadOption | null>(null);
+  const [monthYear, setMonthYear] = useState<MonthYear>({
+    month: (new Date().getMonth() + 1) as Month,
+    year: new Date().getFullYear(),
+  });
+
+  const { showToast } = useToast();
+
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <div className="space-y-4">
+          <h1 className="text-primary-600 text-center text-4xl font-bold">
+            Test Page
+          </h1>
+          <CompaniesTypeahead
+            onSelect={(option) => setSelectedCompany(option)}
+          />
+          <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
+          <HorizontalDivider />
+          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
+          <HorizontalDivider />
+          <Button
+            label="Add toast"
+            variant="primary"
+            onClick={() => {
+              showToast({
+                // Duration: 10000 (optional)
+                subtitle: `Some optional subtitle ${Date.now()}`,
+                title: `Hello World ${Date.now()}`,
+                variant: 'success',
+              });
+            }}
+          />
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/ui/src/Toast/Toast.tsx b/packages/ui/src/Toast/Toast.tsx
new file mode 100644
index 00000000..4d6efe51
--- /dev/null
+++ b/packages/ui/src/Toast/Toast.tsx
@@ -0,0 +1,108 @@
+import { Fragment, useEffect, useRef } from 'react';
+import { Transition } from '@headlessui/react';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/solid';
+
+type ToastVariant = 'failure' | 'success';
+
+export type ToastMessage = {
+  duration?: number;
+  subtitle?: string;
+  title: string;
+  variant: ToastVariant;
+};
+
+type Props = Readonly<{
+  duration?: number;
+  onClose: () => void;
+  subtitle?: string;
+  title: string;
+  variant: ToastVariant;
+}>;
+
+const DEFAULT_DURATION = 5000;
+
+function ToastIcon({ variant }: Readonly<{ variant: ToastVariant }>) {
+  switch (variant) {
+    case 'success':
+      return (
+        <CheckIcon aria-hidden="true" className="text-success-500 h-6 w-6" />
+      );
+    case 'failure':
+      return (
+        <XMarkIcon aria-hidden="true" className="text-error-500 h-6 w-6" />
+      );
+  }
+}
+
+export default function Toast({
+  duration = DEFAULT_DURATION,
+  title,
+  subtitle,
+  variant,
+  onClose,
+}: Props) {
+  const timer = useRef<number | null>(null);
+
+  function clearTimer() {
+    if (timer.current == null) {
+      return;
+    }
+
+    window.clearTimeout(timer.current);
+    timer.current = null;
+  }
+
+  function close() {
+    onClose();
+    clearTimer();
+  }
+
+  useEffect(() => {
+    timer.current = window.setTimeout(() => {
+      close();
+    }, duration);
+
+    return () => {
+      clearTimer();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Transition
+      as={Fragment}
+      enter="transform ease-out duration-300 transition"
+      enterFrom="translate-y-2 opacity-0 sm:translate-y-2 sm:translate-x-2"
+      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      show={true}>
+      <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div className="p-4">
+          <div className="flex items-start">
+            <div className="flex-shrink-0">
+              <ToastIcon variant={variant} />
+            </div>
+            <div className="ml-3 w-0 flex-1 space-y-1 pt-0.5">
+              <p className="text-sm font-medium text-slate-900">{title}</p>
+              {subtitle && (
+                <p className="mt-1 text-sm text-slate-500">{subtitle}</p>
+              )}
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                className="focus:ring-brand-500 inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
+                type="button"
+                onClick={close}>
+                <span className="sr-only">Close</span>
+                <XMarkIcon aria-hidden="true" className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  );
+}
diff --git a/packages/ui/src/Toast/ToastsProvider.tsx b/packages/ui/src/Toast/ToastsProvider.tsx
new file mode 100644
index 00000000..88ea14ee
--- /dev/null
+++ b/packages/ui/src/Toast/ToastsProvider.tsx
@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import type { ToastMessage } from './Toast';
+import Toast from './Toast';
+
+type Context = Readonly<{
+  showToast: (message: ToastMessage) => void;
+}>;
+
+export const ToastContext = createContext<Context>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  showToast: (_: ToastMessage) => {},
+});
+
+const getID = (() => {
+  let id = 0;
+
+  return () => {
+    return id++;
+  };
+})();
+
+type ToastData = ToastMessage & {
+  id: number;
+};
+
+type Props = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+export default function ToastsProvider({ children }: Props) {
+  const [toasts, setToasts] = useState<Array<ToastData>>([]);
+
+  function showToast({ title, subtitle, variant }: ToastMessage) {
+    setToasts([{ id: getID(), subtitle, title, variant }, ...toasts]);
+  }
+
+  function closeToast(id: number) {
+    setToasts((oldToasts) => {
+      const newToasts = oldToasts.filter((toast) => toast.id !== id);
+      return newToasts;
+    });
+  }
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <div
+        aria-live="assertive"
+        className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:p-6">
+        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          {toasts.map(({ id, title, subtitle, variant }) => (
+            <Toast
+              key={id}
+              subtitle={subtitle}
+              title={title}
+              variant={variant}
+              onClose={() => {
+                closeToast(id);
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </ToastContext.Provider>
+  );
+}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 586920c7..1a7d77fa 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -49,6 +49,12 @@ export { default as TextArea } from './TextArea/TextArea';
 // TextInput
 export * from './TextInput/TextInput';
 export { default as TextInput } from './TextInput/TextInput';
+// Toast
+export * from './Toast/Toast';
+export { default as Toast } from './Toast/Toast';
+// ToastsProvider
+export * from './Toast/ToastsProvider';
+export { default as ToastsProvider } from './Toast/ToastsProvider';
 // Typeahead
 export * from './Typeahead/Typeahead';
 export { default as Typeahead } from './Typeahead/Typeahead';