From 5fe3fcac6128cd2d78f14ef01b5e421987a21d38 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Tue, 12 Dec 2023 12:32:42 +0100
Subject: [PATCH] feat: add working posts index

This commit adds pagination functionality to the posts index page. The code changes include:
- Sorting the posts by descending date
- Paginating the posts with 6 items per page
- Creating a new component called "Listposts" for rendering the paginated posts
- Adding a new view file for the "Listposts" component
- Updating the blade template of the posts index page to use the "Listposts" component and pass in the paginated posts

The purpose of these changes is to improve user experience by displaying a limited number of posts per page and providing navigation links for easier browsing.
---
 app/Http/Controllers/PostsController.php      | 10 ++-
 app/View/Components/Posts/Listposts.php       | 21 ++++++
 composer.json                                 |  1 +
 composer.lock                                 | 73 ++++++++++++++++++-
 content/posts/hello-world.md                  |  9 ++-
 .../components/posts/listposts.blade.php      | 24 ++++++
 resources/views/posts/index.blade.php         | 12 +--
 7 files changed, 134 insertions(+), 16 deletions(-)
 create mode 100644 app/View/Components/Posts/Listposts.php
 create mode 100644 resources/views/components/posts/listposts.blade.php

diff --git a/app/Http/Controllers/PostsController.php b/app/Http/Controllers/PostsController.php
index ccba1b7..75d7cfb 100644
--- a/app/Http/Controllers/PostsController.php
+++ b/app/Http/Controllers/PostsController.php
@@ -4,14 +4,18 @@ namespace App\Http\Controllers;
 
 use Spatie\Sheets\Facades\Sheets;
 use Spatie\Sheets\Sheet;
+use CreativeCrafts\Paginate\Facades\Paginate;
 
 class PostsController extends Controller
 {
     public function index()
     {
-        $posts = Sheets::all();
-        
-        return view('posts.index', compact('posts'));
+        $posts = Sheets::all()->sortByDesc('date');
+        $paginatedPosts = Paginate::collection($posts, 6);
+
+        return view('posts.index', [
+            'posts' => $paginatedPosts,
+        ]);
     }
 
     public function show(Sheet $post)
diff --git a/app/View/Components/Posts/Listposts.php b/app/View/Components/Posts/Listposts.php
new file mode 100644
index 0000000..2b13101
--- /dev/null
+++ b/app/View/Components/Posts/Listposts.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\View\Components\Posts;
+
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Collection;
+use Illuminate\View\Component;
+use Spatie\Sheets\Facades\Sheets;
+
+class Listposts extends Component
+{
+    public function __construct(public LengthAwarePaginator $posts)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.posts.listposts');
+    }
+}
diff --git a/composer.json b/composer.json
index 9575106..bf3a5af 100644
--- a/composer.json
+++ b/composer.json
@@ -12,6 +12,7 @@
         "andcarpi/laravel-popper": "^0.9.4",
         "anhskohbo/no-captcha": "^3.5",
         "blade-ui-kit/blade-icons": "^1.5",
+        "creativecrafts/laravel-paginate-collection": "^0.2.4",
         "cviebrock/eloquent-sluggable": "^10.0",
         "dolejska-daniel/riot-api": "^5",
         "guzzlehttp/guzzle": "^7.2",
diff --git a/composer.lock b/composer.lock
index d5c3d2c..47d303c 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "b84d17c5f2668acd3b38779559962eb9",
+    "content-hash": "977c4e8990bc192edf2ad99855f154dc",
     "packages": [
         {
             "name": "andcarpi/laravel-popper",
@@ -405,6 +405,77 @@
             },
             "time": "2023-09-17T07:26:20+00:00"
         },
