Try to use browser timezone

Author: wrose504

app/Http/Controllers/Posts/PostController.php

@@ -14,12 +14,14 @@
 use App\Services\LdJsonService;
 use App\Services\PostService;
 use App\Traits\PostTrait;
+use App\Traits\SessionTimezoneTrait;
 use App\Traits\SubsiteTrait;
 use Illuminate\Contracts\View\View;
 
 final class PostController extends BaseController
 {
     use PostTrait;
+    use SessionTimezoneTrait;
     use SubsiteTrait;
 
     protected int $subsiteId;
@@ -55,6 +57,7 @@ public function show(Post $post): View
             'next' => $post->next(),
             'previous' => $post->previous(),
             'canonicalUrl' => $this->getCanonicalUrl($post),
+            'displayTimezone' => $this->getDisplayTimezone(),
             'relatedPosts' => $relatedPosts,
             'subdomain' => $subdomain,
             'useLivewire' => true,

app/Livewire/Comments/CommentComponent.php

@@ -10,6 +10,7 @@
 use App\Models\Post;
 use App\Models\User;
 use App\Traits\CommentComponentTrait;
+use App\Traits\SessionTimezoneTrait;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\DB;
 use Livewire\Attributes\On;
@@ -18,6 +19,7 @@
 final class CommentComponent extends Component
 {
     use CommentComponentTrait;
+    use SessionTimezoneTrait;
 
     // Data
     public ?int $authorizedUserId;

app/Livewire/Localization/SwitchTimezoneComponent.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire\Localization;
+
+use App\Traits\SessionTimezoneTrait;
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+final class SwitchTimezoneComponent extends Component
+{
+    use SessionTimezoneTrait;
+
+    public function render(): View
+    {
+        return view('livewire.localization.switch-timezone-component');
+    }
+}

app/Livewire/Posts/PostIndexComponent.php

@@ -7,6 +7,7 @@
 use App\Models\Post;
 use App\Traits\PaginationTrait;
 use App\Traits\PostTrait;
+use App\Traits\SessionTimezoneTrait;
 use App\Traits\SubsiteTrait;
 use Illuminate\Contracts\Pagination\CursorPaginator;
 use Illuminate\Contracts\View\View;
@@ -19,6 +20,7 @@ final class PostIndexComponent extends Component
 {
     use PaginationTrait;
     use PostTrait;
+    use SessionTimezoneTrait;
     use SubsiteTrait;
     use WithPagination;
 
@@ -59,6 +61,7 @@ public function render(): View
 
         return view('livewire.posts.post-index-component', [
             'posts' => $posts,
+            'displayTimezone' => $this->getDisplayTimezone(),
         ]);
     }
 
@@ -72,7 +75,7 @@ public function query(): Builder
     private function getPosts(): CursorPaginator
     {
         $dateQueries = [
-            DB::raw('DATE_FORMAT(posts.created_at, "%m-%d") as month_day'),
+            DB::raw("DATE_FORMAT(CONVERT_TZ(posts.created_at, 'UTC', " . DB::connection()->getPdo()->quote($this->getDisplayTimezone()) . "), '%m-%d') as month_day"),
             DB::raw('COUNT(*) as total_posts'),
         ];
 

app/Traits/SessionTimezoneTrait.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Traits;
+
+use Carbon\CarbonTimezone;
+use Carbon\Exceptions\InvalidTimeZoneException;
+use Livewire\Attributes\Locked;
+use Livewire\Attributes\Session;
+
+trait SessionTimezoneTrait
+{
+    use LoggingTrait;
+
+    #[Session(key: 'displayTimezone')]
+    #[Locked]
+    public ?string $displayTimezone = null;
+
+    public function getDisplayTimezone(): string
+    {
+        // For some reason, calling session('displayTimezone') will sometimes return a value
+        // when $this->displayTimezone is null.
+        return $this->displayTimezone ?? session('displayTimezone') ?? config('app.timezone');
+    }
+
+    public function setDisplayTimezone(string $timezone): void
+    {
+        try {
+            // Try to create a CarbonTimezone object to validate the timezone string.
+            CarbonTimezone::create($timezone);
+
+            // If we get here, the timezone is valid, so we can set it.
+            $this->displayTimezone = $timezone;
+        } catch (InvalidTimeZoneException $e) {
+            $this->logError('Invalid timezone: ' . $timezone);
+        }
+    }
+}

app/View/Components/Dates/FormattedDateTimeComponent.php

@@ -4,12 +4,15 @@
 
 namespace App\View\Components\Dates;
 
+use App\Traits\SessionTimezoneTrait;
 use Carbon\Carbon;
 use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 final class FormattedDateTimeComponent extends Component
 {
+    use SessionTimezoneTrait;
+
     public Carbon $date;
     public string $format = 'Y-m-d H:i:s';
 
@@ -36,7 +39,8 @@ public function render(): View
 
     private function getFormattedDate(): string
     {
-        $formattedDate = $this->date->format($this->format());
+        $date = $this->date->tz($this->getDisplayTimezone());
+        $formattedDate = $date->format($this->format());
 
         return $this->addPeriods($formattedDate);
     }

resources/views/comments/partials/comment-timestamp.blade.php

@@ -1,11 +1,11 @@
 <time datetime="{{ $comment->created_at->format('Y-m-d H:i:d') }}">
     <a href="#{{ $comment->id }}" class="footer-info" title="{{ trans('Permanent link to this comment') }}">
         <x-icons.icon-component filename="clock" class="icon-small" />
-        {{ $comment->created_at->format('g:i a') }}
+        {{ $comment->created_at->tz($displayTimezone)->format('g:i a') }}
     </a>
 
     <span class="footer-info">
         <x-icons.icon-component filename="calendar3" class="icon-small" />
-        {{ $comment->created_at->format('F j') }}
+        {{ $comment->created_at->tz($displayTimezone)->format('F j') }}
     </span>
 </time>

resources/views/layouts/app.blade.php

@@ -21,6 +21,8 @@
     <meta name="ckeditor-config" content='@json(config("ckeditor"))'>
 @endif
 
+    <livewire:localization.switch-timezone-component />
+
 </head>
 <body>
 

resources/views/livewire/localization/switch-timezone-component.blade.php

@@ -0,0 +1,10 @@
+<div style="display: none;" wire:init="$js.setDisplayTimezone"></div>
+
+@script
+<script>
+    $js('setDisplayTimezone', () => {
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        $wire.setDisplayTimezone(timezone);
+    });
+</script>
+@endscript

resources/views/posts/show.blade.php

@@ -18,10 +18,10 @@
             <p class="dateline">
                 <time datetime="{{ $post->created_at->format('Y-m-d H:i:d') }}">
                     <x-icons.icon-component filename="calendar3" class="icon-small" />
-                    {{ $post->created_at->format('F j, Y') }}
+                    {{ $post->created_at->tz($displayTimezone)->format('F j, Y') }}
 
                     <x-icons.icon-component filename="clock" class="icon-small" />
-                    {{ $post->created_at->format('g:i a') }}
+                    {{ $post->created_at->tz($displayTimezone)->format('g:i a') }}
                 </time>
 
                 <x-posts.post-rss-button :post="$post" />