diff --git a/src/App.tsx b/src/App.tsx
index 391f936..3da5de4 100644
--- 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() {
-
-
+
+
diff --git a/src/components/TaskInput.tsx b/src/components/TaskInput.tsx
index 3a9ad50..06e0b96 100644
--- 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(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
index baa5453..9757027 100644
--- 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 = (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
new file mode 100644
index 0000000..a664bd4
--- /dev/null
+++ b/src/state/input.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const inputState = atom({
+ key: 'input',
+ default: '',
+});