Implementation 1

react/src/App.tsx

@@ -1,79 +1,9 @@
-import { useState } from "react";
-import {
-  SchoolActionKind,
-  useSchool,
-  useSchoolDispatch,
-} from "./school-context";
 import infinitasLogo from "/infinitas-logo.svg";
 import "./App.css";
+import { SchoolProvider } from "./school-context";
+import { School } from "./containers/School";
 
 function App() {
-  const school = useSchool();
-  const schoolDispatch = useSchoolDispatch();
-
-  const [studentEditingId, setUserEditingId] = useState<string | null>(null);
-  const [updatedStudentName, setUpdatedStudentName] = useState<string>("");
-
-  const [teacherEditingId, setTeacherEditingId] = useState<string | null>(null);
-  const [newAssignedStudentId, setNewAssignedStudentId] = useState<
-    string | null
-  >(null);
-
-  const handleTeacherSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const target = event.currentTarget;
-    const teacherName = target.teacher.value;
-    const id = crypto.randomUUID();
-    schoolDispatch?.({
-      type: SchoolActionKind.ADD_TEACHER,
-      payload: { name: teacherName, id, students: [] },
-    });
-
-    target.reset();
-  };
-
-  const handleStudentSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const target = event.currentTarget;
-    const studentName = target.student.value;
-    const id = crypto.randomUUID();
-    schoolDispatch?.({
-      type: SchoolActionKind.ADD_STUDENT,
-      payload: { name: studentName, id },
-    });
-
-    target.reset();
-  };
-
-  const handleUpdateStudent = () => {
-    if (studentEditingId) {
-      schoolDispatch?.({
-        type: SchoolActionKind.UPDATE_STUDENT,
-        payload: { name: updatedStudentName, id: studentEditingId },
-      });
-    }
-
-    setUserEditingId(null);
-    setUpdatedStudentName("");
-  };
-
-  const handleAssignStudent = () => {
-    if (teacherEditingId && newAssignedStudentId) {
-      schoolDispatch?.({
-        type: SchoolActionKind.ASSIGN_STUDENT_TO_TEACHER,
-        payload: {
-          teacherId: teacherEditingId,
-          studentId: newAssignedStudentId,
-        },
-      });
-    }
-
-    setTeacherEditingId(null);
-    setNewAssignedStudentId(null);
-  };
-
   return (
     <div className="App">
       <div>
@@ -82,111 +12,9 @@ function App() {
         </a>
       </div>
       <h1>IL Interview</h1>
-      <div className="section">
-        <h2>Teacher</h2>
-        <table>
-          <thead>
-            <tr>
-              <th>Id</th>
-              <th>Name</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {school?.teachers.map((teacher) => {
-              return (
-                <tr key={teacher.id}>
-                  <td>{teacher.id}</td>
-                  <td>{teacher.name}</td>
-                  <td>
-                    <ul>
-                      {teacher.students.map((s) => (
-                        <li>
-                          {school?.students.map((s1) =>
-                            s === s1.id ? s1.name : ""
-                          )}
-                        </li>
-                      ))}
-                    </ul>
-                    {teacher.id === teacherEditingId ? (
-                      <>
-                        <select
-                          value={newAssignedStudentId || ""}
-                          onChange={(e) =>
-                            setNewAssignedStudentId(e.target.value)
-                          }
-                        >
-                          <option value={""}></option>
-                          {school?.students.map((student) => (
-                            <option value={student.id}>{student.name}</option>
-                          ))}
-                        </select>
-                        <button onClick={handleAssignStudent}>Assign</button>
-                      </>
-                    ) : (
-                      <button onClick={() => setTeacherEditingId(teacher.id)}>
-                        Assign student
-                      </button>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        <hr></hr>
-        <form onSubmit={handleTeacherSubmit}>
-          <label htmlFor="teacher">Teacher</label>
-          <input type="text" id="teacher" name="teacher" />
-          <button type="submit">Add Teacher</button>
-        </form>
-      </div>
-      <div className="section">
-        <h2>Students</h2>
-        <table>
-          <thead>
-            <tr>
-              <th>Id</th>
-              <th>Name</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {school?.students.map((student) => {
-              return (
-                <tr key={student.id}>
-                  <td>{student.id}</td>
-                  <td>{student.name}</td>
-                  <td>
-                    {student.id === studentEditingId ? (
-                      <>
-                        <input
-                          type="text"
-                          value={updatedStudentName}
-                          onChange={(e) =>
-                            setUpdatedStudentName(e.target.value)
-                          }
-                        ></input>
-                        <button onClick={handleUpdateStudent}>Done</button>
-                      </>
-                    ) : (
-                      <button onClick={() => setUserEditingId(student.id)}>
-                        Update
-                      </button>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        <hr></hr>
-        <form onSubmit={handleStudentSubmit}>
-          <label htmlFor="student" >Student</label>
-          <input type="text" id="student" name="student" />
-          <button type="submit">Add Student</button>
-        </form>
-      </div>
+      <SchoolProvider>
+        <School />
+      </SchoolProvider>
     </div>
   );
 }

react/src/components/AssignmentForm/AssignmentForm.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { SchoolActionKind, useSchoolDispatch } from "../../school-context";
+
+export function AssignmentForm() {
+  const dispatch = useSchoolDispatch();
+  const [title, setTitle] = useState("");
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmed = title.trim();
+    if (!trimmed) return;
+    const id = crypto.randomUUID();
+    dispatch?.({
+      type: SchoolActionKind.ADD_ASSIGNMENT,
+      payload: { id, title: trimmed },
+    });
+    setTitle("");
+  };
+
+  const isValid = title.trim() !== "";
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="assignment-title">New assignment</label>
+      <input
+        id="assignment-title"
+        name="assignment-title"
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        aria-invalid={!isValid && title.length > 0}
+      />
+      <button type="submit" disabled={!isValid}>
+        Add assignment
+      </button>
+    </form>
+  );
+}
+

react/src/components/AssignmentForm/index.ts

@@ -0,0 +1,2 @@
+export * from "./AssignmentForm";
+

react/src/components/StudentForm/StudentForm.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { SchoolActionKind, useSchoolDispatch } from "../../school-context";
+
+export function StudentForm() {
+  const schoolDispatch = useSchoolDispatch();
+  const [name, setName] = useState("");
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const id = crypto.randomUUID();
+    schoolDispatch?.({
+      type: SchoolActionKind.ADD_STUDENT,
+      payload: { name: trimmed, id },
+    });
+    setName("");
+  };
+
+  const isValid = name.trim() !== "";
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="student">Student name</label>
+      <input
+        type="text"
+        id="student"
+        name="student"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        aria-invalid={!isValid && name.length > 0}
+      />
+      <button type="submit" disabled={!isValid}>
+        Add Student
+      </button>
+    </form>
+  );
+}
+

react/src/components/StudentForm/index.ts

@@ -0,0 +1 @@
+export * from "./StudentForm";