Suggestions

Author: Yadro

src/helpers/TreeModelHelper.ts

@@ -180,6 +180,15 @@ const TreeModelHelper = {
     });
   },
 
+  iterate<T extends ITreeItem>(items: T[], callback: (item: T) => void) {
+    for (const item of items) {
+      callback(item);
+      if (item.children?.length) {
+        callback(item);
+      }
+    }
+  },
+
   getItemRecursive<T extends ITreeItem>(
     items: T[],
     condition: (task: T) => boolean

src/modules/tasks/TaskStore.ts

@@ -1,11 +1,8 @@
-import { autorun, makeAutoObservable } from 'mobx';
+import { autorun, computed, makeAutoObservable, toJS } from 'mobx';
 import { v4 as uuid } from 'uuid';
 import TaskService from './TaskService';
 import TaskModel, { ITimeRangeModel } from './models/TaskModel';
-import {
-  Task,
-  TasksByProject,
-} from '../../modules/tasks/models/TasksByProject';
+import { Task, TasksByProject } from './models/TasksByProject';
 import TreeModelHelper from '../../helpers/TreeModelHelper';
 import BadgeService from '../BadgeService';
 import rootStore, { RootStore } from '../RootStore';
@@ -18,9 +15,12 @@ import {
 import { DEFAULT_PROJECT_ID } from '../projects/models/ProjectModel';
 import throttle from '../../helpers/Throttle';
 import { THROTTLE_SAVE_JSON_MS } from '../../config';
+import { findSuggestionsByProject } from './utils';
+import { Suggestion, SuggestionsByProject } from './models/TasksTypes';
 
 export default class TaskStore {
   tasks: TasksByProject = {};
+  suggestions: SuggestionsByProject = {};
   activeTask: TaskModel | undefined;
   versionHash = uuid();
   private tasksService = new TaskService();
@@ -65,6 +65,14 @@ export default class TaskStore {
     return this.tasks[projectId] || [];
   }
 
+  suggestionsForProject = computed<Suggestion[]>(() => {
+    const { activeProject } = this.rootStore.projectStore;
+    if (activeProject in this.suggestions) {
+      return this.suggestions[activeProject] ?? [];
+    }
+    return [];
+  });
+
   getTaskByKey(taskKey: string): TaskModel | undefined {
     function condition(task: TaskModel): boolean {
       return task.key === taskKey;
@@ -163,6 +171,8 @@ export default class TaskStore {
 
   restore() {
     this.tasks = this.tasksService.getAll();
+    this.suggestions = findSuggestionsByProject(this.tasks);
+    console.log(toJS(this.suggestions));
     this.findAndSetActiveTask();
     this.setupReminder(this.activeTask);
   }

src/modules/tasks/models/TasksTypes.ts

@@ -0,0 +1,6 @@
+export type SuggestionsByProject = Record<string, Suggestion[]>;
+
+export type Suggestion = {
+  text: string;
+  frequency: number;
+};

src/modules/tasks/utils.ts

@@ -0,0 +1,55 @@
+import { Task, TasksByProject } from './models/TasksByProject';
+import { Suggestion, SuggestionsByProject } from './models/TasksTypes';
+import TreeModelHelper from '../../helpers/TreeModelHelper';
+
+export function findSuggestionsByProject(
+  tasksByProject: TasksByProject
+): SuggestionsByProject {
+  return Object.entries(tasksByProject).reduce<SuggestionsByProject>(
+    (acc, [project, tasks]) => {
+      const suggestions = findSuggestions(tasks);
+      acc[project] = prepareSuggestions(suggestions);
+      return acc;
+    },
+    {}
+  );
+}
+
+function prepareSuggestions(suggestions: Suggestion[]) {
+  return suggestions
+    .filter((item) => item.frequency > 1)
+    .sort((a, b) => a.frequency - b.frequency);
+}
+
+function findSuggestions(tasks: Task[]) {
+  const suggestions: Record<number, Suggestion> = {};
+
+  TreeModelHelper.iterate(tasks, (task) => {
+    const text = task.title;
+    // TODO ignore long strings?
+    const hash = hashCode(text);
+    if (hash in suggestions) {
+      suggestions[hash].frequency++;
+    } else {
+      suggestions[hash] = {
+        text,
+        frequency: 1,
+      };
+    }
+  });
+
+  return Object.values(suggestions);
+}
+
+// from https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
+function hashCode(str: string) {
+  let hash = 0;
+  let i, chr;
+  if (str.length === 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}

src/screens/projects/ProjectsScreen.tsx

@@ -18,11 +18,17 @@ 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';
 
 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[]) => {
@@ -86,7 +92,7 @@ function clearEditableProject() {
   projectStore.setEditableProject(undefined);
 }
 
-function Projects() {
+function ProjectsScreen() {
   const style = useStyles();
   const [showProjectModal, setShowProjectModal] = useState<boolean>(false);
   const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
@@ -128,7 +134,8 @@ function Projects() {
         <div className={style.root}>
           <TaskList onSelect={handleSelectTask} />
           <div className={style.stickyTaskInput}>
-            <TaskInput />
+            <Suggestions input={observableInput} />
+            <TaskInput input={observableInput} />
           </div>
         </div>
       </Layout>
@@ -146,7 +153,7 @@ function Projects() {
   );
 }
 
-export default observer(Projects);
+export default observer(ProjectsScreen);
 
 const useStyles = createUseStyles({
   sider: {

src/screens/projects/components/Suggestions/Suggestion.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { Button } from 'antd';
+import { observer } from 'mobx-react';
+
+import ObservableInput from '../observable/ObservableInput';
+
+type Props = {
+  text: string;
+  input: ObservableInput;
+};
+
+const SuggestionComp: FC<Props> = ({ text, input }: Props) => {
+  const handleApplySuggestion = useCallback(() => input.setSuggestion(text), [
+    input,
+    text,
+  ]);
+
+  return (
+    <Button
+      type="primary"
+      shape="round"
+      // icon={}
+      size="small"
+      onClick={handleApplySuggestion}
+    >
+      {text}
+    </Button>
+  );
+};
+
+export default observer(SuggestionComp);

src/screens/projects/components/Suggestions/Suggestions.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useMemo } from 'react';
+import { observer } from 'mobx-react';
+
+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 = useMemo(
+    () => rootStore.tasksStore.suggestionsForProject,
+    []
+  ).get();
+
+  return (
+    <>
+      {suggestions.map((suggestion) => (
+        <Suggestion
+          key={suggestion.text}
+          text={suggestion.text}
+          input={input}
+        />
+      ))}
+    </>
+  );
+};
+
+export default observer(Suggestions);

src/screens/projects/components/TaskInput.tsx

@@ -1,17 +1,23 @@
-import React, { KeyboardEvent, useCallback, useState } from 'react';
+import React, { KeyboardEvent, useCallback, 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 ObservableInput from './observable/ObservableInput';
 
 interface Props {
   className?: string;
+  input: ObservableInput;
 }
 
-export default observer(function TaskInput({ className }: Props) {
-  const [text, setText] = useState('');
+export default observer(function TaskInput({ className, input }: Props) {
+  const inputRef = useRef<Input>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [input.focusTrigger]);
 
   const handleKeyPress = useCallback(
     (event: KeyboardEvent) => {
@@ -21,7 +27,7 @@ export default observer(function TaskInput({ className }: Props) {
         tasksStore.add(
           new TaskModel({
             key: uuid(),
-            title: text,
+            title: input.value,
             projectId: projectStore.activeProject,
             active: false,
             time: [],
@@ -33,20 +39,23 @@ export default observer(function TaskInput({ className }: Props) {
             expanded: true,
           })
         );
-        setText('');
+        input.clear();
       }
     },
-    [text]
+    [input]
   );
 
-  const handleChange = useCallback((e: any) => setText(e.target.value), []);
+  const handleChange = useCallback((e: any) => input.set(e.target.value), [
+    input,
+  ]);
 
   return (
     <Input
+      ref={inputRef}
       className={className}
       placeholder="Create task..."
       onKeyPress={handleKeyPress}
-      value={text}
+      value={input.value}
       onChange={handleChange}
     />
   );

src/screens/projects/components/observable/ObservableInput.ts

@@ -0,0 +1,23 @@
+import { makeAutoObservable } from 'mobx';
+
+export default class ObservableInput {
+  value: string = '';
+  focusTrigger: boolean = false; // TODO better solution?
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  set(value: string) {
+    return (this.value = value);
+  }
+
+  setSuggestion(value: string) {
+    this.set(value);
+    this.focusTrigger = !this.focusTrigger;
+  }
+
+  clear() {
+    return (this.value = '');
+  }
+}