be-components 4.2.0 → 4.2.1

package/src/Poll/index.tsx

@@ -1,33 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import { PollApi, PollCampaignApi, PollResponseApi } from './api';
-import { View, ScrollView, ActivityIndicator } from 'react-native';
+import { FlatList, Modal, useWindowDimensions, Alert } from 'react-native';
 import type { BEEventProps, PollCampaignGoalProps, PollCampaignProps, PollOptionProps, PollProps, PollResponseProps } from '../types';
-import Colors from '../constants/colors';
 import CampaignHeader from './components/CampaignHeader';
 import CampaignProgressBar from './components/CampaignProgressBar';
 import PollQuestionsSection from './components/PollQuestionsSection';
-import { Spring } from '../Components';
-//import PollCard from './components/PollCard';
 import CampaignResult from './components/CampaignResult';
 import CampaignLeaderboard from './components/CampaignLeaderboard';
 import PollCard from './components/PollCard';
 import SocketManager from '../Socket';
+import { View } from '../Components/Themed';
 
 type PollCampaignModuleProps = {
     poll_campaign_id:string,
     poll_id?:string,
     player_id?:string,
     distinct_id:string,
-    height:number,
     onEvent?:(be_event:BEEventProps) => void,
     onRequestAuthenticate: (auth_strategy_id?:string, company_id?:string) => void,
     onSharePollCampaign: (poll_campaign:PollCampaignProps) => void,
     onComplete:() => void
 }
-const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
+
+const sections = ['header', 'progress', 'results','questions']
+const PollCampaign = ({ distinct_id, poll_campaign_id, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ socket_polls, setSocketPolls ] = useState<PollProps[]>([]);
-    //const [ socket_poll_options, setSocketPollOptions ] = useState<PollOptionProps[]>([]);
     const [ socket_campaign, setSocketCampaign ] = useState<PollCampaignProps|undefined>(undefined);
     const [ module_data, setModuleData ] = useState<{
         loading: boolean,
@@ -49,10 +47,10 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
         poll_responses: []
     });
     const { poll_responses, action_loading } = my_data;
-    const { poll_campaign, polls, active_poll_id } = module_data;
+    const { loading, poll_campaign, polls, active_poll_id } = module_data;
     const active_response = poll_responses.find(r => r.poll_id == active_poll_id);
-    const active_polls = polls.filter(p => p.status != 'inactive').sort((a,b) => a.priority - b.priority);
-
+    const active_polls = polls.filter(p => !['inactive'].includes(p.status)).sort((a,b) => a.priority - b.priority);
+    const { width } = useWindowDimensions();
     useEffect(() => {
         PollCampaignApi.setEnvironment();
         getDataFromServer();
@@ -75,7 +73,6 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
     },[socket_campaign]);
 
     const getDataFromServer = async() => {
-        console.log('RELOADING DATA!!!')
         setModuleData({ ...module_data, loading:true });
         const pc = await PollCampaignApi.getPollCampaignById(poll_campaign_id);
         const ps_resp = await PollApi.getPollsByCampaignId(poll_campaign_id);
@@ -122,89 +119,102 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
         setModuleData({ ...module_data, active_poll_id: new_poll.poll_id })
     }
 
-    if(!poll_campaign){
-        return (
-            <View style={{ flex:1 }}>
-                <ActivityIndicator
-                    style={{ padding:20, alignSelf:'center' }}
-                    size='large'
-                    color={Colors.brand.midnight}
-                />
-            </View>
-        )
-    }
-
-    return (
-        <View style={{ backgroundColor:Colors.shades.white, height }}>
-            <CampaignHeader
-                poll_campaign={poll_campaign}
-                onSharePollCampaign={(pc) => console.log(pc)}
-            />
-            <ScrollView style={{ flex:1 }}>
-                <View style={{ backgroundColor:Colors.shades.shade100 }}>
-                    <CampaignProgressBar
-                        poll_campaign={poll_campaign}
-                        polls={active_polls}
-                        active_poll='0'
-                        onPollSelect={(p) => console.log(p)}
-                        poll_responses={poll_responses}
-                    />
-                </View>
-                <View nativeID='leaderboard'>
-                    <CampaignResult
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <CampaignHeader
                         poll_campaign={poll_campaign}
-                        onShowFullLeaderboard={() => setFullLeaderboard(true)}
+                        onSharePollCampaign={(pc) => console.log(pc)}
                     />
-                </View>
-                <View nativeID='poll_questions'>
+                )
+            case 'progress': 
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View type='header' style={{ padding:10 }}>
+                        <CampaignProgressBar
+                            poll_campaign={poll_campaign}
+                            polls={active_polls}
+                            active_poll={active_poll_id ?? '0'}
+                            onPollSelect={(p) => console.log(p)}
+                            poll_responses={poll_responses}
+                        />
+                    </View>
+                )
+            case 'results':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <CampaignResult
+                            poll_campaign={poll_campaign}
+                            onShowFullLeaderboard={() => setFullLeaderboard(true)}
+                        />
+                    </View>
+                )
+            case 'questions':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
                         <PollQuestionsSection
                             poll_campaign={poll_campaign}
                             polls={active_polls}
                             poll_responses={poll_responses}
                             onSelectPoll={(p) => {
                                 if(!player_id){ return onRequestAuthenticate(poll_campaign.auth_strategy_id, poll_campaign.company_id) }
-                                if(p.status == 'paused'){ return alert('This question is currently paused. Please open when it becomes active') }
+                                if(['paused','pending','inactive'].includes(p.status)){ return Alert.alert('This question is not active. Please open when it becomes active') }
                                 setModuleData({ ...module_data, active_poll_id: p.poll_id })
                             }}
                         />
-                </View>
-            </ScrollView>
-            {active_poll_id ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
-                <Spring
-                    slide='vertical'
-                    to={0}
-                    from={500}
-                    style={{ maxHeight:height }}
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                refreshing={loading}
+                onRefresh={() => getDataFromServer()}
+                key='poll_sections'
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            <Modal
+                style={{ flex:1 }}
+                animationType='slide'
+                transparent
+                visible={active_poll_id ? true : false}
                 >
+                <View type='blur' style={{ flex:1, justifyContent:'flex-end', padding:12 }}>
                     <PollCard
                         poll_id={active_poll_id}
                         action_loading={action_loading}
                         poll_response={active_response}
+                        width={width}
                         onSkip={() => handleNext()}
                         onCancel={() => setModuleData({ ...module_data, active_poll_id: undefined })}
                         onResponse={(response) => handleSubmitResponse(response)}
                         onShowAuthenticate={() => console.log('authenticate!!')}
                     />
-                </Spring>
-            </View>
-            :<></>}
-            {full_leaderboard ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
-                <Spring
-                    slide='vertical'
-                    to={0}
-                    from={500}
-                    style={{ maxHeight:height }}
-                >
-                    <CampaignLeaderboard
-                        height={height}
-                        poll_campaign={poll_campaign}
-                        view_mode='full'
-                        onClose={() => setFullLeaderboard(false)}
-                    />
-                </Spring>
-            </View>
+                </View>
+            </Modal>
+            {full_leaderboard && poll_campaign ?
+            <Modal
+                transparent
+                visible={full_leaderboard?true:false}
+                style={{ flex:1 }}
+            >
+                <CampaignLeaderboard
+                    poll_campaign={poll_campaign}
+                    view_mode='full'
+                    onClose={() => setFullLeaderboard(false)}
+                />
+            </Modal>
             :<></>}
             <SocketManager 
                 onConnect={() => {