Update style & v1.0.10

Author: Yadro

src/modules/tasks/TaskStore.ts

@@ -1,4 +1,4 @@
-import { autorun, computed, makeAutoObservable, toJS } from 'mobx';
+import { autorun, computed, makeAutoObservable } from 'mobx';
 import { v4 as uuid } from 'uuid';
 import TaskService from './TaskService';
 import TaskModel, { ITimeRangeModel } from './models/TaskModel';
@@ -172,7 +172,6 @@ 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "time-tracker",
   "productName": "TimeTracker",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Start and stop time, jump between tasks, and add details on how time was spent.",
   "main": "./main.prod.js",
   "author": {

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

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from 'react';
 import { Button } from 'antd';
 import { observer } from 'mobx-react';
+import { createUseStyles } from 'react-jss';
 
 import { createTaskStore } from '../store/CreateTaskStore';
 
@@ -9,13 +10,16 @@ type Props = {
 };
 
 const SuggestionComp: FC<Props> = ({ text }: Props) => {
+  const $ = useStyle();
+
   const handleApplySuggestion = useCallback(
     () => createTaskStore.applySuggestion(text),
     [text]
   );
 
   return (
     <Button
+      className={$.suggestion}
       type="primary"
       shape="round"
       // icon={}
@@ -28,3 +32,13 @@ const SuggestionComp: FC<Props> = ({ text }: Props) => {
 };
 
 export default observer(SuggestionComp);
+
+const useStyle = createUseStyles({
+  suggestion: {
+    '& span': {
+      maxWidth: 200,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
+});

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

@@ -1,22 +1,35 @@
 import React, { FC, useMemo } from 'react';
 import { observer } from 'mobx-react';
+import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../../../../modules/RootStore';
 import Suggestion from './Suggestion';
 
 const Suggestions: FC = () => {
+  const $ = useStyle();
+
   const suggestions = useMemo(
     () => rootStore.tasksStore.suggestionsForProject,
     []
   ).get();
 
   return (
-    <>
+    <div className={$.suggestions}>
       {suggestions.map((suggestion) => (
         <Suggestion key={suggestion.text} text={suggestion.text} />
       ))}
-    </>
+    </div>
   );
 };
 
 export default observer(Suggestions);
+
+const useStyle = createUseStyles({
+  suggestions: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    overflowX: 'auto',
+    gap: 8,
+    marginBottom: 8,
+  },
+});