formData

diff --git a/components/fetchCalls.js b/components/fetchCalls.js
index 679defe..929e127 100644
--- a/components/fetchCalls.js
+++ b/components/fetchCalls.js
@@ -2,67 +2,75 @@ const baseUrl = process.env.baseUrl;
 const form_id = process.env.form_id;

 const fetchBearerToken = () => {
-  return fetch(baseUrl + "/oauth/token", {
-    method: "POST",
-    body: JSON.stringify({
-      scope: "*",
-      client_secret: process.env.client_secret,
-      client_id: process.env.client_id,
-      grant_type: "client_credentials" //replace it with client_credentials
+    return fetch(baseUrl + '/oauth/token', {
+        method: 'POST',
+        body: JSON.stringify({
+            scope: '*',
+            client_secret: process.env.client_secret,
+            client_id: process.env.client_id,
+            grant_type: 'client_credentials' //replace it with client_credentials
+        })
     })
-  })
-    .then(response => {
-      if (response.ok) {
-        return response.json();
-      } else {
-        throw new Error(
-          "Something went wrong, response code is",
-          response.status
-        );
-      }
-    })
-    .catch(err => console.error(err));
+        .then(response => {
+            if (response.ok) {
+                return response.json();
+            } else {
+                throw new Error(
+                    'Something went wrong, response code is',
+                    response.status
+                );
+            }
+        })
+        .catch(err => console.error(err));
 };

 const fetchFormFields = () => {
-  return fetch(
-    baseUrl +
-      "/api/v3/forms/" +
-      form_id +
-      "/attributes?order=asc&orderby=priority"
-  )
-    .then(response => {
-      if (response.ok) {
-        return response.json();
-      } else {
-        throw new Error(
-          "Something went wrong, response code is",
-          response.status
-        );
-      }
-    })
-    .catch(err => console.error(err));
+    return fetch(
+        baseUrl +
+            '/api/v3/forms/' +
+            form_id +
+            '/attributes?order=asc&orderby=priority'
+    )
+        .then(response => {
+            if (response.ok) {
+                return response.json();
+            } else {
+                throw new Error(
+                    'Something went wrong, response code is',
+                    response.status
+                );
+            }
+        })
+        .catch(err => console.error(err));
 };

 // Make a post request to Ushahidi sever
 const postFormData = (formData, access_token) => {
-  return fetch(baseUrl + "/api/v3/posts", {
-    method: "POST",
-    body: JSON.stringify(formData),
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${access_token}`
-    }
-  })
-    .then(response => {
-      return response;
+    let postData = {
+        title: formData.title,
+        content: formData.description,
+        values: formData.values,
+        form: {
+            id: form_id
+        }
+    };
+    return fetch(baseUrl + '/api/v3/posts', {
+        method: 'POST',
+        body: JSON.stringify(postData),
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${access_token}`
+        }
     })
-    .catch(error => console.log(error));
+        .then(response => {
+            return response;
+        })
+        .catch(error => console.log(error));
 };

 module.exports = {
-  fetchBearerToken,
-  fetchFormFields,
-  postFormData
+    fetchBearerToken,
+    fetchFormFields,
+    postFormData
 };
diff --git a/components/form.js b/components/form.js
index cf61e09..11e8e80 100644
--- a/components/form.js
+++ b/components/form.js
@@ -1,171 +1,191 @@
-import React from "react";
-import Link from "next/link";
-import { fetchBearerToken, fetchFormFields, postFormData } from "./fetchCalls";
+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();
-    this.state = {
-      token: {
-        accessToken: "",
-        expiresIn: 0,
-        refreshToken: "",
-        tokenType: ""
-      },
-      formFields: [],
-      formData: {}
-    };
-  }
-
-  // Make state targets equal to the value of input fields
-  change = e => {
-    this.setState({
-      formData: {
-        ...this.state.formData,
-        [e.target.name]: e.target.value
-      }
-    });
-  };
-
-  isTokenValid() {
-    let isValid = false;
-
-    const currentTime = new Date().getTime();
-    const tokenFetchTime = this.state.token.fetching_time;
-    const expirationTime = this.state.token.expires_in;
-
-    if (currentTime < tokenFetchTime + expirationTime) {
-      isValid = true;
+    constructor() {
+        super();
+        this.state = {
+            tempData: {},
+            token: {
+                accessToken: '',
+                expiresIn: 0,
+                refreshToken: '',
+                tokenType: ''
+            },
+            formFields: [],
+            formData: {}
+        };
     }

-    return isValid;
-  }
+    isTokenValid() {
+        let isValid = false;

-  getToken() {
-    let token = JSON.parse(localStorage.getItem("Bearer Token"));
-    if (!token || this.isTokenValid()) {
-      fetchBearerToken().then(data =>
-        this.setState({
-          token: { ...data, fetching_time: new Date().getTime() }
-        })
-      );
-    } else {
-      this.setState({ token: token });
+        const currentTime = new Date().getTime();
+        const tokenFetchTime = this.state.token.fetching_time;
+        const expirationTime = this.state.token.expires_in;
+
+        if (currentTime < tokenFetchTime + expirationTime) {
+            isValid = true;
+        }
+
+        return isValid;
     }
-  }

-  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.setState({
-          formFields: data.results
-        })
-      );
-    } else {
-      this.setState({
-        formFields: formFields
-      });
+    getToken() {
+        let token = JSON.parse(localStorage.getItem('Bearer Token'));
+        if (!token || this.isTokenValid()) {
+            fetchBearerToken().then(data =>
+                this.setState({
+                    token: { ...data, fetching_time: new Date().getTime() }
+                })
+            );
+        } else {
+            this.setState({ token: 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.setState({
+                    formFields: data.results
+                })
+            );
+        } else {
+            this.setState({
+                formFields: formFields
+            });
+        }
+    }
+
+    isOnlineEvent = e => {
+        let formDataArray = JSON.parse(
+            localStorage.getItem('Failed Form Submission Data')
+        );
+
+        failedPosts = [];
+
+        if (!formDataArray) {
+            return;
+        } else {
+            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');
+            }
+        }
+    };
+
+    componentDidMount() {
+        this.getFormFields();
+        this.getToken();
     }
-  }
-
-  isOnlineEvent = e => {
-    let formDataArray = JSON.parse(
-      localStorage.getItem("Failed Form Submission Data")
-    );
-
-    failedPosts = [];
-
-    if (!formDataArray) {
-      return;
-    } else {
-      formDataArray.map(formData => {
-        postFormData(formData, this.state.token.access_token).then(response => {
-          if (!response.ok) {
-            failedPosts.push(formData);
-          }
-        });
-      });

-      if (failedPosts.length === 0) {
+    componentDidUpdate(prevProps, prevState) {
         localStorage.setItem(
-          "Failed Form Submission Data",
-          JSON.stringify(failedPosts)
+            'Form Fields',
+            JSON.stringify(this.state.formFields)
         );
-      } else {
-        localStorage.removeItem("Failed Form Submission Data");
-      }
+        localStorage.setItem('Bearer Token', JSON.stringify(this.state.token));
+        window.addEventListener('online', this.isOnlineEvent);
     }
-  };
-
-  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);
-  }
-
-  // Handler html For when the submit button is pressed
-  onSubmit = e => {
-    e.preventDefault();
-   let formDataArray= []
-    if (navigator.onLine) {
-      postFormData(this.state.formData, this.state.token.access_token);
-    } else {
-      let formDataArray = JSON.parse(
-        localStorage.getItem("Failed Form Submission Data")
-      );
-      formDataArray.push(this.state.formData)
-
-      localStorage.setItem(
-        "Failed Form Submission Data",
-        JSON.stringify(formDataArray)
-      );
+
+    // Handler html For when the submit button is pressed
+    onSubmit = e => {
+        e.preventDefault();
+        let formDataArray = [];
+        if (navigator.onLine) {
+            postFormData(this.state.formData, this.state.token.access_token);
+        } else {
+            let formDataArray = JSON.parse(
+                localStorage.getItem('Failed Form Submission Data')
+            );
+            formDataArray.push(this.state.formData);
+
+            localStorage.setItem(
+                'Failed Form Submission Data',
+                JSON.stringify(formDataArray)
+            );
+        }
+        this.setState({
+            formData: {}
+        });
+    };
+
+    // Make state targets equal to the value of input fields
+    change = e => {
+        data = this.state.tempData;
+        if (e.target.name === 'title' || e.target.name === 'description') {
+            data = { ...data, [e.target.name]: e.target.value };
+        } else {
+            data = {
+                ...data,
+                values: {
+                    ...data.values,
+                    [e.target.key]: e.target.values
+                }
+            };
+        }
+        this.state.tempData = data;
+
+        this.setState({
+            formData: {
+                ...this.state.formData,
+                data
+            }
+        });
+    };
+
+    // Create an array of elements to be rendered in the form
+    FormInputs = props => {
+        return props.fields.map(field => {
+            return (
+                <div key={field.key}>
+                    <label className="background" htmlFor={field.label}>
+                        {field.label}
+                    </label>
+                    <input
+                        className="input"
+                        type={field.input}
+                        name={field.type}
+                        key={field.key}
+                        placeholder={`Enter the ${field.type}`}
+                        value={this.state.formData[field.type]}
+                        onChange={e => this.change(e)}
+                    />
+                </div>
+            );
+        });
+    };
+
+    render() {
+        return (
+            <form>
+                <this.FormInputs fields={this.state.formFields} />
+                <div>
+                    <button className="button" onClick={e => this.onSubmit(e)}>
+                        Submit
+                    </button>
+                </div>
+            </form>
+        );
     }
-    this.setState({
-      formData: {}
-    });
-  };
-
-  // Create an array of elements to be rendered in the form
-  FormInputs = props => {
-    return props.fields.map(field => {
-      return (
-        <div key={field.key}>
-          <label className="background" htmlFor={field.label}>
-            {" "}
-            {field.label}{" "}
-          </label>
-          <input
-            className="input"
-            type={field.input}
-            name={field.label}
-            placeholder={`Enter the ${field.label}`}
-            value={this.state.formData[field.label]}
-            onChange={e => this.change(e)}
-          />
-        </div>
-      );
-    });
-  };
-
-  render() {
-    return (
-      <form>
-        <this.FormInputs fields={this.state.formFields} />
-        <div>
-          <button className="button" onClick={e => this.onSubmit(e)}>
-            Submit
-          </button>
-        </div>
-      </form>
-    );
-  }
 }