Move theming logic from user to shared

internal/api/swagger.yaml

@@ -9,7 +9,7 @@ info:
   license:
     name: Apache 2.0
     url: http://www.apache.org/licenses/LICENSE-2.0.html
-  version: 1.6.7
+  version: 1.6.8
 externalDocs:
   description: Find out more about spec
   url: ''

web/src/app/index.ts

@@ -7,6 +7,7 @@ import { linkRouter, onAppMount } from "atomic-router-forest";
 import { createEvent, sample } from "effector";
 import { h, spec } from "forest";
 import { Pages } from "./pages";
+import { loadThemeFromStorageFx } from "@/shared/lib";
 
 export const Application = () => {
   h("body", () => {
@@ -18,7 +19,6 @@ export const Application = () => {
         "text-slate-700": true,
         "dark:bg-eigengrau": true,
         "dark:text-slate-300": true,
-        dark: userModel.$currentTheme.map((theme) => theme === "dark"),
       },
     });
 
@@ -56,7 +56,8 @@ sample({
 
 sample({
   clock: appMounted,
-  target: [userModel.effects.loadThemeFromStorageFx, userModel.effects.loadLocaleFromStorageFx],
+  // TODO: move loadLocale to shared/lib/i18n
+  target: [loadThemeFromStorageFx, userModel.effects.loadLocaleFromStorageFx],
 });
 
 sample({

web/src/entities/user/model.ts

@@ -1,10 +1,8 @@
-import { User, getUsers } from "@/shared/api";
-import { getUser } from "@/shared/api/users";
+import { User, getUsers, getUser } from "@/shared/api";
 import { setCurrentAccount } from "@/shared/auth";
 import { setLanguage } from "@/shared/lib/i18n";
 import { createEffect, createEvent, createStore, sample } from "effector";
 
-const THEME_KEY = "theme";
 const LOCALE_KEY = "locale";
 
 const getUsersFx = createEffect(() => {
@@ -42,28 +40,6 @@ sample({
   target: setCurrentAccount,
 });
 
-const loadThemeFromStorageFx = createEffect(() => {
-  return localStorage.getItem(THEME_KEY) || "light";
-});
-
-const setThemeToStorageFx = createEffect((theme: string) => {
-  return localStorage.setItem(THEME_KEY, theme);
-});
-
-export const $currentTheme = createStore<string | null>("light");
-export const themeChanged = createEvent<string>();
-
-sample({
-  source: themeChanged,
-  fn: (theme) => theme.toLowerCase(),
-  target: [setThemeToStorageFx, $currentTheme],
-});
-
-sample({
-  source: loadThemeFromStorageFx.doneData,
-  target: $currentTheme,
-});
-
 const loadLocaleFromStorageFx = createEffect(() => {
   return localStorage.getItem(LOCALE_KEY) || "en";
 });
@@ -96,7 +72,6 @@ sample({
 export const effects = {
   getUsersFx,
   getUserFx,
-  loadThemeFromStorageFx,
   loadLocaleFromStorageFx,
 };
 

web/src/index.html

@@ -7,9 +7,9 @@
   <title>Moonlogs</title>
   <script>
     if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.body?.classList?.add('dark')
+      document.querySelector('html')?.classList?.add('dark')
     } else {
-      document.body?.classList?.remove('dark')
+      document.querySelector('html')?.classList?.remove('dark')
     }
   </script>
 </head>

web/src/shared/api/index.ts

@@ -13,7 +13,7 @@ export {
 } from "./schemas";
 export { type Tag, type TagToCreate, type TagToUpdate, getTags, getTag, editTag, createTag, deleteTag } from "./tags";
 export { type Log, type Level, getLogs } from "./logs";
-export { type User, type UserToCreate, type UserToUpdate, getUsers, editUser, createUser } from "./users";
+export { type User, type UserToCreate, type UserToUpdate, getUsers, getUser, editUser, createUser } from "./users";
 export {
   type ApiToken,
   type ApiTokenToCreate,

web/src/shared/lib/index.ts

@@ -3,3 +3,4 @@ export { rules } from "./forms";
 export { trigger } from "./trigger";
 export { hashCode } from "./hash";
 export { isObjectPresent } from "./presence";
+export { themeChanged, $currentTheme, loadThemeFromStorageFx } from "./theming";

web/src/shared/lib/theming/index.ts

@@ -0,0 +1,31 @@
+import { createEffect, createEvent, createStore, sample } from "effector";
+
+const THEME_KEY = "theme";
+
+type Theme = "dark" | "light";
+
+export const $currentTheme = createStore<Theme>("light");
+export const themeChanged = createEvent<Theme>();
+
+export const loadThemeFromStorageFx = createEffect(() => {
+  const theme: Theme = (localStorage.getItem(THEME_KEY) || "light") as Theme;
+
+  return theme;
+});
+
+const setThemeToStorageFx = createEffect((theme: Theme) => {
+  return localStorage.setItem(THEME_KEY, theme);
+});
+
+const applyThemeFx = createEffect((theme: Theme) => {
+  if (theme === "dark") {
+    return document.querySelector("html")?.classList?.add("dark");
+  }
+
+  return document.querySelector("html")?.classList?.remove("dark");
+});
+
+sample({
+  clock: [themeChanged, loadThemeFromStorageFx.doneData],
+  target: [applyThemeFx, setThemeToStorageFx, $currentTheme],
+});

web/src/widgets/user-profile/index.ts

@@ -1,5 +1,6 @@
 import { tagModel } from "@/entities/tag";
 import { userModel } from "@/entities/user";
+import { $currentTheme, themeChanged } from "@/shared/lib";
 import { i18n } from "@/shared/lib/i18n";
 import { Select } from "@/shared/ui";
 import { combine, createStore } from "effector";
@@ -88,9 +89,9 @@ export const UserProfile = () => {
         h("p", { text: i18n("profile.theme") });
 
         Select({
-          value: userModel.$currentTheme,
+          value: $currentTheme,
           options: createStore(["dark", "light"]),
-          optionSelected: userModel.themeChanged,
+          optionSelected: themeChanged,
           withBlank: createStore(false),
         });
       });