From 8836a53921971cae3bb075a3c2bda0c6a0c491c7 Mon Sep 17 00:00:00 2001
From: naoki1510 <15890587+naoki1510@users.noreply.github.com>
Date: Thu, 7 Mar 2024 22:10:49 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E6=AD=A3=E7=AD=94=E3=81=A8=E8=AA=A4?=
 =?UTF-8?q?=E7=AD=94=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/app/controllers/questions_controller.rb   |  7 +---
 api/app/views/choices/_choice.json.jbuilder   |  4 +--
 client/src/api/choice.ts                      |  3 ++
 .../src/components/answers/CreateAnswer.tsx   | 34 +++++++++++--------
 client/src/components/common/Header.tsx       | 22 +++++++++---
 .../src/components/questions/QuestionCard.tsx | 23 ++++++++-----
 client/src/components/users/CreateUser.tsx    |  9 +++--
 client/src/recoil/localStorage.ts             |  1 +
 client/src/recoil/passwordState.ts            |  6 ++--
 client/src/recoil/userIdState.ts              |  6 ++++
 10 files changed, 74 insertions(+), 41 deletions(-)
 create mode 100644 client/src/recoil/userIdState.ts

diff --git a/api/app/controllers/questions_controller.rb b/api/app/controllers/questions_controller.rb
index b927a964..776f4105 100644
--- a/api/app/controllers/questions_controller.rb
+++ b/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_show_correct, only: %i[ index show start end ]
 
   # GET /questions
   def index
@@ -73,9 +73,4 @@ def question_params
     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?
-    end
 end
diff --git a/api/app/views/choices/_choice.json.jbuilder b/api/app/views/choices/_choice.json.jbuilder
index 12751b60..5caa0bfb 100644
--- a/api/app/views/choices/_choice.json.jbuilder
+++ b/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
\ No newline at end of file
diff --git a/client/src/api/choice.ts b/client/src/api/choice.ts
index f3ccff4d..a404f590 100644
--- a/client/src/api/choice.ts
+++ b/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: [],
   };
 };
 
