From a3443ce274071af5421cd96e819869eebf72ee9f Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Thu, 1 Aug 2024 15:38:20 -0500
Subject: [PATCH] Refactoring of components and styling of full recipe page.

---
 src/api/getRecipe.ts                          |  6 ++--
 src/api/types/FullRecipeView.ts               |  2 ++
 src/components/recipe-card/RecipeCard.tsx     | 29 +++++--------------
 .../recipe-card/recipe-card.module.css        | 19 ------------
 .../RecipeVisibilityIcon.tsx                  | 23 +++++++++++++++
 .../recipe-visibility-icon.module.css         |  3 ++
 src/components/star-count/StarCount.tsx       | 15 ++++++++++
 .../star-count/star-count.module.css          |  9 ++++++
 .../user-icon-and-name/UserIconAndName.tsx    | 15 ++++++++++
 .../user-icon-and-name.module.css             |  8 +++++
 src/pages/recipe/Recipe.tsx                   | 22 +++++++++++---
 src/pages/recipe/recipe.module.css            | 19 ++++++++++++
 12 files changed, 123 insertions(+), 47 deletions(-)
 create mode 100644 src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx
 create mode 100644 src/components/recipe-visibility-icon/recipe-visibility-icon.module.css
 create mode 100644 src/components/star-count/StarCount.tsx
 create mode 100644 src/components/star-count/star-count.module.css
 create mode 100644 src/components/user-icon-and-name/UserIconAndName.tsx
 create mode 100644 src/components/user-icon-and-name/user-icon-and-name.module.css
 create mode 100644 src/pages/recipe/recipe.module.css

