sfm-uikit-react-native/src/view/EnxCreatePollScreen.js

It is a react native component for SmartFloMeet users.

import React, { PureComponent } from 'react';
import { View, Text, TextInput, Keyboard,
    KeyboardAvoidingView,Dimensions,Image,
    Platform,Button, TouchableOpacity, StyleSheet, ScrollView, Alert } from 'react-native';
import { styles } from "../style/CreatePollStyle";
import { EnxSetting } from "..";

class EnxCreatePollScreen extends PureComponent {
    constructor(props) {
      console.log('create Polling load');

        super(props);
        this.state = {
          question: '', // Poll question
          options: [{ id: 1, text: '' }, { id: 2, text: '' }], // Poll options
          pollDuration: '', // Duration in minutes
        };
      }
  
    componentDidMount() {
        // Add keyboard listeners to adjust the view when the keyboard is opened or closed
    // this.keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", this._keyboardDidShow);
    // this.keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", this._keyboardDidHide);
    // // Listen to orientation changes
    // this.dimensionsListener = Dimensions.addEventListener("change", this.handleOrientationChange);
    console.log('CreatePoll1')
      EnxSetting.addEventListener('CreatePoll', this.handleBackEvent);
    }
  
    componentWillUnmount() {
        // this.keyboardDidShowListener.remove();
        // this.keyboardDidHideListener.remove();
        // this.dimensionsListener.remove();
        console.log('CreatePoll2')
      EnxSetting.removeEventListener('CreatePoll', this.handleBackEvent);
    }
  
    handleBackEvent = (data) => {
      this.props.onBack();
    };
  
    
    handleOptionChange = (id, text) => {
        const updatedOptions = this.state.options.map(option =>
          option.id === id ? { ...option, text } : option
        );
        this.setState({ options: updatedOptions });
      };
    
      handleAddOption = () => {
        if (this.state.options.length < 10) {
          const newOption = { id: this.state.options.length + 1, text: '' };
          this.setState(prevState => ({
            options: [...prevState.options, newOption],
          }));
        } else {
          Alert.alert('Max options reached', 'You can only have a maximum of 10 options.');
        }
      };
       // Remove an option by its id
  handleRemoveOption = id => {
    if (id > 2) { // Only allow removal of Option 3 and beyond
        const filteredOptions = this.state.options.filter(option => option.id !== id);
        this.setState({ options: filteredOptions });
      }
  };
    
      handleCreatePoll = () => {
        const { question, pollDuration, options } = this.state;
        if (!question || !pollDuration || options.some(option => !option.text)) {
          Alert.alert('Error', 'Please fill all fields correctly.');
          return;
        }
        const pollData = options.reduce(
          (store, opt, index) => {
            store.options[`opt${index + 1}`] = opt.text;
            store.result[`opt${index + 1}`] = 0;
            return store;
          },
          { options: {}, result: {},question:question,duration:pollDuration,id:Date.now(),status:"Started",total_result:0} // Initial accumulator object
        );
        // Here, you would typically save the poll to a backend or state management solution
        //Alert.alert('Poll Created', `Question: "${JSON.stringify(pollData)}"`);
        this.props.onCreatePoll(pollData)
      };
  
  
   
    render() {
        const { question, options, pollDuration } = this.state;
      return (
        <KeyboardAvoidingView
        style={{ flex: 1 ,backgroundColor:"#ffffff"}}
        behavior={Platform.OS === 'ios' ? 'padding' : null}
      >
        <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">  
        <View style={styles.addui} >
        <TextInput
          style={styles.inputDuration}
          placeholder="Enter duration (Second)"
          value={pollDuration}
          keyboardType="numeric"
          onChangeText={text =>{
            // Allow only numeric values and limit to 3 digits
    const validatedText = text.replace(/[^0-9]/g, '').slice(0, 3);
    this.setState({ pollDuration: validatedText });
          } }
          />
     <TouchableOpacity style={styles.addButton} onPress={this.handleAddOption}>
          <Text style={styles.addButtonText}>Add Option</Text>
        </TouchableOpacity></View>
       

       
        <TextInput
          style={styles.input}
          
          placeholder="Type your question"
          value={question}
          onChangeText={text => this.setState({ question: text })}
       
        />

        {options.map((option, index) => (
          <View key={option.id} style={styles.optionContainer}>
            <TextInput
              style={styles.optionInput}
              placeholder={`Option ${option.id}`}
              value={option.text}
              onChangeText={text => this.handleOptionChange(option.id, text)}
            />
            {option.id > 2 && ( // Only show "Remove" for Option 3 and beyond
              <TouchableOpacity
              style={styles.removeButton}
              onPress={() => this.handleRemoveOption(option.id)}>
              <Image source={require("../image_asset/delete.png")} style={{width: 27,height: 27,alignSelf: 'center'}} />
              </TouchableOpacity>
            )}
          </View>
        ))}

      

        <TouchableOpacity style={styles.createButton} onPress={this.handleCreatePoll}>
          <Text style={styles.createButtonText}>Create Poll</Text>
        </TouchableOpacity>
      </ScrollView>
      </KeyboardAvoidingView>
      );
    }
  }
  
  
  
  export default EnxCreatePollScreen;