はじめてのReactで作るカンバン方式TODOリスト

import logo from './logo.svg';
import './App.css';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();

  function onDropEvent(event){
    console.log("dropped");
    console.log(event);
  }

  function onDragOver(event){
    event.preventDefault(); // これがないとdropイベントが発火しない
  }

  function onSubmitEventHander(event){
    console.log(event.task);
  }

  const noStartTasks = ["nostart","taskA","taskB"];
  const list = noStartTasks.map((noStartTask) => <ol className="list-centering list" draggable="true" key={noStartTask}>{noStartTask}</ol>);

  const workingTasks = ["working","taskA","taskB"];
  const workingList = workingTasks.map((workingTask) => <ol className="list-centering list" draggable="true" key={workingTask}>{workingTask}</ol>);

  const doneTasks = ["done","taskA","taskB"];
  const doneList = doneTasks.map((doneTask) => <ol className="list-centering list" draggable="true" key={doneTask}>{doneTask}</ol>);


  return (
    <div className="App">
      <h1>カンバン方式TODO</h1>
      <form name="newTask" onSubmit={handleSubmit(onSubmitEventHander)} >
        <input id="task" type="text" {...register('task')}/>
        <input type="submit" value="追加"/>
      </form>

      <div id="statusArea" className="width100 centering">
        <div id="notStart" className="left statusBox width30" onDragOver={onDragOver} onDrop={onDropEvent}>
          <h2>未着手</h2>
          <ul dropzone="move">
            {list}
          </ul>
        </div>
        <div id="working" className="left statusBox width30" onDragOver={onDragOver} onDrop={onDropEvent}>
          <h2>作業中</h2>
          <ul dropzone="move">
            {workingList}
          </ul>
        </div>
        <div id="done" className="left statusBox width30" onDragOver={onDragOver} onDrop={onDropEvent}>
          <h2>完了</h2>
          <ul dropzone="move">
            {doneList}
          </ul>
        </div>
      </div>
    </div>
  );
}

export default App;

Kanban-todo
├─public
│      index.html
└─src
    │  App.css
    │  App.js
    │  firebase.js
    │  index.css
    │  index.js
    │  reportWebVitals.js
    │  setupTests.js
    │
    ├─component
    │      Form.jsx
    │      TaskArea.jsx
    │
    └─store
            data-context.jsx

import { useForm } from 'react-hook-form';
import {Firebase} from "../firebase.js";
import { getFirestore, collection, doc, setDoc, query, getDocs} from "firebase/firestore";

function Form({onTaskAdd}){
    console.log("==========Form rendering==========");
    const { register, handleSubmit,reset } = useForm();
    const db = getFirestore(Firebase);
    const Ref = collection(db, "kanban-todo");

    function onSubmitEventHander(event){
        let newTask = {status: "notStart",name: event.task};
      
        const document = doc(Ref, event.task);
        setDoc(document, {
            status: "notStart",
            name: event.task
        });
        onTaskAdd(newTask);
        reset();
      }

    return(
    <div>
        <form name="newTask" onSubmit={handleSubmit(onSubmitEventHander)} >
            <input id="task" type="text" {...register('task')}/>
            <input type="submit" value="追加"/>
        </form>
    </div>

    )

}
export default Form;

import { useContext,} from "react";
import {DnDContext} from '../store/data-context.jsx';

function TaskArea({title,status,taskList,onTaskMove}){
console.log(title + " TaskArea rendering");
    const dndContext = useContext(DnDContext);


    let tempList = [];

    function onDropEvent(event){
        console.log("=======" + title + " onDropEvent=======");
        let newTaskStatus = dndContext.draggedId;
        newTaskStatus.status = status;
        onTaskMove(newTaskStatus);

    }

    let dragInfo = dndContext.draggedId;
    function onDragStartHandler(event){
        console.log("==========" + title + " onDragStartHandler==========");
        dragInfo.name = event.target.innerText;
        dragInfo.status = status;

        dndContext.setDraggedId(dragInfo);
        for(let i=0; i<taskList.length; i++){
            if(taskList[i].name == dragInfo.name){
                taskList.splice(i,1);
                break;
            }
        }

    }

    function onDragEndHandler(event){
        console.log("==========" + title + " onDragEndHandler==========");
    }

    function getTaskList(){
        tempList = [];
        for(let i=0; i<taskList.length; i++){
            if(taskList[i].status == status){
                tempList[i] = <ol className="list-centering list" draggable="true" onDragStart={onDragStartHandler} onDragEnd={onDragEndHandler} key={"id" + i}>{taskList[i].name}</ol>;
            }
        }
        return tempList;
    }


    function onDragOver(event){
        event.preventDefault(); // これがないとdropイベントが発火しない
    }

    return(
        <div id={status} className="left statusBox width30" onDragOver={onDragOver} onDrop={onDropEvent}>
            <h2>{title}</h2>
            <ul dropzone="move">
                {
                    getTaskList()
                }
            </ul>
        </div>
    )
}

export default TaskArea;

function Parent(){
    function ParentFunc(param){
        console.log("子コンポーネントから呼ばれた");
        console.log(param); // Child.jsx内でonSomething()がコールされた時の引数が出力される
    }
    return(
        <Child onSomething={ParentFunc}/>
    )
}

function Child({onSomething}){

    onSomething("test");// Parent.jsxのParentFunc()がコールされる

    return(
        <p>なんか</p>
    )
}