diff --git a/src/api/getRecipe.ts b/src/api/getRecipe.ts
index aace082..6a3b1a5 100644
--- a/src/api/getRecipe.ts
+++ b/src/api/getRecipe.ts
@@ -40,7 +40,8 @@ const getRecipe = async ({
             ownerUsername,
             starCount,
             viewerCount,
-            mainImage: rawMainImage
+            mainImage: rawMainImage,
+            isPublic
         } = (await response.json()) as RawFullRecipeView
         return {
             id,
@@ -53,7 +54,8 @@ const getRecipe = async ({
             ownerUsername,
             starCount,
             viewerCount,
-            mainImage: toImageView(rawMainImage)
+            mainImage: toImageView(rawMainImage),
+            isPublic
         }
     } else if (response.status === 404) {
         throw notFound()
diff --git a/src/api/types/FullRecipeView.ts b/src/api/types/FullRecipeView.ts
index 1a62977..d5e62a3 100644
--- a/src/api/types/FullRecipeView.ts
+++ b/src/api/types/FullRecipeView.ts
@@ -12,6 +12,7 @@ export interface RawFullRecipeView {
     starCount: number
     viewerCount: number
     mainImage: RawImageView
+    isPublic: boolean
 }
 
 interface FullRecipeView {
@@ -26,6 +27,7 @@ interface FullRecipeView {
     starCount: number
     viewerCount: number
     mainImage: ImageView
+    isPublic: boolean
 }
 
 export default FullRecipeView
diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx
index f550161..6267220 100644
--- a/src/components/recipe-card/RecipeCard.tsx
+++ b/src/components/recipe-card/RecipeCard.tsx
@@ -1,6 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import classes from './recipe-card.module.css'
 import { Link } from '@tanstack/react-router'
+import RecipeVisibilityIcon from '../recipe-visibility-icon/RecipeVisibilityIcon'
+import StarCount from '../star-count/StarCount'
+import UserIconAndName from '../user-icon-and-name/UserIconAndName'
+import classes from './recipe-card.module.css'
 
 export interface RecipeCardProps {
     title: string
@@ -49,28 +51,11 @@ const RecipeCard = ({
                     >
                         <h1 className={classes.title}>{title}</h1>
                     </Link>
-                    <span className={classes.starInfo}>
-                        <FontAwesomeIcon
-                            icon="star"
-                            className={classes.star}
-                            size="sm"
-                        />
-                        {starCount}
-                    </span>
+                    <StarCount count={starCount} />
                 </div>
                 <div className={classes.infoRow}>
-                    <span className={classes.userInfo}>
-                        <FontAwesomeIcon
-                            icon="user"
-                            className={classes.userIcon}
-                        />
-                        {ownerUsername}
-                    </span>
-                    {isPublic ? (
-                        <FontAwesomeIcon icon="globe" size="sm" />
-                    ) : (
-                        <FontAwesomeIcon icon="lock" size="sm" />
-                    )}
+                    <UserIconAndName username={ownerUsername} />
+                    <RecipeVisibilityIcon isPublic={isPublic} />
                 </div>
             </div>
         </article>
diff --git a/src/components/recipe-card/recipe-card.module.css b/src/components/recipe-card/recipe-card.module.css
index 1d1dee4..9430609 100644
--- a/src/components/recipe-card/recipe-card.module.css
+++ b/src/components/recipe-card/recipe-card.module.css
@@ -23,22 +23,3 @@
     margin-block: 0;
     font-size: 18px;
 }
-
-.star-info {
-    display: flex;
-    column-gap: 5px;
-    align-items: center;
-}
-
-.star {
-    color: var(--primary-yellow);
-}
-
-.user-info {
-    display: flex;
-    column-gap: 5px;
-}
-
-.user-icon {
-    color: var(--primary-red);
-}
diff --git a/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx b/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx
new file mode 100644
index 0000000..10852a5
--- /dev/null
+++ b/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx
@@ -0,0 +1,23 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './recipe-visibility-icon.module.css'
+
+export interface RecipeVisibilityIconProps {
+    isPublic: boolean
+}
+
+const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) =>
+    isPublic ? (
+        <FontAwesomeIcon
+            icon="globe"
+            className={classes.recipeVisibilityIcon}
+            size="sm"
+        />
+    ) : (
+        <FontAwesomeIcon
+            icon="lock"
+            className={classes.recipeVisibilityIcon}
+            size="sm"
+        />
+    )
+
+export default RecipeVisibilityIcon
diff --git a/src/components/recipe-visibility-icon/recipe-visibility-icon.module.css b/src/components/recipe-visibility-icon/recipe-visibility-icon.module.css
new file mode 100644
index 0000000..484074a
--- /dev/null
+++ b/src/components/recipe-visibility-icon/recipe-visibility-icon.module.css
@@ -0,0 +1,3 @@
+.recipe-visibility-icon {
+    color: var(--primary-red);
+}
diff --git a/src/components/star-count/StarCount.tsx b/src/components/star-count/StarCount.tsx
new file mode 100644
index 0000000..b50e0fd
--- /dev/null
+++ b/src/components/star-count/StarCount.tsx
@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './star-count.module.css'
+
+export interface StarCountProps {
+    count: number
+}
+
+const StarCount = ({ count }: StarCountProps) => (
+    <span className={classes.starInfo}>
+        <FontAwesomeIcon icon="star" className={classes.star} size="sm" />
+        {count}
+    </span>
+)
+
+export default StarCount
diff --git a/src/components/star-count/star-count.module.css b/src/components/star-count/star-count.module.css
new file mode 100644
index 0000000..9bd8c79
--- /dev/null
+++ b/src/components/star-count/star-count.module.css
@@ -0,0 +1,9 @@
+.star-info {
+    display: flex;
+    column-gap: 5px;
+    align-items: center;
+}
+
+.star {
+    color: var(--primary-yellow);
+}
diff --git a/src/components/user-icon-and-name/UserIconAndName.tsx b/src/components/user-icon-and-name/UserIconAndName.tsx
new file mode 100644
index 0000000..eea5a35
--- /dev/null
+++ b/src/components/user-icon-and-name/UserIconAndName.tsx
@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classes from './user-icon-and-name.module.css'
+
+export interface UserIconAndNameProps {
+    username: string
+}
+
+const UserIconAndName = ({ username }: UserIconAndNameProps) => (
+    <span className={classes.userInfo}>
+        <FontAwesomeIcon icon="user" className={classes.userIcon} />
+        {username}
+    </span>
+)
+
+export default UserIconAndName
diff --git a/src/components/user-icon-and-name/user-icon-and-name.module.css b/src/components/user-icon-and-name/user-icon-and-name.module.css
new file mode 100644
index 0000000..237f281
--- /dev/null
+++ b/src/components/user-icon-and-name/user-icon-and-name.module.css
@@ -0,0 +1,8 @@
+.user-info {
+    display: flex;
+    column-gap: 5px;
+}
+
+.user-icon {
+    color: var(--primary-red);
+}
diff --git a/src/pages/recipe/Recipe.tsx b/src/pages/recipe/Recipe.tsx
index 8b982f5..c778729 100644
--- a/src/pages/recipe/Recipe.tsx
+++ b/src/pages/recipe/Recipe.tsx
@@ -1,4 +1,8 @@
 import FullRecipeView from '../../api/types/FullRecipeView'
+import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon'
+import StarCount from '../../components/star-count/StarCount'
+import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName'
+import classes from './recipe.module.css'
 
 export interface RecipeProps {
     recipe: FullRecipeView
@@ -6,10 +10,20 @@ export interface RecipeProps {
 
 const Recipe = ({ recipe }: RecipeProps) => {
     return (
-        <article>
-            <h1>{recipe.title}</h1>
-            <div dangerouslySetInnerHTML={{ __html: recipe.text }} />
-        </article>
+        <div className={classes.fullRecipeContainer}>
+            <article className={classes.fullRecipe}>
+                <img src={recipe.mainImage.url} className={classes.mainImage} />
+                <div className={classes.infoRow}>
+                    <h1>{recipe.title}</h1>
+                    <StarCount count={recipe.starCount} />
+                </div>
+                <div className={classes.infoRow}>
+                    <UserIconAndName username={recipe.ownerUsername} />
+                    <RecipeVisibilityIcon isPublic={recipe.isPublic} />
+                </div>
+                <div dangerouslySetInnerHTML={{ __html: recipe.text }} />
+            </article>
+        </div>
     )
 }
 
diff --git a/src/pages/recipe/recipe.module.css b/src/pages/recipe/recipe.module.css
new file mode 100644
index 0000000..d41c4aa
--- /dev/null
+++ b/src/pages/recipe/recipe.module.css
@@ -0,0 +1,19 @@
+.full-recipe-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+}
+
+.full-recipe {
+    max-width: 600px;
+}
+
+.full-recipe .main-image {
+    width: 100%;
+}
+
+.full-recipe .info-row {
+    display: flex;
+    justify-content: space-between;
+}