feat: update local middleware and livewire component

mckenziearts · mckenziearts · commit 691e48980f8d · 2024-12-05T22:48:07.000+01:00
diff --git a/app/Http/Middleware/LocaleMiddleware.php b/app/Http/Middleware/LocaleMiddleware.php
@@ -7,41 +7,31 @@
 use Closure;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
-use Psr\Container\ContainerExceptionInterface;
-use Psr\Container\NotFoundExceptionInterface;
 use Symfony\Component\HttpFoundation\Response;
 
 final class LocaleMiddleware
 {
-    /**
-     * @throws ContainerExceptionInterface
-     * @throws NotFoundExceptionInterface
-     */
     public function handle(Request $request, Closure $next): Response
     {
-        $user = Auth::user();
-        $lang = config('lcm.app_locale');
-        $supportLang = config('lcm.supported_locales');
+        $browserLocale = explode('_', (string) $request->getPreferredLanguage())[0];
+        $currentLocale = app()->getLocale();
+        $activeLocale = session()->get('locale');
+        $supportedLocales = config('lcm.supported_locales');
 
-        if (! Auth::check()) {
+        if (Auth::check()) {
+            $userLocale = Auth::user()?->setting('locale', $currentLocale);
 
-            if (! is_null($request->server('HTTP_ACCEPT_LANGUAGE'))) {
-                $navigatorLang = substr((string) $request->server('HTTP_ACCEPT_LANGUAGE'), 0, 2); // @phpstan-ignore-line
-
-                if (in_array($navigatorLang, $supportLang)) {
-                    $lang = $navigatorLang;
-                }
+            if ($userLocale && $userLocale !== $currentLocale) {
+                app()->setLocale($userLocale);
             }
-        }
-
-        if (! is_null($user)) {
-
-            if (isset($user->settings['locale']) && $user->settings['locale'] != $lang) {
-                $lang = $user->settings['locale'];
+        } else {
+            if (! $activeLocale && in_array($browserLocale, $supportedLocales)) {
+                app()->setLocale($browserLocale);
+            } else {
+                app()->setLocale($activeLocale);
             }
         }
 
-        app()->setLocale($lang);
 
         return $next($request);
     }
diff --git a/app/Livewire/Components/ChangeLocale.php b/app/Livewire/Components/ChangeLocale.php
@@ -6,30 +6,40 @@
 
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Pluralizer;
+use Livewire\Attributes\Computed;
 use Livewire\Component;
 
 final class ChangeLocale extends Component
 {
-    public string $selectedLang;
+    public string $currentLocale;
 
     public function mount(): void
     {
-        $this->selectedLang = app()->getLocale();
+        $this->currentLocale = app()->getLocale();
     }
 
-    public function changeLang(string $lang): void
+    public function changeLocale(): void
     {
-        $user = Auth::user();
+        $locale = $this->currentLocale === 'fr' ? 'en' : 'fr';
 
-        if ($user) {
-            $settings = $user->settings;
-            $settings['locale'] = $lang;
-            $user->settings = $settings;
-            $user->save();
+        if (Auth::check()) {
+            Auth::user()?->settings(['locale' => $locale]);
         }
 
-        app()->setLocale($lang);
-        $this->dispatch('localeChanged');
+        $this->currentLocale = $locale;
+        app()->setLocale($locale);
+        session()->put('locale', $locale);
+
+        Pluralizer::useLanguage($this->currentLocale === 'fr' ? 'french' : 'english');
+
+        $this->redirectRoute('home', navigate: true);
+    }
+
+    #[Computed]
+    public function locale(): string
+    {
+        return $this->currentLocale === 'fr' ? 'English' : 'Français';
     }
 
     public function render(): View
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -46,10 +46,12 @@
  * @property string | null $bio
  * @property string | null $website
  * @property string | null $banned_reason
+ * @property array $settings
  * @property Carbon | null $email_verified_at
  * @property Carbon | null $last_login_at
  * @property Carbon | null $banned_at
  * @property Collection | Activity[] $activities
+ * @property-read Collection | SocialAccount[] $providers
  */
 final class User extends Authenticatable implements FilamentUser, HasAvatar, HasMedia, HasName, MustVerifyEmail
 {
diff --git a/app/Traits/HasSettings.php b/app/Traits/HasSettings.php
@@ -6,7 +6,7 @@
 
 trait HasSettings
 {
-    public function setting(string $name, string $default): string
+    public function setting(string $name, string $default): mixed
     {
         if ($this->settings && array_key_exists($name, $this->settings)) {
             return $this->settings[$name];
diff --git a/config/lcm.php b/config/lcm.php
@@ -26,8 +26,6 @@
         'web_hook' => env('SLACK_WEBHOOK_URL', ''),
     ],
 
-    'app_locale' => env('APP_LOCALE', 'fr'),
-
     'supported_locales' => ['fr', 'en'],
 
     'spa_url' => env('FRONTEND_APP_URL', 'http://localhost:4200'),
diff --git a/lang/en/pages/article.php b/lang/en/pages/article.php
@@ -5,7 +5,7 @@
 return [
 
     'title' => 'Laravel Cameroon Blog',
-    'blog' => 'Le Blog de Laravel Cameroun',
+    'blog' => 'The Laravel Cameroon Blog',
     'blog_summary' => 'All the latest articles, tips and tutorials published just for you.',
     'about_author' => 'About author',
     'next_article' => 'Next article',
diff --git a/lang/en/pages/auth.php b/lang/en/pages/auth.php
@@ -23,15 +23,15 @@
             'heading' => 'Open your mind and discover new horizons.',
             'quote' => 'A lone developer is like an isolated node—limited in reach, influence, and growth. Just as software thrives on interconnected components, so do developers flourish in the collaborative ecosystem of a community.',
             'quote_authors' => 'by Andrew Hunt and David Thomas',
+            'podcast' => 'Podcast',
+            'podcast_description' => 'Follow podcasts on different topics with freelancers, developers, entrepreneurs, etc.',
+            'discussion' => 'Discussions',
+            'discussion_description' => 'Take part in open discussions and debates with several other participants.',
+            'snippet' => 'Snippets code',
+            'snippet_description' => 'Share source code for different languages to help other developers.',
+            'premium' => 'Premium',
+            'premium_description' => 'Become premium, support the community and access private content and source code.',
         ],
-        'podcast' => 'Podcast',
-        'podcast_description' => 'Follow podcasts on different topics with freelancers, developers, entrepreneurs, etc.',
-        'discussion' => 'Discussions',
-        'discussion_description' => 'Take part in open discussions and debates with several other participants.',
-        'snippet' => 'Snippets code',
-        'snippet_description' => 'Share source code for different languages to help other developers.',
-        'premium' => 'Premium',
-        'premium_description' => 'Become premium, support the community and access private content and source code.',
     ],
 
     'forgot' => [
diff --git a/lang/fr/pages/article.php b/lang/fr/pages/article.php
@@ -5,7 +5,7 @@
 return [
 
     'title' => 'Blog Laravel Cameroun',
-    'blog' => 'The Laravel Cameroon Blog',
+    'blog' => 'Le Blog de Laravel Cameroun',
     'blog_summary' => 'Tous les articles, tips et tutoriels récemment publiés juste pour vous.',
     'about_author' => 'À propos de l’auteur',
     'next_article' => 'Article suivant',
diff --git a/lang/fr/pages/auth.php b/lang/fr/pages/auth.php
@@ -37,9 +37,7 @@
     'forgot' => [
         'page_title' => 'Mot de passe oublié',
         'title' => 'Réinitialisation du mot de passe',
-        'description' => "Mot de passe oublié ? Aucun problème. Communiquez-nous simplement votre adresse e-mail et nous vous
-                    enverrons par e-mail un lien de réinitialisation de mot de passe qui vous permettra d'en choisir un
-                    nouveau.",
+        'description' => "Mot de passe oublié ? Aucun problème. Communiquez-nous simplement votre adresse e-mail et nous vous enverrons par e-mail un lien de réinitialisation de mot de passe qui vous permettra d'en choisir un nouveau.",
     ],
 
     'reset' => [
@@ -49,9 +47,7 @@
 
     'verify' => [
         'page_title' => "Vérification de l'adresse e-mail",
-        'description' => "Merci pour votre inscription ! Avant de commencer, pourriez-vous vérifier votre adresse e-mail en
-                cliquant sur le lien que nous venons de vous envoyer par e-mail ? Si vous n'avez pas reçu l'e-mail, nous
-                nous ferons un plaisir de vous en envoyer un autre.",
+        'description' => "Merci pour votre inscription ! Avant de commencer, pourriez-vous vérifier votre adresse e-mail en cliquant sur le lien que nous venons de vous envoyer par e-mail ? Si vous n'avez pas reçu l'e-mail, nous nous ferons un plaisir de vous en envoyer un autre.",
         'success' => "Un nouveau lien de vérification a été envoyé à l'adresse e-mail que vous avez fournie lors de l'inscription ou la modification de votre adresse.",
         'submit' => "Renvoyer l'e-mail de vérification",
     ],
diff --git a/resources/views/components/layouts/footer.blade.php b/resources/views/components/layouts/footer.blade.php
@@ -53,19 +53,22 @@ class="ml-2 size-6 rounded-full"
                             {{ __('global.joins_us.description') }}
                         </p>
                     </div>
-                    <div class="mt-6 flex items-center text-sm font-medium space-x-4 sm:space-x-6">
-                        <x-link href="https://discord.gg/KNp6brbyVD" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
-                            <x-icon.discord class="size-5 text-[#5865F2]" aria-hidden="true" />
-                            Discord
-                        </x-link>
-                        <x-link href="https://t.me/laravelcameroun" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
-                            <x-icon.telegram class="size-5 text-[#34AADF]" aria-hidden="true" />
-                            Telegram
-                        </x-link>
-                        <x-link href="https://chat.whatsapp.com/G8e98Ms0MgSLEOGd3Uai1i" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
-                            <x-icon.whatsapp class="size-5 text-[#28D146]" aria-hidden="true" />
-                            WhatsApp
-                        </x-link>
+                    <div class="mt-6 space-y-6">
+                        <div class="flex items-center text-sm font-medium space-x-4 sm:space-x-6">
+                            <x-link href="https://discord.gg/KNp6brbyVD" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
+                                <x-icon.discord class="size-5 text-[#5865F2]" aria-hidden="true" />
+                                Discord
+                            </x-link>
+                            <x-link href="https://t.me/laravelcameroun" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
+                                <x-icon.telegram class="size-5 text-[#34AADF]" aria-hidden="true" />
+                                Telegram
+                            </x-link>
+                            <x-link href="https://chat.whatsapp.com/G8e98Ms0MgSLEOGd3Uai1i" class="inline-flex items-center gap-2 text-gray-300 hover:text-white">
+                                <x-icon.whatsapp class="size-5 text-[#28D146]" aria-hidden="true" />
+                                WhatsApp
+                            </x-link>
+                        </div>
+                        <livewire:components.change-locale />
                     </div>
                 </div>
             </div>
@@ -99,7 +102,6 @@ class="ml-2 size-6 rounded-full"
                         <x-icon.youtube class="size-6" aria-hidden="true" />
                     </x-link>
                 </div>
-                <livewire:components.change-locale />
             </div>
         </x-container>
     </div>
diff --git a/resources/views/livewire/components/change-locale.blade.php b/resources/views/livewire/components/change-locale.blade.php
@@ -1,9 +1,9 @@
-<div class="flex space-x-2 font-heading cursor-pointer font-bold text-primary-700" x-data="{ init() {
-        window.addEventListener('localeChanged', () => {
-            window.location.reload();
-        });
-    } }" x-init="init()" >
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-cm" viewBox="0 0 640 480" class="w-6 h-6">
+<button
+    type="button"
+    class="group inline-flex text-sm px-3 py-1.5 rounded-md bg-white/10 items-center gap-2 text-gray-300 hover:text-white"
+    wire:click="changeLocale"
+>
+    <svg id="flag-icons-cm" viewBox="0 0 640 480" class="size-5 rounded">
         <path fill="#007a5e" d="M0 0h213.3v480H0z"/>
         <path fill="#ce1126" d="M213.3 0h213.4v480H213.3z"/>
         <path fill="#fcd116" d="M426.7 0H640v480H426.7z"/>
@@ -18,9 +18,5 @@
             <use xlink:href="#cm-b" width="100%" height="100%" transform="rotate(-72)"/>
         </g>
     </svg>
-    @if($selectedLang == 'fr')
-        <button wire:click="changeLang('en')">EN</button>
-    @else
-        <button wire:click="changeLang('fr')">FR</button>
-    @endif
-</div>
+    <span>{{ $this->locale }}</span>
+</button>

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`trait HasSettings`
`8`	`8`	`{`
`9`		`- public function setting(string $name, string $default): string`
	`9`	`+ public function setting(string $name, string $default): mixed`
`10`	`10`	`{`
`11`	`11`	`if ($this->settings && array_key_exists($name, $this->settings)) {`
`12`	`12`	`return $this->settings[$name];`