Updated React sample (moved to functional components)

samples/react/Server/ServerReact.dpr

@@ -12,7 +12,7 @@ uses
   Web.WebBroker,
   IdContext,
   IdHTTPWebBrokerBridge,
-  Controller.Customer in 'src\controller\Controller.Customer.pas',
+  Controller.Customers in 'src\controller\Controller.Customers.pas',
   WebModule.Main in 'src\services\WebModule.Main.pas' {wmMain: TWebModule},
   Model.Customer in 'src\model\Model.Customer.pas';
 

samples/react/Server/src/controller/Controller.Customer.pas → samples/react/Server/src/controller/Controller.Customers.pas

@@ -1,4 +1,4 @@
-unit Controller.Customer;
+unit Controller.Customers;
 
 interface
 
@@ -17,13 +17,9 @@ interface
 type
 
   [MVCPath('/api')]
-  TCustomerController = class(TMVCController)
+  TCustomersController = class(TMVCController)
   private
     FDConn : TFDConnection;
-  protected
-    procedure OnBeforeAction(Context: TWebContext; const AActionName: string; var Handled: Boolean); override;
-    procedure OnAfterAction(Context: TWebContext; const AActionName: string); override;
-
   public
     [MVCPath('/customers')]
     [MVCHTTPMethod([httpGET])]
@@ -56,31 +52,13 @@ implementation
   System.SysUtils, MVCFramework.Logger, System.StrUtils;
 
 
-procedure TCustomerController.OnAfterAction(Context: TWebContext; const AActionName: string); 
-begin
-  { Executed after each action }
-  inherited;
-end;
-
-procedure TCustomerController.OnBeforeAction(Context: TWebContext; const AActionName: string; var Handled: Boolean);
-begin
-  { Executed before each action
-    if handled is true (or an exception is raised) the actual
-    action will not be called }
-  inherited;
-end;
-
 //Sample CRUD Actions for a "Customer" entity
-procedure TCustomerController.GetCustomers;
-var
-  lCustomers : TObjectList<TCustomer>;
+procedure TCustomersController.GetCustomers;
 begin
-  lCustomers := TMVCActiveRecord.SelectRQL<TCustomer>('', 20);
-
-  Render<TCustomer>(lCustomers);
+  Render<TCustomer>(TMVCActiveRecord.SelectRQL<TCustomer>('sort(+id)', 200));
 end;
 
-procedure TCustomerController.GetCustomer(id: Integer);
+procedure TCustomersController.GetCustomer(id: Integer);
 var
   lCustomer : TCustomer;
 begin
@@ -89,7 +67,7 @@ procedure TCustomerController.GetCustomer(id: Integer);
   Render(lCustomer);
 end;
 
-constructor TCustomerController.Create;
+constructor TCustomersController.Create;
 begin
   inherited;
   FDConn := TFDConnection.Create(nil);
@@ -101,17 +79,20 @@ constructor TCustomerController.Create;
   ActiveRecordConnectionsRegistry.AddDefaultConnection(FDConn);
 end;
 
-procedure TCustomerController.CreateCustomer;
+procedure TCustomersController.CreateCustomer;
 var
   lCustomer : TCustomer;
 begin
   lCustomer := Context.Request.BodyAs<TCustomer>;
-
-  lCustomer.Insert;
-  Render(lCustomer);
+  try
+    lCustomer.Insert;
+  finally
+    lCustomer.Free;
+  end;
+  Render201Created();
 end;
 
-procedure TCustomerController.UpdateCustomer(id: Integer);
+procedure TCustomersController.UpdateCustomer(id: Integer);
 var
   lCustomer : TCustomer;
 begin
@@ -122,7 +103,7 @@ procedure TCustomerController.UpdateCustomer(id: Integer);
   Render(lCustomer);
 end;
 
-procedure TCustomerController.DeleteCustomer(id: Integer);
+procedure TCustomersController.DeleteCustomer(id: Integer);
 var
   lCustomer : TCustomer;
 begin
@@ -132,7 +113,7 @@ procedure TCustomerController.DeleteCustomer(id: Integer);
   Render(TJSONObject.Create(TJSONPair.Create('result', 'register successefully deleted')));
 end;
 
-destructor TCustomerController.Destroy;
+destructor TCustomersController.Destroy;
 begin
   ActiveRecordConnectionsRegistry.RemoveDefaultConnection;
   inherited;

samples/react/Server/src/model/Model.Customer.pas

@@ -2,10 +2,12 @@
 
 interface
 
-uses  MVCFramework.ActiveRecord;
+uses MVCFramework, MVCFramework.ActiveRecord, MVCFramework.Serializer.Commons;
 
 type
+
   [MVCTable('customers')]
+  [MVCNameCase(ncLowerCase)]
   TCustomer = class(TMVCActiveRecord)
   private
     [MVCTableField('id', [foPrimaryKey, foAutoGenerated])]
@@ -26,21 +28,26 @@   TCustomer = class(TMVCActiveRecord)
     procedure Setid(const Value: Integer);
     procedure SetNote(const Value: String);
     procedure Setrating(const Value: Integer);
-  public
-    constructor Create;override;
-    destructor Destroy;override;
 
