ChubachiPT2024 / manakan

MIT License
0 stars 0 forks source link

ファルダをインポートするコンポーネントの実装 #79

Closed shunya9811 closed 2 weeks ago

shunya9811 commented 2 weeks ago

issue

ファルダをインポートするコンポーネントの実装 #75

概要

manabaからダウンロードしたファルダを選択すると、学生ごとにファイルがまとめられて、評価ページへと遷移するインポートフォームの追加

変えたこと・実装内容

ルーティング

ホームページ

スクリーンショット 2024-06-24 101814

評価ページ

スクリーンショット 2024-06-24 101855

インポート

スクリーンショット 2024-06-24 101835

データの作成

題目としてのレポート 名前
id number
course string
studens studentList
あるレポートに対して、提出した学生 名前
id number
userId string
numId number
grade number
symgrade number
comment string
files file[]

確認したこと

reactでExcelを扱う方法を検討しました。まずいくつかライブラリがあったので、ダウンロード数の一番多いxlsxをダウンロードしてみました。 インストール時に、脆弱性がありますと、エラー文がでたので、ついでダウンロード数の多いExcelJSをインストールしました。 スクリーンショット 2024-06-24 104255

npm run lintでテストをおこなう箇所をsrc/以下に変更しています。

参考

やりのこしていること

shunya9811 commented 2 weeks ago

情報モデル図の修正が必要かどうか?

情報モデル図によると、レポートには提出物が含まれており、それぞれに個別の評価が与えられることになっていました。reportlist.xlsxを確認すると、学生ごとに評価が与えられていることがわかりました。このため、開発においては、レポートに学生が関連付けられ、学生の型定義の中に評価項目を設ける形で実装しました。

参考

https://github.com/ChubachiPT2024/manakan/blob/main/manakan_UMLModel.drawio.svg https://app.diagrams.net/#G1S3Y9NJR5tntGv-KOgktk8JPtd7Qbc97M#%7B%22pageId%22%3A%22AsIs%E3%83%A2%E3%83%87%E3%83%AB%22%7D

shunya9811 commented 2 weeks ago

useContextの部分が理解し辛いかも知れないと思っていて、以下ページを特に参考にしています。 https://blog.logrocket.com/how-to-use-react-context-typescript/#implementing-react-context-reducer-typescript

shunya9811 commented 2 weeks ago

自分で自分のコードのリファクタリングをすこしやったのですが、リファクタリングする作業は別ブランチを切ってもよかったかもしれないです。