Add due date and NLP parsing to todo list extension

extensions/todo-list/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Todo List Changelog
 
+## [Enhancements] - {PR_MERGE_DATE}
+
+- Added an action to set a due date for a todo item.
+- Added optional natural language parsing of items to extract due date and tags automatically.
+- Added configuration option to order tasks by title.
+
 ## [New Action] - 2024-07-28
 
 - Added an action to set a tag for a todo item.

extensions/todo-list/package.json

@@ -14,17 +14,20 @@
     "bkeys818",
     "pernielsentikaer",
     "telmen",
-    "ridemountainpig"
+    "ridemountainpig",
+    "dedalusj"
   ],
   "scripts": {
     "build": "ray build -e dist",
     "dev": "ray develop",
     "fix-lint": "ray lint --fix",
-    "lint": "ray lint"
+    "lint": "ray lint",
+    "publish": "npx @raycast/api@latest publish"
   },
   "dependencies": {
     "@raycast/api": "^1.52.1",
     "@raycast/utils": "^1.1.0",
+    "chrono-node": "^2.7.8",
     "dayjs": "^1.10.7",
     "jotai": "^1.4.0",
     "lodash": "^4.17.21",
@@ -89,17 +92,34 @@
       "required": false,
       "title": "Task sorting",
       "description": "The order in which task are sorted.",
-      "default": "creation_date_accending",
+      "default": "creation_date_ascending",
       "data": [
         {
           "title": "Creation Date (ascending)",
-          "value": "creation_date_accending"
+          "value": "creation_date_ascending"
         },
         {
           "title": "Creation Date (descending)",
           "value": "creation_date_descending"
+        },
+        {
+          "title": "Title (ascending)",
+          "value": "title_ascending"
+        },
+        {
+          "title": "Title (descending)",
+          "value": "title_descending"
         }
       ]
+    },
+    {
+      "name": "nlpParsing",
+      "type": "checkbox",
+      "required": false,
+      "title": "Natural language parsing",
+      "description": "Automatically parse dates and tags",
+      "default": false,
+      "label": "Automatically parse dates and tags"
     }
   ],
   "title": "Todo List"

extensions/todo-list/src/atoms.ts

