Replace dashboard SweetAlert with custom session flashing

hydephp · Oct 21, 2023 · 8860658 · 8860658
1 parent 679164b
commit 8860658
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/packages/realtime-compiler/resources/dashboard.blade.php b/packages/realtime-compiler/resources/dashboard.blade.php
@@ -7,6 +7,20 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <title>{{ $title }}</title>
     <base target="_parent">
+    <style>
+        .justCreatedPage td {
+            animation: 2s ease-out 0s 1 FadeOut;
+        }
+
+        @keyframes FadeOut {
+            0% {
+                background-color: rgba(25, 135, 84, 0.4);
+            }
+            100% {
+                background-color: white;
+            }
+        }
+    </style>
 </head>
 <body class="d-flex flex-column min-vh-100">
 <nav class="navbar navbar-dark bg-dark flex-md-nowrap p-2">
@@ -227,7 +241,7 @@
                             <th class="text-end">Actions</th>
                         </tr>
                         @foreach($dashboard->getPageList() as $route)
-                            <tr>
+                            <tr id="pageRow-{{ $route->getRouteKey() }}" @class(['page-table-row', $dashboard->getFlash('justCreatedPage') === $route->getRouteKey() ? 'justCreatedPage active' : ''])>
                                 <td>
                                     <code title="\{{ $route->getPageClass() }}">{{ class_basename($route->getPageClass()) }}</code>
                                 </td>
@@ -287,7 +301,6 @@
 @if($dashboard->enableEditor())
     {{-- Interactivity is not needed when editor is disabled --}}
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
     <script>{!! $dashboard->getScripts() !!}</script>
 @endif

diff --git a/packages/realtime-compiler/resources/dashboard.js b/packages/realtime-compiler/resources/dashboard.js
@@ -61,14 +61,10 @@ function registerCreateFormModalHandlers() {
     const okHandler = async response => {
         let data = await response.json();
         createPageModal.hide();
-        Swal.fire({
-            title: 'Page created!',
-            text: data.body,
-            icon: 'success',
-            timer: 3000,
-            timerProgressBar: true,
-        })
-        createPageForm.reset()
+        createPageForm.reset();
+
+        // Reload so new page shows up in the table
+        location.reload();
     };
 
     const errorHandler = async response => {

diff --git a/packages/realtime-compiler/src/Http/DashboardController.php b/packages/realtime-compiler/src/Http/DashboardController.php
@@ -13,6 +13,7 @@
 use Hyde\Pages\MarkdownPost;
 use Hyde\Pages\Concerns\HydePage;
 use Hyde\Pages\DocumentationPage;
+use Hyde\Support\Models\RouteKey;
 use Illuminate\Support\HtmlString;
 use Hyde\Foundation\Facades\Routes;
 use Desilva\Microserve\JsonResponse;
@@ -26,7 +27,10 @@
 use Hyde\Framework\Actions\CreatesNewMarkdownPostFile;
 use Symfony\Component\HttpKernel\Exception\HttpException;
 
+use function time;
 use function basename;
+use function json_decode;
+use function json_encode;
 use function array_combine;
 use function escapeshellarg;
 use function file_get_contents;
@@ -44,6 +48,8 @@ class DashboardController
     protected Request $request;
     protected bool $isAsync = false;
 
+    protected array $flashes = [];
+
     protected static array $tips = [
         'This dashboard won\'t be saved to your static site.',
         'Got stuck? Ask for help on [GitHub](https://github.com/hydephp/hyde)!',
@@ -57,6 +63,8 @@ public function __construct()
         $this->title = config('hyde.name').' - Dashboard';
         $this->request = Request::capture();
 
+        $this->loadFlashData();
+
         if ($this->request->method === 'POST') {
             $this->isAsync = (getallheaders()['X-RC-Handler'] ?? getallheaders()['x-rc-handler'] ?? null) === 'Async';
 
@@ -188,6 +196,24 @@ public function getScripts(): string
         return file_get_contents(__DIR__.'/../../resources/dashboard.js');
     }
 
+    public function getFlash(string $key, $default = null): ?string
+    {
+        return $this->flashes[$key] ?? $default;
+    }
+
+    protected function flash(string $string, string $value): void
+    {
+        setcookie('hyde-rc-flash', json_encode([$string => $value]), time() + 180, '/') ?: $this->abort(500, 'Failed to flash session cookie');
+    }
+
+    protected function loadFlashData(): void
+    {
+        if ($flashData = $_COOKIE['hyde-rc-flash'] ?? null) {
+            $this->flashes = json_decode($flashData, true);
+            setcookie('hyde-rc-flash', ''); // Clear cookie
+        }
+    }
+
     protected function openInExplorer(): void
     {
         if ($this->enableEditor()) {
@@ -256,6 +282,7 @@ protected function createPage(): void
                 $this->abort($exception->getCode(), $exception->getMessage());
             }
 
+            $this->flash('justCreatedPage', RouteKey::fromPage($pageClass, $pageClass::pathToIdentifier($path))->get());
             $this->sendJsonResponse(201, "Created file '$path'!");
         }
     }