diff --git a/src/components/tasklist/group.jsx b/src/components/tasklist/group.jsx index 3f56b85c..75e4bb0a 100644 --- a/src/components/tasklist/group.jsx +++ b/src/components/tasklist/group.jsx @@ -1,12 +1,22 @@ +import { useState } from "react"; + import ErrorBoundary from "components/errorboundry"; import List from "components/tasklist/list"; -export default function TaskListGroup({ group }) { +export default function TaskListGroup({groupDetail, groupUpdate}) { + const [group, setGroup] = useState(groupDetail) + const groupName = Object.keys(group)[0] + const groupTasks = Object.values(group)[0] + + const listUpdate = () => { + setGroup(group) + groupUpdate() + } return ( -
-

{group.name}

+
+

{groupName}

- +
); diff --git a/src/components/tasklist/item.jsx b/src/components/tasklist/item.jsx index 680aab78..b6169891 100644 --- a/src/components/tasklist/item.jsx +++ b/src/components/tasklist/item.jsx @@ -1,9 +1,19 @@ -export default function Item({ task }) { +import {useState} from "react"; + +export default function Item({taskDetail, taskUpdate}) { + const [task, setTask] = useState(taskDetail) + + const toggleComplete = () => { + task.checked = !task.checked; + setTask(task) + taskUpdate() + } + return (
  • - +
    {task.title}
    diff --git a/src/components/tasklist/list.jsx b/src/components/tasklist/list.jsx index e5eb97f4..6466c23a 100644 --- a/src/components/tasklist/list.jsx +++ b/src/components/tasklist/list.jsx @@ -1,10 +1,19 @@ +import { useState } from "react"; + import Item from "components/tasklist/item"; -export default function List({ tasklist }) { +export default function List({listDetail, listUpdate}) { + const [tasks, setTasks] = useState(listDetail) + + const taskUpdate = () => { + setTasks(tasks) + listUpdate() + } + return (
      - {tasklist.map((task) => ( - + {tasks.map((task) => ( + ))}
    ); diff --git a/src/pages/api/tasklistSave.js b/src/pages/api/tasklistSave.js new file mode 100644 index 00000000..5b55184c --- /dev/null +++ b/src/pages/api/tasklistSave.js @@ -0,0 +1,5 @@ +import { tasklistPersist } from "utils/config/api-response"; + +export default async function handler(req, res) { + res.send(await tasklistPersist(req.body)); +} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 13ccbd28..7361e5b6 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -19,7 +19,7 @@ import { getSettings } from "utils/config/config"; import { ColorContext } from "utils/contexts/color"; import { ThemeContext } from "utils/contexts/theme"; import { SettingsContext } from "utils/contexts/settings"; -import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response"; +import { bookmarksResponse, servicesResponse, tasklistResponse, widgetsResponse } from "utils/config/api-response"; import ErrorBoundary from "components/errorboundry"; import themes from "utils/styles/themes"; import QuickLaunch from "components/quicklaunch"; @@ -46,6 +46,7 @@ export async function getStaticProps() { const { providers, ...settings } = getSettings(); const services = await servicesResponse(); + const tasklist = await tasklistResponse(); const bookmarks = await bookmarksResponse(); const widgets = await widgetsResponse(); @@ -54,6 +55,7 @@ export async function getStaticProps() { initialSettings: settings, fallback: { "/api/services": services, + "/api/tasklist": tasklist, "/api/bookmarks": bookmarks, "/api/widgets": widgets, "/api/hash": false, @@ -70,6 +72,7 @@ export async function getStaticProps() { initialSettings: {}, fallback: { "/api/services": [], + "/api/tasklist": [], "/api/bookmarks": [], "/api/widgets": [], "/api/hash": false, @@ -174,8 +177,8 @@ function Home({ initialSettings }) { }, [initialSettings, setSettings]); const { data: services } = useSWR("/api/services"); - const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: tasklist } = useSWR("/api/tasklist"); + const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: widgets } = useSWR("/api/widgets"); const servicesAndBookmarks = [...services.map(sg => sg.services).flat(), ...bookmarks.map(bg => bg.bookmarks).flat()] @@ -229,6 +232,11 @@ function Home({ initialSettings }) { document.removeEventListener('keydown', handleKeyDown); } }) + const [taskList, setTaskList] = useState(tasklist) + const taskListUpdate = () => { + setTaskList(taskList) + fetch("/api/tasklistSave", {method: "POST", body: JSON.stringify(taskList)}) + } return ( <> @@ -296,10 +304,10 @@ function Home({ initialSettings }) {
    )} - {tasklist?.length > 0 && ( -
    - {tasklist.map((group) => ( - + {taskList?.length > 0 && ( +
    + {taskList.map((group) => ( + ))}
    )} diff --git a/src/utils/config/api-response.js b/src/utils/config/api-response.js index c9689b5d..a9dbe753 100644 --- a/src/utils/config/api-response.js +++ b/src/utils/config/api-response.js @@ -54,19 +54,13 @@ export async function tasklistResponse() { const fileContents = substituteEnvironmentVars(rawFileContents); const tasklist = yaml.load(fileContents); - if (!tasklist) return []; + return tasklist +} - // map easy to write YAML objects into easy to consume JS arrays - const tasklistArray = tasklist.map((group) => ({ - name: Object.keys(group)[0], - tasklist: group[Object.keys(group)[0]].map((entries) => ({ - // id: Object.values(entries)[0].replaceAll(" ", "_"), - title: Object.values(entries)[0], - checked: Object.values(entries)[1], - })), - })); - - return tasklistArray; +export async function tasklistPersist(taskState) { + const tasklistYaml = path.join(process.cwd(), "config", "tasklist.yaml"); + await fs.writeFile(tasklistYaml, yaml.dump(JSON.parse(taskState))); + return [taskState]; } export async function widgetsResponse() {