🍞 quick toast with api calls

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,
+}

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>
   )
 }

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']
       }
     }),
   ],