Skip to content

Commit

Permalink
feat(recipedetails.jsx): add NutritionSection component to display nu…
Browse files Browse the repository at this point in the history 
…trition information

A new NutritionSection component was added to display nutrition information for each recipe,
providing users with more detailed information about the nutritional content of the recipes.
  • Loading branch information
@timDeHof
timDeHof committed Nov 4, 2023
1 parent efa9fa4 commit 1cc28db
Showing 1 changed file with 43 additions and 12 deletions.
55 changes: 43 additions & 12 deletions src/features/recipes/components/recipe-details/RecipeDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const RecipeDetails = ({ recipe }) => {
<div>
<div className="picture-wrapper -mt-6 mb-4 box-content flex justify-center overflow-visible border-b-[.3rem] border-dashed border-tangerine-500 pb-6 md:-mr-20 md:-mt-16 md:h-[17rem] md:w-[17rem] md:rotate-12 md:rounded-full md:border-[.5rem] md:p-3 xl:h-[25rem] xl:w-[25rem]">
<picture className="-mx-6 block overflow-clip rounded-t-xl object-cover md:shadow-2xl md:h-[17rem] md:w-[17rem] md:rounded-full xl:h-[25rem] xl:w-[25rem]">
<img src={src} alt={alt} className="w-full h-full object-cover" />
<img src={src} alt={alt} className="object-cover w-full h-full" />
</picture>
</div>
</div>
Expand All @@ -113,7 +113,7 @@ export const RecipeDetails = ({ recipe }) => {
<>
<Link
to={`/search?q=${topic.slug}`}
className="text-watermelon font-bold"
className="font-bold text-watermelon"
key={topic.name}
>
{topic.name}
Expand Down Expand Up @@ -146,7 +146,7 @@ export const RecipeDetails = ({ recipe }) => {
<>
<Link
to={`/search?q=${tag.name}`}
className="text-watermelon font-bold"
className="font-bold text-watermelon"
key={tag.name}
>
{tag.display_name}
Expand All @@ -166,7 +166,7 @@ export const RecipeDetails = ({ recipe }) => {
console.log("Scrolling to ", to);
document.querySelector(to)?.scrollIntoView();
}}
className="w-full text-center justify-between text-lg my-4"
className="justify-between w-full my-4 text-lg text-center"
>
<div className="inline-block w-full">{label}</div>
<Icon name="right-arrow" className="text-2xl" />
Expand All @@ -180,7 +180,7 @@ export const RecipeDetails = ({ recipe }) => {
return <source key={index} type={src.content_type} src={src.url} />;
});
return (
<div className="recipe-video mb-4">
<div className="mb-4 recipe-video">
<video controls className="rounded-xl w-full md:w-[360px] max-w-full">
{sources}
</video>
Expand Down Expand Up @@ -237,7 +237,7 @@ export const RecipeDetails = ({ recipe }) => {
const unit = component.measurements[0].unit;
const isPlural = quantity > 1 ? true : false;
const measurement = (
<span className="measurement text-tangerine font-bold font-open-sans">
<span className="font-bold measurement text-tangerine font-open-sans">
<span className="quantity">
{quantity && quantity !== "0" ? quantity + " " : "-"}
</span>
Expand All @@ -262,7 +262,7 @@ export const RecipeDetails = ({ recipe }) => {
);
});
return (
<div className="recipe-component py-2">
<div className="py-2 recipe-component">
<Heading level="h4" variant="lava">
{name || "You'll Need:"}
</Heading>
Expand Down Expand Up @@ -290,13 +290,42 @@ export const RecipeDetails = ({ recipe }) => {
);
};

const NutritionSection = ({ nutrition }) => {
const { updated_at, ...rest } = nutrition;
return (
<>
<div className="flex flex-wrap justify-start lg:divide-x-2 lg:divide-sky-300">
{Object.entries(rest).map(([key, value]) => {

This comment has been minimized.

Sign in to view

Copy link
@robester0403

robester0403 Nov 4, 2023

Just for knowledge, you've made a very interesting decision to map out the nutrition object like this. You can correct me if I am wrong but you don't control the backend api and whatever it passes in the nutrition object will just be mapped out in this section.

So your app will not be in control of the the fields being passed in and will have constant changes (all dependent on the api) if you use this pattern in different parts of the app, things can constantly change and have unintended effects.

For example, if they pass in another object under nutrition. Or simpler, if there is another field not calories that requires no "g" after it.

This comment has been minimized.

Sign in to view

Copy link
@joekotvas

joekotvas Nov 4, 2023

Contributor

Interesting notes! So the recommended pattern would be to specifically reference the fields we want to display, rather than just mapping them all out and trusting that nothing unexpected will pop up.

This comment has been minimized.

Sign in to view

Copy link
@robester0403

robester0403 Nov 5, 2023 •
edited
Loading

Yes. You should be more verbose here.

For example, you are using object.entries to map but it is harder to read with less information about what data actually passes through. Maybe you saved yourself some words but reading this code I would have to guess what is supposed to appear on this page and what isn't.
return (
<div
key={key}
className="flex items-center gap-1 px-1 lg:gap-2 lg:flex-col lg:px-4"
>
<Heading level="h5" variant="sky">
{key}
</Heading>
<p className="text-2xl font-semibold font-rasa text-sky-700">
{value}
{key === "calories" ? "" : "g"}
</p>
</div>
);
})}
</div>
<p className="pl-2 mt-2 text-xs font-rasa">
{`Last updated on ${updated_at.slice(0, 10)}`}
</p>
</>
);
};

const Instructions = ({ instructions }) => {
return (
<div className="instructions-wrapper">
<Heading level="h2" variant="watermelon">
Preparation
</Heading>
<ol className="list-decimal flex flex-col gap-6 ml-5">
<ol className="flex flex-col gap-6 ml-5 list-decimal">
{instructions.map((step, index) => {
const { display_text } = step;
return (
Expand All @@ -312,7 +341,7 @@ export const RecipeDetails = ({ recipe }) => {

return (
<div className="page-wrapper bg-sky">
<div className="title-wrapper bg-title-cutout bg-cover bg-no-repeat p-4 pb-12">
<div className="p-4 pb-12 bg-no-repeat bg-cover title-wrapper bg-title-cutout">
<Heading level="h1" variant="lava" className="pl-6 pt-6 leading-[1]">
{recipe.name}
</Heading>
Expand All @@ -332,7 +361,7 @@ export const RecipeDetails = ({ recipe }) => {
</Button>
</div>
<Card className="intro-card">
<div className="md:flex flex-row-reverse gap-4">
<div className="flex-row-reverse gap-4 md:flex">
<RecipeImage src={recipe.thumbnail_url} alt={recipe.name} />
<Description description={recipe.description} />
</div>
Expand All @@ -354,12 +383,12 @@ export const RecipeDetails = ({ recipe }) => {
<QuickLink to="#tips" label="Tips" />
</div>
</Card>
<div className="flex flex-col justify-stretch items-stretch">
<div className="flex flex-col items-stretch justify-stretch">
<RecipeVideo
videoUrl={recipe.video_url}
renditions={recipe.renditions}
/>
<Card className="difficulty-card self-stretch">
<Card className="self-stretch difficulty-card">
<RecipeDifficultyCard tags={recipe.tags} />
</Card>
</div>
Expand All @@ -374,6 +403,7 @@ export const RecipeDetails = ({ recipe }) => {
<Heading level="h2" variant="sky">
Nutrition
</Heading>
<NutritionSection nutrition={recipe.nutrition} />
</Card>
<Card id="tips">
<Heading level="h2" variant="lava">
Expand Down Expand Up @@ -401,6 +431,7 @@ RecipeDetails.propTypes = {
list: PropTypes.object,
name: PropTypes.string,
instructions: PropTypes.object,
nutrition: PropTypes.object,
src: PropTypes.string,
alt: PropTypes.string,
};
Expand Down

0 comments on commit 1cc28db

Please sign in to comment.