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

It is a react native component for SmartFloMeet users.

import React, { PureComponent } from 'react';
import { View, Text,  Easing,Animated,TouchableOpacity, FlatList,Dimensions, StyleSheet } from 'react-native';
import {ProgressBar}  from '../commonClass/ProgressBar'// Ensure correct path
import { styles } from "../style/EnxPollScreenStyle";
import { EnxSetting ,EnxPageSlideEventName} from "..";
import EnxCreatePollScreen from 'sfm-uikit-react-native/src/view/EnxCreatePollScreen';

class EnxPollingScreen extends PureComponent {
  constructor(props) {
    super(props);
    console.log('Polling load');
    const screenHeight = Dimensions.get("window").height;
    this.state = {
      showOverlay: false,
        windowHeight: screenHeight, // Store current screen height - This is for orientation
      windowWidth: Dimensions.get("window").width, // Store current screen width-  This is for orientation
    
      pollsList: this.props.pollData
    };
  }

  componentDidMount() {
    EnxSetting.addEventListener('PollingPageBack', this.handleBackEvent);
  }

  componentWillUnmount() {
    EnxSetting.removeEventListener('PollingPageBack', this.handleBackEvent);
  }

  handleBackEvent = (data) => {
    this.props.onBack();
  };


  togglePoll = (index) => {
    const updatedPolls = [...this.state.pollsList];
    updatedPolls[index].expanded = !updatedPolls[index].expanded;
    this.setState({ pollsList: updatedPolls });
  };

  updateProgressPercentage = (pollIndex, optionIndex) => {
    const updatedPolls = [...this.state.pollsList];
    const totalVotes = updatedPolls[pollIndex].data.reduce((sum, option) => sum + option.votes, 0);
    const updatedData = updatedPolls[pollIndex].data.map((option, index) => {
      if (index === optionIndex) {
        return {
          ...option,
          percentage: (option.votes / totalVotes) * 100
        };
      }
      return option;
    });
    updatedPolls[pollIndex].data = updatedData;
    this.setState({ pollsList: updatedPolls });
  };

  renderItem = (item, pollIndex) => (
    <View style={styles.optionContainer}>
      <Text style={styles.optionText}>{item.option}</Text>

      {/* Display Progress Bar */}
      <ProgressBar bgcolor="#9c1b6a" completed={item.percentage} />
    </View>
  );
 
  updateAction(polls){
    this.setState({
      pollsList : polls
  });
  }

  render() {
    const { animationType } = this.state;
    const slideTransform =
    animationType === "horizontal"
      ? { transform: [{ translateX: this.state.slideAnim }] }
      : { transform: [{ translateY: this.state.slideAnimHeight }] };
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.pollsList}
          renderItem={({ item, index }) => (
            <View style={styles.pollContainer}>
              <TouchableOpacity
                onPress={() => this.togglePoll(index)}
                style={styles.pollTitle}
              >
                <Text style={styles.pollText}>{item.question}</Text>
              </TouchableOpacity>

              {item.expanded && item.data && Array.isArray(item.data) && (
                <FlatList
                  data={item.data}
                  renderItem={({ item, index }) => this.renderItem(item, index)}
                  keyExtractor={(item, index) => index.toString()}
                />
                
              )}
              {item.expanded && item.data&&(
                <View style={styles.buttonContainer}>
                <TouchableOpacity style={styles.pollButton} onPress={ () =>{ this.props.onPollAction(item,item.status=="Started"?'poll-start':item.status=='Completed'?'publish-result':"extend-duration")}}>
                <Text style={styles.addText}>{item.status=="Started"?"Start Poll":item.status=='Completed'?'Publish Result':"Extend Duration"}</Text>
               </TouchableOpacity>
               {item.status!="Started"&&( <TouchableOpacity style={styles.pollButton} onPress={ () =>{ this.props.onPollAction(item,item.status=='Completed'?'repoll':'poll-stop')}}>
                <Text style={styles.addText}>{item.status=='Completed'?'Repoll':"Stop Poll"}</Text>
               </TouchableOpacity>)}
              
                </View>
              
              )}
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
         
         {/* Overlay screen that animates in and out */}
       
        {/* Add Poll Button */}
        <TouchableOpacity style={styles.addPollButton} onPress={ () =>{ this.props.onNavigateToCreatePoll()}}>
          <Text style={styles.addText}>+ Add Poll</Text>
        </TouchableOpacity>
        
      </View>
    );
  }
}



export default EnxPollingScreen;