-    property id : Integer read Fid write Setid;
-    property Code : String read FCode write SetCode;
-    property Description : String read FDescription write SetDescription;
-    property City : String read FCity write SetCity;
-    property Note : String read FNote write SetNote;
-    property rating : Integer read Frating write Setrating;
+  protected
+    procedure OnBeforeInsertOrUpdate; override;
+  public
+    constructor Create; override;
+    destructor Destroy; override;
+    property id: Integer read Fid write Setid;
+    property Code: String read FCode write SetCode;
+    property Description: String read FDescription write SetDescription;
+    property City: String read FCity write SetCity;
+    property Note: String read FNote write SetNote;
+    property rating: Integer read Frating write Setrating;
 
   end;
 
 implementation
 
+uses
+  System.SysUtils, MVCFramework.Commons;
+
 { TCustomer }
 
 constructor TCustomer.Create;
@@ -55,6 +62,36 @@ destructor TCustomer.Destroy;
   inherited;
 end;
 
+procedure TCustomer.OnBeforeInsertOrUpdate;
+begin
+  inherited;
+  var lErrors: TArray<String> := [];
+  if Length(Code) > 15 then
+  begin
+    lErrors := lErrors + ['Code too long (max length 15)'];
+  end;
+
+  if Length(Description) > 50 then
+  begin
+    lErrors := lErrors + ['Description too long (max length 15)'];
+  end;
+
+  if Length(Description) = 0 then
+  begin
+    lErrors := lErrors + ['Description is required'];
+  end;
+
+  if Length(Code) = 0 then
+  begin
+    lErrors := lErrors + ['Code is required'];
+  end;
+
+  if Length(lErrors) > 0 then
+  begin
+    raise EMVCException.Create('Some errors occurred', '', 0, HTTP_STATUS.BadRequest, lErrors);
+  end;
+end;
+
 procedure TCustomer.SetCity(const Value: String);
 begin
   FCity := Value;

samples/react/Server/src/services/WebModule.Main.dfm

@@ -1,5 +1,4 @@
 object wmMain: TwmMain
-  OldCreateOrder = False
   OnCreate = WebModuleCreate
   OnDestroy = WebModuleDestroy
   Actions = <>

samples/react/Server/src/services/WebModule.Main.pas

@@ -26,7 +26,7 @@ implementation
 {$R *.dfm}
 
 uses 
-  Controller.Customer,
+  Controller.Customers,
   System.IOUtils, 
   MVCFramework.Commons, 
   MVCFramework.Middleware.StaticFiles, 
@@ -53,13 +53,13 @@ procedure TwmMain.WebModuleCreate(Sender: TObject);
       //view path
       Config[TMVCConfigKey.ViewPath] := 'templates';
       //Max Record Count for automatic Entities CRUD
-      Config[TMVCConfigKey.MaxEntitiesRecordCount] := '20';
+      Config[TMVCConfigKey.MaxEntitiesRecordCount] := '200';
       //Enable Server Signature in response
       Config[TMVCConfigKey.ExposeServerSignature] := 'true';
       // Max request size in bytes
       Config[TMVCConfigKey.MaxRequestSize] := IntToStr(TMVCConstants.DEFAULT_MAX_REQUEST_SIZE);
     end);
-  FMVC.AddController(TCustomerController);
+  FMVC.AddController(TCustomersController);
   FMVC.AddMiddleware(TMVCCORSMiddleware.Create());
 
   // Required to enable serving of static files 

samples/react/WebApp/package.json

@@ -9,7 +9,7 @@
     "axios": "^0.21.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

samples/react/WebApp/src/App.css

@@ -1,3 +1,47 @@
 .body {
   color: aquamarine;
 }
+
+.error {
+  color: red;
+  margin: 0.5rem;
+  display: block;
+}
+
+.errors {
+  padding: 1rem;
+  background-color: lightblue;
+  margin: 1rem;
+  max-width: 50%;
+}
+
+
+h3 {
+  text-align: center;
+  padding: 0.3rem;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+  background-color: #111;
+}

samples/react/WebApp/src/App.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import Routers from './routers';
+import Layout from './Layout';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <Routers />
+      <Layout />
     </div>
   );
 }

samples/react/WebApp/src/Layout.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router-dom';
+import Customers from './components/customers/Customers';
+import Customer from './components/customer/Customer';
+import About from './components/about/About';
+
+const Holder = () => {
+    return <div>
+        <nav className="navbar navbar-light bg-light justify-content-between">
+            <span>🧭 React DelphiMVCFramework Sample</span>
+            <ul>
+                <li >
+                    <Link to={'/customer'}>Add</Link>
+                </li>
+                <li >
+                    <Link to={'/about'}>About</Link>
+                </li>
+            </ul>
+        </nav>
+        <Outlet></Outlet>
+    </div>
+}
+
+const Layout = () => {
+    return <BrowserRouter>
+        <Routes>
+            <Route path='/' element={<Holder></Holder>} >
+                <Route index path='/' element={<Customers></Customers>} />
+                <Route path='/customer/:id' element={<Customer></Customer>} />
+                <Route path='/customer' element={<Customer></Customer>} />
+                <Route path='/about' element={<About></About>} />
+                <Route path='*' element={<div>Not Found</div>} />
+            </Route>
+        </Routes>
+    </BrowserRouter>
+};
+
+export default Layout;

samples/react/WebApp/src/components/about/About.js

@@ -0,0 +1,6 @@
+import React from "react";
+const About = () => {
+    return <h3>DelphiMVCFramework React Sample</h3>
+}
+
+export default About;