Merge pull request #2 from naoki1510/develop

Release

api/app/controllers/questions_controller.rb

@@ -1,6 +1,6 @@
 class QuestionsController < ApplicationController
-  before_action :set_question, only: %i[ show update destroy start end ]
-  before_action :set_show_correct, :set_show_answers, only: %i[ index show start end ]
+  before_action :set_question, only: %i[ show update destroy start end reset ]
+  before_action :set_show_correct, only: %i[ index show start end reset ]
 
   # GET /questions
   def index
@@ -49,6 +49,7 @@ def destroy
   end
 
   def start
+    reset_question
     @question.update!(started_at: Time.current, ended_at: Time.current + 30.seconds)
     render :show
   end
@@ -58,6 +59,11 @@ def end
     render :show
   end
 
+  def reset
+    reset_question
+    render :show
+  end
+
   private
     # Use callbacks to share common setup or constraints between actions.
     def set_question
@@ -74,8 +80,10 @@ def set_show_correct
       @is_show_correct = params[:show_correct].present?
     end
 
-    # Whether to display answers
-    def set_show_answers
-      @is_show_answers = params[:show_answers].present?
+    def reset_question
+      @question.update!(started_at: nil, ended_at: nil)
+      @question.choices.each do |choice|
+        choice.answers.destroy_all
+      end
     end
 end

api/app/models/question.rb

@@ -5,11 +5,15 @@ class Question < ApplicationRecord
 
   scope :ordered, -> { order(display_order: :asc) }
   scope :active, -> { where("started_at <= ? AND ? < ended_at", Time.current, Time.current) }
-  scope :finished, -> { where("ended_at <= ?", Time.current) }
-  scope :last_finished, -> { finished.order(ended_at: :desc).limit(1) }
+  scope :finished, -> { where("ended_at <= ?", Time.current).order(ended_at: :desc)}
+  scope :last_finished, -> { finished.limit(1) }
 
   def correct_answers
     answers.where(choice_id: correct_choices.ids)
   end
 
+  def finished?
+    ended_at.present? && ended_at <= Time.current
+  end
+
 end

api/app/views/choices/_choice.json.jbuilder

@@ -1,5 +1,5 @@
 json.extract! choice, :id, :title, :description, :image, :question_id
 json.is_correct choice.is_correct if @is_show_correct
-json.answer do
-  json.array! choice.answers, partial: 'answers/answer', as: :answer if @is_show_answers
+json.answers do
+  json.array! choice.answers, partial: 'answers/answer', as: :answer
 end

api/app/views/questions/_question.json.jbuilder

@@ -1,4 +1,5 @@
 json.extract! question, :id, :title, :image, :question_type, :point
+json.is_finished question.finished?
 json.choices do
   json.array! question.choices.ordered, partial: "choices/choice", as: :choice
 end

api/config/routes.rb

@@ -14,4 +14,5 @@
 
   get "questions/:id/start" => "questions#start"
   get "questions/:id/end" => "questions#end"
+  get "questions/:id/reset" => "questions#reset"
 end

client/src/api/choice.ts

@@ -1,5 +1,6 @@
 import { postHeaders } from "api/headers";
 import host from "api/host";
+import { Answer } from "./answer";
 
 export type Choice = {
   id?: number;
@@ -8,6 +9,7 @@ export type Choice = {
   image: string;
   display_order?: number;
   is_correct?: boolean;
+  answers: Answer[];
 };
 
 export const createEmptyChoice = (questionId?: number): Choice => {
@@ -16,6 +18,7 @@ export const createEmptyChoice = (questionId?: number): Choice => {
     description: "",
     image: "",
     is_correct: false,
+    answers: [],
   };
 };
 

client/src/api/questions.ts

@@ -12,6 +12,7 @@ export type Question = {
   point: number;
   choices: Choice[];
   until_end?: number;
+  is_finished: boolean;
 };
 
 export const createEmptyQuestion = (): Question => {
@@ -21,6 +22,7 @@ export const createEmptyQuestion = (): Question => {
     question_type: "single",
     point: 1,
     choices: [createEmptyChoice()],
+    is_finished: false,
   };
 };
 
@@ -110,6 +112,18 @@ export const endQuestion = (
   }).then((res) => res.json() as Promise<Question>);
 };
 
