正答と誤答の表示を改善

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

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

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/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 />

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/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>

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"

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) => {

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, "")
+);

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)
+);