yuken 3 лет назад
Родитель
Сommit
9567fa5e35
1 измененных файлов с 63 добавлено и 1 удалено
  1. 63 1
      packages/app/src/components/Navbar/PersonalDropdown.jsx

+ 63 - 1
packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 
 import { UserPicture } from '@growi/ui';
 import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
+import { useUserUISettings } from '~/client/services/user-ui-settings';
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Post } from '~/client/util/apiv3-client';
+import {
+  isUserPreferenceExists,
+  isDarkMode as isDarkModeByUtil,
+  applyColorScheme,
+  removeUserPreference,
+  updateUserPreference,
+  updateUserPreferenceWithOsSettings,
+} from '~/client/util/color-scheme';
 import { useCurrentUser } from '~/stores/context';
+import { usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser } from '~/stores/ui';
 
 const PersonalDropdown = () => {
   const { t } = useTranslation();
@@ -13,6 +24,13 @@ const PersonalDropdown = () => {
 
   const user = currentUser || {};
 
+  // const [useOsSettings, setOsSettings] = useState(!isUserPreferenceExists());
+  // const [isDarkMode, setIsDarkMode] = useState(isDarkModeByUtil());
+
+  // const { data: isPreferDrawerMode, mutate: mutatePreferDrawerMode } = usePreferDrawerModeByUser();
+  // const { data: isPreferDrawerModeOnEdit, mutate: mutatePreferDrawerModeOnEdit } = usePreferDrawerModeOnEditByUser();
+  // const { scheduleToPut } = useUserUISettings();
+
   const logoutHandler = async() => {
     try {
       await apiv3Post('/logout');
@@ -23,6 +41,50 @@ const PersonalDropdown = () => {
     }
   };
 
+  // const preferDrawerModeSwitchModifiedHandler = useCallback((bool) => {
+  //   mutatePreferDrawerMode(bool);
+  //   scheduleToPut({ preferDrawerModeByUser: bool });
+  // }, [mutatePreferDrawerMode, scheduleToPut]);
+
+  // const preferDrawerModeOnEditSwitchModifiedHandler = useCallback((bool) => {
+  //   mutatePreferDrawerModeOnEdit(bool);
+  //   scheduleToPut({ preferDrawerModeOnEditByUser: bool });
+  // }, [mutatePreferDrawerModeOnEdit, scheduleToPut]);
+
+  // const followOsCheckboxModifiedHandler = (bool) => {
+  //   if (bool) {
+  //     removeUserPreference();
+  //   }
+  //   else {
+  //     updateUserPreferenceWithOsSettings();
+  //   }
+  //   applyColorScheme();
+
+  //   // update states
+  //   setOsSettings(bool);
+  //   setIsDarkMode(isDarkModeByUtil());
+  // };
+
+  // const userPreferenceSwitchModifiedHandler = (bool) => {
+  //   updateUserPreference(bool);
+  //   applyColorScheme();
+
+  //   // update state
+  //   setIsDarkMode(isDarkModeByUtil());
+  // };
+
+
+  // /* eslint-disable react/prop-types */
+  // const IconWithTooltip = ({
+  //   id, label, children, additionalClasses,
+  // }) => (
+  //   <>
+  //     <div id={id} className={`px-2 grw-icon-container ${additionalClasses != null ? additionalClasses : ''}`}>{children}</div>
+  //     <UncontrolledTooltip placement="bottom" fade={false} target={id}>{label}</UncontrolledTooltip>
+  //   </>
+  // );
+  // /* eslint-enable react/prop-types */
+
   return (
     <>
       {/* Button */}