未経験からweb系エンジニアになるための独学履歴~React+DRF+HerokuでTodoアプリを作る 製作記録~

    // タスクリスト取得
    try {
      const response = await axios.get(get_task_readonly_listUrl);

      // ペジネーション関係の情報をstateに格納
      get_pageNationNext(response.data.next);
      get_pageNationPrevious(response.data.previous);
      get_pageNationLastNumber(response.data.total_pages);
      get_pageNationCurrent(response.data.current_page);
      get_contentsAllCount(response.data.count);
      // ペジネーションの関係でr.dataのリザルトプロパティから期待するdataを返してもらう
      const responseMap = response.data.results.map((obj) => {
        return obj;
      });
      const TaskList = _.mapKeys(responseMap, "id");
      getTaskList(TaskList);
      setAllTasks(TaskList);
    } catch (error) {
      createAlert({
        message: "タスクリストの取得に失敗しました",
        type: "danger",
      });
    } finally {
      stopProgress();
    }
  };

  // 取得してきたタスクリストを整形、こちらをフィルタリングなどの加工に使用する。
  let saveTaskList = Object.values(tasks);

  // 実際にフィルタリングなしのタスクリスト一覧の描画に使う変数、フィルタリングはこれと上記を入れ替える形で実装している。
  let taskList = Object.values(all_tasks);

  // CategoryでのFilter処理
  const task_category_filter = (category_name) => {
    // フィルタリングしているかの判断フラグを初期化(Falseにする)
    Unfiltered();
    // フィルタリングしているかの判断フラグをTrueに
    Apply_Category_filter();
    // stateを初期化
    resetTasks();
    const category_item = category_name;
    // フィルタリング
    const filtered_tasks = saveTaskList.filter(
      (task) => task.category === category_item
    );
    // stateにセット
    setAllTasks(filtered_tasks);
  };

  // is_CompletedがTrueのタスクをFilterする
  const task_is_Completed_filter = () => {
    Unfiltered();
    Apply_is_Completed_filter();
    resetTasks();
    const filtered_tasks = saveTaskList.filter(
      (task) => task.is_Completed === true
    );
    setAllTasks(filtered_tasks);
  };

  // is_CompletedがFalseのタスクをFilterする
  const task_is_unCompleted_filter = () => {
    Apply_is_Completed_filter();
    resetTasks();
    const filtered_tasks = saveTaskList.filter(
      (task) => task.is_Completed === false
    );
    setAllTasks(filtered_tasks);
  };

  // Filterリセット
  const task_filter_reset = () => {
    Unfiltered();
    resetTasks();
    setAllTasks(saveTaskList);
  };

  // いいね
  const reactionPost = async (task_id) => {
    const id = task_id;
    const data = {
      id: id,
      // 'action': action
    };
    const response = await axios.post(postReactionUrl, data);
    pullTaskList();
  };

# いいねを管理するView、中間モデルを使うのでモデルに依存しないAPIViewを使う。今回は関数ベースのそれ。
@api_view(['POST'])
@permission_classes([
    permissions.IsAuthenticatedOrReadOnly, IsOwnerOrReadOnly])
def reaction_view(request, *args, **kwargs):
    """
    id is required.
    Action Option are: Like, Unlike
    """
    serializer = ReactionSerializer(data=request.data)
    pagination_class = ReactionPagination
    User = request.user
    if serializer.is_valid(raise_exception=True):
        data = serializer.validated_data
        task_id = data.get("id")
        # 該当タスク抽出
        queryset = Todo.objects.filter(id=task_id)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset.exists():
            return Response({}, status=404)
        # 取得してきたものをインスタンス化
        obj = queryset.first()
        # すでにいいね済みだった場合、いいねを取り消す
        if User in obj.reaction_obj.all():
            obj.reaction_obj.remove(request.user)
            like_sum = obj.reaction_obj.count()
            return Response(like_sum, status=200)
        # いいね処理
        else:
            obj.reaction_obj.add(request.user)
            like_sum = obj.reaction_obj.count()
            return Response(like_sum, status=200)

    return Response({"message": "Action Success"}, status=200)

