feat: let the input box can be search tasks by title

ahonn · Nov 12, 2022 · 1a4ba2d · 1a4ba2d
1 parent 074f7f2
commit 1a4ba2d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,13 +41,12 @@ function App() {
   const userConfigs = useRecoilValue(userConfigsState);
   const themeStyle = useRecoilValue(themeStyleState);
   const themeMode = useRecoilValue(themeModeState);
-  const [filter, setFilter] = useState("");
   const { hotkey, whereToPlaceNewTask } = useRecoilValue(settingsState);
 
   const refreshAll = useRecoilCallback(
     ({ snapshot, refresh }) =>
       () => {
-        for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
+        for (const node of snapshot.getNodes_UNSTABLE()) {
           refresh(node);
         }
       },
@@ -127,16 +126,14 @@ function App() {
             <TaskInput
               ref={inputRef}
               onCreateTask={createNewTask}
-              onChange={setFilter}
             />
             <div>
-              <TaskSection title="Today" query={getTodayTaskQuery()} filter={filter} />
-              <TaskSection title="Scheduled" query={getScheduledTaskQuery()} filter={filter} />
+              <TaskSection title="Today" query={getTodayTaskQuery()} />
+              <TaskSection title="Scheduled" query={getScheduledTaskQuery()} />
               <TaskSection
                 title="Anytime"
                 query={getAnytimeTaskQuery()}
                 groupBy={GroupBy.Page}
-                filter={filter}
               />
             </div>
           </ErrorBoundary>

diff --git a/src/components/TaskInput.tsx b/src/components/TaskInput.tsx
@@ -1,6 +1,7 @@
 import React, { useImperativeHandle, useRef } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { CirclePlus } from 'tabler-icons-react';
+import { inputState } from '../state/input';
 import { themeStyleState } from '../state/theme';
 
 export interface ITaskInputRef {
@@ -9,14 +10,13 @@ export interface ITaskInputRef {
 
 export interface ITaskInputProps {
   onCreateTask(content: string): void;
-  onChange(content: string): void;
 }
 
 const TaskInput: React.ForwardRefRenderFunction<
   ITaskInputRef,
   ITaskInputProps
 > = (props, ref) => {
-  const [content, setContent] = React.useState('');
+  const [input, setInput] = useRecoilState(inputState);
   const inputRef = useRef<HTMLInputElement>(null);
   const themeStyle = useRecoilValue(themeStyleState);
 
@@ -43,17 +43,14 @@ const TaskInput: React.ForwardRefRenderFunction<
           type="text"
           ref={inputRef}
           className="flex-1 bg-transparent p-1 outline-none text-sm dark:text-gray-100"
-          value={content}
-          onChange={(e) => {
-            setContent(e.target.value);
-            props.onChange(e.target.value)
-          }}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Type to search, enter to create"
           onKeyPress={(e) => {
             if (e.key === 'Enter') {
               e.preventDefault();
-              props.onCreateTask(content);
-              setContent('');
+              props.onCreateTask(input);
+              setInput('');
             }
           }}
         />

diff --git a/src/components/TaskSection.tsx b/src/components/TaskSection.tsx
@@ -12,6 +12,7 @@ import { visibleState } from '../state/visible';
 import TaskItem from './TaskItem';
 import { settingsState } from '../state/settings';
 import { openTaskPage } from '../api';
+import { inputState } from '../state/input';
 
 export enum GroupBy {
   Page,
@@ -34,21 +35,21 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
   const refresh = useRecoilRefresher_UNSTABLE(tasksState(query));
   const themeStyle = useRecoilValue(themeStyleState);
   const { openInRightSidebar } = useRecoilValue(settingsState);
+  const input = useRecoilValue(inputState);
 
   useEffect(() => {
     switch (tasksLoadable.state) {
-      case 'hasValue':
-        setTasks(
-          tasksLoadable.contents.filter(
-            (t) =>
-              t.content.toLowerCase().indexOf(props.filter.toLowerCase()) != -1
-          )
-        );
+      case 'hasValue': {
+        const tasks = tasksLoadable.contents.filter((task: TaskEntityObject) => {
+          return task.content.toLowerCase().includes(input.toLowerCase());
+        });
+        setTasks(tasks);
         break;
+      }
       case 'hasError':
         throw tasksLoadable.contents;
     }
-  }, [tasksLoadable.state, tasksLoadable.contents, props.filter]);
+  }, [tasksLoadable.state, tasksLoadable.contents, input]);
 
   useEffect(() => {
     if (visible) {

diff --git a/src/state/input.ts b/src/state/input.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const inputState = atom({
+  key: 'input',
+  default: '',
+});