SettingsModal WIP

Author: Yadro

src/components/Profile/Profile.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Space } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../modules/RootStore';
+import useModal from '../../hooks/ModalHook';
+import SettingsModal from '../SettingsModal/SettingsModal';
+
+const { settingsStore } = rootStore;
+
+const Profile: React.VFC = () => {
+  const classes = useStyles();
+  const { settings } = settingsStore;
+  const { open, openModal, closeModal } = useModal();
+
+  return (
+    <Space className={classes.root}>
+      <span className={classes.white}>{settings.currentProfile}</span>
+      <SettingOutlined className={classes.white} onClick={openModal} />
+      <SettingsModal visible={open} onClose={closeModal} />
+    </Space>
+  );
+};
+
+const useStyles = createUseStyles({
+  root: {
+    marginLeft: 16,
+  },
+  white: {
+    color: 'white',
+  },
+});
+
+export default Profile;

src/components/SettingsModal/SettingsModal.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Col, Form, Modal, Row, Select } from 'antd';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../modules/RootStore';
+
+const { settingsStore } = rootStore;
+
+interface ISettingsModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const SettingsModal: React.VFC<ISettingsModalProps> = (props: ISettingsModalProps) => {
+  const { visible, onClose } = props;
+  return (
+    <Modal
+      title="Settings"
+      visible={visible}
+      // okButtonProps={{ disabled: !valid }}
+      okText="Save"
+      onOk={onClose}
+      onCancel={onClose}
+    >
+      <Row>
+        <Col span={8}>
+          <Form.Item label="Profile" labelCol={{ span: 24 }}>
+            <Select>
+              {settingsStore.settings.profiles.map((profile) => (
+                <Select.Option key={profile} value={profile}>
+                  {profile}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+const useStyles = createUseStyles({});
+
+export default SettingsModal;

src/hooks/ModalHook.ts

@@ -0,0 +1,21 @@
+import { useCallback, useState } from 'react';
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+
+  const openModal = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return {
+    open,
+    openModal,
+    closeModal,
+  };
+};
+
+export default useModal;

src/modules/settings/SettingsService.ts

@@ -1,14 +1,8 @@
 import IService from '../../base/IService';
-import SettingsModel from './models/SettingsModel';
+import SettingsModel, { DEFAULT_SETTINGS } from './models/SettingsModel';
 import SettingsFactory from './SettingsFactory';
 import SettingsRepository from './SettingsRepository';
 
-export const DEFAULT_SETTINGS = {
-  currentProfile: 'profile1',
-  profiles: ['profile1'],
-  hoursInWorkingDay: 8 * 60 * 60 * 1000,
-};
-
 export default class SettingsService implements IService<SettingsModel> {
   private repository: SettingsRepository = new SettingsRepository();
   private factory: SettingsFactory = new SettingsFactory();

src/modules/settings/SettingsStore.ts

@@ -1,6 +1,6 @@
 import { makeAutoObservable } from 'mobx';
-import SettingsModel from './models/SettingsModel';
-import SettingsService, { DEFAULT_SETTINGS } from './SettingsService';
+import SettingsModel, { DEFAULT_SETTINGS } from './models/SettingsModel';
+import SettingsService from './SettingsService';
 
 export default class SettingsStore {
   settings: SettingsModel = new SettingsModel(DEFAULT_SETTINGS);

src/modules/settings/models/SettingsModel.ts

@@ -1,9 +1,17 @@
 import AbstractModel from '../../../base/AbstractModel';
 
+export const DEFAULT_SETTINGS = {
+  currentProfile: 'profile1',
+  profiles: ['profile1'],
+  hoursInWorkingDay: 8 * 60 * 60 * 1000,
+  isFirstLoad: true,
+};
+
 export default class SettingsModel extends AbstractModel {
-  currentProfile: string | null = null;
-  profiles: string[] | null = null;
-  hoursInWorkingDay: number | null = null;
+  currentProfile: string = DEFAULT_SETTINGS.currentProfile;
+  profiles: string[] = DEFAULT_SETTINGS.profiles;
+  hoursInWorkingDay: number = DEFAULT_SETTINGS.hoursInWorkingDay;
+  isFirstLoad: boolean = DEFAULT_SETTINGS.isFirstLoad;
 
   constructor(data: any) {
     super();

src/screens/Main.tsx

@@ -8,6 +8,7 @@ import TaskControl from '../components/TaskControl/TaskControl';
 import HeaderMenu from '../components/HeaderMenu/HeaderMenu';
 import HoursScreen from './hours/HoursScreen';
 import Dashboard from './dashboard/Dashboard';
+import Profile from '../components/Profile/Profile';
 
 const { Header } = Layout;
 
@@ -26,6 +27,7 @@ export default observer(function Main() {
         </HeaderMenu>
         <span className="flex-1" />
         <TaskControl />
+        <Profile />
       </Header>
       <Switch>
         <Route exact path="/">