Added Poll components and dependent files to react and svelte5 playgr…

…ound
inertiajs · Jan 29, 2025 · ccc7fc8 · ccc7fc8
1 parent b1077d5
commit ccc7fc8
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 0 deletions.
diff --git a/playgrounds/react/resources/js/Components/TestGrid.tsx b/playgrounds/react/resources/js/Components/TestGrid.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const TestGrid = ({ children }) => {
+    return (
+        <div className="mt-6 grid grid-cols-3 gap-4">
+            {children}
+        </div>
+    )
+}
+
+export default TestGrid
diff --git a/playgrounds/react/resources/js/Components/TestGridItem.tsx b/playgrounds/react/resources/js/Components/TestGridItem.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const TestGridItem = ({ children, title }) => {
+    return (
+        <div className="rounded border border-gray-300 p-4 text-sm text-gray-500">
+            {title && (
+                <div className="mb-2 font-bold">
+                    {title}
+                </div>
+            )}
+            {children}
+        </div>
+    )
+}
+
+export default TestGridItem
diff --git a/playgrounds/react/resources/js/Pages/Poll.tsx b/playgrounds/react/resources/js/Pages/Poll.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { Head, router } from '@inertiajs/react'
+import Layout from '../Components/Layout'
+import TestGrid from '../Components/TestGrid'
+import TestGridItem from '../Components/TestGridItem'
+
+const Poll = ({ users, companies }) => {
+    const [userPollCount, setUserPollCount] = useState(0)
+    const [hookPollCount, setHookPollCount] = useState(0)
+    const [companyPollCount, setCompanyPollCount] = useState(0)
+
+    const triggerAsyncRedirect = () => {
+        router.get('/elsewhere', {}, {
+            only: ['something'],
+            async: true,
+        })
+    }
+
+    useEffect(() => {
+        const startHookPolling = () => {
+            const interval = setInterval(() => {
+                setHookPollCount(prev => prev + 1)
+            }, 2000)
+            return () => clearInterval(interval)
+        }
+
+        const stopUserPolling = () => {
+            const interval = setInterval(() => {
+                setUserPollCount(prev => prev + 1)
+            }, 1000)
+            setTimeout(() => {
+                clearInterval(interval)
+                console.log('stopping user polling')
+            }, 3000)
+        }
+
+        setTimeout(() => {
+            startHookPolling()
+        }, 2000)
+
+        stopUserPolling()
+    }, [])
+
+    return (
+        <>
+            <Head title="Async Request" />
+            <h1 className="text-3xl">Poll</h1>
+            <TestGrid>
+                <TestGridItem>
+                    <div>User Poll Request Count: {userPollCount}</div>
+                    {users.map((user, index) => (
+                        <div key={index}>{user}</div>
+                    ))}
+                </TestGridItem>
+                <TestGridItem>
+                    <div>Companies Poll Request Count: {companyPollCount}</div>
+                    {companies.map((company, index) => (
+                        <div key={index}>{company}</div>
+                    ))}
+                </TestGridItem>
+                <TestGridItem>
+                    <div>Hook Poll Request Count: {hookPollCount}</div>
+                </TestGridItem>
+                <TestGridItem>
+                    <button onClick={triggerAsyncRedirect}>Trigger Async Redirect</button>
+                </TestGridItem>
+            </TestGrid>
+        </>
+    )
+}
+
+Poll.layout = page => <Layout children={page} />
+
+export default Poll
diff --git a/playgrounds/svelte5/resources/js/Components/TestGrid.svelte b/playgrounds/svelte5/resources/js/Components/TestGrid.svelte
@@ -0,0 +1,8 @@
+<script>
+  let className = ''
+  export { className as class }
+</script>
+
+<div {...$$restProps} class="mt-6 grid grid-cols-3 gap-4 {className}">
+  <slot />
+</div>
diff --git a/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte b/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte
@@ -0,0 +1,14 @@
+<script>
+  let className
+  export { className as class }
+</script>
+
+<div {...$$restProps} class="rounded border border-gray-300 p-4 text-sm text-gray-500 {className}">
+  {#if $$slots.title}
+    <div class="mb-2 font-bold">
+      <slot name="title" />
+    </div>
+  {/if}
+
+  <slot />
+</div>
diff --git a/playgrounds/svelte5/resources/js/Pages/Poll.svelte b/playgrounds/svelte5/resources/js/Pages/Poll.svelte
@@ -0,0 +1,102 @@
+<script context="module">
+  export { default as layout } from '../Components/Layout.svelte'
+</script>
+
+<script>
+  import { onMount } from 'svelte'
+  import { router, usePoll } from '@inertiajs/svelte'
+  import TestGrid from '../Components/TestGrid.svelte'
+  import TestGridItem from '../Components/TestGridItem.svelte'
+
+  export let appName
+  export let users = []
+  export let companies = []
+
+  let userPollCount = 0
+  let hookPollCount = 0
+  let companyPollCount = 0
+
+  const triggerAsyncRedirect = () => {
+    router.get(
+      '/elsewhere',
+      {},
+      {
+        only: ['something'],
+        async: true,
+      },
+    )
+  }
+
+  const { start: startHookPolling, stop } = usePoll(
+    2000,
+    {
+      only: ['asdf'],
+      onFinish() {
+        hookPollCount++
+      },
+    },
+    {
+      keepAlive: true,
+      autoStart: false,
+    },
+  )
+
+  onMount(() => {
+    setTimeout(() => {
+      startHookPolling()
+    }, 2000)
+
+    const { stop: stopUserPolling } = router.poll(
+      1000,
+      {
+        only: ['users'],
+        onFinish() {
+          userPollCount++
+        },
+      },
+      { keepAlive: true },
+    )
+
+    setTimeout(() => {
+      console.log('stopping user polling')
+      stopUserPolling()
+    }, 3000)
+  })
+</script>
+
+<svelte:head>
+  <title>Async Request - {appName}</title>
+</svelte:head>
+
+<h1 class="text-3xl">Poll</h1>
+
+<TestGrid>
+  <TestGridItem>
+    <svelte:fragment slot="title">
+      User Poll Request Count: {userPollCount}
+    </svelte:fragment>
+    <div>
+      {#each users as user}
+        <div>{user}</div>
+      {/each}
+    </div>
+  </TestGridItem>
+  <TestGridItem>
+    <svelte:fragment slot="title">
+      Companies Poll Request Count: {companyPollCount}
+    </svelte:fragment>
+    <div>
+      {#each companies as company}
+        <div>{company}</div>
+      {/each}
+    </div>
+  </TestGridItem>
+  <TestGridItem>
+    <svelte:fragment slot="title">
+      Hook Poll Request Count: {hookPollCount}
+    </svelte:fragment>
+  </TestGridItem>
+  <TestGridItem>
+    <button on:click={() => triggerAsyncRedirect()}>Trigger Async Redirect</button>
+  </TestGridItem>
+</TestGrid>