this repo has no description
update crc cards post
+22
-81
+4
-7
components.d.ts
+4
-7
components.d.ts
···
1
1
// generated by unplugin-vue-components
2
2
// We suggest you to commit this file into source control
3
-
// Read more: https://github.com/vuejs/core/pull/3399
4
-
import '@vue/runtime-core'
5
-
6
-
export {}
3
+
// Read more: https://github.com/vuejs/vue-next/pull/3399
7
4
8
-
declare module '@vue/runtime-core' {
5
+
declare module 'vue' {
9
6
export interface GlobalComponents {
10
7
AboutMe: typeof import('./src/components/presentation/about-me.vue')['default']
11
8
AppHeader: typeof import('./src/components/app-header.vue')['default']
···
16
13
MyBooks: typeof import('./src/components/presentation/my-books.vue')['default']
17
14
MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
18
15
ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
19
-
RouterLink: typeof import('vue-router')['RouterLink']
20
-
RouterView: typeof import('vue-router')['RouterView']
21
16
Welcome: typeof import('./src/components/Welcome.vue')['default']
22
17
}
23
18
}
19
+
20
+
export { }
+2
-1
src/assets/base.scss
+2
-1
src/assets/base.scss
+16
-73
src/pages/posts/crc-cards-as-training-material.mdx
+16
-73
src/pages/posts/crc-cards-as-training-material.mdx
···
78
78
})
79
79
80
80
return <div className="user-bookmarks">
81
-
<Title title={strings['frontoffice.bookmark.user_bookmarks']} />
81
+
<Title title={i18n('bookmark.user_bookmarks')} />
82
82
{isLoading
83
83
? <TilesSkeleton animation={tilesAnimation} numberOfTiles={16} />
84
84
: <BookmarkItem
85
-
key={bookmark.id}
86
-
data={bookmark}
87
-
/>}
85
+
key={bookmark.id}
86
+
data={bookmark}
87
+
/>}
88
88
89
89
<PrimaryButton
90
-
text={strings['frontoffice.bookmark.all_bookmarks']}
90
+
text={i18n('bookmark.add_bookmark')}
91
91
onClick={() => setShowAddBookmarkModal(true))}
92
-
alt={'strings['frontoffice.bookmark.add_bookmarks']'}
93
92
image={<FontAwesomeIcon icon={['fas', 'plus']} color="white" />}
94
93
/>
95
94
···
128
127
As we are talking about inputs, I want to know how the props are used. Are they necessary? Are they sufficient? Here we can see that `user` is only used for fetching data:
129
128
130
129
```ts
131
-
...
130
+
// ...
132
131
const userBookmark = await fetch(`/users/${user.id}/bookmarks`, {
133
-
...
132
+
// ...
133
+
const newBookmark = await fetch(`/users/${user.id}/bookmarks`, {
134
+
// ...
134
135
```
135
136
136
-
Only the `user id` is necessary, why not just give the userId instead of the whole object?
137
-
138
-
> Here is a classic responsibility leak I frequentely see. Components don't care that user have a `user.address.line1` property when they only want their `id`.
137
+
Only the `user id` is necessary, why not just give the user id instead of the whole object? That will be our first simplification.
139
138
140
-
That will be our first simplification.
139
+
> Here is a classic responsibility leak I frequentely see. When you're developing a feature, you have the big picture but `UserBookmarks` and its local knowledge don't care about the user having a `user.address.line1` property.
141
140
142
141
```tsx
143
142
interface Props {
144
143
userId: number
145
144
}
146
145
147
-
export const UserBookmarks: FunctionComponent<Props> = ({ userID }) => {
148
-
const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
149
-
const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)
150
-
const [isLoading, setIsLoading] = useState(false)
151
-
152
-
useEffect(() => {
153
-
setIsLoading(true)
154
-
155
-
try {
146
+
export const UserBookmarks: FunctionComponent<Props> = ({ userId }) => {
147
+
// ...
156
148
const userBookmark = await fetch(`/users/${userId}/bookmarks`, {
157
149
method: 'GET'
158
150
})
159
-
setBookmarks(userBookmarks)
160
-
} catch (error) {
161
-
setBookmarks([])
162
-
} finally {
163
-
setIsLoading(false)
164
-
}
165
-
}, [])
166
-
167
-
const addBookmarkToUser = async ({ bookmark }) => {
168
-
setIsLoading(true)
169
-
try {
151
+
// ...
170
152
const newBookmark = await fetch(`/users/${userId}/bookmarks`, {
171
153
method: 'POST',
172
154
body: JSON.stringify({ bookmark })
173
155
})
174
-
setBookmarks([...bookmarks, newBookmark])
175
-
} catch (error) {
176
-
console.warn(error);
177
-
} finally {
178
-
setIsLoading(false)
179
-
}
180
-
}
181
-
182
-
const tilesAnimation = gsap.to({
183
-
duration: 0.8,
184
-
opacity: 0.35,
185
-
yoyo: true,
186
-
repeat: -1,
187
-
stagger: 0.025,
188
-
})
189
-
190
-
return <div className="user-bookmarks">
191
-
<Title title={strings['frontoffice.bookmark.user_bookmarks']} />
192
-
{isLoading
193
-
? <TilesSkeleton animation={tilesAnimation} numberOfTiles={16} />
194
-
: <BookmarkItem
195
-
key={bookmark.id}
196
-
data={bookmark}
197
-
/>}
198
-
199
-
<PrimaryButton
200
-
text={strings['frontoffice.bookmark.all_bookmarks']}
201
-
onClick={() => setShowAddBookmarkModal(true))}
202
-
alt={'strings['frontoffice.bookmark.add_bookmarks']'}
203
-
image={<FontAwesomeIcon icon={['fas', 'plus']} color="white" />}
204
-
/>
205
-
206
-
<AddBookmarkModal
207
-
visible={showAddBookmarkModal}
208
-
onClose={() => setShowAddBookmarkModal(false)}
209
-
bookmarks={bookmarks}
210
-
onBookmarkAdd={addBookmarkToUser}
211
-
/>
212
-
</div>
213
-
}
156
+
// ...
214
157
```
215
158
216
159
## The secret sauce
217
160
218
-
Now comes where we'll definetely challenge how the component does its magic.
161
+
Now comes where we'll challenge how the component does its magic.