Merge pull request #128 from OpenLiberty/staging

Merge staging to prod - Updating react-table to v7  (#122)

Author: gkwan-ibm

LICENSE

@@ -1,4 +1,4 @@
-// Copyright (c) 2020, 2022 IBM Corporation and others.
+// Copyright (c) 2020, 2023 IBM Corporation and others.
 // Licensed under Creative Commons Attribution-NoDerivatives
 // 4.0 International (CC BY-ND 4.0)
 //   https://creativecommons.org/licenses/by-nd/4.0/
@@ -16,7 +16,7 @@
 :common-includes: https://raw.githubusercontent.com/OpenLiberty/guides-common/prod
 :source-highlighter: prettify
 :page-seo-title: Consuming a RESTful Java web service with ReactJS
-:page-seo-description: A getting started tutorial with examples on how to access a RESTful Java micoservice and deserialize the returned JSON in ReactJS.
+:page-seo-description: A getting started tutorial with examples on how to access a RESTful Java micoservice and deserialize the returned JSON in React Table 7 of ReactJS.
 :guide-author: Open Liberty
 = Consuming a RESTful web service with ReactJS
 
@@ -72,10 +72,11 @@ mvn liberty:run
 endif::[]
 
 ifdef::cloud-hosted[]
-In this IBM cloud environment, you need to update the URL to access the ***artists.json***. Run the following commands to go to the ***finish*** directory and update the file where specified the URL:
+In this IBM cloud environment, you need to update the URL to access the ***artists.json***. Run the following commands to go to the ***finish*** directory and update the files where the URL has been specified:
 ```bash
 cd finish
-sed -i 's=http://localhost:9080/artists='"http://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\.labs\./.proxy./g')/artists"'=' src/main/webapp/static/js/main.a223975a.js
+sed -i 's=http://localhost:9080/artists='"https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\.labs\./.proxy./g')/artists"'=' src/main/webapp/static/js/main.2d7e902e.js
+sed -i 's=http://localhost:9080/artists='"https://${USERNAME}-9080.$(echo $TOOL_DOMAIN | sed 's/\.labs\./.proxy./g')/artists"'=' /home/project/guide-rest-client-reactjs/finish/src/main/frontend/src/Components/ArtistTable.js
 ```
 
 To try out the application, run the following Maven goal to build the application and deploy it to Open Liberty:
@@ -219,9 +220,9 @@ App.js
 include::finish/src/main/frontend/src/Components/App.js[]
 ----
 
-The `App.js` file returns the [hotspot=react-component file=0]`ArtistTable` component to create a reusable element that encompasses your web application. 
+The `App.js` file returns the [hotspot=react-component file=0]`ArtistTable` function to create a reusable element that encompasses your web application. 
 
-Next, create the `ArtistTable` component that fetches data from your back end and renders it in a table. 
+Next, create the `ArtistTable` function that fetches data from your back end and renders it in a table. 
 
 [role="code_command hotspot file=1", subs="quotes"]
 ----
@@ -230,16 +231,16 @@ Next, create the `ArtistTable` component that fetches data from your back end an
 ----
 
 ArtistTable.js
-[source, javascript, linenums, role='code_column hide_tags=get-posts,mount-posts,axios-library']
+[source, javascript, linenums, role='code_column hide_tags=get-posts,useEffect,axios-library']
 ----
 include::finish/src/main/frontend/src/Components/ArtistTable.js[]
 ----
 
-The [hotspot=react-library file=1]`React` library imports the `react` package for you to create the [hotspot=class file=1]`ArtistTable` component as inheritance of the `React Component` and use its values. The [hotspot=state-object file=1]`state` object is initialized to represent the state of the posts that appear on the paginated table. The `ArtistTable` component also needs to be [hotspot=export-artisttable file=1]`exported` as a reusable UI element that can be used across your application.
+The [hotspot=react-library file=1]`React` library imports the `react` package for you to create the [hotspot=ArtistTable file=1]`ArtistTable` function. This function must have the `export` declaration because it is being exported to the `App.js` module. The [hotspot=posts file=1]`posts` object is initialized using a React Hook that lets you add a state to represent the state of the posts that appear on the paginated table.
 
 To display the returned data, you will use pagination. Pagination is the process of separating content into discrete pages, and it can be used for handling data sets in React. In your application, you'll render the columns in the paginated table. The [hotspot=table-info file=1]`columns` constant is used to define the table that is present on the webpage.
 
-The [hotspot=return-table file=1]`return` statement returns the paginated table where you defined the properties for the [hotspot=table file=1]`ReactTable`. The [hotspot=110 file=1]`data` property corresponds to the consumed data from the API endpoint and is assigned to the `data` of the table. The [hotspot=113 file=1]`columns` property corresponds to the rendered column object and is assigned to the `columns` of the table.
+The [hotspot=useTable file=1]`useTable` hook creates a paginated table. The `useTable` hook takes in the [hotspot=table-info file=1]`columns`, [hotspot=posts file=1]`posts`, and `setPosts` objects as parameters. It returns a paginated table that is assigned to the [hotspot=table file=1]`table` constant. The [hotspot=table file=1]`table` constant renders the paginated table on the webpage. The [hotspot=return-table file=1]`return` statement returns the paginated table. The [hotspot=useSortBy file=1]`useSortBy` hook sorts the paginated table by the column headers. The [hotspot=usePagination file=1]`usePagination` hook creates the pagination buttons at the bottom of the table that are used to navigate through the paginated table.
 
 // =================================================================================================
 // Importing the HTTP client
@@ -249,7 +250,7 @@ The [hotspot=return-table file=1]`return` statement returns the paginated table
 
 Your application needs a way to communicate with and retrieve resources from RESTful web services to output the resources onto the paginated table. The https://github.com/axios/axios[Axios^] library will provide you with an HTTP client. This client is used to make HTTP requests to external resources. Axios is a promise-based HTTP client that can send asynchronous requests to REST endpoints. To learn more about the Axios library and its HTTP client, see the https://www.npmjs.com/package/axios[Axios documentation^].
 
-The [hotspot=get-posts]`getArtistsInfo()` function uses the Axios API to fetch data from your back end. This function is called when the `ArtistTable` is rendered to the page using the [hotspot=mount-posts]`componentDidMount()` React lifecycle method.
+The [hotspot=get-posts]`GetArtistsInfo()` function uses the Axios API to fetch data from your back end. This function is called when the `ArtistTable` is rendered to the page using the [hotspot=useEffect]`useEffect()` React lifecycle method.
 
 [role="code_command hotspot", subs="quotes"]
 ----
@@ -264,11 +265,9 @@ include::finish/src/main/frontend/src/Components/ArtistTable.js[]
 ----
 
 [role="edit_command_text"]
-Add the [hotspot=axios-library]`axios` library and the [hotspot=get-posts]`getArtistsInfo()` function. Next, add the [hotspot=mount-posts]`componentDidMount()` method to your component. 
+Add the [hotspot=axios-library]`axios` library and the [hotspot=get-posts]`GetArtistsInfo()` function.
 
-The [hotspot=axios]`axios` HTTP call is used to read the artist JSON that contains the data from the sample JSON file in the `resources` directory. When a response is successful, the state of the system changes by assigning [hotspot=response-data]`response.data` to [hotspot=data]`posts`. The [hotspot=convert-data]`convertData` function manipulates the JSON data to allow it to be accessed by the `ReactTable`. You will notice the [hotspot=spread-one hotspot=spread-two]`object spread syntax` that the `convertData` function uses, which is a relatively new sytnax made for simplicity. To learn more about it, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals[Spread in object literals^].
-
-The [hotspot=set-state]`this.setState` function is used to update the state of your React component with the data that was fetched from the server. This update triggers a rerender of your React component, which updates the table with the artist data. For more information on how state in React works, see the React documentation on https://reactjs.org/docs/faq-state.html[state and lifecycle^].
+The [hotspot=axios]`axios` HTTP call is used to read the artist JSON that contains the data from the sample JSON file in the `resources` directory. When a response is successful, the state of the system changes by assigning [hotspot=response-data]`response.data` to [hotspot=posts]`posts`. The [hotspot=for-artists]`artists` and their `albums` JSON data are manipulated to allow them to be accessed by the `ReactTable`. The [hotspot=spread-one]`...rest` or [hotspot=spread-two]`...album` object spread syntax is designed for simplicity. To learn more about it, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals[Spread in object literals^].
 
 ifdef::cloud-hosted[]
 Finally, run the following command to update the URL to access the ***artists.json*** in the ***ArtistTable.js*** file:

README.adoc

@@ -55,7 +55,7 @@
             <plugin>
                 <groupId>io.openliberty.tools</groupId>
                 <artifactId>liberty-maven-plugin</artifactId>
-                <version>3.5.1</version>            
+                <version>3.7.1</version>            
             </plugin>
             <!-- Frontend resources -->
             <!-- tag::frontend-plugin[] -->