react-native-surveys/index.js

Build your own forms, surveys and polls for your React Native apps.

import React, { memo, useState, useEffect } from "react";
import { Platform } from "react-native";
import { parseUrlData, queryStringToJSON } from "./Forms/utils";
import {
  addExtraDataToForm,
  FORM_ALREADY_COMPLETED,
  FORM_ERROR,
  FORM_NOT_FOUND,
  predefineEmailAndName
} from "./Forms/helpers";
import { hasOpenedForm } from "./Forms/api/nativeforms-api";
import IFrameContainer from "./Forms/components/IFrameContainer";
import { LoadingError } from "./Forms/components/LoadingError";
import { PageLoader } from "./Forms/components/PageLoader";
import Forms from "./Forms";
import MobileContainer from "./Forms/components/MobileContainer";
import { form_fetched } from "./Forms/api/event-emitter";
const queryParams = queryStringToJSON();

const NativeForms = ({
  form,
  onClose,
  onSend,
  email,
  name,
  extraData,
  onBeforeSend
}) => {
  const [formData, setFormData] = useState(null);
  const [error, setError] = useState(false);
  useEffect(() => {
    (async () => {
      if (!form) {
        setError("You forgot to provide form prop to NativeForms component");
        return;
      }

      const parameters = parseUrlData(form);

      if (parameters.l && parameters.f) {
        try {
          setFormData(null);
          const form = await hasOpenedForm(parameters);
          form.openedAt = new Date().toJSON();
          form.openedTimestamp = new Date().getTime();
          form.license = parameters.l;
          predefineEmailAndName(form, email, name);
          addExtraDataToForm(form, extraData, queryParams);
          form_fetched(form);
          setFormData(form);
        } catch (e) {
          setFormLoadingError(e);
        }
      } else {
        setFormLoadingError("Form does not exist or link is broken");
      }
    })();
  }, [form]); // eslint-disable-line

  useEffect(() => {
    if (formData) {
      predefineEmailAndName(formData, email, name);
      setFormData({ ...formData });
    }
  }, [email, name]); // eslint-disable-line

  useEffect(() => {
    if (formData) {
      addExtraDataToForm(formData, extraData, queryParams);
    }
  }, [extraData]); // eslint-disable-line

  const setFormLoadingError = e => {
    console.error(e);

    if (e.response && e.response.status === 409) {
      setError(FORM_ALREADY_COMPLETED);
    } else if (e.response && e.response.status === 404) {
      setError(FORM_NOT_FOUND);
    } else {
      setError(FORM_ERROR);
    }
  };

  if (Platform.OS !== "web") {
    return React.createElement(MobileContainer, {
      onSend: onSend,
      onBeforeSend: onBeforeSend,
      error: error,
      form: formData,
      onClose: onClose,
      livePreview: queryParams.livePreview
    });
  }

  if (queryParams.iframe) {
    return React.createElement(IFrameContainer, {
      onSend: onSend,
      onBeforeSend: onBeforeSend,
      onClose: onClose,
      error: error,
      form: formData,
      livePreview: queryParams.livePreview
    });
  }

  if (error)
    return React.createElement(LoadingError, {
      error: error
    });
  if (!formData) return React.createElement(PageLoader, null);
  return React.createElement(Forms, {
    livePreview: queryParams.livePreview,
    form: formData,
    onSend: onSend,
    onBeforeSend: onBeforeSend
  });
};

export default memo(NativeForms);
export { NativeFormsWebView } from "./Forms/components/NativeFormsWebView";