メモアプリ開発③ ドラッグ&ドロップ【dnd kit】

package com.example.simplememo.model;

import lombok.Data;
import java.time.LocalDateTime;

@Data
public class Memo {
    private int id;
    private int userId;
    private int displayOrder; // 追加
    private String title;
    private String content;
    private LocalDateTime createdAt;
    private LocalDateTime updatedAt;

    public Memo(
            int id,
            int userId,
            int displayOrder, // 追加
            String title,
            String content,
            LocalDateTime createdAt,
            LocalDateTime updatedAt) {
        this.id = id;
        this.userId = userId;
        this.displayOrder = displayOrder; // 追加
        this.title = title;
        this.content = content;
        this.createdAt = createdAt;
        this.updatedAt = updatedAt;
    }
}

package com.example.simplememo.controller;

import lombok.Data;

@Data
public class MemoRequest {
    private int displayOrder; // 追加
    private String title;
    private String content;
}

package com.example.simplememo.controller;

import lombok.Data;
import lombok.EqualsAndHashCode;

@Data
@EqualsAndHashCode(callSuper = true) 
public class MemoRequestWithId extends MemoRequest {
    private int id;
}

package com.example.simplememo.mapper;

import com.example.simplememo.model.Memo;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface MemoMapper {
    @Select("SELECT * FROM memos WHERE user_id = #{userId}")
    List<Memo> getMemosByUserId(int userId);

    @Select("SELECT * FROM memos WHERE id = #{id} AND user_id = #{userId}")
    Memo findMemo(@Param("userId") int userId, @Param("id") int id);

    // メモ作成にorderを追加
    @Insert("INSERT INTO memos(user_id, display_order, title, content, created_at, updated_at) VALUES(#{userId}, #{memo.displayOrder}, #{memo.title}, #{memo.content}, #{memo.createdAt}, #{memo.updatedAt})")
    void insertMemo(@Param("userId") int userId, @Param("memo") Memo memo);

    // メモ更新にorderを追加
    @Update("UPDATE memos SET display_order=#{memo.displayOrder}, title=#{memo.title}, content=#{memo.content}, updated_at=#{memo.updatedAt} WHERE id=#{id} AND user_id = #{userId}")
    void updateMemo(@Param("userId") int userId, @Param("id") int id, @Param("memo") Memo memo);

    @Delete("DELETE FROM memos WHERE id=#{id} AND user_id = #{userId}")
    void deleteMemo(@Param("userId") int userId, @Param("id") int id);
}

package com.example.simplememo.service;

import java.time.LocalDateTime;

import com.example.simplememo.controller.MemoRequest;
import com.example.simplememo.mapper.MemoMapper;
import com.example.simplememo.model.Memo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class MemoService {
    @Autowired
    private MemoMapper memoMapper;

    public List<Memo> getMemosByUserId(int userId) {
        return memoMapper.getMemosByUserId(userId);
    }

    public Memo findMemo(int userID, int id) {
        return memoMapper.findMemo(userID, id);
    }

    public void insertMemo(int userId, MemoRequest request) {
        // displayOrderを追加
        Memo memo = new Memo(
                    0, 
                    userId, 
                    request.getDisplayOrder(), 
                    request.getTitle(), 
                    request.getContent(),
                    LocalDateTime.now(),
                    LocalDateTime.now());
        try {
            memoMapper.insertMemo(userId, memo);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException("メモの登録に失敗しました。");
        }
    }

    public void updateMemo(int userId, int id, MemoRequest request) {
        try {
            Memo memo = memoMapper.findMemo(userId, id);
            if (memo == null) {
                throw new RuntimeException("メモが見つかりません。");
            }
            Memo updateMemo = new Memo(
                    id,
                    userId,
                    request.getDisplayOrder(),　// displayOrderを追加
                    request.getTitle(),
                    request.getContent(),
                    memo.getCreatedAt(),
                    memo.getUpdatedAt());
            // タイトルか内容が更新された場合のみupdatedAtを更新する(displayOrderのみの更新を想定)
            if (!memo.getTitle().equals(request.getTitle()) || !memo.getContent().equals(request.getContent())) {
                updateMemo.setUpdatedAt(LocalDateTime.now());
            }
            memoMapper.updateMemo(userId, id, updateMemo);
        } catch (Exception e) {
            throw new RuntimeException("メモの更新に失敗しました。");
        }
    }

    public void deleteMemo(int userId, int id) {
        try {
            memoMapper.deleteMemo(userId, id);
        } catch (Exception e) {
            throw new RuntimeException("メモの削除に失敗しました。");
        }
    }
}

package com.example.simplememo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.simplememo.model.Memo;
import com.example.simplememo.service.MemoService;

