diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx index 67fe574c..658e10ea 100644 --- a/src/app/(withAuth)/courses/[courseId]/page.tsx +++ b/src/app/(withAuth)/courses/[courseId]/page.tsx @@ -15,15 +15,22 @@ import { } from '@chakra-ui/react'; import type { NextPage } from 'next'; import NextLink from 'next/link'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { courseIdToProgramIdLists, languageIds, programIdToName } from '../../../../problems/problemData'; +import { getLanguageIdFromSessionStorage, setLanguageIdToSessionStorage } from '../../../lib/SessionStorage'; const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => { - const [selectedLanguageId, setSelectedLanguageId] = useState('java'); + const [selectedLanguageId, setSelectedLanguageId] = useState(''); + + useEffect(() => { + setSelectedLanguageId(getLanguageIdFromSessionStorage()); + }, []); const handleSelectLanguage = (event: React.ChangeEvent): void => { - setSelectedLanguageId(event.target.value); + const inputValue = event.target.value; + setLanguageIdToSessionStorage(inputValue); + setSelectedLanguageId(inputValue); }; return ( diff --git a/src/app/(withAuth)/problems/[problemId]/page.tsx b/src/app/(withAuth)/problems/[problemId]/page.tsx index 237e3593..6883f20d 100644 --- a/src/app/(withAuth)/problems/[problemId]/page.tsx +++ b/src/app/(withAuth)/problems/[problemId]/page.tsx @@ -2,18 +2,23 @@ import { Box, Button, Flex, HStack, Heading, VStack } from '@chakra-ui/react'; import type { NextPage } from 'next'; +import { useEffect, useState } from 'react'; import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter'; import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics'; import { programIdToName, generateProgram, getDescription } from '../../../../problems/problemData'; +import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage'; const GRID_COLUMNS = 12; const GRID_ROWS = 8; const GRID_SIZE = 40; const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) => { - // TODO: 一旦Java固定 言語選択機能実装時に変更する - const programmingLanguageId = 'java'; + const [selectedLanguageId, setSelectedLanguageId] = useState(''); + + useEffect(() => { + setSelectedLanguageId(getLanguageIdFromSessionStorage()); + }, []); return (
@@ -31,8 +36,8 @@ const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) => {/* 画面に収まる高さに設定 */} diff --git a/src/app/lib/SessionStorage.ts b/src/app/lib/SessionStorage.ts new file mode 100644 index 00000000..e3b6f824 --- /dev/null +++ b/src/app/lib/SessionStorage.ts @@ -0,0 +1,10 @@ +const selectedLanguageIdKey = 'selectedLanguageId'; + +export const setLanguageIdToSessionStorage = (value: string): void => { + sessionStorage.setItem(selectedLanguageIdKey, value); +}; + +export const getLanguageIdFromSessionStorage = (): string => { + // デフォルトはJava + return sessionStorage.getItem(selectedLanguageIdKey) || 'java'; +}; diff --git a/src/problems/problemData.ts b/src/problems/problemData.ts index 70a195d5..87d9a5fc 100644 --- a/src/problems/problemData.ts +++ b/src/problems/problemData.ts @@ -31,10 +31,7 @@ export const courseIdToProgramIdLists: Record = { export function generateProgram(programId: ProgramId, languageId: LanguageId): string { // TODO(exKAZUu): 問題IDに紐づくプログラム(テンプレート)を取得して、乱数を使って具体的なプログラムを生成する。 - return ( - `const turtle = new Turtle(); -turtle.moveForward(5);` || programIdToLanguageIdToProgram[programId][languageId] - ); + return programIdToLanguageIdToProgram[programId][languageId]; } export function getDescription(programId: ProgramId): string {