Skip to content

Commit 28be363

Browse files
christianalfonichristianalfoni
committed
docs(website): add missing views in routing guide
1 parent 648440f commit 28be363

File tree

1 file changed

+370
-0
lines changed
  • packages/overmind-website/examples/guide/routing

1 file changed

+370
-0
lines changed

‎packages/overmind-website/examples/guide/routing/users.ts‎

Lines changed: 370 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,102 @@
11
const javascript = {
2+
components: [
3+
{
4+
fileName: 'components/App.js',
5+
target: 'jsx',
6+
code: `
7+
import { h, useOvermind } from 'overmind-components'
8+
import Users from './Users'
9+
10+
const App = () => {
11+
const { state } = useOvermind()
12+
13+
return (
14+
<div class="container">
15+
<nav>
16+
<a href="/">Home</a>
17+
<a href="/users">Users</a>
18+
</nav>
19+
{state.currentPage === 'home' ? <h1>Hello world!</h1> : null}
20+
{state.currentPage === 'users' ? <Users /> : null}
21+
</div>
22+
)
23+
}
24+
25+
export default App
26+
`,
27+
},
28+
{
29+
fileName: 'components/Users.js',
30+
target: 'jsx',
31+
code: `
32+
import { h, useOvermind } from 'overmind-components'
33+
import UserModal from './UserModal'
34+
35+
const Users = () => {
36+
const { state } = useOvermind()
37+
38+
return (
39+
<div class="content">
40+
{state.isLoadingUsers ? (
41+
<h4>Loading users...</h4>
42+
) : (
43+
<ul>
44+
{state.users.map(user => (
45+
<li key={user.id}>
46+
<a href={"/users/" + user.id}>{user.name}</a>
47+
</li>
48+
))}
49+
</ul>
50+
)}
51+
{state.modalUser ? <UserModal /> : null}
52+
</div>
53+
)
54+
}
55+
56+
export default Users
57+
`,
58+
},
59+
{
60+
fileName: 'components/UserModal.js',
61+
target: 'jsx',
62+
code: `
63+
import { h, useOvermind } from 'overmind-components'
64+
65+
const UserModal = () => {
66+
const { state } = useOvermind()
67+
const modalUser = state.modalUser
68+
const currentUserModalTabIndex = state.currentUserModalTabIndex
69+
70+
return (
71+
<a href="/users" class="backdrop">
72+
<div class="modal">
73+
{overmind.state.isLoadingUserDetails ? (
74+
<h4>Loading user details...</h4>
75+
) : (
76+
<div>
77+
<h4>{modalUser.name}</h4>
78+
<h6>{modalUser.details.email}</h6>
79+
<nav>
80+
<a href={"/users/" + modalUser.id + "?tab=0"}>bio</a>
81+
<a href={"/users/" + modalUser.id + "?tab=1"}>address</a>
82+
</nav>
83+
{currentUserModalTabIndex === 0 ? (
84+
<div class="tab-content">{modalUser.details.bio}</div>
85+
) : null}
86+
{currentUserModalTabIndex === 1 ? (
87+
<div class="tab-content">{modalUser.details.address}</div>
88+
) : null}
89+
</div>
90+
)}
91+
</div>
92+
</a>
93+
)
94+
}
95+
96+
export default UserModal
97+
`,
98+
},
99+
],
2100
react: [
3101
{
4102
fileName: 'components/App.js',
@@ -91,9 +189,187 @@ export default connect(UserModal)
91189
`,
92190
},
93191
],
192+
vue: [
193+
{
194+
fileName: 'components/app-component.vue',
195+
code: `
196+
<template>
197+
<div class="container">
198+
<nav>
199+
<a href="/">Home</a>
200+
<a href="/users">Users</a>
201+
</nav>
202+
<h1 v-if="overmind.state.currentPage === 'home'">Hello world!</h1>
203+
<users-list v-if="overmind.state.currentPage === 'users'"></users-list>
204+
</div>
205+
</template>
206+
<script>
207+
import { connect } from '../app'
208+
209+
export default connect({})
210+
</script>
211+
`,
212+
},
213+
{
214+
fileName: 'components/users-list.vue',
215+
code: `
216+
<template>
217+
<div class="content">
218+
<h4 v-if="overmind.state.isLoadingUsers">Loading users...</h4>
219+
<ul v-else>
220+
<li v-for="user in overmind.state.users" :key="user.id">
221+
<a href={"/users/" + user.id}>{{user.name}}</a>
222+
</li>
223+
</ul>
224+
<user-modal v-if="overmind.state.userModal"></user-modal>
225+
</div>
226+
</template>
227+
<script>
228+
import { connect } from '../app'
229+
230+
export default connect({})
231+
</script>
232+
`,
233+
},
234+
{
235+
fileName: 'components/user-modal.vue',
236+
code: `
237+
<template>
238+
<a href="/users" class="backdrop">
239+
<div class="modal">
240+
<h4 v-if="overmind.state.isLoadingUserDetails">Loading user details...</h4>
241+
<div v-else>
242+
<h4>{{overmind.state.modalUser.name}}</h4>
243+
<h6>{{overmind.state.modalUser.details.email}}</h6>
244+
<nav>
245+
<a v-bind:href="'/users/' + overmind.state.modalUser.id + '?tab=0'">bio</a>
246+
<a v-bind:href="'/users/' + overmind.state.modalUser.id + '?tab=1'">address</a>
247+
</nav>
248+
<div
249+
v-if="overmind.state.currentUserModalTabIndex === 0"
250+
class="tab-content"
251+
>
252+
{{modalUser.details.bio}}
253+
</div>
254+
<div
255+
v-if="overmind.state.currentUserModalTabIndex === 1"
256+
class="tab-content"
257+
>
258+
{{modalUser.details.address}}
259+
</div>
260+
</div>
261+
</div>
262+
</a>
263+
</template>
264+
<script>
265+
import { connect } from '../app'
266+
267+
export default connect({})
268+
</script>
269+
`,
270+
},
271+
],
94272
}
95273

96274
const typescript = {
275+
components: [
276+
{
277+
fileName: 'components/App.tsx',
278+
target: 'jsx',
279+
code: `
280+
import { h, Component, useOvermind } from 'overmind-components'
281+
import Users from './Users'
282+
283+
const App: Component = () => {
284+
const { state } = useOvermind()
285+
286+
return (
287+
<div class="container">
288+
<nav>
289+
<a href="/">Home</a>
290+
<a href="/users">Users</a>
291+
</nav>
292+
{state.currentPage === 'home' ? <h1>Hello world!</h1> : null}
293+
{state.currentPage === 'users' ? <Users /> : null}
294+
</div>
295+
)
296+
}
297+
298+
export default App
299+
`,
300+
},
301+
{
302+
fileName: 'components/Users.tsx',
303+
target: 'jsx',
304+
code: `
305+
import { h, Component, useOvermind } from 'overmind-components'
306+
import UserModal from './UserModal'
307+
308+
const Users: Component = () => {
309+
const { state } = useOvermind()
310+
311+
return (
312+
<div class="content">
313+
{state.isLoadingUsers ? (
314+
<h4>Loading users...</h4>
315+
) : (
316+
<ul>
317+
{state.users.map(user => (
318+
<li key={user.id}>
319+
<a href={"/users/" + user.id}>{user.name}</a>
320+
</li>
321+
))}
322+
</ul>
323+
)}
324+
{state.modalUser ? <UserModal /> : null}
325+
</div>
326+
)
327+
}
328+
329+
export default Users
330+
`,
331+
},
332+
{
333+
fileName: 'components/UserModal.tsx',
334+
target: 'jsx',
335+
code: `
336+
import { h, Component, useOvermind } from 'overmind-components'
337+
338+
const UserModal: Component = () => {
339+
const { state } = useOvermind()
340+
const modalUser = state.modalUser
341+
const currentUserModalTabIndex = state.currentUserModalTabIndex
342+
343+
return (
344+
<a href="/users" class="backdrop">
345+
<div class="modal">
346+
{overmind.state.isLoadingUserDetails ? (
347+
<h4>Loading user details...</h4>
348+
) : (
349+
<div>
350+
<h4>{modalUser.name}</h4>
351+
<h6>{modalUser.details.email}</h6>
352+
<nav>
353+
<a href={"/users/" + modalUser.id + "?tab=0"}>bio</a>
354+
<a href={"/users/" + modalUser.id + "?tab=1"}>address</a>
355+
</nav>
356+
{currentUserModalTabIndex === 0 ? (
357+
<div class="tab-content">{modalUser.details.bio}</div>
358+
) : null}
359+
{currentUserModalTabIndex === 1 ? (
360+
<div class="tab-content">{modalUser.details.address}</div>
361+
) : null}
362+
</div>
363+
)}
364+
</div>
365+
</a>
366+
)
367+
}
368+
369+
export default UserModal
370+
`,
371+
},
372+
],
97373
react: [
98374
{
99375
fileName: 'components/App.tsx',
@@ -183,6 +459,100 @@ export default connect(UserModal)
183459
`,
184460
},
185461
],
462+
vue: javascript.vue,
463+
angular: [
464+
{
465+
fileName: 'components/app-component.ts',
466+
code: `
467+
import { Component } from '@angular/core';
468+
import { connect } from '../app'
469+
470+
@Component({
471+
selector: 'app-component',
472+
template: \`
473+
<div class="container">
474+
<nav>
475+
<a href="/">Home</a>
476+
<a href="/users">Users</a>
477+
</nav>
478+
<h1 *ngIf="overmind.state.currentPage === 'home'">Hello world!</h1>
479+
<users-list *ngIf="overmind.state.currentPage === 'users'"></users-list>
480+
</div>
481+
\`
482+
})
483+
@connect()
484+
export class AppComponent {}
485+
`,
486+
},
487+
{
488+
fileName: 'components/users-list.ts',
489+
code: `
490+
import { Component } from '@angular/core';
491+
import { connect } from '../app'
492+
493+
@Component({
494+
selector: 'users-list',
495+
template: \`
496+
<div class="content">
497+
<h4 *ngIf="overmind.state.isLoadingUsers">Loading users...</h4>
498+
<ul *ngIf="!overmind.state.isLoadingUsers">
499+
<li *ngFor="let user of overmind.state.users;trackby: trackById">
500+
<a href={"/users/" + user.id}>{{user.name}}</a>
501+
</li>
502+
</ul>
503+
<user-modal *ngIf="overmind.state.userModal"></user-modal>
504+
</div>
505+
\`
506+
})
507+
@connect()
508+
export class UsersList {
509+
trackById(index, user) {
510+
return user.id
511+
}
512+
}
513+
`,
514+
},
515+
{
516+
fileName: 'components/user-modal.ts',
517+
code: `
518+
import { Component } from '@angular/core';
519+
import { connect } from '../app'
520+
521+
@Component({
522+
selector: 'user-modal',
523+
template: \`
524+
<a href="/users" class="backdrop">
525+
<div class="modal">
526+
<h4 *ngIf="overmind.state.isLoadingUserDetails">Loading user details...</h4>
527+
<div *ngIf="!overmind.state.isLoadingUserDetails">
528+
<h4>{{overmind.state.modalUser.name}}</h4>
529+
<h6>{{overmind.state.modalUser.details.email}}</h6>
530+
<nav>
531+
<a [href]="'/users/' + overmind.state.modalUser.id + '?tab=0'">bio</a>
532+
<a [href]="'/users/' + overmind.state.modalUser.id + '?tab=1'">address</a>
533+
</nav>
534+
<div
535+
*ngIf="overmind.state.currentUserModalTabIndex === 0"
536+
class="tab-content"
537+
>
538+
{{modalUser.details.bio}}
539+
</div>
540+
<div
541+
*ngIf="overmind.state.currentUserModalTabIndex === 1"
542+
class="tab-content"
543+
>
544+
{{modalUser.details.address}}
545+
</div>
546+
</div>
547+
</div>
548+
</a>
549+
\`
550+
})
551+
@connect()
552+
export class UserModal {}
553+
`,
554+
},
555+
],
186556
}
187557

188558
export default (ts, view) => (ts ? typescript[view] : javascript[view])

0 commit comments

Comments
 (0)