this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

update crc cards post

+22 -81
+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
··· 122 122 } 123 123 124 124 blockquote { 125 - padding: 2rem; 125 + padding: 1.2rem; 126 + margin: 1rem 2rem; 126 127 border-radius: 0.3em; 127 128 background-color: #574b90; 128 129 }
+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.