From 561e1efd383850f866ed673eab10ac54557fb63b Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 5 Dec 2022 00:25:00 +0100 Subject: [PATCH] more about crc card --- .../posts/crc-cards-as-training-material.mdx | 207 +++++++++++++++++- 1 file changed, 204 insertions(+), 3 deletions(-) diff --git a/src/pages/posts/crc-cards-as-training-material.mdx b/src/pages/posts/crc-cards-as-training-material.mdx index 0a6a222..aab9a11 100644 --- a/src/pages/posts/crc-cards-as-training-material.mdx +++ b/src/pages/posts/crc-cards-as-training-material.mdx @@ -2,12 +2,213 @@ title: CRC Cards as training material layout: post date: 2022-12-03 +draft: true --- # CRC Cards as training material -```ts -const test = new Constant(); +CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators. + +[CRC Cards](https://en.wikipedia.org/wiki/Class-responsibility-collaboration_card) are a teaching tool on how to design software. They were proposed by Kent Beck and Ward Cunningham, and, hell yeah it's useful. + +When I'm talking with tech leaders, my goal is to sharpen our vision about the software we are working on. When developers implemente features, I often see responsability leaks: the feature works, but the component are hard to read, hard to reuse and we pile up technical debt too quickly. + +CRC cards are a great tool to focus the discussion and to aknowledge the fact that the developer shared her global vision to each individual local component who must rely only on its local scope. Let's take an example of one discussion. + +## The horrible `UserBookmarks` component 😨 + +Disclaimer: we're about to look at a very ugly code that is definetely doing too many things. The purpose of the discussion I have is to show to the tech lead that we really want to prevent this to happen and it is her mission to standardize it with her team. + +Let's say we have a `UserBookmarks` component. Its role is to display a list of bookmarks the user saved. + +```tsx +interface Props { + user: User +} + +export const UserBookmarks: FunctionComponent = ({ user }) => { + const [bookmarks, setBookmarks] = useState([]) + const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false) + const [isLoading, setIsLoading] = useState(false) + + useEffect(() => { + setIsLoading(true) + + try { + const userBookmark = await fetch(`/users/${user.id}/bookmarks`, { + method: 'GET' + }) + setBookmarks(userBookmarks) + } catch (error) { + setBookmarks([]) + } finally { + setIsLoading(false) + } + }, []) + + const addBookmarkToUser = async ({ bookmark }) => { + setIsLoading(true) + try { + const newBookmark = await fetch(`/users/${user.id}/bookmarks`, { + method: 'POST', + body: JSON.stringify({ bookmark }) + }) + setBookmarks([...bookmarks, newBookmark]) + } catch (error) { + console.warn(error); + } finally { + setIsLoading(false) + } + } + + return
+ + {toolList} + + <PrimaryButton + text={strings['frontoffice.bookmark.all_bookmarks']} + onClick={() => setShowAddBookmarkModal(true))} + alt={'strings['frontoffice.bookmark.add_bookmarks']'} + image={<FontAwesomeIcon icon={['fas', 'plus']} color="white" />} + /> + + <AddBookmarkModal + visible={showAddBookmarkModal} + onClose={() => setShowAddBookmarkModal(false)} + tools={availableCustomTools} + onBookmarkAdd={addBookmarkToUser} + /> + </div> +} -console.log(test) +``` + +```tsx +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { gsap } from 'gsap'; +import differenceBy from 'lodash/differenceBy'; +import React, { useCallback, useEffect, useState } from 'react'; + +import { PrimaryButton } from 'components/CustomButton/CustomButton'; +import strings from 'components/Localization/Localisation'; +import { Title } from 'components/Title/Title'; +import { useLanguageContext } from 'context/LanguageContext'; +import { + addToolToUser, + fetchToolsForUser, + removeToolFromUser, +} from 'data/actions/ToolActions'; +import { CodeIso } from 'types/Language'; +import { Tool } from 'types/Tool'; +import { Tools } from 'types/Tools'; +import { Ui } from 'types/Ui'; +import { User } from 'types/User'; + +import AddToolModal from './AddToolModal/AddToolModal'; +import { TilesSkeleton } from './TilesSkeleton'; +import { ToolItem } from './Tool/ToolItem'; + +export const Toolbox: React.FC = ({ + user, + ui, + customTools, + userTools, + indispensableTools, + userIsUpdating, + getToolData, + addToolToUser, + removeToolFromUser, +}) => { + const { language } = useLanguageContext(); + + const [showAddToolModal, setShowAddToolModal] = useState(false); + const [showDeleteTool, setShowDeleteTool] = useState(false); + + const [tileAnimation, setTileAnimation] = useState<GSAPTween>(); + const [fakeTiles, setFakeTiles] = useState<unknown[]>([]); + + const [toolList, setToolList] = useState<JSX.Element>(); + + const userId = user['@id']; + const uiLoading = ui.loading; + + const availableCustomTools = differenceBy(customTools, userTools, '@id'); + + const startLoadAnimation = (): void => { + setTileAnimation( + gsap.to(fakeTiles, { + duration: 0.8, + opacity: 0.35, + yoyo: true, + repeat: -1, + stagger: 0.025, + }), + ); + }; + + const stopLoadingAnimation = useCallback((): void => { + tileAnimation?.kill(); + }, [tileAnimation]); + + const addBookmark = (): void => { + setShowAddToolModal(true); + setShowDeleteTool(false); + }; + + useEffect(() => { + startLoadAnimation(); + if (userId) { + getToolData(user, language); + } + }, [userId, language]); + + useEffect(() => { + if (!uiLoading) { + stopLoadingAnimation(); + setToolList( + <div className="tool-list"> + {indispensableTools.map(tool => ( + <ToolItem key={tool['@id']} data={tool} showDeleteButton={false} /> + ))} + + {userTools.map(tool => ( + <ToolItem + key={tool['@id']} + data={tool} + showDeleteButton={showDeleteTool} + onDelete={() => removeToolFromUser(tool)} + /> + ))} + + </div>, + ); + } else { + setToolList(<TilesSkeleton setFakeTiles={setFakeTiles} numberOfTiles={16} />); + } + }, [uiLoading]); + + return ( + <div className="Toolbox"> + <Title title={strings['frontoffice.toolbox.my_tools']} /> + {toolList} + + <PrimaryButton + text={strings['frontoffice.toolbox.all_apps']} + onClick={addBookmark} + alt={'see all apps button'} + image={<FontAwesomeIcon icon={['fas', 'arrow-right']} color="white" />} + positionOfImage="right" + disabled={true} + /> + + <AddToolModal + visible={showAddToolModal} + onClose={() => setShowAddToolModal(false)} + tools={availableCustomTools} + onToolAdd={addToolToUser} + userIsUpdating={userIsUpdating} + /> + </div> + ); +}; ```