this repo has no description
more crc cards post
+62
-1
+4
src/layouts/post.vue
+4
src/layouts/post.vue
+58
-1
src/pages/posts/crc-cards-as-training-material.mdx
+58
-1
src/pages/posts/crc-cards-as-training-material.mdx
···
35
35
}
36
36
37
37
export const UserBookmarks: FunctionComponent<Props> = ({ user }) => {
38
-
const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
39
38
const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)
39
+
const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
40
40
const [isLoading, setIsLoading] = useState(false)
41
41
42
42
useEffect(() => {
···
159
159
## The secret sauce
160
160
161
161
Now comes where we'll challenge how the component does its magic.
162
+
163
+
### Tell me about your hooks, I'll tell you who you are
164
+
165
+
Without being a rule of thumb, I like to count how many `use` there are in the component, it gives me good approximation about how many responsibilities lies.
166
+
167
+
1. `const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)`
168
+
2. `const [bookmarks, setBookmarks] = useState<Bookmark[]>([])`
169
+
3. `const [isLoading, setIsLoading] = useState(false)`
170
+
4. `useEffect(() => {`
171
+
172
+
4 hooks, is it too many? too few? I guess it depends but here we can see there are 3 hooks managing fetching the data and one handling the modal for adding a bookmark. We can update our CRC Card.
173
+
174
+
<CrcCard
175
+
name="UserBookmarks"
176
+
responsabilities={[
177
+
"Display user bookmarks",
178
+
"fetching bookmarks",
179
+
"handling async processes",
180
+
"handling add bookmark modal visibility",
181
+
]}
182
+
collaborators={["Home.tsx"]}
183
+
/>
184
+
185
+
### The ugly responsability
186
+
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.
188
+
189
+
```tsx
190
+
const tilesAnimation = gsap.to({
191
+
duration: 0.8,
192
+
opacity: 0.35,
193
+
yoyo: true,
194
+
repeat: -1,
195
+
stagger: 0.025,
196
+
})
197
+
// ...
198
+
<TilesSkeleton animation={tilesAnimation} numberOfTiles={16} />
199
+
```
200
+
201
+
<CrcCard
202
+
name="UserBookmarks"
203
+
responsabilities={[
204
+
"Display user bookmarks",
205
+
"fetching bookmarks",
206
+
"handling async processes",
207
+
"handling add bookmark modal visibility",
208
+
"⚠️ Defining TilesSkeleton animation",
209
+
]}
210
+
collaborators={["Home.tsx"]}
211
+
/>
212
+
213
+
It must become
214
+
215
+
```tsx
216
+
// removing the magic number at the same time
217
+
<TilesSkeleton numberOfTiles={MAXIMUM_BOOKMARKS} />
218
+
```