[FIX] rpc: fix code examples for tutorial and service

closes #13234

X-original-commit: 2712116
Signed-off-by: Florent Dardenne (dafl) <[email protected]>

Author: leclerc-leo

content/developer/reference/frontend/services.rst

@@ -95,15 +95,13 @@ component later. For example:
 
 .. code-block:: javascript
 
-    import { useService } from "@web/core/utils/hooks";
+    import { rpc } from "@web/core/network/rpc";
 
     class MyComponent extends Component {
       setup() {
-        const rpc = useService("rpc");
-
         onWillStart(async () => {
-          this.someValue = await rpc(...);
-        });
+          const result = await rpc(...);
+        })
       }
     }
 
@@ -623,11 +621,10 @@ argument and optionally, a ``params`` object can be given as a second argument.
 
 .. code-block:: javascript
 
-   // in setup
-   this.rpc = useService("rpc");
+  import { rpc } from "@web/core/network/rpc";
 
    // somewhere else, in an async function:
-   const result = await this.rpc("/my/route", { some: "value" });
+   const result = await rpc("/my/route", { some: "value" });
 
 .. note::
 

content/developer/tutorials/discover_js_framework/02_build_a_dashboard.rst

@@ -199,22 +199,23 @@ Let's improve the dashboard by adding a few dashboard items to display *real* bu
 The `awesome_dashboard` addon provides a `/awesome_dashboard/statistics` route that is meant
 to return some interesting information.
 
-To call a specific controller, we need to use the :ref:`rpc service <frontend/services/rpc>`.
+To call a specific controller, we need to use the :ref:`rpc <frontend/services/rpc>` function.
 It only exports a single function that perform the request: :code:`rpc(route, params, settings)`.
 A basic request could look like this:
 
 .. code-block:: js
 
+   import { rpc } from "@web/core/network/rpc";
+   // ...
+
    setup() {
-         this.rpc = useService("rpc");
-         onWillStart(async () => {
-            const result = await this.rpc("/my/controller", {a: 1, b: 2});
-            // ...
-         });
+      onWillStart(async () => {
+         const result = await rpc("/my/controller", {a: 1, b: 2});
+      })
+      // ...
    }
 
-#. Update `Dashboard` so that it uses the `rpc` service.
-#. Call the statistics route `/awesome_dashboard/statistics` in the `onWillStart` hook.
+#. Update `Dashboard` so that it uses the `rpc` function and call the statistics route `/awesome_dashboard/statistics`.
 #. Display a few cards in the dashboard containing:
 
    - Number of new orders this month
@@ -227,7 +228,7 @@ A basic request could look like this:
    :align: center
 
 .. seealso::
-   `Code: rpc service <{GITHUB_PATH}/addons/web/static/src/core/network/rpc_service.js>`_
+   `Code: rpc <{GITHUB_PATH}/addons/web/static/src/core/network/rpc.js>`_
 
 5. Cache network calls, create a service
 ========================================