@api_view(['POST'])
@permission_classes([
    permissions.IsAuthenticatedOrReadOnly])
def groupJoin_view(request, *args, **kwargs):
    """
    id is required.
    """
    serializer = UserGroupJoin_or_ReaveRequestSerializer(data=request.data)
    # pagination_class = ReactionPagination
    User = request.user
    if serializer.is_valid(raise_exception=True):
        data = serializer.validated_data
        group_id = data.get("id")
        # 該当グループ抽出
        queryset = UserGroup.objects.filter(id=group_id)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset.exists():
            return Response({}, status=404)
        # 取得してきたものをインスタンス化
        obj = queryset.first()
        # すでに追加済みだった場合、エラー
        if User in obj.members.all():
            return Response({}, status=404)
        # 追加処理
        else:
            obj.members.add(request.user)
            return Response("Request Success", status=200)

@api_view(['PATCH'])
@permission_classes([
    permissions.IsAuthenticatedOrReadOnly])
def groupLeave_view(request, *args, **kwargs):
    """
    id is required.
    """
    serializer = UserGroupJoin_or_ReaveRequestSerializer(data=request.data)
    # pagination_class = ReactionPagination
    User = request.user
    if serializer.is_valid(raise_exception=True):
        data = serializer.validated_data
        group_id = data.get("id")
        # action = data.get("action")
        # 該当タスク抽出
        queryset = UserGroup.objects.filter(id=group_id)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset.exists():
            return Response({}, status=404)
        # 取得してきたものをインスタンス化
        obj = queryset.first()
        # 削除処理
        if User in obj.members.all():
            obj.members.remove(request.user)
            return Response("Request Success", status=200)
        # ユーザーが存在しなかった場合エラー
        else:
            return Response({}, status=404)

# タスクの編集・削除のためのView
class TodoDetailAPIView(RetrieveUpdateDestroyAPIView):

    queryset = Todo.objects.all()
    serializer_class = TodoSerializer
    permission_classes = [
        permissions.IsAuthenticatedOrReadOnly, IsOwnerOrReadOnly]

    # パラメータ取得
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)

    # PATCHのリクエストが来たときに以下の処理を追加する
    def patch(self, request, *args, **kwargs):
        data = request.data
        # 取得したパラメーターからタスクのpkを抽出
        task_id = self.kwargs['pk']
        # リクエストからタスクの完了・未完了フラグを取得
        is_Completed = data.get("is_Completed")
        # タスクをフィルタリング
        queryset = Todo.objects.filter(id=task_id)
        # インスタンス化
        obj = queryset.first()
        # Falseの場合はclose_datetime(タスクの完了日)をnullにする
        if(is_Completed == False):
            obj.close_datetime = None
            obj.save()
            return self.partial_update(request, *args, **kwargs)
        # Trueなら完了日を登録
        else:
            obj.close_datetime = datetime.datetime.now()
            obj.save()
            return self.partial_update(request, *args, **kwargs)

@api_view(['POST'])
@permission_classes([
    permissions.IsAuthenticatedOrReadOnly])
def memberAdd_view(request, *args, **kwargs):
    """
    id and username is required.
    """
    serializer = MemberRequestSerializer(data=request.data)
    # pagination_class = ReactionPagination
    if serializer.is_valid(raise_exception=True):
        data = serializer.validated_data
        group_id = data.get("id")
        member_name = data.get("username")
        # 該当グループ抽出
        queryset = UserGroup.objects.filter(id=group_id)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset.exists():
            return Response("該当するグループがありません", status=404)
        # 該当ユーザー抽出
        queryset2 = CustomUser.objects.filter(username=member_name)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset2.exists():
            return Response(data, status=404)
        # 取得してきたものをインスタンス化
        obj = queryset.first()
        Member = queryset2.first()
        # すでに追加済みだった場合、エラー
        if Member in obj.members.all():
            return Response({}, status=404)
        # 追加処理
        else:
            obj.members.add(Member)
            return Response("Request Success", status=200)

