PIN.js

import { withTheme } from "@saypr/kanvaz-theme";
import axios from "axios";
import React from "react";
import {
  ActivityIndicator,
  SafeAreaView,
  ScrollView,
  View
} from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import DynamicImport from "../components/DynamicRender";
import components from "../componentsList";
import projectData from "../projectData";
import { updateUserData } from "../redux/actions";
import { makeSelectUser } from "../redux/selectors";
import { encrypt, findObjVal, setStorageItem } from "../utils/helpers";

class PIN extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  sendRequests(reqData) {
    const reqs = [];
    reqData.forEach((req) => {
      reqs.push(axios[req.method](req.url, { headers: req.headers }));
    });
    axios
      .all(reqs)
      .then(
        axios.spread((...responses) => {
          const newState = {};
          responses.map((response, i) => {
            // <env-vars>
            if (reqData[i].assignedVars) {
              const assignedVars = reqData[i].assignedVars;
              const envVarData = {};
              Object.keys(reqData[i].assignedVars).map((item) => {
                if (assignedVars[item]) {
                  const isEncryptMode = projectData.dataIntegrationSettings.envVars.find(
                    (x) => x.name === assignedVars[item]
                  ).encrypt;
                  setStorageItem(
                    assignedVars[item],
                    isEncryptMode
                      ? encrypt(findObjVal(item, response.data))
                      : findObjVal(item, response.data)
                  );
                  envVarData[assignedVars[item]] = findObjVal(
                    item,
                    response.data
                  );
                }
              });
              this.props.updateData(envVarData);
            }
            // </env-vars>
            newState[reqData[i].componentId] = response.data;
          });
          this.setState({ ...newState, loading: false });
        })
      )
      .catch((errors) => {
        // this.setState({})
        console.log(errors);
      });
  }

  componentDidUpdate(prevProps, prevState) {
    projectData.dataIntegrationSettings.envVars.map((envVar) => {
      if (
        prevProps.user.data[envVar.name] !== this.props.user.data[envVar.name]
      ) {
        const reqDatas = [];
        const reqData = reqDatas.filter((x) =>
          x.relatedVars.includes(envVar.name)
        );
        this.sendRequests(reqData);
      }
    });
  }

  render() {
    if (this.state.loading)
      return (
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: this.props.theme.colors.backgroundColor,
          }}
        >
          <ActivityIndicator size={"large"} />
        </View>
      );
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: this.props.theme.colors.backgroundColor,
        }}
      >
        <ScrollView>
          {[
            {
              values: [{xAccessToken: "asdfasdfasdf"}],
              title: "PIN",
              name: "PIN",
              type: "mobile",
              packageName: "@saypr/pin",
              __v: "0",
              id: "_awuep49nz",
              hide: false,
            },
          ].map((item, i) => {
            if (item.isApp) return null;
            else {
              return (
                <DynamicImport
                  key={i}
                  load={components.find((x) => x.name === item.name).module}
                  compProps={{
                    ...item,
                    navigation: this.props.navigation,
                    data: this.state[item.id],
                    theme: this.props.theme,
                    envVars: this.props.user.data,
                    kanvazData: {
                      projectId: "5ee8bbb73f6ed81e469557ec",
                      projectLogo:
                        "https://kanvaz-dev.s3.eu-central-1.amazonaws.com/project/tblogo.png",
                    },
                  }}
                />
              );
            }
          })}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const mapStateToProps = createStructuredSelector({ user: makeSelectUser() });
const mapDispatchToProps = (dispatch) => ({
  updateData: (val) => dispatch(updateUserData(val)),
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(PIN));