jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added font-awesome. Some cosmetic refactoring.

Browse Source
This commit is contained in:
Jesse Brault 2024-07-30 13:27:59 -05:00
parent 501069e3af
commit 64e96a2f68
11 changed files with 138 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.storybook/preview.ts
View File

@ -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: {

67
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

17
src/api/getRecipeInfos.ts
View File

@ -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,

16
src/api/types/ImageView.ts Normal file
View File

@ -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

12
src/api/types/RecipeInfoView.ts Normal file
View File

@ -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
}

7
src/api/types/RecipeInfosView.ts Normal file
View File

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

6
src/api/types/UserInfoView.ts Normal file
View File

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

31
src/components/recipe-card/RecipeCard.tsx
View File

@ -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 (
<article>
{imgUrl ? <img src={imgUrl} /> : null}
<div className="title-rating-container">
{mainImageUrl ? <img src={mainImageUrl} /> : null}
<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>

3
src/pages/recipes/Recipes.tsx
View File

@ -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}
/>

5
src/stories/recipe-card/RecipeCard.stories.ts
View File

@ -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'
}
}