How to Create a Todo List with React and Sanity

// your-studio/schemas/todo.js

export default {
    name: "todo",
    title: "Todo",
    type: "document",
    fields: [
      {
        name: "text",
        title: "Todo Text",
        type: "string",
      },
      {
        name: "createdAt",
        title: "Created at",
        type: "datetime",
      },
      {
        name: "dueDate",
        title: "Due date",
        type: "datetime",
      },
      {
        name: "isCompleted",
        title: "Is completed?",
        type: "boolean",
      },
      {
        name: "completedAt",
        title: "Completed At",
        type: "datetime",
      },
      {
        name: "userEmail",
        title: "User Email",
        type: "string",
      },
    ],
  };

// your-studio/schemas/schema.js

import createSchema from "part:@sanity/base/schema-creator";
import schemaTypes from "all:part:@sanity/base/schema-type";
//...
import todo from "./todo"

export default createSchema({
  name: "default",
  types: schemaTypes.concat([
		//...
    todo
  ]),
});

// src/pages/todos.js

import { useState } from "react";
//we must import the datepicker's css modules manually
//so it plays nice with Next.
import DatePicker from "react-date-picker/dist/entry.nostyle";
import "react-date-picker/dist/DatePicker.css";
import "react-calendar/dist/Calendar.css";
import useAuth from "../hooks/useAuth";
import Logout from "../components/Logout";

export default function Todos() {
  const { user, loading } = useAuth();
	//create a state to store new  for todos
  const [todoList, setTodoList] = useState([]);
  //create a state for the text in the todo input form
  const [userInput, setUserInput] = useState("");
  //create a state for the due date chosen in the datepicker
  const [dueDate, setDueDate] = useState("");
  //set an error message if either input is missing
  const [errMessage, setErrMessage] = useState("");
	//...

// src/pages/todos.js

//... right after the useState hooks

//FOR THE INPUT FORM:
const handleChange = (e) => {
    e.preventDefault();
    setUserInput(e.target.value);
  };
	
	//FOR THE SUBMIT BUTTON:
  const handleSubmit = async (e) => {
    e.preventDefault();
    //if either part of the form isn't filled out
    //set an error message and exit
    if (userInput.length == 0 || dueDate == "") {
      setErrMessage("Todo text and due date must be filled out.");
    } else {
      //otherwise send the todo to our api
			// (we'll make this next!)
      await fetch("/api/todo", {
        method: "POST",
        body: JSON.stringify({
          text: userInput,
          dueDate: dueDate,
          user: user.email,
        }),
      });
      // await fetchTodos(); //(we'll add this later)
      // Clear all inputs after the todo is sent to Sanity
      setUserInput("");
      setErrMessage("");
      setDueDate("");
    }
  };

// src/pages/todos.js

				{/*...*/}
				<form>
					{/*we flex the text input and datepicker
					so they display inline. */}
          <div className="flex justify-center items-center">
					<label for="todo" className="invisible">Your Todo</label>
            <input
              className="w-72 h-12 border p-4 border-blue-100"
              type="text"
							//our state
              value={userInput}
              placeholder="Make coffee."
							//our function
              onChange={handleChange}
            />
            <div className="my-8">
              <DatePicker
                className="p-4"
								//makes it so we cannot set due date in past
                minDate={new Date()}
								//our dueDate state
                onChange={setDueDate}
                value={dueDate}
              />
            </div>
          </div>{" "}
          <button
            className="focus:outline-none focus:ring focus:border-blue-800
						px-6 py-2 rounded-xl bg-blue-500 text-blue-50 hover:bg-blue-800 
						font-semibold"
						//our function
            onClick={handleSubmit}
          >
            Submit
          </button>
					{/*error set in handleSubmit*/}
          <p>{errMessage}</p>
        </form>
				{/*...*/}

// src/pages/api/todo.js

import client from "../../lib/sanity/client";

export default async function handler(req, res) {
  switch (req.method) {
    case "POST":
      //this JSON arrives as a string,
      //so we turn it into a JS object with JSON.parse()
      const newTodo = await JSON.parse(req.body);
      //then use the Sanity client to create a new todo doc
      try {
        await client
          .create({
            _type: "todo",
            text: newTodo.text,
            isCompleted: false,
            createdAt: new Date().toISOString(),
            dueDate: newTodo.dueDate,
            userEmail: newTodo.user,
          })
          .then((res) => {
            console.log(`Todo was created, document ID is ${res._id}`);
          });
        res
          .status(200)
          .json({ msg: `Todo was created, document ID is ${res._id}` });
      } catch (err) {
        console.error(err);
        res.status(500).json({ msg: "Error, check console" });
      }

      break;
  }
}

//src/pages/todos.js

import { useState, useEffect } from "react";
// ...
import client from "../lib/sanity/client";

//src/pages/todos.js

//after the useState hooks
const fetchTodos = async () => {
    let fetchedTodos;
		//make sure the user is loaded
    if (!loading) {
			//pass userEmail as a query parameter
      fetchedTodos = await client.fetch(
			`*[_type=="todo" && userEmail==$userEmail] | order(dueDate asc)
				{_id, text, createdAt, dueDate, isCompleted, completedAt, userEmail}`,
        {
          userEmail: user.email,
        });
			//insert our response in the todoList state
      setTodoList(fetchedTodos);
    }
  };

  useEffect(
    () => {
			//now it will fetch todos on page load...
      fetchTodos();
    },
    //this dependency array tells React to run the
		//hook again whenever the user loads or changes
    [loading, user]
  );

// src/pages/todos.js
// in handleSubmit function...
      await fetch("/api/todo", {
        method: "POST",
        body: JSON.stringify({
          text: userInput,
          dueDate: dueDate,
          user: user.email,
        }),
      });
      //***uncomment this line now***
			//after submitting, our TodoList will now refresh
      await fetchTodos();
			setUserInput("");
      setErrMessage("");
      setDueDate("");
    }
  };
