changed pageTitle to pagetitle to get rid of console error when modul…

…e is hosted on another page

README.md

@@ -66,7 +66,7 @@ Add the following code into your project:
 
 ```
 <link rel="stylesheet" href="main.css" />
-<div id="feedback-widget" lang="en" pageTitle="<your page name>" endpoint="<your unique id>"></div>
+<div id="feedback-widget" lang="en" pagetitle="<your page name>" endpoint="<your unique id>"></div>
 <script src="./feedback-module.min.js"></script>
 ```
 
@@ -89,7 +89,7 @@ Add the following code into your project:
 <div
   id="feedback-widget"
   lang={<your page's current language>}
-  pageTitle="<your page name>"
+  title="<your page name>"
   endpoint="<your unique id>"
 ></div>
 <ScriptTag src="/feedback-module.min.js" type="text/javascript" />

backend/setup/index.js

@@ -39,7 +39,7 @@ module.exports = function (context, req) {
   const body = req.body;
   body.id = uniqid();
 
-  if (!body.pageTitle || body.pageTitle === "") {
+  if (!body.pagetitle || body.pagetitle === "") {
     errorMsg("Please enter a valid page title.");
   } else if (!body.agency || body.agency === "") {
     errorMsg("Please enter a valid agency name.");

feedback-module/public/index.html

@@ -31,7 +31,7 @@
     <div
       id="feedback-widget"
       lang="en"
-      pageTitle="{this current page}"
+      pagetitle="{this current page}"
       endpoint="1"
     ></div>
     <!--

feedback-module/src/App.js

@@ -6,7 +6,7 @@ import { Helmet, HelmetProvider } from "react-helmet-async";
 
 import Module from "./components/Module";
 
-function App({ pageTitle, lang, endpoint }) {
+function App({ pagetitle, lang, endpoint }) {
   const { i18n } = useTranslation();
 
   useEffect(() => {
@@ -22,7 +22,7 @@ function App({ pageTitle, lang, endpoint }) {
         />
       </Helmet>
       <Module
-        pageTitle={pageTitle}
+        pagetitle={pagetitle}
         endpoint={endpoint}
         dir={i18n.dir(i18n.language)}
       />

feedback-module/src/components/Module.js

@@ -21,7 +21,7 @@ import TextboxList from "./TextboxList";
 import ErrorAlert from "./common/ErrorAlert";
 import LightContainer from "./LightContainer";
 
-function Module({ pageTitle, endpoint, dir }) {
+function Module({ pagetitle, endpoint, dir }) {
   const [feedbackForAPI, setFeedbackForAPI] = useState({});
   const [userInfo, setUserInfo] = useState({});
   const [screen, setScreen] = useState(INITIAL_SCREEN);
@@ -246,7 +246,7 @@ function Module({ pageTitle, endpoint, dir }) {
         <LightContainer formID={screen.formID}>
           {screen.title && (
             <p className={`${H1_DARK_STYLE} ${dir === "rtl" && "text-right"}`}>
-              {`${t(screen.title, { page: pageTitle })}${
+              {`${t(screen.title, { page: pagetitle })}${
                 screen.checkboxes && screen.checkboxes.required ? "*" : ""
               }`}
             </p>

feedback-module/src/index.js

@@ -7,17 +7,17 @@ import App from "./App";
 
 const WidgetDivs = document.querySelectorAll("#feedback-widget");
 
-const renderApp = (Div, lang, pageTitle, endpoint) => {
+const renderApp = (Div, lang, pagetitle, endpoint) => {
   Div.attributes.lang && (lang = Div.attributes.lang.value);
-  Div.attributes.pageTitle && (pageTitle = Div.attributes.pageTitle.value);
+  Div.attributes.pagetitle && (pagetitle = Div.attributes.pagetitle.value);
   Div.attributes.endpoint && (endpoint = Div.attributes.endpoint.value);
   ReactDOM.render(
     <React.StrictMode>
       <Suspense fallback="... is loading">
         <App
           domElement={Div}
           lang={lang}
-          pageTitle={pageTitle}
+          pagetitle={pagetitle}
           endpoint={endpoint}
         />
       </Suspense>
@@ -28,14 +28,14 @@ const renderApp = (Div, lang, pageTitle, endpoint) => {
 
 WidgetDivs.forEach((Div) => {
   let currentLang = "en";
-  let pageTitle = "";
+  let pagetitle = "";
   let endpoint = "";
-  renderApp(Div, currentLang, pageTitle, endpoint);
+  renderApp(Div, currentLang, pagetitle, endpoint);
 
   let observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       if (mutation.type == "attributes") {
-        renderApp(Div, currentLang, pageTitle, endpoint);
+        renderApp(Div, currentLang, pagetitle, endpoint);
       }
     });
   });