Merge pull request #89 from chingu-voyages/CH-92-create-a-tips-sectio…

…n-component-for-recipe-detail-page

Ch 92 create a tips section component for recipe detail page

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

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);
+  }
+}

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,
+  });
+}

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";

src/features/recipes/components/recipe-details/RecipeDetails.jsx

@@ -84,7 +84,7 @@ export const RecipeDetails = ({ recipe }) => {
           <Heading level="h2" variant="lava">
             Tips
           </Heading>
-          <Tips tips={recipe.tips} />
+          <Tips recipeId={recipe.id} />
         </Card>
       </div>
     </div>

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 <p>Tips Here</p>;
+export const Tips = ({ recipeId }) => {
+  const { data: tips, isLoading, isError, error } = FetchTipsById(recipeId);
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  if (isError) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <Carousel
+      showArrows={true}
+      infiniteLoop={true}
+      autoPlay={true}
+      interval={5000}
+      showThumbs={false}
+      showStatus={false}
+      showIndicators={true}
+      dynamicHeight={false}
+      stopOnHover={true}
+      className="shadow-xl bg-tangerine-300 rounded-xl"
+    >
+      {tips.map((tip) => (
+        <div key={tip.tip_id}>
+          <TipCard {...tip} />
+        </div>
+      ))}
+    </Carousel>
+  );
 };
 
+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 (
+    <div className="flex flex-col w-full p-5 cursor-pointer">
+      <div className="flex items-center gap-2">
+        <div>
+          <img
+            src={author_avatar_url}
+            className="object-cover w-6 h-6 rounded-full"
+          />
+        </div>
+        <p className="text-[18px] font-bold">
+          {author_name ? author_name : author_username}
+        </p>
+      </div>
+      <div className="flex flex-col items-start p-2">
+        <p className="tracking-wide text-lava-900 text-[14px] ">
+          &#34;{tip_body}&#34;
+        </p>
+      </div>
+      <div>
+        <p className="text-sm">{RenderYearsSinceTimeStamp(updated_at)}</p>
+      </div>
+    </div>
+  );
+};
 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,
 };

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
+    }
+  ]
+}

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 });
     },
   });
 }

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;
+}