api types; navbar style refactoring; user themes

src/pages/User/Settings/Settings.tsx

@@ -4,8 +4,20 @@ import {connect} from "react-redux";
 import NotFoundError from "../../NotFoundError";
 import Button from "../../../ui/Button/Button";
 import './Settings.sass';
-import {fetchUserSettings, updateUserSettings, uploadAvatar} from "../../../api/users";
+import {
+    fetchUserSettings,
+    updateUserAppearanceSettings,
+    updateUserGeneralSettings,
+    uploadAvatar
+} from "../../../api/users";
 import {setUser} from "../../../store/actions";
+import Tabs from "../../../ui/Tabs/Tabs";
+import TabItem from "../../../ui/Tabs/TabItem";
+
+enum TabsNames {
+    General,
+    Appearance
+}
 
 type Props = {
     match: { params: { userId: string } }
@@ -17,11 +29,15 @@ type State = {
     // Avatar
     useGravatar: boolean
     avatar: File | null
+    theme: Theme
+
+    currentTab: TabsNames
 }
 
 class Settings extends React.Component<Props, State> {
     state: State = {
-        useGravatar: false, avatar: null
+        useGravatar: false, avatar: null, theme: "dark",
+        currentTab: TabsNames.General
     }
 
     componentDidMount() {
@@ -38,7 +54,7 @@ class Settings extends React.Component<Props, State> {
 
     saveAvatar = (event: FormEvent) => {
         event.preventDefault();
-        const { avatar, useGravatar } = this.state;
+        const { avatar, useGravatar} = this.state;
         const { setUser } = this.props;
 
         if(avatar) {
@@ -46,28 +62,71 @@ class Settings extends React.Component<Props, State> {
             formData.append('avatar', avatar);
 
             uploadAvatar(formData).then(avatarUrl => {
-                updateUserSettings(useGravatar, avatarUrl).then(setUser)
+                updateUserGeneralSettings(useGravatar, avatarUrl).then(setUser)
             })
         } else {
-            updateUserSettings(useGravatar, '').then(setUser)
+            updateUserGeneralSettings(useGravatar, '').then(setUser)
         }
     }
 
+    saveTheme = (event: FormEvent) => {
+        event.preventDefault();
+
+        const { theme } = this.state;
+        updateUserAppearanceSettings(theme).then(user => {
+            setUser(user);
+
+            localStorage.setItem('theme', theme);
+            document.body.setAttribute('theme', theme);
+        })
+    }
+
     render() {
      const { currentUser, match: { params: { userId } } } = this.props;
-     const { useGravatar } = this.state
+     const { useGravatar, currentTab, theme } = this.state
 
      if(parseInt(userId) !== currentUser.id) return <NotFoundError/>;
 
      return (
          <Group title={'Настройки'}>
-             <Group title={'Аватар'} className={'Settings_Avatar'}>
-                 <form onSubmit={this.saveAvatar}>
-                     <label>Использовать Gravatar <input type="checkbox" onChange={event => this.setState({ useGravatar: event.target.checked })} checked={useGravatar}/></label>
-                     <label>Загрузить аватар <input type="file" onChange={this.onChangeAvatar} disabled={useGravatar}/></label>
-                     <Button>Сохранить</Button>
-                 </form>
-             </Group>
+             <Tabs>
+                 <TabItem
+                    selected={currentTab === TabsNames.General}
+                    onClick={() => this.setState({ currentTab: TabsNames.General })}
+                 >
+                     Главное
+                 </TabItem>
+                 <TabItem
+                     selected={currentTab === TabsNames.Appearance}
+                     onClick={() => this.setState({ currentTab: TabsNames.Appearance })}
+                 >
+                     Внешний вид
+                 </TabItem>
+             </Tabs>
+             {currentTab === TabsNames.General && (
+                 <Group title={'Аватар'} className={'Settings_Avatar'}>
+                     <form onSubmit={this.saveAvatar}>
+                         <label>Использовать Gravatar <input type="checkbox" onChange={event => this.setState({ useGravatar: event.target.checked })} checked={useGravatar}/></label>
+                         <label>Загрузить аватар <input type="file" onChange={this.onChangeAvatar} disabled={useGravatar}/></label>
+                         <Button>Сохранить</Button>
+                     </form>
+                 </Group>
+             )}
+             {currentTab === TabsNames.Appearance && (
+                 <Group title={'Тема'} className={'Settings_Avatar'}>
+                     <form onSubmit={this.saveTheme}>
+                         <select onChange={e => this.setState({ theme: e.target.value as Theme })} value={theme}>
+                             <option value="dark">Dark</option>
+                             <option value="blue">Blue</option>
+                             <option value="red">Red</option>
+                             <option value="green">Green</option>
+                             <option value="light">Light</option>
+                         </select>
+
+                         <Button>Сохранить</Button>
+                     </form>
+                 </Group>
+             )}
          </Group>
      );
     }
@@ -80,4 +139,4 @@ export default connect(
     dispatch => ({
         setUser: (user: UserType) => dispatch(setUser(user))
     })
-)(Settings);
+)(Settings);