Finalized students app
This commit is contained in:
Kevin FEDYNA
@@ -1,75 +1,45 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import Promotion from "$root/routes/(apps)/students/(_components)/Promotion.tsx";
|
||||
|
||||
interface Promotion {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
type SingleUserResponse = { promo: Promotion; student: Student };
|
||||
type ManyUsersResponse = { promos: Promotion[]; students: Student[] };
|
||||
|
||||
interface Student {
|
||||
userId: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
mail: string;
|
||||
promotionId: number;
|
||||
}
|
||||
type APIResponse = SingleUserResponse | ManyUsersResponse;
|
||||
|
||||
export default function ConsultStudents() {
|
||||
const [data, setData] = useState<
|
||||
{ promotions: Promotion[]; students: Student[] } | null
|
||||
>(null);
|
||||
const [data, setData] = useState<APIResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch("/students/api/students");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error fetching data: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Fetched data:", result);
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
console.error("Error fetching data:", err);
|
||||
const response = await fetch("/students/api/students");
|
||||
if (!response.ok) {
|
||||
setError("Failed to load data. Please try again later.");
|
||||
}
|
||||
|
||||
const result: APIResponse = await response.json();
|
||||
setData(result);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2>Consult Students</h2>
|
||||
<>
|
||||
{error && <p className="error">{error}</p>}
|
||||
{data?.promotions.map((promo) => (
|
||||
<div key={promo.id}>
|
||||
<h3>Promotion: {promo.name}</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.students
|
||||
.filter((student) => student.promotionId === promo.id)
|
||||
.map((student) => (
|
||||
<tr key={student.userId}>
|
||||
<td>{student.userId}</td>
|
||||
<td>{student.firstName}</td>
|
||||
<td>{student.lastName}</td>
|
||||
<td>{student.mail}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
{data && ((Object.hasOwn(data, "student"))
|
||||
? (
|
||||
<Promotion
|
||||
students={[(data as SingleUserResponse).student]}
|
||||
promo={(data as SingleUserResponse).promo}
|
||||
/>
|
||||
)
|
||||
: (data as ManyUsersResponse).promos.map((promo) => (
|
||||
<Promotion
|
||||
students={(data as ManyUsersResponse).students}
|
||||
promo={promo}
|
||||
/>
|
||||
)))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,75 +1,111 @@
|
||||
// @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
|
||||
import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
|
||||
import { useSignal } from "@preact/signals";
|
||||
import { Signal, useSignal } from "@preact/signals";
|
||||
|
||||
export default function UploadStudents() {
|
||||
const statusMessage = useSignal<string>("");
|
||||
const fileData = useSignal<File | null>(null);
|
||||
|
||||
const handleFileChange = (event: Event) => {
|
||||
/**
|
||||
* Create a new handler for file change that displays
|
||||
* messages in statusMessage and gets file data in fileData.
|
||||
* @param statusMessage The status message signal.
|
||||
* @param fileData The file data signal.
|
||||
* @returns The file change handler.
|
||||
*/
|
||||
function getFileChangeHandler(
|
||||
statusMessage: Signal<string>,
|
||||
fileData: Signal<File | null>,
|
||||
): (event: Event) => void {
|
||||
/**
|
||||
* Handle file change.
|
||||
* @param event The file change event.
|
||||
*/
|
||||
return (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) {
|
||||
fileData.value = input.files[0];
|
||||
statusMessage.value = "File selected: " + input.files[0].name;
|
||||
statusMessage.value = `File selected: ${input.files[0].name}`;
|
||||
} else {
|
||||
fileData.value = null;
|
||||
statusMessage.value = "No file selected";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const confirmUpload = () => {
|
||||
/**
|
||||
* Create a new handler that sends data file to server.
|
||||
* @param statusMessage The status message signal.
|
||||
* @param fileData The file data signal.
|
||||
* @returns The file confirmation handler.
|
||||
*/
|
||||
function getUploadConfirmationFunction(
|
||||
statusMessage: Signal<string>,
|
||||
fileData: Signal<File | null>,
|
||||
): () => void {
|
||||
/**
|
||||
* Add students to database.
|
||||
* @returns Confirm upload of students.
|
||||
*/
|
||||
return () => {
|
||||
if (!fileData.value) {
|
||||
statusMessage.value = "Please select a file before confirming upload.";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const reader = new FileReader();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = async (e) => {
|
||||
const arrayBuffer = e.target?.result as ArrayBuffer;
|
||||
const workbook = XLSX.read(arrayBuffer, { type: "array" });
|
||||
/**
|
||||
* Send all data to the server.
|
||||
* @param event The finished progress event.
|
||||
*/
|
||||
reader.onload = async (event: ProgressEvent<FileReader>) => {
|
||||
const arrayBuffer = event.target!.result as ArrayBuffer;
|
||||
const workbook = XLSX.read(arrayBuffer, { type: "array" });
|
||||
let allOK = true;
|
||||
|
||||
for (const sheetName of workbook.SheetNames) {
|
||||
const sheet = workbook.Sheets[sheetName];
|
||||
const data = XLSX.utils.sheet_to_json(sheet, {
|
||||
header: ["Identifiant", "Nom", "Prénom", "Mail"],
|
||||
range: 1, // Ignorer les en-têtes
|
||||
});
|
||||
for (const sheetName of workbook.SheetNames) {
|
||||
const sheet = workbook.Sheets[sheetName];
|
||||
const data = XLSX.utils.sheet_to_json(sheet, {
|
||||
header: ["userId", "lastName", "firstName", "mail"],
|
||||
range: 1,
|
||||
});
|
||||
|
||||
console.log(`Data from sheet ${sheetName}:`, data);
|
||||
const response = await fetch("/students/api/students", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ promoName: sheetName, data }),
|
||||
});
|
||||
|
||||
const response = await fetch("/students/api/students", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ promoName: sheetName, data }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to insert data for promotion ${sheetName}`);
|
||||
}
|
||||
if (!response.ok) {
|
||||
allOK = false;
|
||||
}
|
||||
}
|
||||
|
||||
statusMessage.value = "Data uploaded and inserted successfully!";
|
||||
};
|
||||
statusMessage.value = allOK
|
||||
? "Failed to insert all data."
|
||||
: "Data uploaded and inserted successfully!";
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
statusMessage.value = "Error reading the file.";
|
||||
};
|
||||
/**
|
||||
* Display error message if any.
|
||||
*/
|
||||
reader.onerror = () => {
|
||||
statusMessage.value = "Error reading the file.";
|
||||
};
|
||||
|
||||
reader.readAsArrayBuffer(fileData.value);
|
||||
} catch (error) {
|
||||
console.error("Error uploading file:", error);
|
||||
statusMessage.value = "An unexpected error occurred during upload.";
|
||||
}
|
||||
reader.readAsArrayBuffer(fileData.value);
|
||||
};
|
||||
}
|
||||
|
||||
export default function UploadStudents() {
|
||||
const statusMessage = useSignal<string>("");
|
||||
const fileData = useSignal<File | null>(null);
|
||||
|
||||
const handleFileChange = getFileChangeHandler(statusMessage, fileData);
|
||||
const confirmUpload = getUploadConfirmationFunction(statusMessage, fileData);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Upload Students</h2>
|
||||
<>
|
||||
<input type="file" accept=".xlsx, .xls" onChange={handleFileChange} />
|
||||
<button onClick={confirmUpload}>Confirm Upload</button>
|
||||
<p>{statusMessage.value}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user