From 36e42fa71a43705c36d6d8a4ecbc95fe0a8c0a25 Mon Sep 17 00:00:00 2001
From: Olivier Gamache <olivier@glo.quebec>
Date: Wed, 13 Jul 2022 06:30:47 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=9E=20quick=20toast=20with=20api=20cal?=
 =?UTF-8?q?ls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/toaster/index.tsx      | 42 +++++++++++++++++++++++++++
 src/layouts/app/index.tsx             | 35 +++++++++++++++++-----
 src/routes/api/{user.tsx => phone.ts} |  0
 tailwind.config.cjs                   |  2 +-
 4 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 src/components/toaster/index.tsx
 rename src/routes/api/{user.tsx => phone.ts} (100%)

diff --git a/src/components/toaster/index.tsx b/src/components/toaster/index.tsx
new file mode 100644
index 00000000..7da94b4d
--- /dev/null
+++ b/src/components/toaster/index.tsx
@@ -0,0 +1,42 @@
+import type { Component } from 'solid-js'
+
+type Toast = {
+  id: string
+  message: string
+}
+
+const createToaster = () => {
+  const [toasts, setToasts] = createSignal<Toast[]>([])
+
+  const toast = (message: string) => {
+    const id = Math.random().toString()
+    setTimeout(() => {
+      setToasts(toasts => toasts.filter(t => t.id !== id))
+    }, 1000)
+    setToasts(toasts => [...toasts, { id, message }])
+  }
+
+  return {
+    toasts,
+    toast,
+  }
+}
+
+interface Props extends ReturnType<typeof createToaster> {}
+
+const Toaster: Component<Props> = (props) => {
+  return (
+    <div class="absolute p-5 top-0 right-0">
+      <For each={props.toasts()} children={({ message }) => (
+        <div class="bg-white p-2 mb-5 rounded">
+          {message}
+        </div>
+      )}/>
+    </div>
+  )
+}
+
+export {
+  createToaster,
+  Toaster as default,
+}
diff --git a/src/layouts/app/index.tsx b/src/layouts/app/index.tsx
index 7c459da2..283afd67 100644
--- a/src/layouts/app/index.tsx
+++ b/src/layouts/app/index.tsx
@@ -7,6 +7,7 @@ import Button from '@components/button'
 import ReloadPrompt from '@components/reload'
 import Form from '@components/form'
 import { createInput } from '@components/form/input'
+import Toaster, { createToaster } from '@components/toaster'
 
 const ReloadPromptCheck = typeof window !== 'undefined' ?
   () => <ReloadPrompt />
@@ -17,23 +18,39 @@ export default function () {
   let linkRef: Ref<any>
   const counter = createCounter()
   const [_, { locale }] = useI18n()
+  const nameHook = createInput('name')
+  const toasterHook = createToaster()
 
   const nextLanguage = () => {
     const next = locale() === 'en' ? 'fr' : 'en'
     locale(next)
   }
 
-  const nameHook = createInput('name')
-
   const onSubmit = () => {
     linkRef.click()
   }
 
+  const phoneCall = async () => {
+    const response = await fetch('/api/phone', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        phone: '+33123456789',
+      }),
+    })
+    const data = await response.json()
+
+    console.log(data)
+    toasterHook.toast(JSON.stringify(data))
+  }
+
   return (
     <div class="full flex-center flex-col bg-gray-100/75">
       <ReloadPromptCheck />
       <Image image={bat} />
-      <div class="flex -mt-10 mb-5">
+      <div class="flex -mt-10 items-center">
         <Form inputs={[nameHook]} onSubmit={onSubmit} />
         <Link ref={linkRef} href={`/hi/${nameHook.value()}`}>
           <div class="i-carbon-arrow-right btn w-7 h-7" />
@@ -42,15 +59,19 @@ export default function () {
       <div class="flex items-end space-x-6">
         <Counter {...counter}/>
         <a class="btn" href="https://github.com/olgam4/bat" target="_blank">
-          <div class="i-carbon-logo-github w-7 h-7" />
+          <div class="i-carbon-logo-github w-6 h-6" />
         </a>
-        <Link href="/random">
-          <div class="btn i-carbon-location-hazard w-7 h-7" />
+        <Link href={Math.round((Math.random() * 100000)).toString()}>
+          <div class="btn i-carbon-location-hazard w-6 h-6" />
         </Link>
+        <Button onClick={() => phoneCall()}>
+          <div class="i-carbon-phone-voice w-6 h-6" />
+        </Button>
         <Button onClick={() => nextLanguage()}>
-          <div class="i-carbon-language w-7 h-7" />
+          <div class="i-carbon-language w-6 h-6" />
         </Button>
       </div>
+      <Toaster {...toasterHook} />
     </div>
   )
 }
diff --git a/src/routes/api/user.tsx b/src/routes/api/phone.ts
similarity index 100%
rename from src/routes/api/user.tsx
rename to src/routes/api/phone.ts
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3606d77d..8d02ac1d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,7 +8,7 @@ module.exports = {
 	plugins: [
     Icons({
       carbon: {
-        icons: ['language', 'arrow-left', 'arrow-right', 'location-hazard', 'logo-github', 'moonrise', 'face-dissatisfied-filled']
+        icons: ['language', 'arrow-left', 'arrow-right', 'location-hazard', 'logo-github', 'moonrise', 'face-dissatisfied-filled', 'phone-voice']
       }
     }),
   ],