Add new photo only feed

Author: ewhanson

app/Livewire/Pages/Feed.php

@@ -3,6 +3,7 @@
 namespace App\Livewire\Pages;
 
 use App\Models\Post;
+use App\Models\PostStatus;
 use Livewire\Component;
 
 class Feed extends Component
@@ -13,11 +14,14 @@ class Feed extends Component
 
     public bool $isLastPage = false;
 
+    public int $newPhotoCount = 0;
+
     public function mount()
     {
         $results = Post::orderByDesc('date_taken')->paginate(10, ['*'], 'page', $this->page);
         $this->isLastPage = $results->onLastPage();
         $this->posts = $results->items();
+        $this->newPhotoCount = PostStatus::all()->count();
     }
 
     public function loadMore()

app/Livewire/Pages/NewFeed.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Livewire\Pages;
+
+use App\Models\Post;
+use Livewire\Component;
+
+class NewFeed extends Component
+{
+    /** @var Post[] */
+    public array $posts;
+
+    public int $page = 1;
+
+    public bool $isLastPage = false;
+
+    public function mount()
+    {
+        $results = Post::has('postStatus')->orderByDesc('date_taken')->paginate(10, ['*'], 'page', $this->page);
+        $this->isLastPage = $results->onLastPage();
+        $this->posts = $results->items();
+    }
+
+    public function loadMore()
+    {
+        $this->page++;
+        $results = Post::has('postStatus')->orderByDesc('date_taken')->paginate(10, ['*'], 'page', $this->page);
+        $this->isLastPage = $results->onLastPage();
+        $this->posts = array_merge($this->posts, $results->items());
+    }
+
+    public function render()
+    {
+        return view('livewire.pages.new-feed');
+    }
+}

resources/views/livewire/pages/feed.blade.php

@@ -2,6 +2,16 @@
     @if(count($posts) === 0)
         🤷 Oops... No photos found
     @endif
+        @if($newPhotoCount > 0)
+            <a href="{{ route('new-feed') }}" role="alert" class="alert w-full  sm:max-w-md">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                     class="stroke-info shrink-0 w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                <span>{{ $newPhotoCount }} new {{ $newPhotoCount === 1 ? 'photo' : 'photos' }}. Click to view.</span>
+            </a>
+        @endif
     @foreach($posts as $post)
             <x-photo-card wire:key="post-{{ $post->id }}" :post="$post"/>
     @endforeach

resources/views/livewire/pages/new-feed.blade.php

@@ -0,0 +1,16 @@
+<x-main-content-layout>
+    <h1 class="text-2xl font-bold mb-4">New Photos</h1>
+    @if(count($posts) === 0)
+        🤷 Oops... No new photos found
+    @endif
+    @foreach($posts as $post)
+        <x-photo-card wire:key="post-{{ $post->id }}" :post="$post"/>
+    @endforeach
+    @if(!$isLastPage)
+        <div x-intersect.margin.500px="$wire.loadMore()">Scroll to load more 👇</div>
+    @endif
+    <div wire:loading wire:target="loadMore">
+        <span class="loading loading-dots loading-sm"></span>
+    </div>
+</x-main-content-layout>
+

routes/web.php

@@ -18,6 +18,7 @@
 Route::get('/about', \App\Livewire\Pages\About::class)->name('about');
 Route::get('whats-new', \App\Livewire\Pages\WhatsNew::class)->name('whats-new');
 Route::get('/feed', \App\Livewire\Pages\Feed::class)->name('feed')->middleware('auth:web');
+Route::get('/feed/new', \App\Livewire\Pages\NewFeed::class)->name('new-feed')->middleware('auth:web');
 Route::get('photos/{post}', \App\Livewire\Pages\SinglePhoto::class)->name('single-photo')->middleware('auth:web');
 Route::get('tags/{slug}', \App\Livewire\Pages\TagFeed::class)->name('tag')->middleware('auth:web');
 Route::get('/signup', \App\Livewire\Pages\NotificationsSignup::class)->name('signup')->middleware('auth:web');