[Updates📢] Added pagination to user profile and recipes page

Esekyi · Sep 7, 2024 · 5b30286 · 5b30286
1 parent abad5da
commit 5b30286
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 21 deletions.
diff --git a/app/models/recipe.py b/app/models/recipe.py
@@ -2,6 +2,7 @@
 from datetime import datetime
 import uuid
 from sqlalchemy.dialects.postgresql import UUID
+from sqlalchemy import inspect
 
 
 class Recipe(db.Model):
@@ -32,3 +33,8 @@ class Recipe(db.Model):
 
     def __repr__(self):
         return f'<Recipe {self.title}>'
+
+    def increment_view_count(self):
+        """Increment the view count without updating the updated_at timestamp."""
+        self.view_count += 1
+        # No commit or onupdate manipulation here
diff --git a/app/routes/recipe_routes.py b/app/routes/recipe_routes.py
@@ -89,9 +89,11 @@ def view_recipe(recipe_id):
         comment.user = db.session.query(User).filter_by(id=comment.user_id).first()  # Get the user who made the comment
 
     if recipe:
-        recipe.view_count += 1
-        db.session.commit()
+        recipe.increment_view_count()  # Increment view count without committing
         recipe.user = db.session.query(User).filter_by(id=recipe.user_id).first()
+
+        # Commit all changes here
+        db.session.commit()  # Commit after all changes are made
         return render_template('recipes/readPages/recipe_detail.html', recipe=recipe, ingredients=ingredients, instructions=instructions, comments=comments, title=f'{recipe.title} - SpiceShare Inc.')
     else:
         flash("Recipe not found.", "error")

diff --git a/app/services/recipe_service.py b/app/services/recipe_service.py
@@ -150,6 +150,7 @@ def update_recipe(recipe, data, ingredients, instructions, image_url):
 
 
 def get_recipe_by_id(recipe_id):
+    """Fetch a recipe by its ID without updating the updated_at timestamp."""
     return Recipe.query.get_or_404(recipe_id)
 
 
@@ -186,6 +187,7 @@ def get_random_recipes_with_images(limit=3):
     return recipes_with_image
 
 
-def get_recipes_by_user(user_id):
-    """Fetch recipes created by a specific user."""
-    return Recipe.query.filter_by(user_id=user_id)
+def get_recipes_by_user(user_id, page=1, per_page=9):
+    """Fetch recipes created by a specific user with pagination."""
+    recipes = Recipe.query.filter_by(user_id=user_id).all()
+    return paginate(recipes, page, per_page)
diff --git a/app/templates/recipes/readPages/allRecipes.html b/app/templates/recipes/readPages/allRecipes.html
@@ -5,11 +5,14 @@ <h1 class="text-3xl font-bold">Recipes</h1>
 	<button type="button" class="bg-blue-600 text-white py-2 px-4 rounded"
 		onclick="window.location.href='{{ url_for('recipe_routes.add_recipe') }}';">+ Add Recipe</button>
 </div>
-<div class="mt-6">
-	<input type="text" name="search" placeholder="Search by recipe name, category, ingredients..."
-		class="w-full border border-gray-300 rounded-lg py-2 px-4 mb-6">
+<div class="mt-6 mb-6">
+	<form action="{{ url_for('search.search') }}" method="get" class="flex">
+		<input type="text" name="q" placeholder="Search by recipe name, category, ingredients..."
+			class="w-full border border-gray-300 rounded-l-lg py-3 px-4 focus:outline-none focus:border-indigo-600">
+		<button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-r-lg hover:bg-indigo-700 transition duration-300">Search</button>
+	</form>
 </div>
-<div class="grid grid-cols-3 gap-6">
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
 
 	{% for recipe in recipes %}
 	<div class="bg-white shadow-lg rounded-lg overflow-hidden">
@@ -77,4 +80,8 @@ <h3 class="text-lg font-bold">Savory Porridge</h3>
 	</div>
 </section>
 
-{% endblock %}
+{% endblock %}
+
+{% block scripts %}
+	<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+{% endblock scripts %}
diff --git a/app/templates/recipes/readPages/read_layout.html b/app/templates/recipes/readPages/read_layout.html
@@ -26,13 +26,16 @@
 	<!-- Include SortableJS for drag-and-drop functionality -->
 </head>
 
