Refactoring

Author: Yadro

src/hooks/useOutsideClick.ts

@@ -0,0 +1,19 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export default function useOutsideClick(
+  ref: MutableRefObject<any>,
+  fn: Function
+) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        fn();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, fn]);
+}

src/screens/projects/ProjectsScreen.tsx

@@ -5,7 +5,6 @@ import { Key } from 'rc-tree/lib/interface';
 import { createUseStyles } from 'react-jss';
 import { PlusOutlined } from '@ant-design/icons';
 
-import TaskInput from './components/TaskInput';
 import rootStore from '../../modules/RootStore';
 import TreeList from './components/TreeList';
 import TaskModel from '../../modules/tasks/models/TaskModel';
@@ -18,17 +17,12 @@ import DrawerTask from './components/DrawerTask/DrawerTask';
 import ProjectNode from './components/ProjectNode/ProjectNode';
 import EditProjectModal from './components/ProjectModals/EditProjectModal';
 import { first } from '../../helpers/ArrayHelper';
-import Suggestions from './components/Suggestions/Suggestions';
-import ObservableInput from './components/observable/ObservableInput';
+import CreateTask from './components/CreateTask';
 
 const { Sider } = Layout;
 
 const { tasksStore, projectStore } = rootStore;
 
-const observableInput = new ObservableInput();
-
-// const Suggestions = observer(() => <div>test</div>);
-
 const TaskList = TreeList(
   () => tasksStore.getTasks(projectStore.activeProject),
   (list: TaskModel[]) => {
@@ -133,9 +127,8 @@ function ProjectsScreen() {
       <Layout className={style.taskList}>
         <div className={style.root}>
           <TaskList onSelect={handleSelectTask} />
-          <div className={style.stickyTaskInput}>
-            <Suggestions input={observableInput} />
-            <TaskInput input={observableInput} />
+          <div className={style.createTaskSticky}>
+            <CreateTask />
           </div>
         </div>
       </Layout>
@@ -173,7 +166,7 @@ const useStyles = createUseStyles({
     flex: 1,
     height: '100%',
   },
-  stickyTaskInput: {
+  createTaskSticky: {
     position: 'sticky',
     bottom: 0,
     padding: '12px 0',

src/screens/projects/components/CreateTask/CreateTask.tsx

@@ -0,0 +1,26 @@
+import React, { FC, useMemo, useRef } from 'react';
+import { observer } from 'mobx-react';
+
+import TaskInput from './TaskInput';
+import Suggestions from './Suggestions/Suggestions';
+import { createTaskStore } from './store/CreateTaskStore';
+import useOutsideClick from '../../../../hooks/useOutsideClick';
+
+const handleBlur = () => createTaskStore.setFocus(false);
+
+const CreateTask: FC = () => {
+  const ref = useRef(null);
+
+  useOutsideClick(ref, handleBlur);
+
+  const showSuggestions = useMemo(() => createTaskStore.isInputEmpty, []).get();
+
+  return (
+    <div ref={ref}>
+      {showSuggestions && createTaskStore.inputFocus && <Suggestions />}
+      <TaskInput />
+    </div>
+  );
+};
+
+export default observer(CreateTask);

…ts/components/Suggestions/Suggestion.tsx …ts/CreateTask/Suggestions/Suggestion.tsxsrc/screens/projects/components/Suggestions/Suggestion.tsx renamed to src/screens/projects/components/CreateTask/Suggestions/Suggestion.tsx src/screens/projects/components/Suggestions/Suggestion.tsx renamed to src/screens/projects/components/CreateTask/Suggestions/Suggestion.tsx

@@ -2,18 +2,17 @@ import React, { FC, useCallback } from 'react';
 import { Button } from 'antd';
 import { observer } from 'mobx-react';
 
-import ObservableInput from '../observable/ObservableInput';
+import { createTaskStore } from '../store/CreateTaskStore';
 
 type Props = {
   text: string;
-  input: ObservableInput;
 };
 
-const SuggestionComp: FC<Props> = ({ text, input }: Props) => {
-  const handleApplySuggestion = useCallback(() => input.setSuggestion(text), [
-    input,
-    text,
-  ]);
+const SuggestionComp: FC<Props> = ({ text }: Props) => {
+  const handleApplySuggestion = useCallback(
+    () => createTaskStore.applySuggestion(text),
+    [text]
+  );
 
   return (
     <Button

…s/components/Suggestions/Suggestions.tsx …s/CreateTask/Suggestions/Suggestions.tsxsrc/screens/projects/components/Suggestions/Suggestions.tsx renamed to src/screens/projects/components/CreateTask/Suggestions/Suggestions.tsx src/screens/projects/components/Suggestions/Suggestions.tsx renamed to src/screens/projects/components/CreateTask/Suggestions/Suggestions.tsx

@@ -1,15 +1,10 @@
 import React, { FC, useMemo } from 'react';
 import { observer } from 'mobx-react';
 
+import rootStore from '../../../../../modules/RootStore';
 import Suggestion from './Suggestion';
-import ObservableInput from '../observable/ObservableInput';
-import rootStore from '../../../../modules/RootStore';
 
-type Props = {
-  input: ObservableInput;
-};
-
-const Suggestions: FC<Props> = ({ input }: Props) => {
+const Suggestions: FC = () => {
   const suggestions = useMemo(
     () => rootStore.tasksStore.suggestionsForProject,
     []
@@ -18,11 +13,7 @@ const Suggestions: FC<Props> = ({ input }: Props) => {
   return (
     <>
       {suggestions.map((suggestion) => (
-        <Suggestion
-          key={suggestion.text}
-          text={suggestion.text}
-          input={input}
-        />
+        <Suggestion key={suggestion.text} text={suggestion.text} />
       ))}
     </>
   );

src/screens/projects/components/CreateTask/TaskInput.tsx

@@ -0,0 +1,60 @@
+import React, { ChangeEvent, KeyboardEvent, useEffect, useRef } from 'react';
+import { Input } from 'antd';
+import { observer } from 'mobx-react';
+import { v4 as uuid } from 'uuid';
+
+import rootStore from '../../../../modules/RootStore';
+import TaskModel from '../../../../modules/tasks/models/TaskModel';
+import { createTaskStore } from './store/CreateTaskStore';
+
+interface Props {
+  className?: string;
+}
+
+const handleCreateTask = (event: KeyboardEvent) => {
+  // Hotkey: Enter
+  if (event.key === 'Enter') {
+    const { tasksStore, projectStore } = rootStore;
+    tasksStore.add(
+      new TaskModel({
+        key: uuid(),
+        title: createTaskStore.input,
+        projectId: projectStore.activeProject,
+        active: false,
+        time: [],
+        checked: false,
+        children: [],
+        datesInProgress: [],
+        details: [],
+        parent: undefined, // Add into root
+        expanded: true,
+      })
+    );
+    createTaskStore.clear();
+  }
+};
+
+const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+  createTaskStore.setInput(e.target.value);
+
+const handleFocus = () => createTaskStore.setFocus(true);
+
+export default observer(function TaskInput({ className }: Props) {
+  const inputRef = useRef<Input>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [createTaskStore.focusTrigger]);
+
+  return (
+    <Input
+      ref={inputRef}
+      className={className}
+      placeholder="Create task..."
+      onKeyPress={handleCreateTask}
+      value={createTaskStore.input}
+      onChange={handleChange}
+      onFocus={handleFocus}
+    />
+  );
+});

src/screens/projects/components/CreateTask/index.ts

@@ -0,0 +1 @@
+export { default } from './CreateTask';

src/screens/projects/components/CreateTask/store/CreateTaskStore.ts

@@ -0,0 +1,32 @@
+import { computed, makeAutoObservable } from 'mobx';
+
+class CreateTaskStore {
+  input: string = '';
+  inputFocus: boolean = false;
+  focusTrigger: boolean = false; // TODO better solution?
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  setInput(value: string) {
+    return (this.input = value);
+  }
+
+  applySuggestion(value: string) {
+    this.setInput(value);
+    this.focusTrigger = !this.focusTrigger;
+  }
+
+  clear() {
+    return (this.input = '');
+  }
+
+  isInputEmpty = computed(() => this.input.length === 0);
+
+  setFocus(isFocus: boolean) {
+    this.inputFocus = isFocus;
+  }
+}
+
+export const createTaskStore = new CreateTaskStore();