Added font-awesome. Some cosmetic refactoring.

.storybook/preview.ts

@@ -1,4 +1,9 @@
 import type { Preview } from '@storybook/react'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
+
+library.add(fas, far)
 
 const preview: Preview = {
     parameters: {

package-lock.json

@@ -8,6 +8,10 @@
       "name": "meals-made-easy-app",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@tanstack/react-query": "^5.45.1",
         "@tanstack/react-router": "^1.38.1",
         "@tanstack/router-devtools": "^1.39.4",
@@ -2632,6 +2636,64 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -11558,7 +11620,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12189,7 +12250,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -12199,8 +12259,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",

package.json

@@ -12,6 +12,10 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@tanstack/react-query": "^5.45.1",
     "@tanstack/react-router": "^1.38.1",
     "@tanstack/router-devtools": "^1.39.4",

src/api/getRecipeInfos.ts

@@ -1,20 +1,5 @@
 import { ApiError } from './ApiError'
-
+import { RecipeInfosView } from './types/RecipeInfosView'
-export interface RecipeInfoView {
-    id: number
-    updated: Date
-    title: string
-    ownerId: number
-    ownerUsername: string
-    isPublic: boolean
-    starCount: number
-}
-
-export interface RecipeInfosView {
-    pageNumber: number
-    pageSize: number
-    content: RecipeInfoView[]
-}
 
 const getRecipeInfos = async (
     token: string | null,

src/api/types/ImageView.ts

@@ -0,0 +1,16 @@
+import UserInfoView from './UserInfoView'
+
+interface ImageView {
+    url: string
+    created: string
+    modified: string | null
+    filename: string
+    mimeType: string
+    alt: string | null
+    caption: string | null
+    owner: UserInfoView
+    isPublic: boolean
+    viewers: UserInfoView[]
+}
+
+export default ImageView

src/api/types/RecipeInfoView.ts

@@ -0,0 +1,12 @@
+import ImageView from './ImageView'
+
+export interface RecipeInfoView {
+    id: number
+    updated: Date
+    title: string
+    ownerId: number
+    ownerUsername: string
+    isPublic: boolean
+    starCount: number
+    mainImage: ImageView
+}

src/api/types/RecipeInfosView.ts

@@ -0,0 +1,7 @@
+import { RecipeInfoView } from './types/RecipeInfoView'
+
+export interface RecipeInfosView {
+    pageNumber: number
+    pageSize: number
+    content: RecipeInfoView[]
+}

src/api/types/UserInfoView.ts

@@ -0,0 +1,6 @@
+interface UserInfoView {
+    id: number
+    username: string
+}
+
+export default UserInfoView

src/components/recipe-card/RecipeCard.tsx

@@ -1,34 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
 export interface RecipeCardProps {
     title: string
-    owner?: string
+    ownerUsername: string
-    imgUrl?: string
+    mainImageUrl: string
-    starCount?: number
+    starCount: number
-    isPublic?: boolean
+    isPublic: boolean
 }
 
 const RecipeCard = ({
     title,
-    owner,
+    ownerUsername,
-    imgUrl,
+    mainImageUrl,
     starCount,
     isPublic
 }: RecipeCardProps) => {
     return (
         <article>
-            {imgUrl ? <img src={imgUrl} /> : null}
+            {mainImageUrl ? <img src={mainImageUrl} /> : null}
-            <div className="title-rating-container">
+            <div className="title-star-count-container">
                 <h1>{title}</h1>
-                {starCount ? <span>{starCount}</span> : null}
+                {starCount ? (
+                    <span>
+                        <FontAwesomeIcon icon="star" size="sm" />
+                        {starCount}
+                    </span>
+                ) : null}
             </div>
             <div className="owner-container">
-                {owner ? <p>@{owner}</p> : null}
+                {ownerUsername ? <p>{ownerUsername}</p> : null}
             </div>
             <div className="is-public-container">
                 {isPublic !== undefined ? (
                     isPublic ? (
-                        <p>public</p>
+                        <FontAwesomeIcon icon="globe" size="sm" />
                     ) : (
-                        <p>not public</p>
+                        <FontAwesomeIcon icon="lock" size="sm" />
                     )
                 ) : null}
             </div>

src/pages/recipes/Recipes.tsx

@@ -33,7 +33,8 @@ const Recipes = () => {
             <RecipeCard
                 key={view.id}
                 title={view.title}
-                owner={view.ownerUsername}
+                ownerUsername={view.ownerUsername}
+                mainImageUrl={view.mainImage.url}
                 starCount={view.starCount}
                 isPublic={view.isPublic}
             />

src/stories/recipe-card/RecipeCard.stories.ts

@@ -13,9 +13,10 @@ type Story = StoryObj<typeof meta>
 export const Primary: Story = {
     args: {
         title: 'My Recipe',
-        owner: 'JesseBrault',
+        ownerUsername: 'JesseBrault',
         starCount: 7,
         isPublic: true,
-        imgUrl: 'https://www.simplyrecipes.com/thmb/L4nBpdZCubnbGtVbOW90JQSBVWc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/Simply-Recipes-Easy-Banana-Bread-LEAD-2-2-63dd39af009945d58f5bf4c2ae8d6070.jpg'
+        mainImageUrl:
+            'https://www.simplyrecipes.com/thmb/L4nBpdZCubnbGtVbOW90JQSBVWc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/Simply-Recipes-Easy-Banana-Bread-LEAD-2-2-63dd39af009945d58f5bf4c2ae8d6070.jpg'
     }
 }