Merge pull request #102 from ChubachiPT2024/feature/repository-patter…

…n-import

リポジトリパターンに対応したインポート機能に改善

src/App.tsx

@@ -10,7 +10,7 @@ export default function App() {
         <HashRouter>
             <Routes>
                 <Route path="/" element={<Home />} />
-                <Route path="/evaluation" element={<Evaluation />} />
+                <Route path="/evaluation/:reportId" element={<Evaluation />} />
             </Routes>
         </HashRouter>
     );

src/index.tsx

@@ -2,16 +2,12 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
-// リポートデータを、どのコンポーネントからでも取得できるようにするため、Providerを使う
-import { ReportProvider } from './presentation/context/ReportProvider';
 
 const root = createRoot(
     document.body
 );
 root.render(
     <React.StrictMode>
-        <ReportProvider>
-            <App />
-        </ReportProvider>
+        <App />
     </React.StrictMode>
 );

src/presentation/import/components/DropForm.tsx

@@ -1,20 +1,40 @@
 import { useNavigate } from 'react-router-dom';
-
 import { FileUploader } from "react-drag-drop-files";
-
 import { MdOutlineFileUpload } from "react-icons/md";
+import { ReportListImportCommand } from "src/application/reportLists/reportListImportCommand";
 
 const DropForm = () => {
+	// ナビゲーション用フック
 	const navigate = useNavigate();
 
-	const handleDrop = (file: File) => {
-		console.log(file);
-
-		// ルーティング処理
-		navigate('/evaluation');
+	/**
+	 * ファイルをドロップしたときの処理
+	 *
+	 * @param {File} file - ドロップされたファイル
+	 */
+	const handleDrop = async (file: File) => {
+		// file名がreportlist.xlsxでない場合はエラー
+		if (file.name !== "reportlist.xlsx") {
+			alert("インポートされたファイルがreportlist.xlsxではありません。");
+			return;
+		}
+
+		try {
+			// レポートIDを取得
+			const reportId = await window.electronAPI.importReportListAsync(
+				new ReportListImportCommand(file.path)
+			);
+
+			// 評価画面に遷移
+			navigate(`/evaluation/${reportId}`);
+
+		} catch (error) {
+			console.error(error);
+			alert("ファイルのインポートに失敗しました。");
+		}
 	}
 
-  	return (
+  return (
 		<>
 			<FileUploader
 				// オプションについては
@@ -26,16 +46,15 @@ const DropForm = () => {
 				hoverTitle=" " // ドラッグ時のタイトル (空文字で非表示)
 				children={
 					<div className="rounded-lg bg-gray-100 px-20 py-6 flex flex-col items-center justify-center">
-  						<MdOutlineFileUpload size={100} color="gray" />
-  						<p className="text-lg text-gray-600">ここにファイルをドロップ</p>
-  						<p className="text-lg text-gray-400">または</p>
-  						<div className="text-gray-600 cursor-pointer border border-gray-300 shadow px-2">ファイルを選択</div>
+							<MdOutlineFileUpload size={100} color="gray" />
+							<p className="text-lg text-gray-600">ここにreportlist.xlsxをドロップ</p>
+							<p className="text-lg text-gray-400">または</p>
+							<div className="text-gray-600 cursor-pointer border border-gray-300 shadow px-2">ファイルを選択</div>
 					</div>
-
 				}
 			/>
 		</>
-  	);
+  );
 }
 
 export default DropForm;

src/presentation/pages/Evaluation.tsx

@@ -1,36 +1,10 @@
-import { useContext } from "react";
-import { Student } from "../types";
-import { ReportContext } from "../context/ReportContext";
-
 // ページ名称については検討の余地あり
 const Evaluation = () => {
 
-    // ここで、ReportContextから取得した値を使う
-    const { report } = useContext(ReportContext);
-
     return (
         <>
             <h1>Evaluation Page</h1>
             <p>評価対象のフォルダがインポートされたら、遷移されてくるページ</p>
-            {/* 学生と提出物がインポートされたかを確認している */}
-            <h2>コース名: {report.course}</h2>
-            <h3>学生:</h3>
-            {report.students.map((student: Student) => {
-                return (
-                    <div key={student.id}>
-                        <h4>{student.userId}</h4>
-                        <p>学籍番号: {student.numId}</p>
-                        <p>提出物:</p>
-                        {student.files?.map((file: File) => {
-                            return (
-                                <div key={file.name}>
-                                    <p>{file.name}</p>
-                                </div>
-                            );
-                        })}
-                    </div>
-                );
-            })}
         </>
     );
 };

src/presentation/pages/Home.tsx

@@ -1,13 +1,11 @@
-import DropForm from "../import/components/DropForm";
-import ReportImport from "../import/components/ReportImport";
+import DropForm from '../import/components/DropForm';
 
 const Home = () => {
     return (
         <>
             <div className="flex flex-col items-center justify-center mx-auto mt-10">
                 {/* ファイルのインポート */}
                 <DropForm />
-                <ReportImport />
 
                 {/* 最近使用したデータリスト */}
                 <div className="w-full max-w-lg rounded-lg p-4 pt-8">