PIN.js

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


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":[""],"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));