//...

// src/pages/todos.js

import { useState, useEffect, createContext } from "react";
//... before the Page component
export const TodoContext = createContext()

export default function Todos() { //...

// then, below the handleSubmit function...

const handleDelete = async (selectedTodo) => {
    await fetch("/api/todo", {
      method: "DELETE",
      body: selectedTodo._id,
    });
		//todos will refresh after delete, too
    await fetchTodos();
  };

	console.log(todoList)

  return (
    <TodoContext.Provider value={{handleDelete, fetchTodos}>
		{/* all your rendered JSX */}
		</TodoContext.Provider>

// src/components/TodoList.js

import Todo from "./Todo";

export default function TodoList({ todoList, user }) {
  return (
    <section>
      <ul>
			{/*if there are todos in the list...*/}
        {todoList.length >= 1
          ? todoList.map((todo, idx) => {
							//map only the user's todos
              return user.email == todo.userEmail ? (
                <Todo key={todo._id} todo={todo} />
              ) : (
                ""
              );
            })
          : "Enter a todo item"}
      </ul>
    </section>
  );
}

// src/components/Todo.js

import { useState, useContext } from "react";
// import a simple date formatting library
import dayjs from "dayjs";
// import a trashcan icon for our delete button
import { RiDeleteBin5Line } from "react-icons/ri";
import { TodoContext } from "../pages/todos"

export default function Todo({ todo }) {
//with useContext we do not need to pass extra props to <TodoList/>
const { handleDelete, fetchTodos } = useContext(TodoContext)
	//setting states for the isCompleted boolean and a date completed
  const [isCompleted, setIsCompleted] = useState(todo.isCompleted);
  const [completedTime, setCompletedTime] = useState(todo.completedAt);
	
	//function that syncs the completed checkbox with Sanity
  const handleToggle = async (e) => {
    e.preventDefault();
    const result = await fetch("/api/todo", {
      method: "PUT",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: todo._id,
				//passes isCompleted React state to Sanity
        isCompleted: isCompleted,
        completedAt: todo.completedAt,
      }),
    });

    const { status, completedAt } = await result.json();
		// refresh our data
		await fetchTodos();
		//pass our Sanity results back into React
    setIsCompleted(status);
    setCompletedTime(completedAt);
  };
  return (
    <li
      className="bg-gray-50 my-6 border shadow-md rounded-xl 
			p-4 border-gray-200 flex justify-center items-center"
      key={todo._id}
    >
      <input
        className="mx-2 cursor-pointer"
        type="checkbox"
        checked={todo.isCompleted}
        onChange={handleToggle}
      />
			{/*if todo is done, cross it out and turn it gray*/}
      <p
        className={`text-lg mx-2 ${
          todo.isCompleted ? "line-through text-gray-500" : ""
        }`}
      >
        {todo.text}
      </p>
      <p className={`text-gray-400 mr-2`}>
				{/*if todo is done, show completedTime
					if not done, show due date */}
        {todo.isCompleted
          ? `Done ${dayjs(completedTime).format("MMM D, YYYY")}`
          : `Due ${dayjs(todo.dueDate).format("MMM D, YYYY")}`}
      </p>
      <button
        className="mx-2"
        onClick={(e) => {
          e.preventDefault();
          handleDelete(todo);
        }}
      >
        <RiDeleteBin5Line />
      </button>
    </li>
  );
}

// src/pages/todos.js

// ... at the bottom of the imports
import TodoList from "../components/TodoList"

// ... then directly under the form
				<form> {/*...*/> </form>
				<div className="my-12">
          <h1 className="text-xl font-bold tracking-tight 
					my-8">Your Todos</h1>
          {loading ? (
            "loading..."
          ) : (
            <TodoList
              user={user}
              todoList={todoList}
            />
          )}
        </div>
//...

// src/pages/api/todo.js

//...
//after the POST request

case "PUT":
      const result = await client
        .patch(req.body.id)
        .set({
          isCompleted: !req.body.isCompleted,
					//create new complete date if Todo is marked as done
          completedAt: !!req.body.isCompleted ? "" : new Date().toISOString(),
        })
        .commit();
      res.status(200).json({
        status: result.isCompleted,
        completedAt: result.completedAt,
      });

      break;
case "DELETE":
      await client
        .delete(req.body)
        .then((res) => {
          res.body;
        })
        .then((res) => console.log(`Todo was deleted`));
      res.status(200).json({ msg: "Success" });
      break;
//...