Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/theme/hooks/useColorScheme.ts

@@ -0,0 +1,67 @@
+import { useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { ColorScheme, useUpdateUserMutation } from '~/generated/graphql';
+
+export function useColorScheme() {
+  const [currentUser] = useRecoilState(currentUserState);
+
+  const [updateUser] = useUpdateUserMutation();
+
+  const colorScheme = useMemo(() => {
+    if (!currentUser?.settings?.colorScheme) {
+      // Use system color scheme if user is not logged in or has no settings
+      return ColorScheme.System;
+    }
+
+    return currentUser.settings.colorScheme;
+  }, [currentUser?.settings?.colorScheme]);
+
+  const setColorScheme = useCallback(
+    async (value: ColorScheme) => {
+      try {
+        const result = await updateUser({
+          variables: {
+            where: {
+              id: currentUser?.id,
+            },
+            data: {
+              settings: {
+                update: {
+                  colorScheme: value,
+                },
+              },
+            },
+          },
+          optimisticResponse:
+            currentUser && currentUser.settings
+              ? {
+                  __typename: 'Mutation',
+                  updateUser: {
+                    __typename: 'User',
+                    ...currentUser,
+                    settings: {
+                      __typename: 'UserSettings',
+                      id: currentUser.settings.id,
+                      colorScheme: value,
+                      locale: currentUser.settings.locale,
+                    },
+                  },
+                }
+              : undefined,
+        });
+
+        if (!result.data || result.errors) {
+          throw result.errors;
+        }
+      } catch (err) {}
+    },
+    [currentUser, updateUser],
+  );
+
+  return {
+    colorScheme,
+    setColorScheme,
+  };
+}

front/src/modules/ui/theme/hooks/useSystemColorScheme.ts

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { ColorScheme } from '~/generated/graphql';
+
+export type SystemColorScheme = ColorScheme.Light | ColorScheme.Dark;
+
+export function useSystemColorScheme(): SystemColorScheme {
+  const mediaQuery = useMemo(
+    () => window.matchMedia('(prefers-color-scheme: dark)'),
+    [],
+  );
+
+  const [preferredColorScheme, setPreferredColorScheme] =
+    useState<SystemColorScheme>(
+      !window.matchMedia || !mediaQuery.matches
+        ? ColorScheme.Light
+        : ColorScheme.Dark,
+    );
+
+  useEffect(() => {
+    if (!window.matchMedia) {
+      return;
+    }
+
+    function handleChange(event: MediaQueryListEvent): void {
+      setPreferredColorScheme(
+        event.matches ? ColorScheme.Dark : ColorScheme.Light,
+      );
+    }
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [mediaQuery]);
+
+  return preferredColorScheme;
+}