+export const resetQuestion = (
+  id: string | number,
+  params?: URLSearchParams,
+  controller?: AbortController
+) => {
+  return fetch(`${host}/questions/${id}/reset?${params}`, {
+    method: "GET",
+    headers: getHeaders,
+    signal: controller?.signal,
+  }).then((res) => res.json() as Promise<Question>);
+};
+
 export const useQuestions = (params?: URLSearchParams) => {
   const [questions, setQuestions] = useState<Question[]>();
   const [loading, setLoading] = useState<boolean>(false);

client/src/components/answers/CreateAnswer.tsx

@@ -1,12 +1,12 @@
 import {
   Box,
+  Button,
   Card,
   CardBody,
   HStack,
   Heading,
-  IconButton,
   Text,
-  VStack
+  VStack,
 } from "@chakra-ui/react";
 import { createAnswer } from "api/answer";
 import { Choice } from "api/choice";
@@ -18,14 +18,17 @@ import locations from "locations";
 import { memo, useCallback, useEffect, useState } from "react";
 import { IoExit } from "react-icons/io5";
 import { useNavigate } from "react-router-dom";
+import { useRecoilState } from "recoil";
+import userIdState from "recoil/userIdState";
 import AnswerForm from "./AnswerForm";
 
 let previousQuestionIds: number[] = [];
 
 export default memo(function CreateAnswer() {
   const navigate = useNavigate();
+  const [userId, setUserID] = useRecoilState(userIdState);
   useEffect(() => {
-    if (!localStorage.getItem("userId") === null) {
+    if (userId === undefined) {
       navigate(locations.createUser);
     }
   }, [navigate]);
@@ -37,24 +40,24 @@ export default memo(function CreateAnswer() {
   );
   const { questions: lastQuestions, fetchQuestions: fetchLastQuestions } =
     useQuestions(new URLSearchParams({ last: "true", show_correct: "true" }));
-  const { user, fetchUser } = useUser(localStorage.getItem("userId") || "");
+  const { user } = useUser(userId || "");
 
   useEffect(() => {
     if (!questions) return;
 
-    previousQuestionIds.forEach((id) => {
+    previousQuestionIds.map(async (id) => {
       if (questions.every((question) => question.id !== id)) {
-        Promise.all(
+        await Promise.all(
           selectedChoices
             .filter((choice) => choice.question_id === id)
             .map((choice) => {
-              if (choice.id && localStorage.getItem("userId"))
+              if (choice.id && userId)
                 return createAnswer({
                   choice_id: choice.id,
-                  user_id: Number(localStorage.getItem("userId")),
+                  user_id: userId,
                 });
             })
-        ).then(() => fetchUser());
+        );
         fetchLastQuestions();
       }
     });
@@ -74,7 +77,7 @@ export default memo(function CreateAnswer() {
   }, [fetchQuestions, questions]);
 
   const handleLogout = useCallback(() => {
-    localStorage.removeItem("userId");
+    setUserID(undefined);
     navigate(locations.createUser);
   }, [navigate]);
 
@@ -91,36 +94,35 @@ export default memo(function CreateAnswer() {
                 </Text>
               </Heading>
             </Box>
-            <IconButton
-              aria-label="logout"
-              icon={<IoExit />}
+            <Button
+              leftIcon={<IoExit />}
               onClick={handleLogout}
-            />
+              colorScheme="red"
+            >
+              ログアウト
+            </Button>
           </HStack>
         </CardBody>
       </Card>
-      {questions ? (
-        questions.length ? (
-          questions.map((question) => (
-            <AnswerForm
-              question={question}
-              key={question.id}
-              selectedChoices={selectedChoices}
-              setSelectedChoices={setSelectedChoices}
-            />
-          ))
-        ) : lastQuestions?.length ? (
-          <>
-            <Text>回答済みの問題</Text>
-            {lastQuestions.map((question) => (
-              <VStack key={question.id} alignItems={"stretch"}>
-                <QuestionCard question={question} showChoices />
-              </VStack>
-            ))}
-          </>
-        ) : (
-          <Text>現在回答を受け付けている問題はありません。</Text>
-        )
+      {questions?.length ? (
+        questions.map((question) => (
+          <AnswerForm
+            question={question}
+            key={question.id}
+            selectedChoices={selectedChoices}
+            setSelectedChoices={setSelectedChoices}
+          />
+        ))
+      ) : lastQuestions?.length ? (
+        <>
+          {lastQuestions.map((question) => (
+            <VStack key={question.id} alignItems={"stretch"}>
+              <QuestionCard question={question} showChoices />
+            </VStack>
+          ))}
+        </>
+      ) : questions && lastQuestions ? (
+        <Text>クイズが開始されるまでお待ちください。</Text>
       ) : (
         <Loading />
       )}

client/src/components/common/Header.tsx

@@ -9,20 +9,28 @@ import { useAuthorize } from "./Authorize";
 type MenuData = {
   label: string;
   href: string;
+  admin?: boolean;
 };
 
 const menus: MenuData[] = [
   {
     label: "Play",
     href: locations.createUser,
   },
+  {
+    label: "Admin",
+    href: locations.listQuestions,
+    admin: false,
+  },
   {
     label: "Questions",
     href: locations.listQuestions,
+    admin: true,
   },
   {
     label: "Users",
     href: locations.listQuestions,
+    admin: true,
   },
 ];
 
@@ -42,11 +50,15 @@ export default memo(function Header() {
         Quiz
       </Heading>
       <HStack divider={<Box w={"1px"} />} alignItems={"stretch"}>
-        {menus.map((menu) => (
-          <Button variant={"link"} key={menu.label} as={Link} to={menu.href}>
-            {menu.label}
-          </Button>
-        ))}
+        {menus
+          .filter(
+            (menu) => menu.admin === undefined || menu.admin === authorized
+          )
+          .map((menu) => (
+            <Button variant={"link"} key={menu.label} as={Link} to={menu.href}>
+              {menu.label}
+            </Button>
+          ))}
         {authorized && (
           <Button variant={"link"} onClick={handleLogout}>
             Exit

client/src/components/questions/ListQuestions.tsx

@@ -26,11 +26,11 @@ export default memo(function ListQuestions() {
               href={locations.showQuestion.replace(":id", String(question.id))}
               key={question.id}
               showChoices
-              showStartButton
+              showActions
             />
           ))
         ) : (
-          <Text>問題は存在しません。</Text>
+          <Text>問題がありません。</Text>
         )
       ) : (
         <Loading />