wip

Author: andreiio

Diff for: app/Livewire/NewsFeed.php

@@ -14,6 +14,7 @@
 use Filament\Forms\Form;
 use Illuminate\Contracts\Database\Eloquent\Builder;
 use Illuminate\Pagination\LengthAwarePaginator;
+use Livewire\Attributes\Computed;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -69,20 +70,15 @@ public function form(Form $form): Form
             ->statePath('filters');
     }
 
-    public function render()
-    {
-        return view('livewire.news-feed', [
-            'posts' => $this->getPosts(),
-        ]);
-    }
-
     public function reload(): void
     {
         $this->reset('filters');
         $this->resetPage();
+        $this->dispatch('$refresh');
     }
 
-    protected function getPosts(): LengthAwarePaginator
+    #[Computed]
+    protected function posts(): LengthAwarePaginator
     {
         return Post::query()
             ->with('author.media', 'electionDay', 'media')

Diff for: app/Livewire/NewsFeedUpdater.php

@@ -8,26 +8,14 @@
 
 class NewsFeedUpdater extends Component
 {
-    public bool $banner = false;
+    public bool $visible = false;
 
     protected $listeners = [
-        'echo:newsfeed,AnnouncePost' => 'showBanner',
-        'reload' => '$refresh',
+        'echo:newsfeed,UpdateNewsFeed' => 'open',
     ];
 
-    public function showBanner(): void
+    public function open(): void
     {
-        $this->banner = true;
-    }
-
-    public function render()
-    {
-        return view('livewire.news-feed-updater');
-    }
-
-    public function reload(): void
-    {
-        $this->dispatch('reload');
-        $this->banner = false;
+        $this->visible = true;
     }
 }

Diff for: resources/views/livewire/news-feed-updater.blade.php

@@ -1,24 +1,32 @@
-<div class="">
-    @if ($banner)
-        <div class="p-4 border-l-4 border-secondary-600 bg-secondary-100">
-            <div class="flex gap-3">
-                <x-ri-information-fill class="w-5 h-5 text-secondary-500 shrink-0" />
+<div class="sticky top-0 z-10">
+    <div x-show="visible"
+        x-cloak
+        x-data="{
+            visible: $wire.entangle('visible'),
+            close() {
+                this.visible = false;
+                $wire.$parent.reload();
+            }
+        }"
+        class="p-4 border-l-4 shadow border-secondary-600 bg-secondary-100">
+        <div class="flex gap-3">
+            <x-ri-information-fill class="w-5 h-5 text-secondary-500 shrink-0" />
 
-                <div class="flex flex-wrap flex-1 gap-3 md:justify-between">
-                    <p class="text-sm text-secondary-700">
-                        {{ __('app.newsfeed.updated') }}
-                    </p>
+            <div class="flex flex-wrap flex-1 gap-3 md:justify-between">
+                <p class="text-sm text-secondary-700">
+                    {{ __('app.newsfeed.updated') }}
+                </p>
 
-                    <button wire:click="reload"
-                        class="text-xs font-medium text-secondary-700 whitespace-nowrap hover:text-secondary-600 flex gap-1.5 items-center group">
-                        <span>{{ __('app.newsfeed.refresh') }}</span>
+                <button x-on:click.prevent="close"
+                    2x-on:click.prevent="$dispatch('refresh-feed')"
+                    class="text-xs font-medium text-secondary-700 whitespace-nowrap hover:text-secondary-600 flex gap-1.5 items-center group">
+                    <span>{{ __('app.newsfeed.refresh') }}</span>
 
-                        <x-ri-refresh-line
-                            class="w-4 h-4 transition-transform group-hover:rotate-45 group-focus:rotate-45" />
-                    </button>
+                    <x-ri-refresh-line
+                        class="w-4 h-4 transition-transform group-hover:rotate-45 group-focus:rotate-45" />
+                </button>
 
-                </div>
             </div>
         </div>
-    @endif
+    </div>
 </div>

Diff for: resources/views/livewire/news-feed.blade.php

@@ -15,19 +15,27 @@ class="prose md:prose-lg lg:prose-xl max-w-none prose-headings:font-semibold pro
             {{ $this->form }}
         </form>
 
-        <div class="grid gap-4 mt-10 sm:gap-8">
+        <div x-on:refresh-feed="$wire.reload()" class="relative grid gap-4 mt-10 sm:gap-8">
             <livewire:news-feed-updater />
 
-            {{ $posts->links(data: ['scrollTo' => false]) }}
+            {{ $this->posts->links(data: ['scrollTo' => false]) }}
 
-            @forelse ($posts as $post)
+            @forelse ($this->posts as $post)
                 <x-news-feed-item :post="$post" />
             @empty
                 <p>{{ __('app.newsfeed.empty') }}</p>
             @endforelse
 
-            {{ $posts->links(data: ['scrollTo' => '#newsfeed']) }}
+            {{ $this->posts->links(data: ['scrollTo' => '#newsfeed']) }}
         </div>
     </div>
 
+    @script
+        <script>
+            $wire.on('$refresh', () => {
+                document.querySelector('#newsfeed').scrollIntoView()
+            });
+        </script>
+    @endscript
+
 </section>