diff --git a/client/src/components/answers/CreateAnswer.tsx b/client/src/components/answers/CreateAnswer.tsx
index 677b9bde..83c8094e 100644
--- a/client/src/components/answers/CreateAnswer.tsx
+++ b/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, fetchUser } = 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,11 +94,13 @@ 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>
@@ -111,7 +116,6 @@ export default memo(function CreateAnswer() {
           ))
         ) : lastQuestions?.length ? (
           <>
-            <Text>回答済みの問題</Text>
             {lastQuestions.map((question) => (
               <VStack key={question.id} alignItems={"stretch"}>
                 <QuestionCard question={question} showChoices />
diff --git a/client/src/components/common/Header.tsx b/client/src/components/common/Header.tsx
index b1c012ed..985fc999 100644
--- a/client/src/components/common/Header.tsx
+++ b/client/src/components/common/Header.tsx
@@ -9,6 +9,7 @@ import { useAuthorize } from "./Authorize";
 type MenuData = {
   label: string;
   href: string;
+  admin?: boolean;
 };
 
 const menus: MenuData[] = [
@@ -16,13 +17,20 @@ 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
diff --git a/client/src/components/questions/QuestionCard.tsx b/client/src/components/questions/QuestionCard.tsx
index 0f238800..9cf1664d 100644
--- a/client/src/components/questions/QuestionCard.tsx
+++ b/client/src/components/questions/QuestionCard.tsx
@@ -13,15 +13,19 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { Question, endQuestion, startQuestion } from "api/questions";
-import { memo, useCallback } from "react";
+import React, { memo, useCallback } from "react";
 import {
   IoCaretForward,
-  IoCheckmarkCircle,
-  IoCloseCircleOutline,
+  IoCheckmark,
+  IoChevronForward,
+  IoClose,
   IoPlayCircle,
+  IoRemove,
   IoStopCircle,
 } from "react-icons/io5";
 import { Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import userIdState from "recoil/userIdState";
 
 export type ShowQuestionProps = {
   question: Question;
@@ -34,6 +38,7 @@ export type ShowQuestionProps = {
 export default memo(function QuestionCard(props: ShowQuestionProps) {
   const { question, setQuestion, href, showChoices, showStartButton } = props;
   const { title, image, point } = question;
+  const userId = useRecoilValue(userIdState);
 
   const handleStart = useCallback(() => {
     if (question.id !== undefined)
@@ -70,12 +75,14 @@ export default memo(function QuestionCard(props: ShowQuestionProps) {
           <List>
             {question.choices.map((choice) => (
               <ListItem key={choice.id}>
-                {choice.is_correct === undefined ? (
-                  <ListIcon as={IoCaretForward} color={"gray.500"} />
-                ) : choice.is_correct ? (
-                  <ListIcon as={IoCheckmarkCircle} color={"teal.500"} />
+                {choice.is_correct ? (
+                  <ListIcon as={IoCheckmark} color={"teal.500"} />
+                ) : choice.answers.some(
+                    (answer) => answer.user_id === userId
+                  ) ? (
+                  <ListIcon as={IoClose} color={"red.500"} />
                 ) : (
-                  <ListIcon as={IoCloseCircleOutline} color={"red.500"} />
+                  <ListIcon as={IoRemove} color={"gray.500"} />
                 )}
                 {choice.description}
               </ListItem>
diff --git a/client/src/components/users/CreateUser.tsx b/client/src/components/users/CreateUser.tsx
index 107d4b4b..837b5974 100644
--- a/client/src/components/users/CreateUser.tsx
+++ b/client/src/components/users/CreateUser.tsx
@@ -13,18 +13,21 @@ import { FormEvent, memo, useCallback, useEffect, useState } from "react";
 import { createUser, useUsers } from "api/users";
 import { useNavigate } from "react-router-dom";
 import locations from "locations";
+import { useRecoilState } from "recoil";
+import userIdState from "recoil/userIdState";
 
 export default memo(function CreateUser() {
   const navigate = useNavigate();
   const [name, setName] = useState("");
   const { users } = useUsers();
+  const [userId, setUserID] = useRecoilState(userIdState);
 
   const handleCreateUser = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
       createUser({ name })
         .then((user) => {
-          localStorage.setItem("userId", String(user.id));
+          setUserID(user.id);
           navigate(locations.createAnswer);
         })
         .catch(console.error);
@@ -33,7 +36,7 @@ export default memo(function CreateUser() {
   );
 
   useEffect(() => {
-    if (localStorage.getItem("userId")) {
+    if (userId !== undefined) {
       navigate(locations.createAnswer);
     }
   }, [navigate]);
@@ -68,7 +71,7 @@ export default memo(function CreateUser() {
           <Button
             key={user.id}
             onClick={() => {
-              localStorage.setItem("userId", String(user.id));
+              setUserID(user.id);
               navigate(locations.createAnswer);
             }}
             colorScheme="teal"
diff --git a/client/src/recoil/localStorage.ts b/client/src/recoil/localStorage.ts
index c88b0cbb..3be95916 100644
--- a/client/src/recoil/localStorage.ts
+++ b/client/src/recoil/localStorage.ts
@@ -2,6 +2,7 @@ import { AtomEffect, AtomOptions } from "recoil";
 
 export const storageKeys = {
   password: "password",
+  userId: "userId",
 };
 
 export const getSavedValue = <T>(key: string, defaultValue: T) => {
diff --git a/client/src/recoil/passwordState.ts b/client/src/recoil/passwordState.ts
index 58d595e8..3ce74530 100644
--- a/client/src/recoil/passwordState.ts
+++ b/client/src/recoil/passwordState.ts
@@ -1,4 +1,6 @@
 import { atom } from "recoil";
-import { atomOptionsWithLocalStorage } from "recoil/localStorage";
+import { atomOptionsWithLocalStorage, storageKeys } from "recoil/localStorage";
 
-export default atom<string>(atomOptionsWithLocalStorage("password", ""));
+export default atom<string>(
+  atomOptionsWithLocalStorage(storageKeys.password, "")
+);
diff --git a/client/src/recoil/userIdState.ts b/client/src/recoil/userIdState.ts
new file mode 100644
index 00000000..4e9ff09a
--- /dev/null
+++ b/client/src/recoil/userIdState.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+import { atomOptionsWithLocalStorage, storageKeys } from "./localStorage";
+
+export default atom(
+  atomOptionsWithLocalStorage<number | undefined>(storageKeys.userId, undefined)
+);

From d47a79879a2a196fafc754051586e60cb16d07bc Mon Sep 17 00:00:00 2001
From: naoki1510 <15890587+naoki1510@users.noreply.github.com>
Date: Thu, 7 Mar 2024 23:30:23 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=AA=E3=82=BB=E3=83=83=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85=E3=81=A8=E3=81=9D=E3=81=AE=E4=BB=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/app/controllers/questions_controller.rb   | 17 ++++-
 api/app/models/question.rb                    |  8 ++-
 .../views/questions/_question.json.jbuilder   |  1 +
 api/config/routes.rb                          |  1 +
 client/src/api/questions.ts                   | 14 ++++
 .../src/components/answers/CreateAnswer.tsx   | 42 ++++++-----
 .../components/questions/ListQuestions.tsx    |  4 +-
 .../src/components/questions/QuestionCard.tsx | 69 ++++++++++++++++---
 .../src/components/questions/ShowQuestion.tsx | 31 ++-------
 9 files changed, 125 insertions(+), 62 deletions(-)

diff --git a/api/app/controllers/questions_controller.rb b/api/app/controllers/questions_controller.rb
index 776f4105..a0abc90d 100644
--- a/api/app/controllers/questions_controller.rb
+++ b/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, 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
@@ -73,4 +79,11 @@ def question_params
     def set_show_correct
       @is_show_correct = params[:show_correct].present?
     end
+
+    def reset_question
+      @question.update!(started_at: nil, ended_at: nil)
+      @question.choices.each do |choice|
+        choice.answers.destroy_all
+      end
+    end
 end
diff --git a/api/app/models/question.rb b/api/app/models/question.rb
index 1d25187a..1e876d60 100644
--- a/api/app/models/question.rb
+++ b/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
\ No newline at end of file
diff --git a/api/app/views/questions/_question.json.jbuilder b/api/app/views/questions/_question.json.jbuilder
index 2819edca..01376ba2 100644
--- a/api/app/views/questions/_question.json.jbuilder
+++ b/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
diff --git a/api/config/routes.rb b/api/config/routes.rb
index 6c8421b0..951cf119 100644
--- a/api/config/routes.rb
+++ b/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
diff --git a/client/src/api/questions.ts b/client/src/api/questions.ts
index b149503f..12137f9c 100644
--- a/client/src/api/questions.ts
+++ b/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);
diff --git a/client/src/components/answers/CreateAnswer.tsx b/client/src/components/answers/CreateAnswer.tsx
index 83c8094e..3c879c6e 100644
--- a/client/src/components/answers/CreateAnswer.tsx
+++ b/client/src/components/answers/CreateAnswer.tsx
@@ -40,7 +40,7 @@ export default memo(function CreateAnswer() {
   );
   const { questions: lastQuestions, fetchQuestions: fetchLastQuestions } =
     useQuestions(new URLSearchParams({ last: "true", show_correct: "true" }));
-  const { user, fetchUser } = useUser(userId || "");
+  const { user } = useUser(userId || "");
 
   useEffect(() => {
     if (!questions) return;
@@ -104,27 +104,25 @@ export default memo(function CreateAnswer() {
           </HStack>
         </CardBody>
       </Card>
-      {questions ? (
-        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>
-            ))}
-          </>
-        ) : (
-          <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 />
       )}
diff --git a/client/src/components/questions/ListQuestions.tsx b/client/src/components/questions/ListQuestions.tsx
index 0cd42c08..4d1a4ea1 100644
--- a/client/src/components/questions/ListQuestions.tsx
+++ b/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 />
diff --git a/client/src/components/questions/QuestionCard.tsx b/client/src/components/questions/QuestionCard.tsx
index 9cf1664d..3a7ae10a 100644
--- a/client/src/components/questions/QuestionCard.tsx
+++ b/client/src/components/questions/QuestionCard.tsx
@@ -12,18 +12,25 @@ import {
   ListItem,
   Text,
 } from "@chakra-ui/react";
-import { Question, endQuestion, startQuestion } from "api/questions";
-import React, { memo, useCallback } from "react";
 import {
-  IoCaretForward,
+  Question,
+  deleteQuestion,
+  endQuestion,
+  resetQuestion,
+  startQuestion,
+} from "api/questions";
+import locations from "locations";
+import { memo, useCallback } from "react";
+import {
   IoCheckmark,
-  IoChevronForward,
   IoClose,
+  IoPencil,
   IoPlayCircle,
   IoRemove,
   IoStopCircle,
+  IoTrash,
 } from "react-icons/io5";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import userIdState from "recoil/userIdState";
 
@@ -31,14 +38,15 @@ export type ShowQuestionProps = {
   question: Question;
   setQuestion?: (question: Question) => void;
   showChoices?: boolean;
-  showStartButton?: boolean;
+  showActions?: boolean;
   href?: string;
 };
 
 export default memo(function QuestionCard(props: ShowQuestionProps) {
-  const { question, setQuestion, href, showChoices, showStartButton } = props;
+  const { question, setQuestion, href, showChoices, showActions } = props;
   const { title, image, point } = question;
   const userId = useRecoilValue(userIdState);
+  const navigate = useNavigate();
 
   const handleStart = useCallback(() => {
     if (question.id !== undefined)
@@ -56,6 +64,21 @@ export default memo(function QuestionCard(props: ShowQuestionProps) {
       ).then(setQuestion);
   }, [question.id]);
 
+  const handleDelete = useCallback(() => {
+    if (question.id !== undefined)
+      deleteQuestion(question.id).then(() => {
+        navigate(locations.listQuestions);
+      });
+  }, [question.id]);
+
+  const handleReset = useCallback(() => {
+    if (question.id !== undefined)
+      resetQuestion(
+        question.id,
+        new URLSearchParams({ show_correct: "true" })
+      ).then(setQuestion);
+  }, [question.id]);
+
   return (
     <Card>
       <CardBody
@@ -90,8 +113,8 @@ export default memo(function QuestionCard(props: ShowQuestionProps) {
           </List>
         )}
       </CardBody>
-      {showStartButton && (
-        <CardFooter gap={4} alignItems={"center"}>
+      {showActions && (
+        <CardFooter gap={2} alignItems={"center"}>
           {question.until_end ? (
             <>
               <Button
@@ -112,8 +135,36 @@ export default memo(function QuestionCard(props: ShowQuestionProps) {
               >
                 開始
               </Button>
+              {question.is_finished && (
+                <Button
+                  colorScheme="red"
+                  onClick={handleReset}
+                  leftIcon={<IoClose />}
+                  variant={"outline"}
+                >
+                  リセット
+                </Button>
+              )}
             </>
           )}
+          <Button
+            as={Link}
+            to={locations.updateQuestion.replace(":id", String(question.id))}
+            leftIcon={<IoPencil />}
+            variant={"outline"}
+            colorScheme="blue"
+            ml={"auto"}
+          >
+            編集
+          </Button>
+          <Button
+            onClick={handleDelete}
+            colorScheme="red"
+            leftIcon={<IoTrash />}
+            variant={"outline"}
+          >
+            削除
+          </Button>
         </CardFooter>
       )}
     </Card>
diff --git a/client/src/components/questions/ShowQuestion.tsx b/client/src/components/questions/ShowQuestion.tsx
index 1f85a9bd..3316e1f0 100644
--- a/client/src/components/questions/ShowQuestion.tsx
+++ b/client/src/components/questions/ShowQuestion.tsx
@@ -1,11 +1,11 @@
-import { deleteQuestion, useQuestion } from "api/questions";
+import { Button, HStack, VStack } from "@chakra-ui/react";
+import { useQuestion } from "api/questions";
 import Loading from "components/common/Loading";
 import locations from "locations";
-import { memo, useCallback } from "react";
+import { memo } from "react";
+import { IoChevronBack } from "react-icons/io5";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import QuestionCard from "./QuestionCard";
-import { Button, HStack, List, VStack } from "@chakra-ui/react";
-import { IoChevronBack, IoPencil, IoTrash } from "react-icons/io5";
 
 export default memo(function ShowQuestion() {
   const navigate = useNavigate();
@@ -16,16 +16,10 @@ export default memo(function ShowQuestion() {
   }
 
   const { question, setQuestion } = useQuestion(
-    Number(id),
+    id,
     new URLSearchParams({ show_correct: "true" })
   );
 
-  const handleDelete = useCallback(() => {
-    deleteQuestion(id).then(() => {
-      navigate(locations.listQuestions);
-    });
-  }, []);
-
   return question ? (
     <VStack alignItems={"stretch"} gap={4}>
       <QuestionCard
@@ -33,7 +27,7 @@ export default memo(function ShowQuestion() {
         setQuestion={setQuestion}
         href={locations.updateQuestion.replace(":id", id)}
         showChoices
-        showStartButton
+        showActions
       />
       <HStack>
         <Button
@@ -44,20 +38,7 @@ export default memo(function ShowQuestion() {
         >
           戻る
         </Button>
-        <Button
-          as={Link}
-          to={locations.updateQuestion.replace(":id", String(question.id))}
-          leftIcon={<IoPencil />}
-          colorScheme="blue"
-          ml={"auto"}
-        >
-          編集
-        </Button>
-        <Button onClick={handleDelete} colorScheme="red" leftIcon={<IoTrash />}>
-          削除
-        </Button>
       </HStack>
-      <List>{}</List>
     </VStack>
   ) : (
     <Loading />