diff --git a/package-lock.json b/package-lock.json index e9904f4..994d02b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.11.0", "react-query": "^3.39.3", + "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.4.3" }, "devDependencies": { @@ -4627,6 +4628,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/cli": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz", @@ -10832,6 +10838,17 @@ "react": "^18.2.0" } }, + "node_modules/react-easy-swipe": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz", + "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==", + "dependencies": { + "prop-types": "^15.5.8" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/react-icons": { "version": "4.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", @@ -10879,6 +10896,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-responsive-carousel": { + "version": "3.2.23", + "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz", + "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==", + "dependencies": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8", + "react-easy-swipe": "^0.0.21" + } + }, "node_modules/react-router": { "version": "6.16.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", diff --git a/package.json b/package.json index 686bcb5..2813979 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.11.0", "react-query": "^3.39.3", + "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.4.3" }, "devDependencies": { diff --git a/src/api/tips.js b/src/api/tips.js new file mode 100644 index 0000000..787921f --- /dev/null +++ b/src/api/tips.js @@ -0,0 +1,17 @@ +import axios from "axios"; + +export async function fetchTips(id, from = 0, size = 20) { + console.log(`Fetching ${id} tips`); + try { + const { data } = await axios.get(`https://tasty.p.rapidapi.com/tips/list`, { + headers: { + "X-RapidAPI-Key": import.meta.env.VITE_TASTY_API_KEY, + "X-RapidAPI-Host": "tasty.p.rapidapi.com", + }, + params: { from, size, id: id }, + }); + return data.results; + } catch (error) { + console.error(error); + } +} diff --git a/src/features/recipes/api/fetch-tips-by-id.js b/src/features/recipes/api/fetch-tips-by-id.js new file mode 100644 index 0000000..279db14 --- /dev/null +++ b/src/features/recipes/api/fetch-tips-by-id.js @@ -0,0 +1,9 @@ +import { fetchTips } from "@/api/tips"; +import { useQuery } from "@tanstack/react-query"; + +export function FetchTipsById(id) { + const fetch = "tips for: " + id; + return useQuery(["tips", fetch], () => fetchTips(id), { + enabled: !!id, + }); +} diff --git a/src/features/recipes/api/index.js b/src/features/recipes/api/index.js index 25b6acf..b56b10b 100644 --- a/src/features/recipes/api/index.js +++ b/src/features/recipes/api/index.js @@ -1,3 +1,4 @@ export * from "./use-recipes"; export * from "./fetch-recipes"; export * from "./fetch-recipe-by-id"; +export * from "./fetch-tips-by-id"; diff --git a/src/features/recipes/components/recipe-details/RecipeDetails.jsx b/src/features/recipes/components/recipe-details/RecipeDetails.jsx index e9663fc..3e62864 100644 --- a/src/features/recipes/components/recipe-details/RecipeDetails.jsx +++ b/src/features/recipes/components/recipe-details/RecipeDetails.jsx @@ -84,7 +84,7 @@ export const RecipeDetails = ({ recipe }) => { Tips - + diff --git a/src/features/recipes/components/recipe-details/Tips.jsx b/src/features/recipes/components/recipe-details/Tips.jsx index fdf0820..bdfeb0b 100644 --- a/src/features/recipes/components/recipe-details/Tips.jsx +++ b/src/features/recipes/components/recipe-details/Tips.jsx @@ -1,9 +1,92 @@ import PropTypes from "prop-types"; +import { FetchTipsById } from "../../api"; +import { LoadingState } from "@/features/ui"; +import { Carousel } from "react-responsive-carousel"; +import "react-responsive-carousel/lib/styles/carousel.min.css"; -export const Tips = () => { - return

Tips Here

; +export const Tips = ({ recipeId }) => { + const { data: tips, isLoading, isError, error } = FetchTipsById(recipeId); + + if (isLoading) { + return ; + } + + if (isError) { + return
Error: {error.message}
; + } + + return ( + + {tips.map((tip) => ( +
+ +
+ ))} + + ); }; +const TipCard = ({ + tip_body, + author_name, + author_username, + author_avatar_url, + updated_at, +}) => { + const RenderYearsSinceTimeStamp = (timeStamp) => { + const timeStampDate = new Date(timeStamp * 1000); + const currentDate = new Date(); + const differenceInMilliseconds = currentDate - timeStampDate; + const differenceInYears = + differenceInMilliseconds / (1000 * 60 * 60 * 24 * 365); + const fullYears = Math.round(differenceInYears); + + return `${fullYears} years ago`; + }; + + return ( +
+
+
+ +
+

+ {author_name ? author_name : author_username} +

+
+
+

+ "{tip_body}" +

+
+
+

{RenderYearsSinceTimeStamp(updated_at)}

+
+
+ ); +}; Tips.propTypes = { - tips: PropTypes.array, + recipeId: PropTypes.number, +}; + +TipCard.propTypes = { + tip_body: PropTypes.string, + author_avatar_url: PropTypes.string, + author_name: PropTypes.string, + author_username: PropTypes.string, + updated_at: PropTypes.number, }; diff --git a/src/mirageServer/endpoints/tips/tips.json b/src/mirageServer/endpoints/tips/tips.json new file mode 100644 index 0000000..6f19289 --- /dev/null +++ b/src/mirageServer/endpoints/tips/tips.json @@ -0,0 +1,108 @@ +{ + "count": 73, + "results": [ + { + "author_avatar_url": "https://img.buzzfeed.com/tasty-app-user-assets-prod-us-east-1/avatars/default/strawberry.png", + "author_name": "Tania Miah", + "author_rating": 1, + "author_user_id": 13481921, + "author_username": "", + "author_is_verified": 0, + "is_flagged": false, + "recipe_id": 8110, + "status_id": 1, + "comment_id": 1572180254, + "comment_count": 7, + "tip_body": "I think this recipe was amazing all I can say is to make more. Lol but a little less brown sugar. B.T.W I am 10 and I did it by myself.", + "tip_id": 545606, + "tip_photo": { + "height": 960, + "url": "https://img.buzzfeed.com/tasty-app-user-assets-prod-us-east-1/tips/1a3331b1463b468f9bbd8ea228ea5b09.jpeg", + "width": 1280 + }, + "created_at": null, + "updated_at": 1646591815, + "upvotes_total": 210 + }, + { + "author_avatar_url": "https://lh3.googleusercontent.com/a/AATXAJyPiaxPSAm8qZYtP-ui-FGoyXXSNY4bcscTrw5Y=s96-c", + "author_name": "MR B", + "author_rating": 1, + "author_user_id": 20258536, + "author_username": "", + "author_is_verified": 0, + "is_flagged": false, + "recipe_id": 8110, + "status_id": 1, + "comment_id": 1572181722, + "comment_count": 1, + "tip_body": "my 4 yr old loves French toast so dad had to make it pretty for her", + "tip_id": 547215, + "tip_photo": { + "height": 1024, + "url": "https://img.buzzfeed.com/tasty-app-user-assets-prod-us-east-1/tips/26cdd6af8c374c90b6462512d3c3d673.jpeg", + "width": 768 + }, + "created_at": null, + "updated_at": 1647322814, + "upvotes_total": 91 + }, + { + "author_avatar_url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=349284286255262&height=200&ext=1602241954&hash=AeSj-TffKVK7zqyM", + "author_name": "Abdullah Nadeem", + "author_rating": 1, + "author_user_id": 17450212, + "author_username": "", + "author_is_verified": 0, + "is_flagged": false, + "recipe_id": 8110, + "status_id": 1, + "comment_id": 1572177412, + "comment_count": 0, + "tip_body": "I used white bread and added a bit cocoa powder and boom love it ❤️ also make pakistani dishes. Love u tasty ❤️\nLove from pakistan ❤️ 🇵🇰 ❤️", + "tip_id": 542464, + "tip_photo": null, + "created_at": null, + "updated_at": 1645188619, + "upvotes_total": 35 + }, + { + "author_avatar_url": "https://img.buzzfeed.com/tasty-app-user-assets-prod-us-east-1/avatars/default/broccoli.png", + "author_name": "", + "author_rating": 1, + "author_user_id": 19826065, + "author_username": "racercat2000", + "author_is_verified": 0, + "is_flagged": false, + "recipe_id": 8110, + "status_id": 1, + "comment_id": 1572177373, + "comment_count": 0, + "tip_body": "Yaaas so good I used white bread totally fine I also used vanilla extract still super good", + "tip_id": 542420, + "tip_photo": null, + "created_at": null, + "updated_at": 1645151508, + "upvotes_total": 31 + }, + { + "author_avatar_url": "https://img.buzzfeed.com/tasty-app-user-assets-prod-us-east-1/avatars/default/donut.png", + "author_name": "Aviv Mosayov", + "author_rating": 1, + "author_user_id": 19520069, + "author_username": "bakingbookworm", + "author_is_verified": 0, + "is_flagged": false, + "recipe_id": 8110, + "status_id": 1, + "comment_id": 1572177536, + "comment_count": 0, + "tip_body": "If your using challah bread (which is best btw) you should really try making your own it will elevate it from eh to YEAHHH", + "tip_id": 542594, + "tip_photo": null, + "created_at": null, + "updated_at": 1645234414, + "upvotes_total": 27 + } + ] +} diff --git a/src/mirageServer/server.js b/src/mirageServer/server.js index f8da028..483f601 100644 --- a/src/mirageServer/server.js +++ b/src/mirageServer/server.js @@ -4,6 +4,7 @@ import recipesListData from "./endpoints/recipes/list.json"; import recipesListSimilaritiesData from "./endpoints/recipes/listSimilarities.json"; import recipesAutocomplete from "./endpoints/recipes/autocomplete.json"; //import recipeGetMoreInfo from "./endpoints/recipes/get-more-info.json"; +import recipeTips from "./endpoints/tips/tips.json"; export default function () { const jsonPlaceholderAPIRoot = "https://jsonplaceholder.typicode.com"; @@ -95,6 +96,7 @@ export default function () { timing: 1200, }, ); + this.get(`${tastyAPIRoot}/tips/list`, () => recipeTips, { timing: 1200 }); }, }); } diff --git a/src/styles/global.css b/src/styles/global.css index 5d542fd..864045e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -159,5 +159,5 @@ h6.font-display { font-family: var(--font-open-sans); } .text-no-stroke { - -webkit-text-stroke: 0px ; -} + -webkit-text-stroke: 0px; +} \ No newline at end of file