Fix of the IMA.js tutorial

docs/tutorial/adding-some-state.md

@@ -23,7 +23,7 @@ but to make this tutorial simpler, we're going to replace contents of this file
 ```javascript
 import { AbstractController } from '@ima/core';
 
-export default class HomeController extends AbstractController {
+export class HomeController extends AbstractController {
   static get $dependencies() {
     return [];
   }
@@ -243,6 +243,8 @@ Put the following code into the `Post.jsx` file:
 ```jsx
 import { AbstractComponent } from '@ima/react-page-renderer';
 import React from 'react';
+import './post.less';
+
 
 export default class Post extends AbstractComponent {
   render() {

docs/tutorial/fetching-data.md

@@ -125,7 +125,7 @@ export default class PostResource {
 
   getEntityList() {
     return this._http
-      .get('http://localhost:3001/static/api/posts.json', {})
+      .get('http://localhost:3001/static/static/public/posts.json', {})
       .then(response => this._factory.createList(response.body));
   }
 }
@@ -320,7 +320,7 @@ but this time fetched from the server! Or are they?
 ## Server-side rendering
 
 If you open your browsers's developer tools, you may notice that the network log does
-not show any request to `http://localhost:3001/static/api/posts.json`.
+not show any request to `http://localhost:3001/static/static/public/posts.json`.
 
 You may remember that IMA.js is an isomorphic JavaScript application stack.
 This means that our application gets rendered at the server first, then it is
@@ -330,5 +330,5 @@ application is "reanimated" at the client-side using the state information.
 IMA.js caches the requests we make using the HTTP service at the server-side
 and sends the serialized cache to the client. The cache is then deserialized at
 the client-side, so the request to
-`http://localhost:3001/static/api/posts.json` we do in our post resource will
+`http://localhost:3001/static/static/public/posts.json` we do in our post resource will
 be resolved from the cache, leading to no additional HTTP request being made.

docs/tutorial/final-polish.md

@@ -25,7 +25,7 @@ with 2 new state keys:
 ```javascript
 constructor(props, context) {
   super(props, context);
-
+  ...
   this.state = {
     author: '',
     content: '',
@@ -128,7 +128,7 @@ _onSubmit(event) {
     return;
   }
 
-  this.fire('postSubmitted', {
+  this.fire(this.#containerRef.current, 'postSubmitted', {
     author: this.state.author,
     content: this.state.content
   });
@@ -181,7 +181,7 @@ Next we need to update the `getEntityList()` method in the **post resource** cla
 
 ```javascript
 return this._http
-  .get('http://localhost:3001/static/api/posts.json', {})
+  .get('http://localhost:3001/static/static/public/posts.json', {})
   .then(response => {
     response.body.forEach(post => (post.isSaved = true));
     return response.body;
@@ -347,7 +347,7 @@ Nothing really new here, we're just adding the `post-pending` CSS class on our
 post's root element if the post is not saved yet.
 
 Open the post's style file (`app/component/post/post.less`) and add the
-following the content:
+following content:
 
 ```scss
 .post-pending .card-body {
@@ -731,7 +731,7 @@ With this issue taken care of, let's resolve the posts refresh race condition.
 ### Posts refresh race condition
 
 To fix our refresh race condition, we'll envelope the server responses and add a timestamp at which
-the response has been generated. Open the `app/assets/static/api/posts.json`
+the response has been generated. Open the `app/public/posts.json`
 file and update its contents as follows:
 
 ```json
@@ -806,7 +806,7 @@ Next update the `getEntityList()` method of the post resource
 
 ```javascript
 return this._http
-  .get('http://localhost:3001/static/api/posts.json', {})
+  .get('http://localhost:3001/static/static/public/posts.json', {})
   .then(response => {
     response.body.posts.forEach(post => (post.isSaved = true));
 

docs/tutorial/introduction.md

@@ -85,8 +85,7 @@ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo s
 
 All files that are specific to our application are located in the `app`,
 directory. The `package.json` file provides the `npm`  tool with information
-about the dependencies of our application, `gulpConfig.js` configures our gulp tasks (such as LESS file processing), and, finally,
-the `gulpfile.js` loads the tasks we can run using the `gulp` tool.
+about the dependencies of our application.
 
 You may have also noticed the `doc`, `build` and `server` directories *(some of these folders may not be visible until they are generated in the first call of `npm run dev` or `npm run build`)*.
  - The `doc` directory contains the documentation for IMA.js APIs and our application

docs/tutorial/static-view.md

@@ -20,6 +20,7 @@ Now let's replace the contents of the file with a blank view:
 ```jsx
 import { PageContext, AbstractComponent } from '@ima/react-page-renderer';
 import React from 'react';
+import './homeView.less';
 
 export class HomeView extends AbstractComponent {
   static get contextType() {
@@ -210,14 +211,14 @@ This will save us a lot of effort with styling our UI.
 #### Defining custom styles
 
 Let's write some CSS to make our guestbook look even better. Open the
-`app/assets/less/setting.less` file and add the following code to set up our
+`app/less/globals.less` file and add the following code to set up our
 layout configuration:
 
 ```scss
 @post-author-alignment: right;
 ```
 
-Next open the `app/assets/less/base.less` file and add the following code below the existing one:
+Next open the `app/less/app.less` file and add the following code below the existing one:
 
 ```scss
 form {

docs/tutorial/writing-posts.md

@@ -68,16 +68,35 @@ those input to the state of our `PostingForm` component.
 We can't forget to define the default state for these two keys:
 
 ```javascript
+#containerRef;
 constructor(props, context) {
   super(props, context);
-
+  this.#containerRef = createRef();
   this.state = {
     author: '',
     content: ''
   };
 }
 ```
 
+Import the `createRef` from React to the
+beginning of the file:
+
+```javascript
+import { createRef } from 'react';
+```
+
+...and add `ref={this.#containerRef}` to the first `div` in the the component:
+
+```javascript
+...
+render() {
+    return (
+      <div className='posting-form card' ref={this.#containerRef}>
+        <form action='' method='post' onSubmit={e => this._onSubmit(e)}>
+          ...
+```
+
 This adds some internal state to our form component, which we'll maintain
 separately from the main page state maintained by the home page controller.
 
@@ -100,7 +119,7 @@ The only thing that remains is to define the `_onSubmit()` in our component:
 _onSubmit(event) {
   event.preventDefault();
 
-  this.fire('postSubmitted', {
+  this.fire(this.#containerRef.current, 'postSubmitted', {
     author: this.state.author,
     content: this.state.content
   });
@@ -174,7 +193,7 @@ Now add the following method for creating new posts to the post resource
 ```javascript
 createPost(postData) {
   return this._http
-    .post('http://localhost:3001/static/api/posts.json', postData)
+    .post('http://localhost:3001/static/static/public/posts.json', postData)
     .then(response => this._factory.createEntity(response.body));
 }
 ```