@api_view(['PATCH'])
@permission_classes([
    permissions.IsAuthenticatedOrReadOnly])
def memberDelete_view(request, *args, **kwargs):
    """
    id and username is required.
    """
    serializer = MemberRequestSerializer(data=request.data)
    # pagination_class = ReactionPagination
    if serializer.is_valid(raise_exception=True):
        data = serializer.validated_data
        group_id = data.get("id")
        member_name = data.get("username")
        # 該当グループ抽出
        queryset = UserGroup.objects.filter(id=group_id)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset.exists():
            return Response("該当するグループがありません", status=404)
        # 該当ユーザー抽出
        queryset2 = User.objects.filter(username=member_name)
        # クエリセットの実行結果でタスクが取得できなかった場合
        if not queryset2.exists():
            return Response(data, status=404)
        # 取得してきたものをインスタンス化
        obj = queryset.first()
        Member = queryset2.first()
        # すでに追加済みだった場合、エラー
        if Member in obj.members.all():
            obj.members.remove(Member)
            return Response("Request Success", status=200)
        # Memberが存在しない場合、エラー
        else:
            return Response("このグループにこのユーザーは存在しません", status=404)

class UserGroup(models.Model):
    members = models.ManyToManyField(
        CustomUser, through="UserGroupRelation", blank=True)
    group_name = models.CharField(max_length=255, blank=True, null=True)
    owner = models.ForeignKey(
        CustomUser, verbose_name="ユーザー", related_name="GroupOwner", blank=True, null=True, on_delete=models.CASCADE)
    detail = models.CharField(
        max_length=60,  blank=True, verbose_name="Group_Detail")

    class Meta:
        db_table = "UserGroup"
        verbose_name = _("UserGroup")
        verbose_name_plural = _("グループ")

    def __str__(self):
        return self.group_name


class UserGroupRelation(models.Model):
    customuser_obj = models.ForeignKey(
        CustomUser, verbose_name="ユーザー", blank=True, on_delete=models.CASCADE)
    UserGroup_obj = models.ForeignKey(
        UserGroup, verbose_name="グループ", blank=True, on_delete=models.CASCADE)
    joined_date = models.DateField(default=datetime.now)
    detail = models.CharField(
        max_length=64,  blank=True, verbose_name="What`s Group")

    class Meta:
        db_table = "UserGroupRelation"
        verbose_name = _("UserGroupRelation")
        verbose_name_plural = _("グループ詳細")

# M2MのMembersフィールドを抽出したい


class MemberSerializer(serializers.Serializer):
    username = serializers.ReadOnlyField(
        source="customuser_obj.username")

    class Meta:
        model = UserGroupRelation
        fields = ['username']

# グループのシリアライザ


class UserGroupSerializer(serializers.HyperlinkedModelSerializer):
    url = serializers.HyperlinkedIdentityField(
        view_name='UserGroup_detail', format='html')
    owner = serializers.ReadOnlyField(source='owner.username')
    members = MemberSerializer(source='usergrouprelation_set', many=True)

    class Meta:
        model = UserGroup
        fields = ['url', 'id', 'members', 'group_name', 'owner']

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <title>Mix up Our Todo</title>
</head>

<body>
    <!-- ここにReactが入る -->
    <div id="root">
        <!-- React -->
    </div>
</body>
<!-- Reactでbuildしたものを読み込む -->
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>

</html>

from django.urls import re_path ,path
from . import views

