diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 84141e2..9c8075f 100644 --- a/.storybook/preview.ts +++ b/.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: { diff --git a/package-lock.json b/package-lock.json index d601a4e..036566d 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/proxy-addr": { "version": "2.0.7", diff --git a/package.json b/package.json index 76c6906..4976974 100644 --- a/package.json +++ b/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", diff --git a/src/api/getRecipeInfos.ts b/src/api/getRecipeInfos.ts index 3a49fc2..3a936be 100644 --- a/src/api/getRecipeInfos.ts +++ b/src/api/getRecipeInfos.ts @@ -1,20 +1,5 @@ import { ApiError } from './ApiError' - -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[] -} +import { RecipeInfosView } from './types/RecipeInfosView' const getRecipeInfos = async ( token: string | null, diff --git a/src/api/types/ImageView.ts b/src/api/types/ImageView.ts new file mode 100644 index 0000000..7881413 --- /dev/null +++ b/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 diff --git a/src/api/types/RecipeInfoView.ts b/src/api/types/RecipeInfoView.ts new file mode 100644 index 0000000..8a08929 --- /dev/null +++ b/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 +} diff --git a/src/api/types/RecipeInfosView.ts b/src/api/types/RecipeInfosView.ts new file mode 100644 index 0000000..8bebb79 --- /dev/null +++ b/src/api/types/RecipeInfosView.ts @@ -0,0 +1,7 @@ +import { RecipeInfoView } from './types/RecipeInfoView' + +export interface RecipeInfosView { + pageNumber: number + pageSize: number + content: RecipeInfoView[] +} diff --git a/src/api/types/UserInfoView.ts b/src/api/types/UserInfoView.ts new file mode 100644 index 0000000..bf32360 --- /dev/null +++ b/src/api/types/UserInfoView.ts @@ -0,0 +1,6 @@ +interface UserInfoView { + id: number + username: string +} + +export default UserInfoView diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx index 2c934b0..91416af 100644 --- a/src/components/recipe-card/RecipeCard.tsx +++ b/src/components/recipe-card/RecipeCard.tsx @@ -1,34 +1,41 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + export interface RecipeCardProps { title: string - owner?: string - imgUrl?: string - starCount?: number - isPublic?: boolean + ownerUsername: string + mainImageUrl: string + starCount: number + isPublic: boolean } const RecipeCard = ({ title, - owner, - imgUrl, + ownerUsername, + mainImageUrl, starCount, isPublic }: RecipeCardProps) => { return (
- {imgUrl ? : null} -
+ {mainImageUrl ? : null} +

{title}

- {starCount ? {starCount} : null} + {starCount ? ( + + + {starCount} + + ) : null}
- {owner ?

@{owner}

: null} + {ownerUsername ?

{ownerUsername}

: null}
{isPublic !== undefined ? ( isPublic ? ( -

public

+ ) : ( -

not public

+ ) ) : null}
diff --git a/src/pages/recipes/Recipes.tsx b/src/pages/recipes/Recipes.tsx index 7f2c6a0..2ac2326 100644 --- a/src/pages/recipes/Recipes.tsx +++ b/src/pages/recipes/Recipes.tsx @@ -33,7 +33,8 @@ const Recipes = () => { diff --git a/src/stories/recipe-card/RecipeCard.stories.ts b/src/stories/recipe-card/RecipeCard.stories.ts index 8d7b2b5..308879e 100644 --- a/src/stories/recipe-card/RecipeCard.stories.ts +++ b/src/stories/recipe-card/RecipeCard.stories.ts @@ -13,9 +13,10 @@ type Story = StoryObj 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' } }