Merge pull request #160 from ChubachiPT2024/feature/display-submissio…

…nSummaries

Reviewページでのデータ取得

package.json

@@ -61,6 +61,7 @@
  "react-drag-drop-files": "^2.3.10",
  "react-icons": "^5.2.1",
  "react-pdf": "^9.1.0",
- "react-router-dom": "^6.23.1"
+ "react-router-dom": "^6.23.1",
+ "swr": "^2.2.5"
  }
 }

src/presentation/common/button/BackButton.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom'
+import { MdKeyboardDoubleArrowLeft } from 'react-icons/md'
+
+interface IPropsButton {
+ href: string
+}
+
+// 戻るボタンを抽象化したコンポーネント
+export const BackButton: React.FC<IPropsButton> = ({ href }) => {
+ const navigate = useNavigate()
+
+ // 戻るボタンが押された時の処理
+ const handleBack = (href: string) => {
+ navigate(href)
+ }
+
+ return (
+ <>
+ <MdKeyboardDoubleArrowLeft
+ className="w-12 h-12 cursor-pointer transition duration-200 ease-in-out hover:scale-150"
+ color={'#a9a9a9'}
+ onClick={() => handleBack(href)}
+ />
+ </>
+ )
+}

src/presentation/common/error/Error.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom'
+
+const Error = () => {
+ const navigate = useNavigate()
+ return (
+ <>
+ <div
+ className="flex justify-center items-center h-screen"
+ aria-label="読み込み中"
+ >
+ <div className="text-center">
+ <h1 className="text-2xl mb-5">エラーが発生しました</h1>
+ <button
+ className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+ onClick={() => navigate('/')}
+ >
+ ホームへ戻る
+ </button>
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default Error

src/presentation/common/isLoading/Loading.tsx

@@ -0,0 +1,12 @@
+const Loading = () => {
+ return (
+ <div
+ className="flex justify-center items-center h-screen"
+ aria-label="読み込み中"
+ >
+ <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+ </div>
+ )
+}
+
+export default Loading

src/presentation/pages/Classification.tsx

@@ -18,6 +18,8 @@ import { ReportListGetCommand } from 'src/application/reportLists/reportListGetC
 import { Report } from '../types/report'
 import { AssessmentRank } from '../types/submission'
 import { AssessmentClassifyCommand } from 'src/application/assessments/assessmentClassifyCommand'
+import Loading from '../common/isLoading/Loading'
+import Error from '../common/error/Error'
 
 const Classification = () => {
  const { id } = useParams()
@@ -199,37 +201,11 @@ const Classification = () => {
  )
 
  if (process === 'loading') {
- return (
- <>
- <div
- className="flex justify-center items-center h-screen"
- aria-label="読み込み中"
- >
- <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
- </div>
- </>
- )
+ return <Loading />
  }
 
  if (process === 'error') {
- return (
- <>
- <div
- className="flex justify-center items-center h-screen"
- aria-label="読み込み中"
- >
- <div className="text-center">
- <h1 className="text-2xl mb-5">エラーが発生しました</h1>
- <button
- className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
- onClick={() => navigate('/')}
- >
- ホームへ戻る
- </button>
- </div>
- </div>
- </>
- )
+ return <Error />
  }
 
  const draggingItem = report.items.find(

src/presentation/pages/Review.tsx

@@ -1,77 +1,38 @@
-// ReviewPage.tsx
-import { useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
-import 'react-pdf/dist/esm/Page/TextLayer.css'
-import Radio from '@mui/material/Radio'
-import RadioGroup from '@mui/material/RadioGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import FormControl from '@mui/material/FormControl'
-import MenuItem from '@mui/material/MenuItem'
-import Select, { SelectChangeEvent } from '@mui/material/Select'
-import TextField from '@mui/material/TextField'
-import { MdKeyboardDoubleArrowLeft } from 'react-icons/md'
+import { useLocation } from 'react-router-dom'
 import PdfView from '../review/components/PdfView'
-import { SubmissionSummariesGetCommand } from 'src/application/submissionSummaries/submissionSummariesGetCommand'
+import Sidebar from '../review/components/Sidebar'
+import { useSubmissionSummaries } from '../review/hooks/useSubmissionSummaries'
+import { BackButton } from '../common/button/BackButton'
+import Loading from '../common/isLoading/Loading'
+import Error from '../common/error/Error'
+
+// ルーティング時に渡される情報の型
+type LocationState = {
+ reportId: string
+ studentNumIds: number[]
+}
 
 const Review = () => {
- const navigate = useNavigate()
+ // ルーティング時に渡された情報を取得
  const location = useLocation()
- const { reportId, studentNumIds } = location.state
- const [submissionSummaries, setSubmissionSummaries] = useState([])
-
- useEffect(() => {
- window.electronAPI
- .getSubmissionSummariesAsync(
- new SubmissionSummariesGetCommand(Number(reportId), studentNumIds)
- )
- .then((res) => {
- setSubmissionSummaries(res.submissionSummaries)
- })
- }, [reportId, studentNumIds])
-
- const handleBack = () => {
- navigate(`/classification/${location.state.reportId}`)
- }
+ const { reportId, studentNumIds } = location.state as LocationState
 
- // 評点の状態
- const [grade, setGrade] = useState<number>(0)
-
- // 評点が変更された時の処理
- const handleChange = (event: SelectChangeEvent) => {
- setGrade(Number(event.target.value))
- }
+ // 提出物サマリーを取得
+ const { submissionSummaries, error, isLoading } = useSubmissionSummaries(
+ reportId,
+ studentNumIds
+ )
 
- // 学生名と対応するPDFファイルのパスを含むオブジェクトの配列
- const students = [
- {
- name: '学生1',
- },
- {
- name: '学生2',
- },
- {
- name: '学生3',
- },
- {
- name: '学生4',
- },
- {
- name: '学生5',
- },
- ]
+ if (isLoading) return <Loading />
+ if (error) return <Error />
 
  return (
  <>
  <div className="h-full overflow-hidden">
  {/* navbar */}
  <div className="z-50 bg-white fixed top-0 flex items-center w-full p-2 border-b shadow-sm">
  {/* 戻るボタン */}
- <MdKeyboardDoubleArrowLeft
- className="w-12 h-12 cursor-pointer transition duration-200 ease-in-out hover:scale-110"
- color={'#a9a9a9'}
- onClick={handleBack}
- />
+ <BackButton href={`/classification/${reportId}`} />
  </div>
 
  {/* メインコンテンツ */}
@@ -91,110 +52,10 @@ const Review = () => {
  ))}
  </div>
 
- {/* sidebar */}
- <div className="w-96 p-4 m-2 border-l-4 flex flex-col justify-start overflow-y-auto">
- {/* 学生選択のラジオボタン */}
- <div className="flex flex-col m-1">
- <FormControl>
- <h2 className="text-xl font-bold mb-1">学生選択</h2>
- <RadioGroup
- aria-labelledby="radio-buttons-group-label"
- defaultValue="学生1"
- name="radio-buttons-group"
- >
- {students.map((student, index) => (
- <FormControlLabel
- key={index}
- value={student.name}
- control={<Radio />}
- label={student.name}
- sx={{ m: '0' }}
- />
- ))}
- </RadioGroup>
- </FormControl>
- </div>
-
- {/* 提出者情報 */}
- <div className="flex flex-col m-1">
- <h2 className="text-xl font-bold mb-2">提出者情報</h2>
- <ul className="pl-3">
- <li className="mb-2">学生名：学生1</li>
- <li className="mb-2">学籍番号：0000000</li>
- <li className="mb-2">提出日時：2021/09/01 12:00</li>
- </ul>
- </div>
-
- {/* 分類 セレクトボタン*/}
- <div className="m-1">
- <h2 className="text-xl font-bold mb-2">分類</h2>
- <div className="pl-3">
- <FormControl fullWidth>
- <Select
- id="select"
- inputProps={{ 'aria-label': 'Without label' }}
- value={grade.toString()}
- onChange={handleChange}
- >
- <MenuItem value={5}>5</MenuItem>
- <MenuItem value={4}>4</MenuItem>
- <MenuItem value={3}>3</MenuItem>
- <MenuItem value={2}>2</MenuItem>
- <MenuItem value={1}>1</MenuItem>
- <MenuItem value={0}>0</MenuItem>
- </Select>
- </FormControl>
- </div>
- </div>
-
- {/* 点数 */}
- <div className="m-1">
- <h2 className="text-xl font-bold mb-2">点数</h2>
- <div className="pl-3">
- <TextField
- id="score"
- type="number"
- value={100}
- variant="outlined"
- fullWidth
- inputProps={{
- 'aria-label': 'Without label',
- min: 0,
- max: 100,
- }}
- />
- </div>
- </div>
-
- {/* メモ テキストエリア*/}
- <div className="m-1">
- <h2 className="text-xl font-bold mb-2">メモ</h2>
- <div className="pl-3">
- <TextField
- id="memo"
- multiline
- rows={4}
- placeholder="評価の為の一時的なメモを記述して下さい。このデータはmanabaには反映されません。"
- sx={{ m: '0' }}
- fullWidth
- />
- </div>
- </div>
-
- {/* フィードバック テキストエリア*/}
- <div className="m-1">
- <h2 className="text-xl font-bold mb-2">フィードバック</h2>
- <div className="pl-3">
- <TextField
- id="feedback"
- multiline
- rows={4}
- placeholder="学生に伝える為のフィードバックを記述して下さい。"
- fullWidth
- />
- </div>
- </div>
- </div>
+ <Sidebar
+ reportId={reportId}
+ submissionSummaries={submissionSummaries}
+ />
  </div>
  </div>
  </>