Merge pull request #2 from opcodesio/refactor/file-list-speed-bump

refactor file list to be a lot faster to load
opcodesio · Aug 17, 2022 · f08710d · f08710d
2 parents 0220b43 + 81fc889
commit f08710d
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 34 deletions.
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
@@ -13,7 +13,19 @@
     @endisset
     @livewireStyles
 </head>
-<body class="h-full px-5">
+<body class="h-full px-5"
+    x-data="{
+        selectedFileName: '{{ $selectedFileName }}',
+        selectFile(name) {
+            if (name && name === this.selectedFileName) {
+                this.selectedFileName = '';
+            } else {
+                this.selectedFileName = name;
+            }
+            this.$dispatch('file-selected', this.selectedFileName);
+        }
+    }"
+>
 <div class="flex h-full max-h-screen max-w-full">
     <div class="hidden md:flex md:w-80 md:flex-col md:fixed md:inset-y-0">
         <nav class="flex flex-col h-full py-5">
@@ -32,7 +44,7 @@
                 @endif
             </div>
 
-            @livewire('log-viewer::file-list')
+            @livewire('log-viewer::file-list', ['selectedFileName' => $selectedFileName])
         </nav>
     </div>
 

diff --git a/resources/views/livewire/file-list.blade.php b/resources/views/livewire/file-list.blade.php
@@ -1,12 +1,10 @@
-<div class="relative overflow-hidden" wire:init="loadFiles">
+<div class="relative overflow-hidden" x-cloak>
     <div class="absolute top-0 h-6 w-full bg-gradient-to-b from-gray-100 to-transparent"></div>
     <div class="relative h-full overflow-y-scroll pt-6 pb-28 pr-4">
-        @if(!$shouldLoadFiles)
-            <div class="loader">Loading files...</div>
-        @endif
         @foreach($files as $logFile)
             <div wire:key="log-file-{{$logFile->name}}"
                 wire:click="selectFile('{{ $logFile->name }}')"
+                x-on:click="selectFile('{{ $logFile->name }}')"
                 x-data="{
                     open: false,
                     toggle() {
@@ -23,7 +21,8 @@
                 x-on:keydown.escape.prevent.stop="close($refs.button)"
                 x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
                 x-id="['dropdown-button']"
-                class="mb-2 text-gray-800 rounded-md overflow-hidden transition duration-100 border-2 hover:border-emerald-600 cursor-pointer @if($file === $logFile->name) border-emerald-500 bg-emerald-50 @else border-transparent bg-white @endif"
+                class="mb-2 text-gray-800 rounded-md overflow-hidden transition duration-100 border-2 hover:border-emerald-600 cursor-pointer"
+                x-bind:class="[selectedFileName && selectedFileName === '{{ $logFile->name }}' ? 'border-emerald-500 bg-emerald-50' : 'border-transparent bg-white']"
             >
                 <div class="relative flex justify-between items-center pl-4 pr-10 py-2">
                     <p class="text-sm mr-3 whitespace-nowrap">{{ $logFile->name }}</p>

diff --git a/resources/views/livewire/log-list.blade.php b/resources/views/livewire/log-list.blade.php
@@ -1,4 +1,8 @@
-<div class="h-full w-full py-5 log-list" @if($refreshAutomatically) wire:poll @endif>
+<div class="h-full w-full py-5 log-list" @if($refreshAutomatically) wire:poll @endif
+    x-cloak
+    x-data
+    x-on:file-selected.window="$wire.call('selectFile', $event.detail)"
+>
 @empty($selectedFileName)
     <div class="flex h-full items-center justify-center">
         Please select a file...

diff --git a/routes/web.php b/routes/web.php
@@ -10,6 +10,7 @@
             return view('log-viewer::index', [
                 'jsPath' => __DIR__.'/../public/app.js',
                 'cssPath' => __DIR__.'/../public/app.css',
+                'selectedFileName' => request()->query('file', ''),
             ]);
         })->name('blv.index');
     });
diff --git a/src/Http/Livewire/FileList.php b/src/Http/Livewire/FileList.php
@@ -7,39 +7,23 @@
 
 class FileList extends Component
 {
-    public bool $shouldLoadFiles = false;
+    public string $selectedFileName = '';
 
-    public string $file = '';
-
-    protected $queryString = [
-        'file' => ['except' => ''],
-    ];
+    public function mount(string $selectedFileName)
+    {
+        $this->selectedFileName = $selectedFileName;
+    }
 
     public function render()
     {
         return view('log-viewer::livewire.file-list', [
-            'files' => $this->shouldLoadFiles ? LogViewer::getFiles() : [],
+            'files' => LogViewer::getFiles(),
         ]);
     }
 
-    public function loadFiles()
-    {
-        $this->shouldLoadFiles = true;
-
-        if (! empty($this->file)) {
-            $this->emit('fileSelected', $this->file);
-        }
-    }
-
-    public function selectFile(string $fileName)
+    public function selectFile(string $name)
     {
-        if ($fileName === $this->file) {
-            $this->file = '';
-        } else {
-            $this->file = $fileName;
-        }
-
-        $this->emit('fileSelected', $this->file);
+        $this->selectedFileName = $name;
     }
 
     public function download(string $fileName)
@@ -50,14 +34,19 @@ public function download(string $fileName)
     public function deleteFile(string $fileName)
     {
         LogViewer::getFile($fileName)?->delete();
+
+        if ($this->selectedFileName === $fileName) {
+            $this->selectedFileName = '';
+            $this->emit('fileSelected', $this->selectedFileName);
+        }
     }
 
     public function clearCache(string $fileName)
     {
         LogViewer::getFile($fileName)?->clearIndexCache();
 
-        if ($this->file === $fileName) {
-            $this->emit('fileSelected', $this->file);
+        if ($this->selectedFileName === $fileName) {
+            $this->emit('fileSelected', $this->selectedFileName);
         }
     }
 }
diff --git a/src/Http/Livewire/LogList.php b/src/Http/Livewire/LogList.php
@@ -34,6 +34,7 @@ class LogList extends Component
     public bool $refreshAutomatically = false;
 
     protected $queryString = [
+        'selectedFileName' => ['except' => '', 'as' => 'file'],
         'query' => ['except' => ''],
         'log' => ['except' => ''],
     ];