-<body class="bg-gray-50">
+<body class="bg-gray-50 flex flex-col min-h-screen">
 	<!-- Header -->
 	<header class="p-4 border-b border-gray-200 shadow-md">
 		<div class="max-w-6xl mx-auto flex justify-between items-center">
 			<div class="text-xl font-bold text-blue-800">SpiceShare</div>
+
 			<nav>
 				<a href="{{ url_for('recipe_routes.list_recipes')}}" class="text-blue-800 mx-4">Recipes</a>
+
+
 				{% if current_user.is_authenticated %}
 				<a href="{{ url_for('user_routes.user_profile', user_id=current_user.id)}}" class="text-blue-800 mx-4">My Profile</a>
 				<a href="{{ url_for('auth.logout')}}" class="text-blue-800">Logout</a>
@@ -44,7 +47,7 @@
 		</div>
 	</header>
 	<!--- Container for page -->
-	<main class="container mx-auto px-4 mt-8">
+	<main class="container mx-auto px-4 mt-8 flex-grow">
 		{% with messages = get_flashed_messages(with_categories=true) %}
 		{% if messages %}
 		<div class=" mb-4 flash-messages">

diff --git a/app/templates/recipes/readPages/recipe_detail.html b/app/templates/recipes/readPages/recipe_detail.html
@@ -1,10 +1,10 @@
 {% extends "recipes/readPages/read_layout.html" %}
 {% block content %}
 
-<body class="bg-white text-gray-900 font-sans">
+<body class="bg-white text-gray-900 font-sans flex flex-col min-h-screen">
 
 	<!-- Main Content -->
-	<main class="max-w-4xl mx-auto p-4">
+	<main class="max-w-4xl mx-auto p-4 flex-grow">
 		<!-- Recipe Title -->
 		 {% if recipe %}
 		<section class="text-center mb-8">

diff --git a/app/templates/user_auth/login.html b/app/templates/user_auth/login.html
@@ -54,6 +54,7 @@ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Sign In</h2>
 					</button>
 				</div>
 			</div>
+			<input type="hidden" name="next" value="{{ request.args.get('next') }}">
 			<div class="flex items-center mb-6">
 				<label class="inline-flex items-center text-gray-700">
 					<input id="remember_me" name="remember_me"  type="checkbox" class="form-checkbox text-blue-600">

diff --git a/app/templates/user_auth/user_profile.html b/app/templates/user_auth/user_profile.html
@@ -111,14 +111,14 @@ <h2 class="text-3xl font-bold text-gray-800">Profile</h2>
 							<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md 
 						                            transition duration-300">Save Changes</button>
 						</div>
-						</form>
+			</form>
 
-						<!-- Posted Recipes Section -->
-						<div class="mt-8">
-							<h3 class="text-2xl font-bold text-gray-800 mb-4">Your Recipes</h3>
-							{% if recipes%}
-							<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-								{% for recipe in recipes %}
+			<!-- Posted Recipes Section -->
+			<div class="mt-8">
+				<h3 class="text-2xl font-bold text-gray-800 mb-4">Your Recipes</h3>
+				{% if recipes%}
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{% for recipe in recipes %}
 					<div class="bg-white p-4 rounded-lg shadow-md">
 						{% if recipe.image_url %}
 						<img src="https://recipe-files.s3.eu-north-1.amazonaws.com/recipes/{{ recipe.image_url }}" alt="{{ recipe.title }}"
@@ -136,6 +136,21 @@ <h4 class="text-xl font-semibold">{{ recipe.title }}</h4>
 					</div>
 					{% endfor %}
 				</div>
+
+				<!-- Pagination -->
+				<div class="flex justify-center mt-6">
+					<div class="inline-flex items-center space-x-4">
+						{% if current_page > 1 %}
+						<a href="?page={{ current_page - 1 }}&per_page={{ per_page }}"
+							class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Previous</a>
+						{% endif %}
+						<span class="text-gray-600">Page {{ current_page }} of {{ total_pages }}</span>
+						{% if current_page < total_pages %} <a href="?page={{ current_page + 1 }}&per_page={{ per_page }}"
+							class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Next</a>
+							{% endif %}
+					</div>
+				</div>
+
 				{% else %}
 					<p class="text-gray-700">You haven't posted any recipes yet.</p>
 					{% endif %}