Skip to content

Commit 0f4fa4b

Browse files
joetannenbaumjoetannenbaum
committed
start to new react playground stuff
1 parent 2e99f8a commit 0f4fa4b

File tree

3 files changed

+216
-2
lines changed

3 files changed

+216
-2
lines changed

‎playgrounds/react/resources/js/Components/Layout.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export default function Layout({ children }) {
55

66
return (
77
<>
8-
<nav className="flex items-center space-x-6 bg-slate-800 px-10 py-6 text-white">
9-
<div className="rounded-lg bg-slate-700 px-4 py-1">{appName}</div>
8+
<nav className="flex items-center px-10 py-6 space-x-6 text-white bg-slate-800">
9+
<div className="px-4 py-1 rounded-lg bg-slate-700">{appName}</div>
1010
<Link href="/" className="hover:underline">
1111
Home
1212
</Link>
@@ -19,6 +19,15 @@ export default function Layout({ children }) {
1919
<Link href="/form" className="hover:underline">
2020
Form
2121
</Link>
22+
<Link href="/async" className="hover:underline">
23+
Async
24+
</Link>
25+
<Link href="/defer" className="hover:underline">
26+
Defer
27+
</Link>
28+
<Link href="/poll" className="hover:underline">
29+
Poll
30+
</Link>
2231
<Link href="/logout" method="post" as="button" type="button" className="hover:underline">
2332
Logout
2433
</Link>

‎playgrounds/react/resources/js/Pages/Defer.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Head } from '@inertiajs/react'
2+
import Layout from '../Components/Layout'
3+
4+
const Defer = ({ users, foods, organizations}: {
5+
users?: {
6+
id: number
7+
name: string
8+
email: string
9+
}[]
10+
organizations?: {
11+
id: number
12+
name: string
13+
url: string
14+
}[]
15+
foods?: {
16+
id: number
17+
name: string
18+
}[] }) => {
19+
20+
return (
21+
<>
22+
<Head title="Form" />
23+
<h1 className="text-3xl">Defer</h1>
24+
<div className="p-4 mt-6 bg-yellow-200 border border-yellow-500 rounded">
25+
<p>Page is loaded!</p>
26+
</div>
27+
28+
<div className="flex mt-6 space-x-6">
29+
<div className="w-1/2 p-4 border border-black rounded">
30+
{/* <Deferred data={users} fallback={() => <p>Loading Users...</p>}> */}
31+
{users ? users.map(user => (
32+
<div key={user.id}>
33+
<p>#{ user.id }: {user.name } ({ user.email })</p>
34+
</div>
35+
)) : <p>Loading Users...</p>}
36+
{/* </Deferred> */}
37+
</div>
38+
39+
<div className="w-1/2 p-4 border border-black rounded">
40+
{/* <Deferred data={foods} fallback={() => <p>Loading Foods...</p>}> */}
41+
{foods ?foods.map(food => (
42+
<div key={food.id}>
43+
<p>#{ food.id }: {food.name }</p>
44+
</div>
45+
)) : <p>Loading Foods...</p>}
46+
{/* </Deferred> */}
47+
</div>
48+
49+
<div className="w-1/2 p-4 border border-black rounded">
50+
{/* <Deferred data={organizations} fallback={() => <p>Loading Organizations...</p>}> */}
51+
{organizations ? organizations.map(org => (
52+
<div key={org.id}>
53+
<p>#{ org.id }: {org.name } ({ org.url })</p>
54+
</div>
55+
)) : <p>Loading Organizations...</p>}
56+
{/* </Deferred> */}
57+
</div>
58+
</div>
59+
</>
60+
)
61+
}
62+
63+
Defer.layout = (page) => <Layout children={page} />
64+
65+
export default Defer

‎playgrounds/react/routes/web.php

+140
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<?php
22

3+
use Illuminate\Support\Facades\Cache;
34
use Illuminate\Support\Facades\Route;
5+
use Inertia\Inertia;
46

57
/*
68
|--------------------------------------------------------------------------
@@ -89,3 +91,141 @@
8991
Route::post('/logout', function () {
9092
return redirect('/login');
9193
});
94+
95+
96+
Route::get('/async', function () {
97+
return inertia('Async', [
98+
'sleep' => Inertia::lazy(function () {
99+
sleep(4);
100+
}),
101+
'jonathan' => Cache::get('jonathan', false),
102+
'taylor' => Cache::get('taylor', false),
103+
'joe' => Cache::get('joe', false),
104+
]);
105+
});
106+
107+
Route::post('/async/checkbox', function () {
108+
sleep(2);
109+
$previousJoe = Cache::get('joe', false);
110+
111+
Cache::put('jonathan', request('jonathan'), 10);
112+
Cache::put('taylor', request('taylor'), 10);
113+
Cache::put('joe', request('joe'), 10);
114+
115+
if (!$previousJoe && request()->boolean('joe')) {
116+
return redirect('article');
117+
}
118+
119+
return redirect('/async');
120+
});
121+
122+
Route::get('/defer', function () {
123+
info("defer route");
124+
return inertia('Defer', [
125+
'users' => Inertia::defer(function () {
126+
info("resolving users");
127+
sleep(1);
128+
129+
return [
130+
[
131+
'id' => 1,
132+
'name' => 'Jonathan Reinink',
133+
'email' => '[email protected]',
134+
],
135+
[
136+
'id' => 2,
137+
'name' => 'Taylor Otwell',
138+
'email' => '[email protected]',
139+
],
140+
[
141+
'id' => 3,
142+
'name' => 'Joe Tannenbaum',
143+
'email' => '[email protected]',
144+
]
145+
];
146+
}, 'u'),
147+
'foods' => Inertia::defer(function () {
148+
info("resolving foods");
149+
sleep(3);
150+
151+
return [
152+
[
153+
'id' => 1,
154+
'name' => 'Pizza',
155+
],
156+
[
157+
'id' => 2,
158+
'name' => 'Tacos',
159+
],
160+
[
161+
'id' => 3,
162+
'name' => 'Sushi',
163+
],
164+
];
165+
}, 'f'),
166+
'organizations' => Inertia::defer(function () {
167+
info("resolving organizations");
168+
sleep(2);
169+
170+
return [
171+
[
172+
'id' => 1,
173+
'name' => 'InertiaJS',
174+
'url' => 'https://inertiajs.com',
175+
],
176+
[
177+
'id' => 2,
178+
'name' => 'Laravel',
179+
'url' => 'https://laravel.com',
180+
],
181+
[
182+
'id' => 3,
183+
'name' => 'VueJS',
184+
'url' => 'https://vuejs.org',
185+
],
186+
];
187+
}, 'o'),
188+
]);
189+
});
190+
191+
Route::get('/goodbye', function () {
192+
return Inertia::location('https://inertiajs.com/redirects');
193+
});
194+
195+
196+
Route::get('/poll', function () {
197+
return inertia('Poll', [
198+
'users' => collect([
199+
'Jonathan Reinink',
200+
'Taylor Otwell',
201+
'Joe Tannenbaum',
202+
'Jess Archer',
203+
'Claudio Dekker',
204+
'Sebastian De Deyne',
205+
'Pedro Borges',
206+
])->shuffle()->take(3)->values(),
207+
'companies' => collect([
208+
'InertiaJS',
209+
'Laravel',
210+
'VueJS',
211+
'Tailwind CSS',
212+
'AlpineJS',
213+
'Livewire',
214+
'Spatie',
215+
])->shuffle()->take(3)->values(),
216+
]);
217+
});
218+
219+
Route::get('/elsewhere', function () {
220+
return inertia('Users');
221+
});
222+
223+
Route::get('/sleepy/{duration}', function ($duration) {
224+
sleep($duration);
225+
return inertia('Users');
226+
});
227+
228+
Route::post('/sleepy/{duration}', function ($duration) {
229+
sleep($duration);
230+
return inertia('Article');
231+
});

0 commit comments

Comments
 (0)