Switch folders when switch user

Author: Yadro

src/components/PlayStopButton/PlayStopButton.tsx

@@ -27,7 +27,7 @@ export default observer(function PlayStopButton({
       if (!task?.active) {
         tasksStore.startTimer(task);
       } else {
-        tasksStore.stopTimer(task);
+        tasksStore.stopTimer();
       }
     }
   }

src/components/SettingsModal/NewProfilePopover.tsx

@@ -27,11 +27,20 @@ const NewProfilePopover: React.FC<INewProfilePopoverProps> = (
     return !settingsStore.settings.profiles.includes(profile);
   }, []);
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const profile = event.target.value;
-    setProfile(profile);
-    setIsValid(isProfileValid(profile));
-  }, []);
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const profile = event.target.value;
+      setProfile(profile);
+      setIsValid(isProfileValid(profile));
+    },
+    [isProfileValid]
+  );
+
+  const handleCreate = useCallback(() => {
+    settingsStore.addProfile(profile);
+    setVisible(false);
+    setProfile('');
+  }, [profile, setVisible]);
 
   return (
     <Popover
@@ -42,7 +51,7 @@ const NewProfilePopover: React.FC<INewProfilePopoverProps> = (
             value={profile}
             onChange={handleChange}
           />
-          <Button type="primary" disabled={!isValid}>
+          <Button type="primary" disabled={!isValid} onClick={handleCreate}>
             Create
           </Button>
         </Space>

src/components/SettingsModal/SettingsModal.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Col, Form, Modal, Row, Select, Space } from 'antd';
 import { createUseStyles } from 'react-jss';
+import { observer } from 'mobx-react';
 
 import rootStore from '../../modules/RootStore';
 import IModalProps from '../../types/IModalProps';
@@ -10,45 +11,58 @@ const { settingsStore } = rootStore;
 
 interface ISettingsModalProps extends IModalProps {}
 
-const SettingsModal: React.VFC<ISettingsModalProps> = (
-  props: ISettingsModalProps
-) => {
-  const { visible, onClose } = props;
-  const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
-    false
-  );
-
-  return (
-    <Modal
-      title="Settings"
-      visible={visible}
-      // okButtonProps={{ disabled: !valid }}
-      okText="Save"
-      onOk={onClose}
-      onCancel={onClose}
-    >
-      <Row>
-        <Col span={24}>
-          <Form.Item label="Profile" labelCol={{ span: 24 }}>
-            <Space>
-              <Select>
-                {settingsStore.settings.profiles.map((profile) => (
-                  <Select.Option key={profile} value={profile}>
-                    {profile}
-                  </Select.Option>
-                ))}
-              </Select>
-              <NewProfilePopover
-                visible={showNewProfilePopover}
-                setVisible={setShowNewProfilePopover}
-              />
-            </Space>
-          </Form.Item>
-        </Col>
-      </Row>
-    </Modal>
-  );
-};
+const SettingsModal: React.VFC<ISettingsModalProps> = observer(
+  (props: ISettingsModalProps) => {
+    const { visible, onClose } = props;
+
+    const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
+      false
+    );
+    const [profile, setProfile] = useState<string>(
+      settingsStore.settings.currentProfile
+    );
+
+    const handleSave = useCallback(() => {
+      settingsStore.setActiveProfile(profile);
+      onClose();
+    }, [profile, onClose]);
+
+    const handleChangeProfile = useCallback((selected: string) => {
+      setProfile(selected);
+    }, []);
+
+    return (
+      <Modal
+        title="Settings"
+        visible={visible}
+        // okButtonProps={{ disabled: !valid }}
+        okText="Save"
+        onOk={handleSave}
+        onCancel={onClose}
+      >
+        <Row>
+          <Col span={24}>
+            <Form.Item label="Profile" labelCol={{ span: 24 }}>
+              <Space>
+                <Select value={profile} onChange={handleChangeProfile}>
+                  {settingsStore.settings.profiles.map((profile) => (
+                    <Select.Option key={profile} value={profile}>
+                      {profile}
+                    </Select.Option>
+                  ))}
+                </Select>
+                <NewProfilePopover
+                  visible={showNewProfilePopover}
+                  setVisible={setShowNewProfilePopover}
+                />
+              </Space>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Modal>
+    );
+  }
+);
 
 const useStyles = createUseStyles({});
 

src/components/TaskControl/TaskControl.tsx

