Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/add problem answer list #77

Merged
merged 2 commits into from
Jan 2, 2023
Merged

Feature/add problem answer list #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec0a855
add: 問題詳細ページで回答済み一覧が確認できるようになった
K-shir0 Jan 2, 2023
dd1bf20
add: 回答内容が閲覧できるように改善
K-shir0 Jan 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions hooks/answer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@ export const useAnswers = (id: string) => {

const {data, mutate} = useSWR(`problems/${id}/answers`, fetcher)

const getAnswer = (id: string): Answer | null => {
return data?.data?.answers.find((answer) => answer.id === id) ?? null
}

return {
answers: data?.data?.answers ?? [],
getAnswer,
mutate
}
}
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"eslint": "8.28.0",
"eslint-config-next": "^13.1.1",
"ky": "^0.33.0",
"luxon": "^3.2.0",
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand All @@ -29,6 +30,7 @@
"zenn-markdown-html": "^0.1.132"
},
"devDependencies": {
"@types/luxon": "^3.2.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
Expand Down
87 changes: 85 additions & 2 deletions pages/problems/[problemId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {useRouter} from "next/router";
import Error from "next/error";

import {useForm, Controller, SubmitHandler} from "react-hook-form";
import {DateTime} from "luxon";

import ICTSCNavBar from "../../components/Navbar";
import ICTSCCard from "../../components/Card";
Expand All @@ -13,13 +14,15 @@ import LoadingPage from "../../components/LoadingPage";
import {useApi} from "../../hooks/api";
import {useAuth} from "../../hooks/auth";
import {useProblems} from "../../hooks/problem";
import {useAnswers} from "../../hooks/answer";

type Inputs = {
answer: string;
}

const ProblemPage = () => {
const router = useRouter();
const {problemId} = router.query;

const {handleSubmit, control, watch, formState: {errors}} = useForm<Inputs>()
// answer のフォームを監視
Expand All @@ -30,12 +33,14 @@ const ProblemPage = () => {
const {getProblem, isLoading} = useProblems();
const [isPreview, setIsPreview] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedAnswerId, setSelectedAnswerId] = useState<string | null>(null);
const [status, setStatus] = useState<number | null>(null);


const {problemId} = router.query;
const problem = getProblem(problemId as string);

const {answers, getAnswer, mutate} = useAnswers(problem?.id as string);
const selectedAnswer = getAnswer(selectedAnswerId as string);

// モーダルを表示しバリデーションを行う
const onModal: SubmitHandler<Inputs> = async () => {
setIsModalOpen(true)
Expand All @@ -51,6 +56,10 @@ const ProblemPage = () => {
})

setStatus(response.status)

if (response.ok) {
await mutate()
}
}


Expand All @@ -68,6 +77,8 @@ const ProblemPage = () => {
);
}

console.log(answers)


return (
<>
Expand Down Expand Up @@ -144,6 +155,78 @@ const ProblemPage = () => {
</form>
</ICTSCCard>
<div className={'text-sm pt-2'}>※ 回答は20分に1度のみです</div>
<div className={'divider'}/>
<div className={'pb-2'}>
定期的に自動更新されます
</div>
<div className={'overflow-x-auto'}>
<table className="table border table-compact w-full">
<thead>
<tr>
<th className={'w-[196px]'}>提出日時</th>
<th className={'w-[100px]'}>問題コード</th>
<th>問題</th>
<th className={'w-[100px]'}>得点</th>
<th className={'w-[100px]'}>チェック済み</th>
<th className={'w-[50px]'}></th>
</tr>
</thead>
<tbody>
{answers
.sort((a, b) => {
if (a.created_at < b.created_at) {
return 1;
}
if (a.created_at > b.created_at) {
return -1;
}
return 0;
})
.map((answer) => {
const createdAt = DateTime.fromISO(answer.created_at)

return (
<tr key={answer.id}>
<td>{createdAt.toFormat('yyyy-MM-dd HH:mm:ss')}</td>
<td>{problem?.code}</td>
<td>{problem?.title}</td>
<td className={'text-right'}>{answer?.point ?? '--'} pt</td>
<td className={'text-center'}>{answer.point != null ? '○' : '採点中'}</td>
<td>
<a href={'#preview'} className={'link'}
onClick={() => setSelectedAnswerId(answer.id)}>投稿内容</a>
</td>
</tr>
);
})}
<tr>
</tr>
</tbody>
</table>
</div>
{selectedAnswer != null && (
<div className={'pt-8'} id={'preview'}>
<ICTSCCard>
<div className={'flex flex-row justify-between pb-4'}>
<div className={'flex flex-row items-center'}>
{selectedAnswer.point !== null && (
<div className={'pr-2'}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3}
stroke="green" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
)}
チーム: {selectedAnswer.user_group.name}({selectedAnswer.user_group.organization})
</div>
<div>
{DateTime.fromISO(selectedAnswer.created_at).toFormat('yyyy-MM-dd HH:mm:ss')}
</div>
</div>
<MarkdownPreview content={selectedAnswer.body}/>
</ICTSCCard>
</div>
)}
</div>
</>
)
Expand Down
10 changes: 10 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,11 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

"@types/luxon@^3.2.0":
version "3.2.0"
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.2.0.tgz#99901b4ab29a5fdffc88fff59b3b47fbfbe0557b"
integrity sha512-lGmaGFoaXHuOLXFvuju2bfvZRqxAqkHPx9Y9IQdQABrinJJshJwfNCKV+u7rR3kJbiqfTF/NhOkcxxAFrObyaA==

"@types/[email protected]":
version "18.11.9"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
Expand Down Expand Up @@ -1626,6 +1631,11 @@ lru-cache@^6.0.0:
dependencies:
yallist "^4.0.0"

luxon@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.2.0.tgz#7962c5dafcd3623e70e222882be49b381e7a8718"
integrity sha512-Namj3XqoJjFekq/JHQEaaAv4zyE/fyyDBrMEBnIL2s/X54SC8W5Ea0uej1TRXUArWec8OojsAVsGBYhNRjpMVw==

markdown-it-anchor@^8.4.1:
version "8.6.5"
resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.5.tgz#30c4bc5bbff327f15ce3c429010ec7ba75e7b5f8"
Expand Down