Merge pull request #39 from darkmavis1980/feature/use-swr-hook

Feature/use swr hook

CHANGELOG.md

@@ -1,4 +1,24 @@
 
+<a name="v1.4.0"></a>
+## [v1.4.0](https://github.com/darkmavis1980/react-jest-boilerplate/compare/v1.3.0...v1.4.0) (2022-06-15)
+
+### Added
+
+* Added example using SWR to fetch data
+
+### Updated
+
+* Updated dependencies Updated snapshots
+* Updated component
+* Updated changelog
+
+### Pull Requests
+
+* Merge pull request [#38](https://github.com/darkmavis1980/react-jest-boilerplate/issues/38) from darkmavis1980/feature/add-error-boundary
+* Merge pull request [#37](https://github.com/darkmavis1980/react-jest-boilerplate/issues/37) from darkmavis1980/bugfix/update-version
+* Merge pull request [#36](https://github.com/darkmavis1980/react-jest-boilerplate/issues/36) from darkmavis1980/bugfix/fix-typo
+
+
 <a name="v1.3.0"></a>
 ## [v1.3.0](https://github.com/darkmavis1980/react-jest-boilerplate/compare/v1.2.3...v1.3.0) (2022-06-14)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-boilerplate",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Simple boilerplate for React with Jest support",
   "main": "index.js",
   "scripts": {
@@ -44,8 +44,8 @@
     "jest-cli": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "jest-transform-stub": "^2.0.0",
-    "mini-css-extract-plugin": "^2.6.0",
-    "react-test-renderer": "^18.1.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4",
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
@@ -59,9 +59,10 @@
     "axios": "^0.27.2",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router": "^6.2.1",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "swr": "^1.3.0"
   }
 }

src/components/Home/Home.jsx

@@ -1,5 +1,6 @@
 import React, { Suspense } from 'react';
 import Names from './Names';
+import NamesSwr from './NamesSwr';
 import ErrorBoundary from '../ErrorBoundary';
 import Loading from '../Loading';
 
@@ -11,6 +12,12 @@ const Home = () => (
         <Names />
       </Suspense>
     </ErrorBoundary>
+    <ErrorBoundary fallback={<p>Could not load the data from the API.</p>}>
+      <hr />
+      <Suspense fallback={<Loading />}>
+        <NamesSwr />
+      </Suspense>
+    </ErrorBoundary>
   </div>
 );
 

src/components/Home/Names.jsx

@@ -9,6 +9,7 @@ const Names = () => {
   return (
     <div>
       <h2>List of names</h2>
+      <p>This component will use a custom handler for fetching data.</p>
       <ul>
         {namesList.map(item => (
           <li key={item.id}>

src/components/Home/NamesSwr.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import useSWR from 'swr';
+import axios from 'axios';
+
+const fetcher = url => axios.get(url).then(({data}) => data);
+
+const NamesSwr = () => {
+  const { data: namesList } = useSWR('/sample.json', fetcher, { suspense: true});
+
+  return (
+    <div>
+      <h2>List of names with SWR</h2>
+      <p>This component will use the <a href="https://swr.vercel.app/" target="_blank" rel="noreferrer">SWR hook</a> for fetching data.</p>
+      <ul>
+        {namesList.map(item => (
+          <li key={item.id}>
+            {item.name}
+          </li>))}
+      </ul>
+    </div>
+  );
+};
+
+export default NamesSwr;

src/components/Home/__snapshots__/Home.test.jsx.snap

@@ -8,5 +8,9 @@ exports[`Home (Component) should match the snapshot 1`] = `
   <p>
     Loading...
   </p>
+  <hr />
+  <p>
+    Loading...
+  </p>
 </div>
 `;

src/components/__snapshots__/App.test.jsx.snap

@@ -17,6 +17,10 @@ exports[`(Component) App should match the snapshot 1`] = `
         <p>
           Loading...
         </p>
+        <hr />
+        <p>
+          Loading...
+        </p>
       </div>
     </div>
   </div>