@@ -26,7 +26,7 @@ export default observer(function TaskControl() {
           <span>{task.title}</span>
         </div>
         <span className="task-control__duration">{duration}</span>
-        <CircleButton onClick={() => tasksStore.stopTimer(task)}>
+        <CircleButton onClick={() => tasksStore.stopTimer()}>
           <PauseOutlined />
         </CircleButton>
       </span>

src/modules/RootStore.ts

@@ -4,7 +4,7 @@ import ProjectModel from './projects/models/ProjectModel';
 import SettingsStore from './settings/SettingsStore';
 
 export class RootStore {
-  settingsStore = new SettingsStore();
+  settingsStore = new SettingsStore(this);
   tasksStore = new TaskStore(this);
   projectStore = new ProjectStore(this);
 
@@ -14,6 +14,11 @@ export class RootStore {
     this.projectStore.restore();
   }
 
+  loadTaskAndProjects() {
+    this.tasksStore.restore();
+    this.projectStore.restore();
+  }
+
   deleteProject(project: ProjectModel) {
     this.tasksStore.deleteProjectTasks(project.key);
     this.projectStore.delete(project);

src/modules/settings/SettingsRepository.ts

@@ -2,4 +2,5 @@ import AbstractFileRepository from '../../base/repositories/AbstractFileReposito
 
 export default class SettingsRepository extends AbstractFileRepository {
   saveInRoot = true;
+  fileName = 'settings.json';
 }

src/modules/settings/SettingsStore.ts

@@ -1,19 +1,33 @@
 import { makeAutoObservable } from 'mobx';
+
 import SettingsModel, { DEFAULT_SETTINGS } from './models/SettingsModel';
 import SettingsService from './SettingsService';
+import { RootStore } from '../RootStore';
 
 export default class SettingsStore {
   settings: SettingsModel = new SettingsModel(DEFAULT_SETTINGS);
 
   private service: SettingsService = new SettingsService();
 
-  constructor() {
+  constructor(private rootStore: RootStore) {
     makeAutoObservable(this);
   }
 
+  addProfile(profile: string) {
+    this.settings.profiles.push(profile);
+    this.service.save(this.settings);
+  }
+
   setActiveProfile(profile: string) {
+    if (profile === this.settings.currentProfile) {
+      return;
+    }
+    this.rootStore.tasksStore.stopTimer();
     this.settings.currentProfile = profile;
     this.service.save(this.settings);
+    setTimeout(() => {
+      this.rootStore.loadTaskAndProjects();
+    });
   }
 
   restore() {

src/modules/settings/models/SettingsModel.ts

@@ -1,4 +1,5 @@
 import AbstractModel from '../../../base/AbstractModel';
+import { makeObservable, observable } from 'mobx';
 
 export const DEFAULT_SETTINGS = {
   currentProfile: 'profile1',
@@ -16,5 +17,11 @@ export default class SettingsModel extends AbstractModel {
   constructor(data: any) {
     super();
     this.load(data);
+    makeObservable(this, {
+      currentProfile: observable,
+      profiles: observable,
+      hoursInWorkingDay: observable,
+      isFirstLoad: observable,
+    });
   }
 }

src/modules/tasks/TaskStore.ts

@@ -1,4 +1,4 @@
-import { autorun, makeAutoObservable } from 'mobx';
+import { autorun, makeAutoObservable, reaction } from 'mobx';
 
 import TaskService from './TaskService';
 import TaskModel, { ITimeRangeModel } from './models/TaskModel';
@@ -96,15 +96,13 @@ export default class TaskStore {
       return _task.key === task.key;
     }
 
-    if (task.active) {
-      this.stopTimer(task);
-    }
+    this.stopTimer();
 
     for (const projectKey in this.tasks) {
       if (this.tasks.hasOwnProperty(projectKey)) {
         this.tasks[projectKey] = TreeModelStoreHelper.deleteItems(
           this.tasks[projectKey],
-          condition,
+          condition
         );
       }
     }
@@ -118,20 +116,23 @@ export default class TaskStore {
   }
 
   startTimer(task: TaskModel) {
-    if (this.activeTask) {
-      this.stopTimer(this.activeTask);
-    }
+    this.stopTimer(true);
     this.activeTask = task;
     task.start();
     this.setupReminder(task);
     this.tasksService.save(this.tasks);
   }
 
-  stopTimer(task: TaskModel) {
-    this.activeTask = undefined;
-    task.stop();
-    this.setupReminder();
-    this.tasksService.save(this.tasks);
+  stopTimer(silent?: boolean) {
+    if (this.activeTask) {
+      this.activeTask.stop();
+      this.activeTask = undefined;
+    }
+
+    if (!silent) {
+      this.setupReminder();
+      this.tasksService.save(this.tasks);
+    }
   }
 
   restore() {
@@ -148,7 +149,7 @@ export default class TaskStore {
     if (Array.isArray(this.tasks[projectId])) {
       return TreeModelStoreHelper.getFlatItemsRecursive(
         this.tasks[projectId],
-        condition,
+        condition
       ).map((task) => task.key);
     }
     return [];

src/screens/projects/components/TaskNode/TaskNode.tsx

@@ -40,7 +40,7 @@ export default observer(function TaskNode({ task }: TaskNodeProps) {
           />
         ) : (
           <PauseOutlined
-            onClick={preventDefault(() => tasksStore.stopTimer(task))}
+            onClick={preventDefault(() => tasksStore.stopTimer())}
           />
         )}
         <DeleteOutlined