Skip to content

Commit 3f559ff

Browse files
christianalfonichristianalfoni
committed
docs(website): add managing lists guide
1 parent 265a947 commit 3f559ff

File tree

11 files changed

+507
-8
lines changed

11 files changed

+507
-8
lines changed

‎packages/overmind-website/examples/guide/managinglists/derivetolist.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export default (ts) =>
2+
ts
3+
? [
4+
{
5+
fileName: 'app/state.ts',
6+
code: `
7+
import { Derive } from 'overmind'
8+
9+
export type Post {
10+
id: string
11+
title: string
12+
body: string
13+
datetime: number
14+
}
15+
16+
export type State = {
17+
posts: { [id: string] : Post }
18+
postsList: Derive<Post[], State>
19+
}
20+
21+
export const state: State = {
22+
posts: {}
23+
postsList: state => Object.keys(state.posts).map(id => state.posts[id])
24+
}
25+
`,
26+
},
27+
]
28+
: [
29+
{
30+
fileName: 'app/state.js',
31+
code: `
32+
export default = {
33+
posts: {}
34+
postsList: state => Object.keys(state.posts).map(id => state.posts[id])
35+
}
36+
`,
37+
},
38+
]

‎packages/overmind-website/examples/guide/managinglists/filtering.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
export default (ts) =>
2+
ts
3+
? [
4+
{
5+
fileName: 'app/state.ts',
6+
code: `
7+
import { Derive } from 'overmind'
8+
9+
export type Post {
10+
id: string
11+
title: string
12+
body: string
13+
datetime: number
14+
}
15+
16+
export type State = {
17+
posts: { [id: string] : Post }
18+
showCount: number
19+
postsList: Derive<Post[], State>
20+
}
21+
22+
export const state: State = {
23+
posts: {},
24+
showCount: 10,
25+
postsList: state =>
26+
Object.keys(state.posts)
27+
.map(id => state.posts[id])
28+
.sort((postA, postB) => {
29+
if (postA.datetime > postB.datetime) {
30+
return 1
31+
} else if (postA.datetime < postB.datetime) {
32+
return -1
33+
}
34+
35+
return 0
36+
})
37+
.slice(0, state.showCount)
38+
}
39+
`,
40+
},
41+
]
42+
: [
43+
{
44+
fileName: 'app/state.js',
45+
code: `
46+
export default = {
47+
posts: {},
48+
showCount: 10,
49+
postsList: state =>
50+
Object.keys(state.posts).map(id => state.posts[id])
51+
.map(id => state.posts[id])
52+
.sort((postA, postB) => {
53+
if (postA.datetime > postB.datetime) {
54+
return 1
55+
} else if (postA.datetime < postB.datetime) {
56+
return -1
57+
}
58+
59+
return 0
60+
})
61+
.slice(0, state.showCount)
62+
}
63+
`,
64+
},
65+
]

‎packages/overmind-website/examples/guide/managinglists/object.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default () => [
2+
{
3+
code: `
4+
{
5+
"uniqueId1": {},
6+
"uniqueId2": {},
7+
"uniqueId3": {}
8+
}
9+
`,
10+
},
11+
]

‎packages/overmind-website/examples/guide/managinglists/render.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const javascript = {
2+
react: [
3+
{
4+
fileName: 'components/Posts.jsx',
5+
target: 'jsx',
6+
code: `
7+
import React from 'react'
8+
import { connect } from '../app'
9+
10+
const Posts = ({ app }) => (
11+
<ul>
12+
{app.state.postsList.map(post =>
13+
<li key={post.id}>{post.title}</li>
14+
)}
15+
</ul>
16+
)
17+
18+
export default connect(Posts)
19+
`,
20+
},
21+
],
22+
vue: [
23+
{
24+
fileName: 'components/Posts.vue (template)',
25+
target: 'markup',
26+
code: `
27+
<ul>
28+
<li v-for="post in app.state.postsList" :key="post.id>
29+
{{ post.title }}
30+
</li>
31+
</ul>
32+
`,
33+
},
34+
{
35+
fileName: 'components/Posts.vue (script)',
36+
code: `
37+
import { connect } from '../app'
38+
39+
export default connect({})
40+
`,
41+
},
42+
],
43+
}
44+
45+
const typescript = {
46+
react: [
47+
{
48+
fileName: 'components/Posts.tsx',
49+
code: `
50+
import * as React from 'react'
51+
import { connect, Connect } from './app'
52+
53+
const Posts: React.SFC<Connect> = ({ app }) => (
54+
<ul>
55+
{app.state.postsList.map(post =>
56+
<li key={post.id}>{post.title}</li>
57+
)}
58+
</ul>
59+
)
60+
61+
export default connect(App)
62+
`,
63+
},
64+
],
65+
vue: javascript.vue,
66+
angular: [
67+
{
68+
fileName: 'components/posts.component.ts',
69+
code: `
70+
import { Component } from '@angular/core';
71+
import { connect } from '../app'
72+
73+
@Component({
74+
selector: 'app-posts',
75+
template: \`
76+
<ul>
77+
<li *ngFor="let post of app.state.postsList;trackby: trackById">
78+
{{post.title}}
79+
</li>
80+
</ul>
81+
\`
82+
})
83+
@connect()
84+
export class List {
85+
trackById(index, post) {
86+
return post.id
87+
}
88+
}
89+
`,
90+
},
91+
],
92+
}
93+
94+
export default (ts, view) => (ts ? typescript[view] : javascript[view])