@@ -13,6 +13,7 @@ export interface TodoSections {
 export interface TodoItem {
   title: string;
   tag?: string;
+  dueDate?: number;
   completed: boolean;
   priority?: 1 | 2 | 3;
   timeAdded: number;
@@ -64,6 +65,7 @@ export const searchModeAtom = atom(false);
 export const searchBarTextAtom = atom("");
 export const newTodoTextAtom = atom((get) => get(searchBarTextAtom).trim());
 export const editingTagNameAtom = atom("");
+export const editingDueDateValueAtom = atom(0);
 export const editingAtom = atom<
   | false
   | {
@@ -78,5 +80,12 @@ export const editingTagAtom = atom<
       index: number;
     }
 >(false);
+export const editingDueDateAtom = atom<
+  | false
+  | {
+      sectionKey: keyof TodoSections;
+      index: number;
+    }
+>(false);
 
 export const selectedTagAtom = atom("All");

extensions/todo-list/src/config.ts

@@ -29,3 +29,9 @@ export const priorityDescriptions = {
   2: "mid",
   3: "high",
 };
+
+export const priorityShortInputs: Record<string, 1 | 2 | 3> = {
+  "!h": 3,
+  "!m": 2,
+  "!l": 1,
+};

extensions/todo-list/src/hooks/useTodo.ts

@@ -6,6 +6,8 @@ import {
   editingTagNameAtom,
   searchBarTextAtom,
   todoAtom,
+  editingDueDateAtom,
+  editingDueDateValueAtom,
 } from "../atoms";
 import { compare, insertIntoSection } from "../utils";
 
@@ -17,6 +19,8 @@ export const useTodo = ({ item, idx, sectionKey }: { item: TodoItem; idx: number
   const [, setEditing] = useAtom(editingAtom);
   const [, setEditingTag] = useAtom(editingTagAtom);
   const [, setEditingTagName] = useAtom(editingTagNameAtom);
+  const [, setEditingDueDate] = useAtom(editingDueDateAtom);
+  const [, setEditingDueDateValue] = useAtom(editingDueDateValueAtom);
   const [, setSearchBarText] = useAtom(searchBarTextAtom);
 
   const setClone = () => {
@@ -91,6 +95,14 @@ export const useTodo = ({ item, idx, sectionKey }: { item: TodoItem; idx: number
     setEditingTagName(item.tag ?? "");
   };
 
+  const editTodoDueDate = () => {
+    setEditingDueDate({
+      sectionKey,
+      index: idx,
+    });
+    setEditingDueDateValue(item.dueDate ?? 0);
+  };
+
   const setPriority = (priority?: 1 | 2 | 3) => {
     item.priority = priority;
     setClone();
@@ -99,6 +111,7 @@ export const useTodo = ({ item, idx, sectionKey }: { item: TodoItem; idx: number
   return {
     editTodo,
     editTodoTag,
+    editTodoDueDate,
     deleteTodo,
     markTodo,
     markCompleted,

extensions/todo-list/src/index.tsx

@@ -1,5 +1,5 @@
 import { List } from "@raycast/api";
-import { editingAtom, editingTagAtom, selectedTagAtom, searchBarTextAtom, searchModeAtom } from "./atoms";
+import { editingAtom, selectedTagAtom, searchBarTextAtom, searchModeAtom } from "./atoms";
 import { useAtom } from "jotai";
 import TodoSection from "./todo_section";
 import ListActions from "./list_actions";
@@ -9,7 +9,6 @@ export default function TodoList() {
   const [searchMode] = useAtom(searchModeAtom);
   const [searchBarText, setSearchBarText] = useAtom(searchBarTextAtom);
   const [editing] = useAtom(editingAtom);
-  const [editingTag] = useAtom(editingTagAtom);
   const [selectedTag] = useAtom(selectedTagAtom);
 
   return (

extensions/todo-list/src/list_actions.tsx

@@ -4,7 +4,7 @@ import _ from "lodash";
 import { editingAtom, newTodoTextAtom, searchBarTextAtom, searchModeAtom, todoAtom } from "./atoms";
 import DeleteAllAction from "./delete_all";
 import SearchModeAction from "./search_mode_action";
-import { compare, insertIntoSection } from "./utils";
+import { compare, insertIntoSection, parseTodoItem } from "./utils";
 
 const ListActions = () => {
   const [searchMode] = useAtom(searchModeAtom);
@@ -18,17 +18,8 @@ const ListActions = () => {
       await showToast(Toast.Style.Failure, "Empty todo", "Todo items cannot be empty.");
       return;
     }
-    todoSections.todo = [
-      ...insertIntoSection(
-        todoSections.todo,
-        {
-          title: newTodoText,
-          completed: false,
-          timeAdded: Date.now(),
-        },
-        compare
-      ),
-    ];
+    const newItem = parseTodoItem(newTodoText);
+    todoSections.todo = [...insertIntoSection(todoSections.todo, newItem, compare)];
     await clearSearchBar();
     setTodoSections(_.cloneDeep(todoSections));
   };

extensions/todo-list/src/todo_due_date_form.tsx

@@ -0,0 +1,43 @@
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { todoAtom, editingDueDateAtom, editingDueDateValueAtom } from "./atoms";
+import { ActionPanel, Form, Action, useNavigation } from "@raycast/api";
+import { useState } from "react";
+
+const TodoDueDateForm = () => {
+  const { pop } = useNavigation();
+  const [todoSections, setTodoSections] = useAtom(todoAtom);
+  const [editingDueDate] = useAtom(editingDueDateAtom);
+  const [editingDueDateValue] = useAtom(editingDueDateValueAtom);
+  const [dueDate, setDueDate] = useState<Date | null>(editingDueDateValue > 0 ? new Date(editingDueDateValue) : null);
+
+  const editTodoDueDate = async () => {
+    if (!editingDueDate) return;
+
+    todoSections[editingDueDate.sectionKey].splice(editingDueDate.index, 1, {
+      ...todoSections[editingDueDate.sectionKey][editingDueDate.index],
+      dueDate: dueDate ? dueDate.getTime() : undefined,
+    });
+    setTodoSections(_.cloneDeep(todoSections));
+  };
+
+  return (
+    <Form
+      actions={
+        <ActionPanel>
+          <Action.SubmitForm
+            onSubmit={() => {
+              editTodoDueDate();
+              pop();
+            }}
+          />
+          <Action onAction={() => pop()} title="Cancel" />
+        </ActionPanel>
+      }
+    >
+      <Form.DatePicker id="dueDate" onChange={setDueDate} title="Due date" value={dueDate} />
+    </Form>
+  );
+};
+
+export default TodoDueDateForm;