From ccc7fc86b18b023da18360308d483f41c6048fc3 Mon Sep 17 00:00:00 2001 From: Verox Date: Wed, 29 Jan 2025 10:22:09 +0100 Subject: [PATCH] Added Poll components and dependent files to react and svelte5 playground --- .../resources/js/Components/TestGrid.tsx | 11 ++ .../resources/js/Components/TestGridItem.tsx | 16 +++ playgrounds/react/resources/js/Pages/Poll.tsx | 74 +++++++++++++ .../resources/js/Components/TestGrid.svelte | 8 ++ .../js/Components/TestGridItem.svelte | 14 +++ .../svelte5/resources/js/Pages/Poll.svelte | 102 ++++++++++++++++++ 6 files changed, 225 insertions(+) create mode 100644 playgrounds/react/resources/js/Components/TestGrid.tsx create mode 100644 playgrounds/react/resources/js/Components/TestGridItem.tsx create mode 100644 playgrounds/react/resources/js/Pages/Poll.tsx create mode 100644 playgrounds/svelte5/resources/js/Components/TestGrid.svelte create mode 100644 playgrounds/svelte5/resources/js/Components/TestGridItem.svelte create mode 100644 playgrounds/svelte5/resources/js/Pages/Poll.svelte diff --git a/playgrounds/react/resources/js/Components/TestGrid.tsx b/playgrounds/react/resources/js/Components/TestGrid.tsx new file mode 100644 index 000000000..8b52b5f57 --- /dev/null +++ b/playgrounds/react/resources/js/Components/TestGrid.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const TestGrid = ({ children }) => { + return ( +
+ {children} +
+ ) +} + +export default TestGrid diff --git a/playgrounds/react/resources/js/Components/TestGridItem.tsx b/playgrounds/react/resources/js/Components/TestGridItem.tsx new file mode 100644 index 000000000..cac09d6f1 --- /dev/null +++ b/playgrounds/react/resources/js/Components/TestGridItem.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +const TestGridItem = ({ children, title }) => { + return ( +
+ {title && ( +
+ {title} +
+ )} + {children} +
+ ) +} + +export default TestGridItem diff --git a/playgrounds/react/resources/js/Pages/Poll.tsx b/playgrounds/react/resources/js/Pages/Poll.tsx new file mode 100644 index 000000000..46d7d65b3 --- /dev/null +++ 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 ( + <> + +

Poll

+ + +
User Poll Request Count: {userPollCount}
+ {users.map((user, index) => ( +
{user}
+ ))} + + +
Companies Poll Request Count: {companyPollCount}
+ {companies.map((company, index) => ( +
{company}
+ ))} + + +
Hook Poll Request Count: {hookPollCount}
+ + + + + + + ) +} + +Poll.layout = page => + +export default Poll diff --git a/playgrounds/svelte5/resources/js/Components/TestGrid.svelte b/playgrounds/svelte5/resources/js/Components/TestGrid.svelte new file mode 100644 index 000000000..cf1b06f4e --- /dev/null +++ b/playgrounds/svelte5/resources/js/Components/TestGrid.svelte @@ -0,0 +1,8 @@ + + +
+ +
diff --git a/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte b/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte new file mode 100644 index 000000000..8973abe83 --- /dev/null +++ b/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte @@ -0,0 +1,14 @@ + + +
+ {#if $$slots.title} +
+ +
+ {/if} + + +
diff --git a/playgrounds/svelte5/resources/js/Pages/Poll.svelte b/playgrounds/svelte5/resources/js/Pages/Poll.svelte new file mode 100644 index 000000000..04a579288 --- /dev/null +++ b/playgrounds/svelte5/resources/js/Pages/Poll.svelte @@ -0,0 +1,102 @@ + + + + + + Async Request - {appName} + + +

Poll

+ + + + + User Poll Request Count: {userPollCount} + +
+ {#each users as user} +
{user}
+ {/each} +
+ + + + Companies Poll Request Count: {companyPollCount} + +
+ {#each companies as company} +
{company}
+ {/each} +
+ + + + Hook Poll Request Count: {hookPollCount} + + + + + +