How to Create a Todo List with React and Sanity

git clone https://github.com/bathrobe/magic-next-sanity-todo-starter.git

// .env.localNEXT_PUBLIC_MAGIC_PUB_KEY=pk_test_12345MAGIC_SECRET_KEY=sk_test_12345ENCRYPTION_SECRET=random_encryption_string

npm install -g @sanity/cli

// your-studio/schemas/todo.jsexport 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.jsimport 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  ]),});

// .env.localNEXT_PUBLIC_MAGIC_PUB_KEY=pk_test_12345MAGIC_SECRET_KEY=sk_test_12345ENCRYPTION_SECRET=random_encryption_string_from_earlierNEXT_PUBLIC_SANITY_ID=your_sanity_idNEXT_PUBLIC_SANITY_DATASET=your_sanity_datasetSANITY_WRITE_KEY=your_sanity_write_key

// src/pages/todos.jsimport { 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 todoList array  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.jsimport 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.jsimport { useState, useEffect } from "react";// ...import client from "../lib/sanity/client";

//src/pages/todos.js//after the useState hooksconst 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 dependecy 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.jsimport { useState, useEffect, createContext } from "react";//... before the Page componentexport 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.jsimport 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.jsimport { useState, useContext } from "react";// import a simple date formatting libraryimport dayjs from "dayjs";// import a trashcan icon for our delete buttonimport { 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 importsimport 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 requestcase "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;//...