Merge pull request #126 from ujiro99/fix-bug

Fix bug

src/components/Debug.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useTrackingState } from '@/hooks/useTrackingState'
+import { TrackingState } from '@/@types/global'
+import { formatTime } from '@/services/util'
+import { isDebug } from '@/const'
+
+const trackingsToText = (trackings: TrackingState[]) => {
+  let res = '<trackings>'
+  trackings.forEach((tracking) => {
+    res += '\n  line: ' + tracking.line
+    res += '\n  nodeId: ' + tracking.nodeId
+    res += '\n  startTime: ' + formatTime(tracking.trackingStartTime)
+    res += '\n  elapsedTime: ' + tracking.elapsedTime.toString()
+  })
+  res += '\n'
+  return res
+}
+
+export function Debug(): JSX.Element {
+  const { trackings } = useTrackingState()
+
+  if (!isDebug) {
+    return <></>
+  }
+
+  return (
+    <pre className="debug">
+      <code>{trackingsToText(trackings)}</code>
+    </pre>
+  )
+}

src/components/LineEditor.css

@@ -1,16 +1,19 @@
 .line-editor {
   @apply align-top;
-  @apply font-mono;
   @apply w-full;
-  @apply leading-relaxed;
   @apply outline-0;
   @apply min-h-[40px];
   @apply cursor-text;
   @apply resize-none;
 
+  word-break: break-all;
+  line-height: 1.5;
+
   &.mod-task {
     @apply py-2;
-    margin-left: -18px;
+    padding-right: 12px;
+    padding-left: 26px;
+    text-indent: -26px;
   }
 
   &.mod-heading {

src/components/LoadingIcon.module.css

@@ -1,7 +1,7 @@
 .LoadingIcon {
   position: absolute;
   right: 30px;
-  top: 64px;
+  top: 40px;
 }
 
 .LoadingIcon {

src/components/MdText.tsx

@@ -1,27 +1,25 @@
 import React from 'react'
-import classnames from 'classnames'
 
 import { LineEditor } from '@/components/LineEditor'
 import { useEditable } from '@/hooks/useEditable'
 import { Node } from '@/models/node'
 
+import '@/components/PlainText.css'
+
 type Props = {
   node: Node
 }
 
-const baseClass =
-  'w-full raw-text relative leading-normal cursor-pointer pr-[2px] pr-3 py-2 min-h-[40px] group'
-
 export const MdText = (props: Props): JSX.Element => {
   const line = props.node.line
   const [isEditing, focusOrEdit] = useEditable(line)
 
   if (isEditing) {
-    return <LineEditor className={classnames(baseClass)} line={line} />
+    return <LineEditor className={'plain-text mod-edit'} line={line} />
   }
 
   return (
-    <div className={classnames(baseClass)} onClick={focusOrEdit}>
+    <div className={'plain-text'} onClick={focusOrEdit}>
       <span>{props.node.data as React.ReactNode}</span>
     </div>
   )

src/components/Menu/Edit.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import classnames from 'classnames'
 
 import { useTrackingStop } from '@/hooks/useTrackingState'
@@ -7,6 +7,7 @@ import { useHover } from '@/hooks/useHover'
 import { useAnalytics } from '@/hooks/useAnalytics'
 import { Tooltip } from '@/components/Tooltip'
 import { Icon } from '@/components/Icon'
+import  Log  from '@/services/log'
 import * as i18n from '@/services/i18n'
 
 import './IconButton.css'
@@ -20,16 +21,20 @@ export function Edit(): JSX.Element {
   const label = isEdit ? i18n.t('label_save') : i18n.t('label_edit')
   const icon = isEdit ? 'save' : 'edit'
   const isVisible = mode === MODE.SHOW || mode === MODE.EDIT
-
-  const toggleMode = () => {
-    const nextMode = isEdit ? MODE.SHOW : MODE.EDIT
-    if (nextMode === MODE.EDIT) {
+  
+  useEffect(() => {
+    Log.d('mode changed', mode)
+    if (mode === MODE.EDIT) {
       // Automatically stop tracking before entering edit mode.
       stopAllTracking()
       analytics.track('edit all start')
     } else {
       analytics.track('edit all finish')
     }
+  }, [mode])
+
+  const toggleMode = () => {
+    const nextMode = isEdit ? MODE.SHOW : MODE.EDIT
     setMode(nextMode)
   }
 

src/components/PlainText.css

@@ -0,0 +1,15 @@
+.plain-text {
+  @apply w-full;
+  @apply relative;
+  @apply leading-normal;
+  @apply cursor-pointer;
+  @apply pr-3;
+  @apply py-2;
+  @apply min-h-[40px];
+
+  word-break: break-all;
+
+  &.mod-edit {
+    @apply cursor-text;
+  }
+}

src/components/Popup.css

@@ -64,3 +64,11 @@ body {
 .task-container {
   padding: 12px 16px 30px 16px;
 }
+
+.debug {
+  font-size: 12px;
+  line-height: 1;
+  background: #f0f0f0;
+  padding: 1em;
+  border-radius: 4px;
+}

src/components/Popup.tsx

@@ -12,6 +12,7 @@ import { SortableTree } from '@/components/Tree/SortableTree'
 import { Report } from '@/components/Report'
 import { SyncModal } from '@/components/Sync/SyncModal'
 import { AlarmModal } from '@/components/Alarm/AlarmModal'
+import { Debug } from '@/components/Debug'
 import { useTaskStorage } from '@/hooks/useTaskStorage'
 
 import 'simplebar-react/dist/simplebar.min.css'
@@ -72,6 +73,7 @@ function ToDo() {
       <EmptyLine />
       <SyncModal />
       <AlarmModal />
+      <Debug />
     </div>
   )
 }

src/components/Sync/CalendarColorPicker.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import { useQuery } from 'react-query'
 import { useStorage } from '@/hooks/useStorage'
-import { STORAGE_KEY } from '@/services/storage'
+import { STORAGE_KEY, DEFAULTS } from '@/services/storage'
 import {
   GoogleCalendar,
   CalendarColor,
@@ -38,7 +38,7 @@ function Inner(props: CalendarColorsProps): JSX.Element {
   const [visible, setVisible] = useState(false)
   const [refElm, setRefElm] = useState(null)
   const [colors, setColors] = useStorage<ColorStorage>(
-    STORAGE_KEY.CALENDAR_COLOR,
+    STORAGE_KEY.CALENDAR_COLOR, DEFAULTS[STORAGE_KEY.CALENDAR_COLOR] as ColorStorage,
   )
   const { data } = fetchColors()
   const color =

src/components/Sync/EventList.css

@@ -7,15 +7,17 @@
   @apply text-xs;
 
   margin-top: 6px;
-  max-height: 5rem;
-  overflow-y: auto;
+
+  [data-simplebar] {
+    max-height: 4rem;
+  }
 
   &__item {
     display: flex;
     justify-content: space-between;
-    
+
     &.mod-declined {
-     text-decoration-line: line-through; 
+      text-decoration-line: line-through;
     }
   }
 
@@ -38,7 +40,7 @@
     @apply font-mono;
     margin-left: 1em;
   }
-  
+
   &__time-space + &__time {
     margin-left: 2px;
   }

src/components/Sync/EventList.tsx

@@ -1,4 +1,5 @@
 import React, { Suspense, useEffect } from 'react'
+import SimpleBar from 'simplebar-react'
 import { useQuery } from 'react-query'
 import {
   GoogleCalendar,
@@ -38,14 +39,16 @@ function Inner(props: EventListProps): JSX.Element {
   }
 
   return isExist ? (
-    <ul>
-      {data.map((e) => (
-        <li key={e.id} className={className(e)}>
-          <span className="event-list__title">{e.title}</span>
-          <span className="event-list__time">{e.time.toString()}</span>
-        </li>
-      ))}
-    </ul>
+    <SimpleBar>
+      <ul>
+        {data.map((e) => (
+          <li key={e.id} className={className(e)}>
+            <span className="event-list__title">{e.title}</span>
+            <span className="event-list__time">{e.time.toString()}</span>
+          </li>
+        ))}
+      </ul>
+    </SimpleBar>
   ) : (
     <span>No schedule found</span>
   )

src/components/Sync/UploadEventList.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import SimpleBar from 'simplebar-react'
 import { useActivity } from '@/hooks/useActivity'
 import { formatTime } from '@/services/util'
 
@@ -13,16 +14,18 @@ export function UplaodEventList(props: EventListProps): JSX.Element {
   return (
     <div className="event-list">
       {isExist ? (
-        <ul>
-          {activities.map((e) => (
-            <li key={e.id} className="event-list__item">
-              <span className="event-list__title">{e.title}</span>
-              <span className="event-list__time">{formatTime(e.start)}</span>
-              <span className="event-list__time-space">~</span>
-              <span className="event-list__time">{formatTime(e.end)}</span>
-            </li>
-          ))}
-        </ul>
+        <SimpleBar>
+          <ul>
+            {activities.map((e) => (
+              <li key={e.id} className="event-list__item">
+                <span className="event-list__title">{e.title}</span>
+                <span className="event-list__time">{formatTime(e.start)}</span>
+                <span className="event-list__time-space">~</span>
+                <span className="event-list__time">{formatTime(e.end)}</span>
+              </li>
+            ))}
+          </ul>
+        </SimpleBar>
       ) : (
         <span>No activity found</span>
       )}

src/components/TaskItem.css

@@ -4,20 +4,20 @@
   @apply relative;
   @apply py-2;
   @apply min-h-[40px];
-  @apply leading-relaxed;
   @apply flex;
   @apply flex-row;
   @apply items-center;
   @apply cursor-pointer;
   @apply select-none;
 
+  line-height: 1.5;
   width: 100%;
   padding-right: 12px;
 
   &__label {
     @apply flex;
     flex: 1;
-    word-break: break-word;
+    word-break: break-all;
   }
 
   &__tags {

src/components/TaskItem.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import Log from '@/services/log'
 import { useTaskManager } from '@/hooks/useTaskManager'
 import { useAnalytics } from '@/hooks/useAnalytics'
-import { useTrackingState, useTrackingStop } from '@/hooks/useTrackingState'
+import { useTrackingState } from '@/hooks/useTrackingState'
 import { useEditable } from '@/hooks/useEditable'
 import { Counter, CounterStopped } from '@/components/Counter'
 import { Checkbox } from '@/components/Checkbox'
@@ -34,12 +34,10 @@ export const TaskItem: React.FC<TaskItemProps> = (
   const checkboxProps = props.checkboxProps
   const node = props.node
   const line = props.node.line
-  const [started, setStarted] = useState(false)
   const [topMargin, setTopMargin] = useState(false)
   const manager = useTaskManager()
   const analytics = useAnalytics()
   const { trackings, startTracking, stopTracking } = useTrackingState()
-  const { stopOtherTracking } = useTrackingStop()
   const [isEditing, focusOrEdit] = useEditable(line)
   const task = node.data as Task
   const tracking = trackings.find((n) => n.nodeId === node.id)
@@ -49,14 +47,6 @@ export const TaskItem: React.FC<TaskItemProps> = (
 
   Log.v(`${line} ${id} ${isTracking ? 'tracking' : 'stop'}`)
 
-  useEffect(() => {
-    if (started) {
-      // stop previous task.
-      stopOtherTracking(node.id)
-      setStarted(false)
-    }
-  }, [started, node])
-
   const toggleItemCompletion = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation()
 
@@ -71,7 +61,6 @@ export const TaskItem: React.FC<TaskItemProps> = (
     e.stopPropagation()
     analytics.track('click start')
     startTracking(node)
-    setStarted(true)
   }
 
   const stop = (e: React.SyntheticEvent) => {