auto scroll to last term when continue to read text

package.json

@@ -19,6 +19,7 @@
     "react-router": "latest",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
+    "react-scroll": "^1.7.11",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.4",
     "redux-devtools-extension": "^2.13.7",

src/Actions/TextAction.js

@@ -6,7 +6,8 @@ import {
   editTextAsync,
   getTextEditDetailAsync,
   getTextReadAsync,
-  getTextsAsync
+  getTextsAsync,
+  setTextBookmarkAsync
 } from "../Apis/TextApi";
 
 export const TEXT_FETCHED = "TEXT_FETCHED";
@@ -15,6 +16,7 @@ export const TEXT_DELETED = "TEXT_DELETED";
 export const TEXT_READ = "TEXT_READ";
 export const TEXT_EDITED = "TEXT_EDITED";
 export const TEXT_EDIT_DETAIL_FETCHED = "TEXT_EDIT_DETAIL_FETCHED";
+export const TEXT_BOOKMARK_SET = "TEXT_BOOKMARK_SET";
 
 /**
  * get texts action
@@ -84,3 +86,8 @@ export const getTextEditDetailAction = createAction(
     }
   }
 );
+
+export const setBookmarkAction = createAction(
+  TEXT_BOOKMARK_SET,
+  async (id, index) => setTextBookmarkAsync(id, index)
+);

src/Apis/TextApi.js

@@ -3,7 +3,8 @@ import {
   deleteAsync,
   getAsync,
   postAsync,
-  putAsync
+  putAsync,
+  patchAsync
 } from "../Utilities/HttpRequest";
 
 /**
@@ -58,3 +59,7 @@ export async function editTextAsync(id, text) {
 export async function getTextEditDetailAsync(textId) {
   return getAsync(`${TEXT_API}/edit-detail/${textId}`);
 }
+
+export async function setTextBookmarkAsync(id, index) {
+  return patchAsync(`${TEXT_API}`, id, "bookmark", { termIndex: index });
+}

src/Components/Pages/TextReadPage/TextReadPage.jsx

@@ -3,7 +3,8 @@ import React from "react";
 import { connect } from "react-redux";
 import Speech from "speak-tts";
 import { Tooltip } from "antd";
-import { readTextAction } from "../../../Actions/TextAction";
+import { animateScroll } from "react-scroll";
+import { readTextAction, setBookmarkAction } from "../../../Actions/TextAction";
 import styles from "./TextReadPage.module.scss";
 import TermEditForm from "../../Forms/TermEditForm";
 import {
@@ -27,6 +28,7 @@ class TextReadPage extends React.Component {
     } = this.props;
     readText(textId);
     this.speech = new Speech();
+    this.bookmark = React.createRef();
     this.speech.init();
   }
 
@@ -42,10 +44,22 @@ class TextReadPage extends React.Component {
         this.speech.setLanguage(language.speakCode);
       }
     }
+    if (!prevProps.readingText && this.bookmark.current) {
+      animateScroll.scrollTo(
+        this.bookmark.current.offsetTop -
+          this.bookmark.current.parentNode.offsetTop,
+        {
+          containerId: "contentPanel",
+          smooth: true
+        }
+      );
+    }
   }
 
-  onTermClick = term => {
+  onTermClick = (term, index) => {
     this.speech.speak({ text: term.content });
+    const { setBookmark, readingText } = this.props;
+    setBookmark(readingText.id, index);
   };
 
   render() {
@@ -90,18 +104,32 @@ class TextReadPage extends React.Component {
           <span>{}</span>
           <SingleBarChart data={statistic} />
         </Tooltip>
-        <div className={styles.contentPanel}>
-          <div>
-            {readingText.terms.map((term, index) => (
+        <div id="contentPanel" className={styles.contentPanel}>
+          {readingText.terms.map((term, index) => {
+            if (index === readingText.bookmark) {
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                <span key={index} ref={this.bookmark}>
+                  <Term
+                    onTermClick={t => this.onTermClick(t, index)}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={index}
+                    term={term}
+                    index={index}
+                  />
+                </span>
+              );
+            }
+            return (
               <Term
-                onTermClick={this.onTermClick}
+                onTermClick={t => this.onTermClick(t, index)}
                 // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 term={term}
                 index={index}
               />
-            ))}
-          </div>
+            );
+          })}
         </div>
         {editingTerm ? (
           <div>
@@ -122,7 +150,8 @@ export default connect(
   {
     readText: readTextAction,
     getTerm: getTermAction,
-    setEditingTerm: setEditingTermAction
+    setEditingTerm: setEditingTermAction,
+    setBookmark: setBookmarkAction
   }
 )(TextReadPage);
 TextReadPage.defaultProps = {
@@ -135,5 +164,6 @@ TextReadPage.propTypes = {
   match: PropTypes.shape().isRequired,
   readText: PropTypes.func.isRequired,
   readingText: PropTypes.shape(),
-  languages: PropTypes.arrayOf(PropTypes.shape({})).isRequired
+  languages: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  setBookmark: PropTypes.func.isRequired
 };

src/Utilities/HttpRequest.js

@@ -178,3 +178,28 @@ export async function getJsonpAsync(
     .then(handleResponse)
     .catch(defaultResponseErrorHandler);
 }
+
+export async function patchAsync(
+  url,
+  id,
+  field,
+  body,
+  handleResponse = defaultResponseHandler
+) {
+  return fetch(`${url}/${id}/${field}`, {
+    body: JSON.stringify(body), // body data type must match "Content-Type" header
+    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+    // credentials: "include", // include, same-origin, *omit
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+      ...getAuthenticationHeader()
+      // "Content-Type": "application/x-www-form-urlencoded",
+    },
+    method: "PATCH", // *GET, POST, PUT, DELETE, etc.
+    mode: "cors", // no-cors, cors, *same-origin
+    redirect: "follow", // manual, *follow, error
+    referrer: "no-referrer" // no-referrer, *client
+  })
+    .then(handleResponse)
+    .catch(defaultResponseErrorHandler);
+}