app,server: Display rating in recipe

api/src/lib.rs

@@ -99,12 +99,13 @@ pub struct CreateRecipeResponse {
 
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct ListRecipesResponse {
-    pub recipes: Vec<(i64, String)>,
+    pub recipes: Vec<(i64, String, u8)>,
 }
 
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct RecipeInfo {
     pub name: String,
+    pub rating: u8,
     pub steps: String,
     pub ingredients: Vec<(i64, IngredientInfo, f64)>,
 }

app/src/recipe.rs

@@ -50,7 +50,7 @@ fn RecipeListInner(props: &RecipeListProps) -> HtmlResult {
         Ok(l) => html! {
             <div class="container text-center">
                 <div class="row row-cols-2 row-cols-sm-2 row-cols-md-4 g-2 mb-2">
-                    {for l.recipes.iter().sorted_by_key(|(_, name)| name).map(|(id, name)| html!{
+                    {for l.recipes.iter().sorted_by_key(|(_, name, _)| name).map(|(id, name, _)| html!{
                         <div class="col" key={*id}>
                             <div class="p-3 border rounded border-light-subtle h-100">
                                 <Link<Route>
@@ -623,6 +623,21 @@ fn EditSteps(props: &EditStepsProps) -> Html {
     </>}
 }
 
+#[derive(Debug, Clone, PartialEq, Properties)]
+struct RecipeRatingProps {
+    rating: u8,
+}
+
+#[function_component]
+fn RecipeRating(props: &RecipeRatingProps) -> Html {
+    let rating = (props.rating + 1).min(3);
+    html! {
+        <div aria-label={format!("Rating: {rating}")}>
+            { for (0..rating).map(|_| html!{<i aria-hidden="true" class="bi-star-fill" />}) }
+        </div>
+    }
+}
+
 #[function_component]
 fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
     let recipe_render = use_state(|| 0u64);
@@ -664,11 +679,6 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
     Ok(match &*recipe {
         Ok(r) => html! {<>
             <h1>{&r.name}</h1>
-            if let Some(e) = &*error {
-                <div class={classes!("alert", "alert-danger")} role="alert">
-                    {e}
-                </div>
-            }
             <EditName
                 token={props.token.clone()}
                 id={props.id}
@@ -676,6 +686,14 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
                 name={r.name.clone()}
                 update={update.clone()}
             />
+            <div class="mt-2">
+                <RecipeRating rating={r.rating}/>
+            </div>
+            if let Some(e) = &*error {
+                <div class={classes!("alert", "alert-danger")} role="alert">
+                    {e}
+                </div>
+            }
             <hr />
             <div class="text-start">
                 <h2>{"Ingredients"}</h2>

src/routes/recipe.rs

@@ -76,7 +76,7 @@ pub(super) async fn list_recipes(
             .all(&state.db)
             .await?
             .into_iter()
-            .map(|r| (r.id, r.name))
+            .map(|r| (r.id, r.name, r.ranking as _))
             .collect(),
     }
     .into())
@@ -144,6 +144,7 @@ pub(super) async fn fetch_recipe(
     Ok(RecipeInfo {
         name: recipe.name,
         steps: recipe.steps,
+        rating: recipe.ranking as _,
         ingredients,
     }
     .into())