Merge pull request #3 from rowasc/bugfixes-offline-support

Offline support is fixed now for basic form fields.
ushahidi · Aug 23, 2019 · 9e40d8d · 9e40d8d
2 parents f988cdf + 07cc23e
commit 9e40d8d
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 56 deletions.
diff --git a/components/form.js b/components/form.js
@@ -1,9 +1,6 @@
 import React from "react";
-import Link from "next/link";
 import { fetchBearerToken, fetchFormFields, postFormData } from "./fetchCalls";
 
-const baseUrl = process.env.baseUrl;
-
 export default class Form extends React.Component {
   constructor() {
     super();
@@ -34,76 +31,84 @@ export default class Form extends React.Component {
     return isValid;
   }
 
+
   getToken() {
-    let token = JSON.parse(localStorage.getItem("Bearer Token"));
-    if (!token || !this.isTokenValid()) {
-      fetchBearerToken().then(data => {
-        if (data.error) {
-          // TODO: Add error message for user
-          return;
-        }
-        this.setState({
-          token: { ...data, fetching_time: new Date().getTime() }
-        })
-      });
-    } else {
-      this.setState({ token: token });
-    }
+    return new Promise((resolve, reject) => {
+      let token = JSON.parse(localStorage.getItem("Bearer Token"));
+      if (!token || !this.isTokenValid()) {
+        fetchBearerToken().then(data => {
+          if (!data || data.error) {
+            // TODO: Add error message for user
+            reject(data);
+            return;
+          }
+          this.setState({
+            token: { ...data, fetching_time: new Date().getTime() }
+          })
+          localStorage.setItem("Bearer Token", JSON.stringify(this.state.token));
+          resolve(data);
+        });
+      } else {
+        this.setState({ token: token });
+        resolve(token);
+      }
+    }) 
   }
 
   getFormFields() {
-    // Fetch the data form fields from API, use it in state
-    let formFields = JSON.parse(localStorage.getItem("Form Fields"));
-    if (!(Array.isArray(formFields) && formFields.length)) {
-      fetchFormFields().then(data =>
+    this.getToken().then(response => {
+      // Fetch the data form fields from API, use it in state
+      let formFields = JSON.parse(localStorage.getItem("Form Fields"));
+      if (!(Array.isArray(formFields) && formFields.length)) {
+        fetchFormFields().then(data =>
+          this.setState({
+            formFields: data.results
+          })
+        );
+        localStorage.setItem("Form Fields", JSON.stringify(this.state.formFields));
+      } else {
         this.setState({
-          formFields: data.results
-        })
-      );
-    } else {
-      this.setState({
-        formFields: formFields
-      });
-    }
+          formFields: formFields
+        });
+      }
+    }).catch(err => {
+      console.error("Could not get an access token from localStorage or the server");
+    })
   }
 
   isOnlineEvent = e => {
     let formDataArray = JSON.parse(
       localStorage.getItem("Failed Form Submission Data")
     );
 
-    failedPosts = [];
-
+    let failedPosts = [];
     if (!formDataArray) {
-      return;
-    } else {
-      formDataArray.map(formData => {
-        postFormData(formData, this.state.token.access_token).then(response => {
-          if (!response.ok) {
-            failedPosts.push(formData);
-          }
-        });
+      formDataArray = [];
+    }
+
+    formDataArray.map(formData => {
+      postFormData(formData, this.state.token.access_token).then(response => {
+        if (!response.ok) {
+          failedPosts.push(formData);
+        }
       });
+    });
 
-      if (failedPosts.length === 0) {
-        localStorage.setItem(
-          "Failed Form Submission Data",
-          JSON.stringify(failedPosts)
-        );
-      } else {
-        localStorage.removeItem("Failed Form Submission Data");
-      }
+    if (failedPosts.length === 0) {
+      localStorage.setItem(
+        "Failed Form Submission Data",
+        JSON.stringify(failedPosts)
+      );
+    } else {
+      localStorage.removeItem("Failed Form Submission Data");
     }
   };
 
   componentDidMount() {
     this.getFormFields();
-    this.getToken();
   }
 
   componentDidUpdate(prevProps, prevState) {
-    localStorage.setItem("Form Fields", JSON.stringify(this.state.formFields));
-    localStorage.setItem("Bearer Token", JSON.stringify(this.state.token));
     window.addEventListener("online", this.isOnlineEvent);
   }
 
@@ -114,11 +119,13 @@ export default class Form extends React.Component {
     if (navigator.onLine) {
       postFormData(this.state.formData, this.state.token.access_token);
     } else {
-      let formDataArray = JSON.parse(
+      formDataArray = JSON.parse(
         localStorage.getItem("Failed Form Submission Data")
       );
+      if (!formDataArray) {
+        formDataArray = [];
+      }
       formDataArray.push(this.state.formData);
-
       localStorage.setItem(
         "Failed Form Submission Data",
         JSON.stringify(formDataArray)
@@ -170,7 +177,6 @@ export default class Form extends React.Component {
                 : field.key
             }
             placeholder={`Enter the ${field.type}`}
-            value={this.state.formData[field.type]}
             onChange={e => this.change(e)}
           />
         </div>

diff --git a/components/head.js b/components/head.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import NextHead from 'next/head'
+import { string } from 'prop-types'
+const defaultDescription = 'A standalone report submission tool for Ushahidi deployments.'
+const defaultOGURL = ''
+const defaultOGImage = 'https://www.ushahidi.com//uploads/about-images/ushahidi-stamp.png'
+
+const Head = props => (
+  <NextHead>
+    <meta charSet="UTF-8" />
+    <title>{props.title || ''}</title>
+    <meta
+      name="description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
+    <link rel="apple-touch-icon" href="/static/touch-icon.png" />
+    <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
+    <link rel="icon" href="/static/favicon.ico" />
+    <meta property="og:url" content={props.url || defaultOGURL} />
+    <meta property="og:title" content={props.title || ''} />
+    <meta
+      property="og:description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="twitter:site" content={props.url || defaultOGURL} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+  </NextHead>
+)
+
+Head.propTypes = {
+  title: string,
+  description: string,
+  url: string,
+  ogImage: string
+}
+
+export default Head
diff --git a/pages/index.js b/pages/index.js
@@ -1,10 +1,12 @@
 import React from "react";
 import Form from "../components/form";
+import Head from "../components/head";
 import "./index.css";
-
-const Home = () => (
+const Index = () => (
   <div>
+
+      <Head />
     <Form />
   </div>
 );
-export default Home;
+export default Index;