this repo has no description
add simplification at the end
+29
-23
+29
-23
src/pages/posts/crc-cards-as-training-material.mdx
+29
-23
src/pages/posts/crc-cards-as-training-material.mdx
···
134
134
// ...
135
135
```
136
136
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.
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 <OrderTag order={1} />.
138
138
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.
139
+
> We'll simplify at the very end, once we'll be finished with our CRC card.
140
140
141
-
```tsx
142
-
interface Props {
143
-
userId: number
144
-
}
145
-
146
-
export const UserBookmarks: FunctionComponent<Props> = ({ userId }) => {
147
-
// ...
148
-
const userBookmark = await fetch(`/users/${userId}/bookmarks`, {
149
-
method: 'GET'
150
-
})
151
-
// ...
152
-
const newBookmark = await fetch(`/users/${userId}/bookmarks`, {
153
-
method: 'POST',
154
-
body: JSON.stringify({ bookmark })
155
-
})
156
-
// ...
157
-
```
141
+
> 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.
158
142
159
143
## The secret sauce
160
144
···
176
160
responsabilities={[
177
161
"Display user bookmarks",
178
162
"fetching bookmarks",
179
-
"handling async processes",
163
+
"handling async processes (loading, error)",
180
164
"handling add bookmark modal visibility",
181
165
]}
182
166
collaborators={["Home.tsx"]}
···
184
168
185
169
### The ugly responsability
186
170
187
-
The main problem I see in the `UserBookmarks` component is not about the component itself, it's more on one of its children: `TilesSkeleton`. It's doing a good job for the user experience but it's asking too much for the parent to be able to use it: `UserBookmarks` doesn't care about animating the skeleton.
171
+
The main problem I see in the `UserBookmarks` component is not about the component itself, it's more on one of its children: `TilesSkeleton`. It's doing a good job for the user experience but it's asking too much for the parent to be able to use it: `UserBookmarks` doesn't care about animating the skeleton. <OrderTag order={2} />
188
172
189
173
```tsx
190
174
const tilesAnimation = gsap.to({
···
203
187
responsabilities={[
204
188
"Display user bookmarks",
205
189
"fetching bookmarks",
206
-
"handling async processes",
190
+
"handling async processes (loading, error)",
207
191
"handling add bookmark modal visibility",
208
192
"⚠️ Defining TilesSkeleton animation",
209
193
]}
210
194
collaborators={["Home.tsx"]}
211
195
/>
212
196
213
-
It must become
197
+
## Simplification
198
+
199
+
### <OrderTag order={1} /> only necessary property
200
+
201
+
```tsx
202
+
interface Props {
203
+
userId: number
204
+
}
205
+
206
+
export const UserBookmarks: FunctionComponent<Props> = ({ userId }) => {
207
+
// ...
208
+
const userBookmark = await fetch(`/users/${userId}/bookmarks`, {
209
+
method: 'GET'
210
+
})
211
+
// ...
212
+
const newBookmark = await fetch(`/users/${userId}/bookmarks`, {
213
+
method: 'POST',
214
+
body: JSON.stringify({ bookmark })
215
+
})
216
+
// ...
217
+
```
218
+
219
+
### <OrderTag order={2} /> not responsible about the animation
214
220
215
221
```tsx
216
222
// removing the magic number at the same time