+        {
+            "name": "creativecrafts/laravel-paginate-collection",
+            "version": "0.2.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/CreativeCrafts/laravel-paginate-collection.git",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/CreativeCrafts/laravel-paginate-collection/zipball/ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1",
+                "spatie/laravel-package-tools": "^1.14.0"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.4",
+                "nunomaduro/collision": "^6.4",
+                "nunomaduro/larastan": "^2.4",
+                "orchestra/testbench": "^8.0",
+                "pestphp/pest": "^1.22",
+                "pestphp/pest-plugin-laravel": "^1.4",
+                "phpstan/extension-installer": "^1.2",
+                "phpstan/phpstan-deprecation-rules": "^1.1",
+                "phpstan/phpstan-phpunit": "^1.3",
+                "phpunit/phpunit": "^9.5",
+                "spatie/laravel-ray": "^1.32"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "CreativeCrafts\\Paginate\\PaginateServiceProvider"
+                    ],
+                    "aliases": {
+                        "Paginate": "CreativeCrafts\\Paginate\\Facades\\Paginate"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "CreativeCrafts\\Paginate\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Godspower",
+                    "email": "oduose4eva@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A handy package to paginate laravel collection",
+            "homepage": "https://github.com/creativecrafts/laravel-paginate-collection",
+            "keywords": [
+                "creativeCrafts",
+                "laravel",
+                "laravel-paginate-collection"
+            ],
+            "support": {
+                "issues": "https://github.com/CreativeCrafts/laravel-paginate-collection/issues",
+                "source": "https://github.com/CreativeCrafts/laravel-paginate-collection/tree/0.2.4"
+            },
+            "time": "2023-02-21T20:22:50+00:00"
+        },
         {
             "name": "cviebrock/eloquent-sluggable",
             "version": "10.0.0",
diff --git a/content/posts/hello-world.md b/content/posts/hello-world.md
index d565e8a..3a708aa 100644
--- a/content/posts/hello-world.md
+++ b/content/posts/hello-world.md
@@ -1,9 +1,10 @@
 ---
-title: Hello, world!
-description: Welcome to Sheets!
-date: 2020-07-01
+title: Hello, I am a cat!
+description: Thumbnail is a cat.
+thumbnail: 'https://placekitten.com/1920/1080'
+date: 2022-10-01 # YYYY-MM-DD HH:MM:SS
 ---
 
 # Hello, world!
 
-Welcome to Sheets!
+meow?
diff --git a/resources/views/components/posts/listposts.blade.php b/resources/views/components/posts/listposts.blade.php
new file mode 100644
index 0000000..c3f8285
--- /dev/null
+++ b/resources/views/components/posts/listposts.blade.php
@@ -0,0 +1,24 @@
+@php use Carbon\Carbon; @endphp
+<div class="container mx-auto p-4 flex flex-col items-center justify-center mt-3">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 auto-cols-max w-full">
+        @foreach($posts as $post)
+            <article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800
+                hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
+                <span
+                    class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
+                    <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
+                </span>
+                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="w-full h-48 object-cover rounded-t-2xl">
+                <div class="p-4">
+                    <h2 class="text-xl font-bold mb-2 line-clamp-1" itemprop="name">{{ $post->title }}</h2>
+                    <p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
+                </div>
+                <a href="{{ route('posts.show', $post->slug)}}" itemprop="url"
+                   class="absolute bottom-4 right-4 text-sm text-orange-400 hover:text-orange-600">Read more</a>
+            </article>
+        @endforeach
+    </div>
+    <div class="mt-4">
+        {{ $posts->links() }}
+    </div>
+</div>
diff --git a/resources/views/posts/index.blade.php b/resources/views/posts/index.blade.php
index 91f7bb2..10e1cb6 100644
--- a/resources/views/posts/index.blade.php
+++ b/resources/views/posts/index.blade.php
@@ -1,8 +1,7 @@
 @extends('layouts.app')
 
 @section('title', 'Heimerdinger.LoL • Posts')
-@section('description', 'Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins
-such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
+@section('description', 'Explore all our blog posts on Heimerdinger.LoL. Posts about League of Legends and more.')
 
 @section('content')
     <section class="max-w-screen-xl mx-auto mt-12">
@@ -10,11 +9,8 @@ such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
             class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
             Posts</h1>
-        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Latest posts about League of Legends</h2>
-        @foreach($posts as $post)
-            {{ $post->title }}
-            {{ $post->description}}
-
-        @endforeach
+        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Our latest posts about League of
+            Legends</h2>
+        <x-posts.listposts :posts="$posts"/>
     </section>
 @endsection