# Reactのルーティングをそのままこちらに持ってきて紐付けている。
# re_pathの部分はReactにおいて:idや:usernameを使っている部分の表現がパスコンバーターではできないのでこちらを使っています。
urlpatterns = [
    path('', views.index, name='index_page'),
    path('login/', views.index, name='other_page'),
    path('signup/', views.index, name='other_page'),
    path('logout/', views.index, name='other_page'),
    path('todo/top/', views.index, name='other_page'),
    path('todo/list/', views.index, name='other_page'),
    re_path(r'^todo/list/[^/]+/$', views.index, name='other_page'),
    re_path(r'^todo/delete/[0-9]+/$', views.index, name='other_page'),
    re_path(r'^todo/edit/[0-9]+/$', views.index, name='other_page'),
    re_path(r'^todo/timer/[0-9]+/$', views.index, name='other_page'),
    path('user_info/', views.index, name='other_page'),
    path('password_change/', views.index, name='other_page'),
    path('unsubscribe/', views.index, name='other_page'),
    path('user_group/top/', views.index, name='other_page'),
    re_path(r'^user_group/edit/[0-9]+/$', views.index, name='other_page'),
    re_path(r'^user_group/delete/[0-9]+/$', views.index, name='other_page'),
    re_path(r'^user_group/[0-9]+/members/$', views.index, name='other_page'),
    path('user_group/joined/', views.index, name='other_page'),
    re_path(r'^user_group/list/[^/]+/$', views.index, name='other_page'),
]

import React from "react";
import { Switch, Route, Redirect } from "react-router-dom";
// カスタムルーティング
import PrivateRoute from "./Route/PrivateRoute";
import LoginRoute from "./Route/LoginRoute";
import LogoutRoute from "./Route/LogoutRoute";
// ランディング
import TopPage from "./UserComponents/TopPage";
// ユーザーに関わるルーティング
import User from "./UserComponents/UserPage";
import ChangePassword from "./UserComponents/ChangePassword";
import Unsubscribe from "./UserComponents/Unsubscribe";
import Login from "./UserComponents/LoginFormContainer";
import Logout from "./UserComponents/LogoutForm";
import Register from "./UserComponents/RegisterFormLayout";
// グループに関わるルーティング
import Group from "./GroupComponents/Group";
import GroupJoined from "./GroupComponents/GroupJoined";
import GroupEdit from "./GroupComponents/GroupEdit";
import Group_Public from "./GroupComponents/GroupPublic";
import Group_Detail_Public from "./GroupComponents/GroupDetail_Readonly";
// Todoに関わるルーティング
import Todo from "./TodoComponents/todo";
import Todo_Public from "./TodoComponents/todo_Public";
import TodoDelete from "./TodoComponents/TodoDelete";
import TodoEdit from "./TodoComponents/TodoEdit";
import TaskTimer from "./TodoComponents/TaskTimer";
// 404 error
import NoMatch from "./UserComponents/Nomatch.js"

const MainContent = () => (
  <Switch>
    <Route path="/" exact>
      <TopPage />
    </Route>
    <LoginRoute path="/login" component={Login} />
    <LoginRoute path="/signup" component={Register} />
    <LogoutRoute path="/logout" component={Logout} />
    <PrivateRoute path="/todo/top" component={Todo} />
    <PrivateRoute path="/todo/list/:username" component={Todo_Public} />
    <PrivateRoute path="/todo/delete/:id" component={TodoDelete} />
    <PrivateRoute path="/todo/edit/:id" component={TodoEdit} />
    <PrivateRoute path="/todo/timer/:id" component={TaskTimer} />
    <PrivateRoute path="/user_info" component={User} />
    <PrivateRoute path="/password_change" component={ChangePassword} />
    <PrivateRoute path="/unsubscribe" component={Unsubscribe} />
    <PrivateRoute path="/user_group/top" component={Group} />
    <PrivateRoute path="/user_group/joined" component={GroupJoined} />
    <PrivateRoute path="/user_group/edit/:id" component={GroupEdit} />
    <PrivateRoute path="/user_group/list/:username" component={Group_Public} />
    <PrivateRoute
      path="/user_group/:id/members"
      component={Group_Detail_Public}
    />
    <Route component={NoMatch}></Route>
    {/* <Redirect to="/" /> */}
  </Switch>
);

export default MainContent;