feat: Toast

app/assets/stylesheets/application.css

@@ -572,7 +572,7 @@ select {
 }
 
 .recipes-container-header {
-  /* there are five columns in the table */
+  /* there are six columns in the table */
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 }
@@ -581,16 +581,26 @@ select {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  align-items: stretch;
+}
+
+.recipe-container-rows a {
+  text-decoration: none;
 }
 
 .recipes-container-rows div {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  place-items: center;
   width: 100%;
   justify-content: space-between;
-  border: 2px solid hsl(var(--clr-light) / 0.7);
-  place-items: center;
+}
+
+.recipes-container-rows > * {
+  color: hsl(var(--clr-white));
+  text-decoration: none;
+  border: 2px solid hsl(var(--clr-light) / 0.4);
   font-size: var(--fs-400);
-  border: 2px solid hsl(var(--clr-white) / 0.1);
   border-bottom: none;
   padding: 1rem;
   margin-top: 1.5rem;
@@ -600,7 +610,9 @@ select {
   margin-top: 2rem;
 }
 
-.recipe-stats > div > p {
+.recipes-container-rows > *:hover {
+  transform: scale(1.05);
+  box-shadow: hsl(var(--clr-white) / 0.7) 0px 10px 20px;
 }
 
 .recipe-card {
@@ -773,3 +785,25 @@ select {
   border-radius: 10px;
   box-shadow: hsl(var(--clr-white) / 0.7) 0px 5px 15px;
 }
+
+/* toast */
+
+.toast {
+  position: fixed;
+  bottom: -6rem;
+  right: 1rem;
+  transform: translateX(-50%);
+  padding: 1rem 2rem;
+  background-color: hsl(var(--clr-white));
+  color: hsl(var(--clr-dark));
+  border-radius: 10px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  box-shadow: hsl(var(--clr-white) / 0.7) 0px 5px 15px;
+}
+
+.toast.active {
+  bottom: 1rem;
+  opacity: 1;
+  z-index: 1000;
+}

app/controllers/foods_controller.rb

@@ -25,7 +25,8 @@ def create
 
     respond_to do |format|
       if @food.save
-        format.html { redirect_to foods_url, notice: "Food was successfully created." }
+        flash[:notice] = "Food created."
+        format.html { redirect_to foods_url }
         format.json { render :show, status: :created, location: @food }
       else
         format.html { render :new, status: :unprocessable_entity }
@@ -48,12 +49,28 @@ def update
   end
 
   # DELETE /foods/1 or /foods/1.json
-  def destroy
-    @food.destroy
-
+    def destroy
+    @food = Food.find(params[:id])
     respond_to do |format|
-      format.html { redirect_to foods_url, notice: "Food was successfully destroyed." }
-      format.json { head :no_content }
+      if @food.destroy
+        flash.now[:notice] = "Food was successfully destroyed."
+        format.html { redirect_to foods_url, notice: "Food was successfully destroyed." }
+        format.json { head :no_content }
+        format.turbo_stream do
+          render turbo_stream: [
+            turbo_stream.remove(@food),
+            turbo_stream.append("flash-messages", partial: "shared/flash", locals: { notice: flash.now[:notice] })
+          ]
+        end
+      else
+        format.html { redirect_to foods_url, alert: "Food could not be destroyed." }
+        format.json { render json: @food.errors, status: :unprocessable_entity }
+        format.turbo_stream do
+          render turbo_stream: [
+            turbo_stream.append("flash-messages", partial: "shared/flash", locals: { alert: "Food could not be destroyed." })
+          ]
+        end
+      end
     end
   end
 

app/controllers/recipes_controller.rb

@@ -3,12 +3,13 @@ class RecipesController < ApplicationController
 
   # GET /recipes or /recipes.json
   def index
-    @recipes = Recipe.all.where(user_id: current_user.id)
+    @recipes = Recipe.all.where(user_id: current_user.id).order(created_at: :desc)
     @recipe = Recipe.new
   end
 
   # GET /recipes/1 or /recipes/1.json
   def show
+    @recipe = Recipe.find(params[:id])
   end
 
   # GET /recipes/new
@@ -26,7 +27,8 @@ def create
 
     respond_to do |format|
       if @recipe.save
-        format.html { redirect_to recipes_url, notice: "Recipe was successfully created." }
+        flash[:notice] = "Recipe created."
+        format.html { redirect_to recipes_url }
         format.json { render :show, status: :created, location: @recipe }
       else
         format.html { render :new, status: :unprocessable_entity }

app/javascript/controllers/toast_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="toast"
+export default class extends Controller {
+  static targets = ["toast"];
+
+  connect() {
+    this.show();
+  }
+
+  show() {
+    this.toastTarget.classList.add("active");
+    setTimeout(() => this.hide(), 6000);
+  }
+
+  hide() {
+    this.toastTarget.classList.remove("active");
+  }
+}

app/models/food.rb

@@ -10,5 +10,4 @@ class Food < ApplicationRecord
   after_create_commit { broadcast_prepend_to 'foods' }
   after_update_commit { broadcast_replace_to 'foods' }
   after_destroy_commit { broadcast_remove_to 'foods' }
-
 end

app/models/recipe.rb

@@ -11,4 +11,5 @@ class Recipe < ApplicationRecord
   after_create_commit { broadcast_prepend_to "recipes" }
   after_update_commit { broadcast_replace_to "recipes" }
   after_destroy_commit { broadcast_remove_to "recipes" }
+
 end

app/views/foods/create.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.append "flash", partial: "shared/flash", locals: { type: type, message: message } %>

app/views/foods/index.html.erb

@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1 class='text-center'>Foods</h1>
 
 <div data-controller="food-modal">
@@ -21,7 +19,7 @@
         <li><%= food.measurement_unit %></li>
         <li><%= food.price %></li>
         <li>
-        <%= button_to "Delete", food_path(food.id), method: :delete, class:'large-button' %>
+        <%= button_to "Delete", food_path(food.id), method: :delete, class: 'large-button', data: { turbo: true, turbo_confirm: "Are you sure?" } %>
         </li>
         </ul>
       <% end %>

app/views/layouts/application.html.erb

@@ -11,8 +11,7 @@
 
   <body>
     <%= render 'shared/navbar' %>
-      <p class="notice"><%= notice %></p>
-      <p class="alert"><%= alert %></p>
+    <%= render 'shared/flash' %>
       <div class='container'>
         <%= yield %>
       </div>

app/views/recipes/create.turbo_stream.html.erb

@@ -0,0 +1 @@
+<%= turbo_stream.append "flash", partial: "shared/flash", locals: { type: type, message: message } %>

app/views/recipes/index.html.erb

@@ -1,20 +1,17 @@
-<p class="notice"><%= notice %></p>
 
 <h1 class='text-center'>Recipes</h1>
+<div class='container' style='margin-top:2.5rem;'>
+  <%= turbo_stream_from "recipes" %>
+
+  <%= turbo_frame_tag "recipe-form" do %>
+    <%= render "recipes/form", recipe: @recipe %>
+  <% end %>
 
-<div>
-  <div class='container' style='margin-top:2.5rem;'>
-    <div class='align-left' style='margin-bottom:5rem;'>
-      <%= link_to "Add Recipe", new_recipe_path, class: "large-button" %>
-    </div>
-    <%= turbo_stream_from "recipes" %>
-
-    <%= turbo_frame_tag "recipe-form" do %>
-      <%= render "recipes/form", recipe: @recipe %>
+  <%= turbo_frame_tag "recipes", class:"recipes-container-rows" do %>
+    <% @recipes.each do |recipe| %>
+      <%= link_to recipe_path(recipe) do %>
+        <%= render partial: "recipes/recipe", locals: { recipe: recipe } %>
+      <% end %>
     <% end %>
-
-    <%= turbo_frame_tag "recipes", class:"recipes-container-rows" do %>
-      <%= render partial: "recipes/recipe", collection: @recipes %>
-    <% end %>
-  </div>
+  <% end %>
 </div>

app/views/shared/_flash.html.erb

@@ -0,0 +1,3 @@
+<% flash.each do |type, message| %>
+  <%= render partial: "shared/toast", locals: { message: message } %>
+<% end %>

app/views/shared/_notice.html.erb

@@ -0,0 +1 @@
+<%= render partial: "shared/toast", locals: { message: notice } if notice.present? %>

app/views/shared/_toast.html.erb

@@ -0,0 +1,3 @@
+<div data-controller="toast" data-toast-target="toast" class="toast">
+  <%= message %>
+</div>