diff --git a/src/pages/posts/crc-cards-as-training-material.mdx b/src/pages/posts/crc-cards-as-training-material.mdx index 7d76856..78d0a85 100644 --- a/src/pages/posts/crc-cards-as-training-material.mdx +++ b/src/pages/posts/crc-cards-as-training-material.mdx @@ -134,28 +134,12 @@ const newBookmark = await fetch(`/users/${user.id}/bookmarks`, { // ... ``` -Only the `user id` is necessary, why not just give the user id instead of the whole object? That will be our first simplification. +Only the `user id` is necessary, why not just give the user id instead of the whole object? That will be our first simplification . + +> We'll simplify at the very end, once we'll be finished with our CRC card. > 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. -```tsx -interface Props { - userId: number -} - -export const UserBookmarks: FunctionComponent = ({ userId }) => { -// ... - const userBookmark = await fetch(`/users/${userId}/bookmarks`, { - method: 'GET' - }) -// ... - const newBookmark = await fetch(`/users/${userId}/bookmarks`, { - method: 'POST', - body: JSON.stringify({ bookmark }) - }) -// ... -``` - ## The secret sauce Now comes where we'll challenge how the component does its magic. @@ -176,7 +160,7 @@ Without being a rule of thumb, I like to count how many `use` there are in the c responsabilities={[ "Display user bookmarks", "fetching bookmarks", - "handling async processes", + "handling async processes (loading, error)", "handling add bookmark modal visibility", ]} collaborators={["Home.tsx"]} @@ -184,7 +168,7 @@ Without being a rule of thumb, I like to count how many `use` there are in the c ### The ugly responsability -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. +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. ```tsx const tilesAnimation = gsap.to({ @@ -203,14 +187,36 @@ const tilesAnimation = gsap.to({ responsabilities={[ "Display user bookmarks", "fetching bookmarks", - "handling async processes", + "handling async processes (loading, error)", "handling add bookmark modal visibility", "⚠️ Defining TilesSkeleton animation", ]} collaborators={["Home.tsx"]} /> -It must become +## Simplification + +### only necessary property + +```tsx +interface Props { + userId: number +} + +export const UserBookmarks: FunctionComponent = ({ userId }) => { +// ... + const userBookmark = await fetch(`/users/${userId}/bookmarks`, { + method: 'GET' + }) +// ... + const newBookmark = await fetch(`/users/${userId}/bookmarks`, { + method: 'POST', + body: JSON.stringify({ bookmark }) + }) +// ... +``` + +### not responsible about the animation ```tsx // removing the magic number at the same time