‎packages/overmind-website/examples/guide/managinglists/render2.ts‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
const javascript = {
2+
react: [
3+
{
4+
fileName: 'components/Post.jsx',
5+
target: 'jsx',
6+
code: `
7+
import React from 'react'
8+
import { connect } from '../app'
9+
10+
const Post = ({ post }) => (
11+
<li>{post.title}</li>
12+
)
13+
14+
export default connect(Post)
15+
`,
16+
},
17+
{
18+
fileName: 'components/Posts.jsx',
19+
target: 'jsx',
20+
code: `
21+
import React from 'react'
22+
import { connect } from '../app'
23+
import Post from './Post'
24+
25+
const Posts = ({ app }) => (
26+
<ul>
27+
{app.state.postsList.map(post =>
28+
<Item key={post.id} post={post} />
29+
)}
30+
</ul>
31+
)
32+
33+
export default connect(Posts)
34+
`,
35+
},
36+
],
37+
vue: [
38+
{
39+
fileName: 'components/Post.vue (template)',
40+
target: 'markup',
41+
code: `
42+
<li>{{ post.title }}</li>
43+
`,
44+
},
45+
{
46+
fileName: 'components/Post.vue (script)',
47+
code: `
48+
import { connect } from '../app'
49+
50+
export default connect({
51+
props: ['post']
52+
})
53+
`,
54+
},
55+
{
56+
fileName: 'components/Posts.vue (template)',
57+
target: 'markup',
58+
code: `
59+
<ul>
60+
<li is="Post" v-for="post in app.state.postsList" v-bind:post="post" :key="post.id" />
61+
</ul>
62+
`,
63+
},
64+
{
65+
fileName: 'components/Posts.vue (script)',
66+
code: `
67+
import { connect } from '../app'
68+
import Post from './Post'
69+
70+
export default connect({
71+
components: {
72+
Post,
73+
},
74+
})
75+
`,
76+
},
77+
],
78+
}
79+
80+
const typescript = {
81+
react: [
82+
{
83+
fileName: 'components/Post.tsx',
84+
code: `
85+
import * as React from 'react'
86+
import { connect, Connect } from '../app'
87+
import { Post as TPost } from '../app/state'
88+
89+
type Props = {
90+
post: TPost
91+
} & Connect
92+
93+
const Post: React.SFC<Props> = ({ post }) => (
94+
<li>{post.title}</li>
95+
)
96+
97+
export default connect(Post)
98+
`,
99+
},
100+
{
101+
fileName: 'components/Posts.tsx',
102+
code: `
103+
import * as React from 'react'
104+
import { connect, Connect } from '../app'
105+
import Post from './Post'
106+
107+
const Posts: React.SFC<Connect> = ({ app }) => (
108+
<ul>
109+
{app.state.postsList.map(post =>
110+
<Item key={post.id} post={post} />
111+
)}
112+
</ul>
113+
)
114+
115+
export default connect(Posts)
116+
`,
117+
},
118+
],
119+
vue: javascript.vue,
120+
angular: [
121+
{
122+
fileName: 'components/post.component.ts',
123+
code: `
124+
import { Component,Input } from '@angular/core';
125+
import { connect } from '../app'
126+
import { Item } from '../app/state'
127+
128+
@Component({
129+
selector: 'app-post',
130+
template: \`
131+
<li>
132+
{{post.title}}
133+
</li>
134+
\`
135+
})
136+
@connect()
137+
export class List {
138+
@Input() post: Post;
139+
}
140+
`,
141+
},
142+
{
143+
fileName: 'components/posts.component.ts',
144+
code: `
145+
import { Component } from '@angular/core';
146+
import { connect } from '../app'
147+
148+
@Component({
149+
selector: 'app-posts',
150+
template: \`
151+
<ul>
152+
<app-post
153+
*ngFor="let post of app.state.postsList;trackby: trackById"
154+
[post]="post"
155+
></app-post>
156+
</ul>
157+
\`
158+
})
159+
@connect()
160+
export class List {
161+
trackById(index, post) {
162+
return post.id
163+
}
164+
}
165+
`,
166+
},
167+
],
168+
}
169+
170+
export default (ts, view) => (ts ? typescript[view] : javascript[view])

0 commit comments

Comments
 (0)