persist in database sample form inputs and show the list of previously entered prompts when displaying form's result

front/ViewRenderer.tsx

@@ -11,6 +11,8 @@ export function renderView(Component: FunctionComponent, args: {}) {
         document.getElementById('root') as HTMLElement
     );
 
+    console.log(args)
+
     root.render(
         <React.StrictMode>
             <Component {...args}/>

front/views/DisplayResults.tsx

@@ -1,12 +1,15 @@
-import ReactDOM from "react-dom/client";
-import React from "react";
 
 
-export default function DisplayResults({password, username}: any) {
+export default function DisplayResults({results}: { results: { name: string, description: string }[] }) {
+    const list = results.map(({name, description}) =>
+        <div>
+            <p>username: {name}</p>
+            <p>description: {description}</p>
+        </div>
+    )
     return (
         <div>
-            <p>username: {username}</p>
+            {list}
-            <p>password: {password}</p>
         </div>
     )
 }

front/views/SampleForm.tsx

@@ -5,12 +5,12 @@ export default function SampleForm() {
     return (
         <div>
             <h1>Hello, this is a sample form made in react !</h1>
-            <form action="result" method="POST">
+            <form action="submit" method="POST">
                 <label>your name: </label>
-                <input type="text" id="name" name="username"/>
+                <input type="text" id="name" name="name"/>
-                <label>your password: </label>
+                <label>a little description about yourself: </label>
-                <input type="password" id="password" name="password"/>
+                <input type="text" id="password" name="description"/>
-                <input type="submit" value="click me!"/>
+                <input type="submit" value="click me to submit!"/>
             </form>
         </div>
     )

public/index.php

@@ -5,6 +5,7 @@ require "../config.php";
 require "../sql/database.php";
 
 use App\Controller\SampleFormController;
+use App\Gateway\FormResultGateway;
 
 /**
  * relative path of the index.php's directory from the server's document root.
@@ -28,9 +29,9 @@ $pdo = get_database();
 $router = new AltoRouter();
 $router->setBasePath($basePath);
 
-$sampleFormController = new SampleFormController();
+$sampleFormController = new SampleFormController(new FormResultGateway($pdo));
 $router->map("GET", "/", fn() => $sampleFormController->displayForm());
-$router->map("POST", "/result", fn() => $sampleFormController->displayResults($_POST));
+$router->map("POST", "/submit", fn() => $sampleFormController->submitForm($_POST));
 
 $match = $router->match();
 

src/Controller/SampleFormController.php

@@ -3,13 +3,28 @@
 namespace App\Controller;
 
 require_once __DIR__ . "/../react-display.php";
+use App\Gateway\FormResultGateway;
 
 class SampleFormController {
+
+    private FormResultGateway $gateway;
+
+    /**
+     * @param FormResultGateway $gateway
+     */
+    public function __construct(FormResultGateway $gateway)
+    {
+        $this->gateway = $gateway;
+    }
+
+
     public function displayForm() {
         send_react_front("views/SampleForm.tsx", []);
     }
 
-    public function displayResults(array $request) {
+    public function submitForm(array $request) {
-        send_react_front("views/DisplayResults.tsx", $request);
+        $this->gateway->insert($request["name"], $request["description"]);
+        $results = ["results" => $this->gateway->listResults()];
+        send_react_front("views/DisplayResults.tsx", $results);
     }
 }

src/Gateway/FormResultGateway.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Gateway;
+
+use PDO;
+use PDOStatement;
+
+/**
+ * A sample gateway, that stores the sample form's result.
+ */
+class FormResultGateway {
+
+    private PDOStatement $insertion_stmnt;
+    private PDOStatement $list_stmnt;
+
+    public function __construct(PDO $pdo)
+    {
+        $this->insertion_stmnt = $pdo->prepare("INSERT INTO FormEntries VALUES (:name, :description)");
+        $this->list_stmnt = $pdo->prepare("SELECT * FROM FormEntries");
+    }
+
+
+    function insert(string $username, string $description) {
+        $this->insertion_stmnt->bindValue(":name", $username, PDO::PARAM_STR);
+        $this->insertion_stmnt->bindValue(":description", $description, PDO::PARAM_STR);
+
+        $this->insertion_stmnt->execute();
+    }
+
+    function listResults(): array {
+        $this->list_stmnt->execute();
+        return $this->list_stmnt->fetchAll();
+    }
+}