@RestController
@RequestMapping("/api/users/{user_id}/memos")
public class MemoController {
    @Autowired
    private MemoService memoService;

    @GetMapping
    public ResponseEntity<List<Memo>> getMemosByUserId(@PathVariable("user_id") int userId) {
        System.out.println("receive request");
        return ResponseEntity.ok(memoService.getMemosByUserId(userId));
    }

    @PostMapping
    public ResponseEntity<Integer> createMemo(@PathVariable("user_id") int userId, @RequestBody MemoRequest memo) {
        try {
            memoService.insertMemo(userId, memo);
            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.badRequest().build();
        }
    }

    @PutMapping
    public ResponseEntity<Void> updateMemos(@PathVariable("user_id") int userId, @RequestBody MemoRequestWithId[] memos) {
        try {
            for (MemoRequestWithId memo : memos) {
                memoService.updateMemo(userId, memo.getId(), memo);
            }
            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.badRequest().build();
        }
    }

    @PutMapping("/{id}")
    public ResponseEntity<Void> updateMemo(@PathVariable("user_id") int userId, @PathVariable("id") int id,
            @RequestBody MemoRequest memo) {
        System.out.println("receive request in updateMemo");
        try {
            memoService.updateMemo(userId, id, memo);
            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.badRequest().build();
        }
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteMemo(@PathVariable("user_id") int userId, @PathVariable("id") int id) {
        try {
            memoService.deleteMemo(userId, id);
            return ResponseEntity.noContent().build();
        } catch (Exception e) {
            return ResponseEntity.badRequest().build();
        }
    }
}

import {
  closestCorners,
  DndContext,
  DragEndEvent,
  DragOverlay,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";

import SortableItem from "./SortableItem";
import {
  arrayMove,
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { useMemoContext } from "../../../context/MemoContext";
import { useState } from "react";

const SortableContainer = () => {
  const { userMemos, setUserMemos, editingMemoId, updateMemos } =
    useMemoContext();
  const sensors = useSensors(
    // ドラッグしないとソート処理が動かないように設定(編集可能になる)
    useSensor(PointerSensor, { activationConstraint: { distance: 0 } })
  );
  const [activeId, setActiveId] = useState(-1);

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveId(-1); // ドラッグ終了後、activeIdをリセット
    if (active.id === over?.id) return; // 移動していない場合は何もしない

    // userMemosのindexを取得(=displayOrder≠)
    const activeIndex = userMemos.findIndex((memo) => memo.id === active.id);
    const overIndex = userMemos.findIndex((memo) => memo.id === over?.id);
    // userMemosの並び替え
    const sortedMemos = arrayMove(userMemos, activeIndex, overIndex);
    // displayOrderを再設定
    const newOriginalMemos = sortedMemos.map((memo, index) => {
      return { ...memo, displayOrder: index + 1 }; // 1始まりにするため
    });
    setUserMemos(newOriginalMemos); // 状態更新
    updateMemos(newOriginalMemos); // DB更新
  };

  return (
    <div className="dnd__container">
      <DndContext
        sensors={sensors}
        collisionDetection={closestCorners}
        onDragStart={({ active }) => setActiveId(Number(active.id))}
        onDragEnd={handleDragEnd}
      >
        <SortableContext
          items={userMemos}
          strategy={verticalListSortingStrategy}
        >
          {userMemos.length > 0 ? (
            userMemos.map((memo) => (
              <SortableItem
                key={memo.id}
                memo={memo}
                isDisabled={memo.id === editingMemoId} // 編集中のメモを移動不可に
                isTransparent={activeId === memo.id} // activeIdが一致する場合に透明度を変更
              />
            ))
          ) : (
            <p className="dnd__empty-message">No memos</p>
          )}
        </SortableContext>
        {/* ユーザーがドラッグしている要素を表示 */}
        <DragOverlay>
          {activeId ? (
            <SortableItem
              memo={userMemos.find((memo) => memo.id === activeId)}
              isDisabled={false} // true/falseどちらでもいい
              isTransparent={false} // ドラッグ対象のためactiveだけど透明にしない
            />
          ) : null}
        </DragOverlay>
      </DndContext>
    </div>
  );
};

export default SortableContainer;

import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Memo } from "../../../Types";
import MemoRow from "../MemoContainer/MemoRow";

const SortableItem = (props: { memo: Memo, isDisabled: boolean }) => {
  const { memo, isDisabled } = props;
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: memo.id, disabled: isDisabled });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    zIndex: isDragging ? 9999 : "auto", // ドラッグ中の要素に高い z-index を設定
    cursor: isDisabled ? "auto" : (isDragging ? "grabbing" : "grab"), // ドラッグ中のカーソルを掴むアイコンに設定
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <MemoRow originalMemo={memo} key={memo.id} />
    </div>
  );
};

export default SortableItem;