be-components 2.0.0 → 2.0.2

package/src/Poll/components/PollCard.tsx

@@ -1,92 +1,76 @@
-import { ActivityIndicator, FlatList, Image, ScrollView, TouchableOpacity, View } from 'react-native';
+import { FlatList, Image, ScrollView, TouchableOpacity, View } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import PollOptionCard from './PollOptionCard';
 import ResponseTimer from './ResponseTimer';
 import type { PollOptionProps, PollProps, PollResponseProps, PollSummaryProps } from '../../types';
-import { PollApi, PollResponseApi } from '../api';
+import { PollApi } from '../api';
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
 import { view_styles } from '../../constants/styles';
 
 type PollCardProps = {
-    poll:PollProps,
+    poll_id:string,
+    poll_response?:PollResponseProps,
+    action_loading?:boolean,
     question_number?:number,
-    onCancel:() => void,
     view?:string,
-    onResponse:(response:PollResponseProps) => void,
     total_questions?:number,
+    onResponse:(response:PollResponseProps) => void,
     onShowAuthenticate: () => void,
-    onSkip: () => void,
-    onSeeResults?: () => void
+    onCancel:() => void,
+    onSkip: () => void
 }
 
-const DEFAULT_POLL_STATE = { server_checked:false, responded:false, poll_response:undefined, poll_options:[], poll_summaries:[] }
-
-const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, onSeeResults, onResponse }: PollCardProps) => {
-    const [ loading, setLoading ] = useState(false);
-    const [ submit_loading, setSubmitLoading ] = useState(false);
+const PollCard = ({ poll_id, poll_response, action_loading, onSkip, onCancel, onResponse }: PollCardProps) => {
     const [ poll_width, setPollWidth ] = useState(0);
-    const [ option_selected, setOptionSelected ] = useState<undefined|PollOptionProps>(undefined);
     const [ poll_data, setPollData ] = useState<{
-        server_checked?:boolean,
-        responded:boolean,
-        poll_response?:PollResponseProps,
+        poll?:PollProps,
+        loading:boolean,
+        selected_option?:PollOptionProps,
+        poll_summaries:PollSummaryProps[],
         poll_options:PollOptionProps[],
-        poll_summaries:PollSummaryProps[]
     }>({
-        server_checked:false,
-        responded:false,
-        poll_options:[],
-        poll_summaries:[]
-    })
-    const { poll_options, poll_summaries, poll_response, responded, server_checked } = poll_data;
-    const total_responses = poll_summaries.reduce((a,b) => a + b.count, 0)
-
-    const correct_option = poll_options.find(po => po.result_ind == 'win')
-    const selected_option = poll_options.find(po => po.poll_option_id == poll_response?.poll_option_id)
-
-    const last_question = question_number && total_questions && question_number == total_questions ? true : false
-   
+        loading:false,
+        poll_summaries:[],
+        poll_options:[]
+    });
+    const { loading, poll, poll_summaries, poll_options, selected_option } = poll_data;
+    const correct_option = poll_options.find(o => o.result_ind == 'win');
+    const responses = poll_summaries.reduce((a,b) => a + b.count, 0)
     useEffect(() => {
-        if(!poll){ return }
-        getPollFromServer(poll.poll_id)
-    },[poll])
-
+        getPollFromServer(poll_id)
+    },[poll_id])
+    
     const getPollFromServer = async(poll_id:string) => {
-        setLoading(true);
-        let poll_response = await PollResponseApi.getResponseByPollId(poll_id)
+        setPollData({ ...poll_data, loading: true });
         const pos_resp = await PollApi.getPollById(poll_id)
         setPollData({
-            server_checked: true,
-            responded: poll_response ? true : false,
-            poll_response,
+            ...poll_data,
+            loading:false,
+            poll:pos_resp.poll,
             poll_options:pos_resp.poll_options,
             poll_summaries: pos_resp.poll_summaries
         })
-        setLoading(false);
     }
 
     const handleCancel = () => {
-        setOptionSelected(undefined)
-
+        setPollData({ ...poll_data, selected_option:undefined })
         onCancel()
     }
 
     const handleSkip = () => {
         //if(!is_authenticated){ return onShowAuthenticate() }
-        setPollData(DEFAULT_POLL_STATE)
-        setOptionSelected(undefined)
-        if(last_question && onSeeResults){ return onSeeResults() }
+        //setPollData(DEFAULT_POLL_STATE)
+        //setOptionSelected(undefined)
+        //if(last_question && onSeeResults){ return onSeeResults() }
         onSkip()
 
     }
 
     const handleSubmitResponse = async() => {
         //if(!is_authenticated){ return onShowAuthenticate() }
-        if(submit_loading){ return }
-        if(!poll || !server_checked || !option_selected){ return }
-        if(responded || poll_response){ return }
-        let option = poll_options.find(po => po.poll_option_id == option_selected.poll_option_id)
+        if(action_loading || poll_response || !selected_option || !poll){ return }
+        let option = poll_options.find(po => po.poll_option_id == selected_option.poll_option_id)
         if(!option){ return }
         //We are good to log the response!
         let draft_response:PollResponseProps = {
@@ -103,34 +87,17 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
             last_update_datetime: ''
         }
         if(option.option_type == 'input'){
-            draft_response.input_value = option_selected.option_value
-        }
-        try {
-            setSubmitLoading(true)
-            let poll_response = await PollResponseApi.createPollResponse(draft_response)
-            onResponse(poll_response)
-            setPollData({
-                ...poll_data,
-                server_checked: true,
-                responded: poll_response?true:false,
-                poll_response
-            })
-
-            setOptionSelected(undefined)
-            setSubmitLoading(false)
-        } catch (e) {
-            setSubmitLoading(false)
-            setOptionSelected(undefined)
+            draft_response.input_value = selected_option.option_value
         }
+        onResponse(draft_response);
     }
 
     const handleTimesUp = async() => {
-        if(option_selected){
+        if(selected_option){
             return handleSubmitResponse()
         }
         if(!poll || poll.status != 'active'){ return }
-        if(!server_checked){ return }
-        if(responded){ return }
+        if(poll_response){ return }
         const draft_response:PollResponseProps = {
             poll_id:poll.poll_id,
             poll_option_id:'0',
@@ -145,21 +112,14 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
             create_datetime: '',
             last_update_datetime: ''
         }
-        setSubmitLoading(true)
-        let poll_response = await PollResponseApi.createPollResponse(draft_response)
-        onResponse(poll_response);
-        setSubmitLoading(false)
-        setPollData({
-            ...poll_data,
-            server_checked: true,
-            responded: poll_response ? true : false,
-            poll_response
-        })
+        onResponse(draft_response)
+        
     }
 
     const renderPollOptions = (data: { item:PollOptionProps, index:number }) => {
+        if(!poll){ return <></ >}
         const poll_summary = poll_summaries.find(ps => ps.poll_option_id == data.item.poll_option_id);
-        const draft_selected = option_selected?.poll_option_id == data.item.poll_option_id ? true : false;
+        const draft_selected = selected_option?.poll_option_id == data.item.poll_option_id ? true : false;
         return (
             <View style={{ margin:5, flex:1 }}>
                 <PollOptionCard
@@ -167,28 +127,35 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                     draft_selected={draft_selected}
                     poll_response={poll_response}
                     poll_option={data.item}
-                    show_summary={(server_checked && responded) && poll.show_responses ? true : false}
+                    show_summary={(poll_response) && poll.show_responses ? true : false}
                     onSelect={(poll_option) => {
-                        if(responded){ return }
+                        if(poll_response){ return }
                         if(poll?.status !== 'active'){ return }
-                        if(draft_selected){ setOptionSelected(undefined) }
-                        else { setOptionSelected(poll_option)} }
-                    }
+                        if(draft_selected){ 
+                            setPollData({ ...poll_data, selected_option: undefined }) 
+                        } else { 
+                            setPollData({ ...poll_data, selected_option: poll_option })
+                        }
+                    }}
                 />
             </View>
         )
     }
 
-    if(!poll){
-        return <></>
-    }
+    if(!poll){ return <></> }
+    
     return (
-        <View nativeID='poll' style={{ ...view_styles.section }} onLayout={(ev) => {
+        <View nativeID='poll' style={{ ...view_styles.section, minHeight:500 }} onLayout={(ev) => {
             const { width } = ev.nativeEvent.layout
             setPollWidth(width)
         }}>
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header_2'>Question {2}</Text>
+                    <Text style={{ marginTop:5 }} theme='header'>{poll.poll_question}</Text>
+                </View>
+            </View>
             <ScrollView style={{ flex:1 }}>
-                {server_checked && !responded ?
                 <View nativeID='question_image'>
                     {poll?.poll_image?.url ?
                     <Image
@@ -197,19 +164,9 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                     />
                     :<></>}
                 </View>
-                :<></>}
-            <View nativeID='question_details' style={{padding:20}}>
-                {question_number ?
-                <View nativeID='question_progress' style={{ marginBottom:10, flexDirection:'row' }}>
-                    <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='semibold'>Question {question_number}{total_questions?` of ${total_questions}`:''}</Text>
-                </View>
-                :<></>}
-                <View nativeID='question' style={{ marginBottom:10 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{poll.poll_question}</Text>
-                </View>
-            </View>
-            { poll.status == 'active' && server_checked && !responded ?
-            <View nativeID='question_respond_options' style={{ flex:1 }}>
+
+            { poll.status == 'active' && !poll_response ?
+            <View nativeID='question_respond_options'>
                 <FlatList
                     data={poll_options.sort((a,b) => a.priority - b.priority)}
                     renderItem={renderPollOptions}
@@ -217,7 +174,7 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                     keyExtractor={(item) => item.poll_option_id.toString()}
                 />
             </View>
-            : server_checked ?
+            :
             <View nativeID='question_answer' style={{ flex:1 }}>
                 {selected_option ?
                 <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
@@ -230,7 +187,7 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                         poll_option={selected_option}
                     />
                 </View>
-                : (!responded || poll_response?.timed_out) ?
+                : (!poll_response || poll_response?.timed_out) ?
                 <View style={{ marginBottom:10, padding:10 }}>
                     <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>MY SELECTED ANSWER</Text>
                     <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.utility.error }}>
@@ -243,9 +200,9 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                 <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
                     <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>CORRECT ANSWER</Text>
                     <PollOptionCard
-                        show_summary={false}
+                        show_summary={true}
                         show_result={true}
-                        onSelect={() => console.log('Hey')}
+                        onSelect={() => console.log('')}
                         poll_option={correct_option}
                     />
                 </View>
@@ -263,7 +220,7 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                     <View style={{ flexDirection:'row', alignItems:'center', marginBottom:5 }}>
                         <Text style={{ flex:1 }} size={14} color={Colors.brand.slate} weight='semibold'>PUBLIC RESULTS</Text>
                         <View style={{ borderRadius:22, padding:10, backgroundColor:Colors.accents.accent100 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='regular'>{total_responses} Responses</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='regular'>{responses} Responses</Text>
                         </View>
                     </View>
                     {!poll.show_responses ?
@@ -277,23 +234,19 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                 </View>
                 :<></>}
             </View>
-            :
-            <View style={{ padding:20 }}>
-                <ActivityIndicator color={Colors.brand.midnight} size='large' style={{ alignSelf:'center' }}/>
-            </View>
             }
             </ScrollView>
             {!loading ?
-            <View nativeID='question_actions' style={{ marginTop:20, borderRadius:22, flexDirection:'row', padding:10, backgroundColor:Colors.shades.shade100 }}>
-                {!poll.seconds_allowed || responded ?
+            <View nativeID='question_actions' style={{ ...view_styles.section_footer, alignItems:undefined }}>
+                {!poll.seconds_allowed || poll_response ?
                 <TouchableOpacity
-                    style={{ marginRight:10, justifyContent:'center', paddingLeft:20, paddingRight:20, backgroundColor:Colors.utility.warning, borderRadius:22, borderWidth:1, borderColor:Colors.utility.warning }}
+                    style={{ marginRight:10, justifyContent:'center', paddingRight:20, paddingLeft:20, backgroundColor:Colors.utility.warning, borderRadius:22, borderWidth:1, borderColor:Colors.utility.warning }}
                     onPress={() => handleCancel()}
                 >
                     <Icons.ListIcon size={18} color={Colors.shades.white} />
                 </TouchableOpacity>
                 :<></>}
-                {poll.status == 'active' && poll.seconds_allowed && server_checked && !responded ?
+                {poll.status == 'active' && poll.seconds_allowed && !poll_response ?
                     <View style={{ marginRight:5 }}>
                         <ResponseTimer
                             poll_id={poll.poll_id}
@@ -305,7 +258,7 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                 <Button
                     style={{flex:1, marginRight:5}}
                     title_color={Colors.brand.electric}
-                    title={responded?'Next':'Skip'}
+                    title={poll_response?'Next':'Skip'}
                     borderColor={Colors.brand.electric}
                     backgroundColor={Colors.shades.white}
                     borderRadius={22}
@@ -314,13 +267,13 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
                     onPress={() => handleSkip()}
                 />
                 }
-                {server_checked && !responded ?
+                {!poll_response ?
                 <Button
                     style={{flex:2}}
                     title_color={Colors.shades.white}
-                    disabled={option_selected&&!submit_loading?false:true}
-                    title={option_selected?`Submit!`:poll.status == 'active' ? 'Select Answer' : 'Not Active'}
-                    backgroundColor={option_selected&&!submit_loading?Colors.utility.success:Colors.brand.slate}
+                    disabled={selected_option&&!action_loading?false:true}
+                    title={selected_option?`Submit!`:poll.status == 'active' ? 'Select Answer' : 'Not Active'}
+                    backgroundColor={selected_option&&!action_loading?Colors.utility.success:Colors.brand.slate}
                     borderRadius={22}
                     onPress={() => handleSubmitResponse()}
                 />

package/src/Poll/components/PollQuestionsSection.tsx

@@ -13,7 +13,7 @@ type PollQuestionsSectionProps = {
     onSelectPoll:(p:PollProps) => void
 }
 
-const PollQuestionsSection = ({ poll_campaign, polls, onSelectPoll }:PollQuestionsSectionProps) => {
+const PollQuestionsSection = ({ poll_campaign, polls, poll_responses, onSelectPoll }:PollQuestionsSectionProps) => {
     const [ section_data, setSectionData ] = useState<{
         loading:boolean,
         expanded:boolean,
@@ -25,15 +25,17 @@ const PollQuestionsSection = ({ poll_campaign, polls, onSelectPoll }:PollQuestio
 
 
     const renderPolls = (data:{item:PollProps, index:number}) => {
+        const my_response = poll_responses.find(r => r.poll_id == data.item.poll_id)
+        const response_option = data.item.poll_options?.find(po => po.poll_option_id == my_response?.poll_option_id);
         return (
-            <View>
+            <View style={{ borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
                 <PollSelectCard
                     poll={data.item}
                     disabled={false}
                     selected={false}
                     poll_campaign={poll_campaign}
-                    show_response={false}
-                    response_option={undefined}
+                    show_response={my_response ? true : false}
+                    response_option={response_option}
                     onSelect={(p) => onSelectPoll(p)}
                 />
             </View>

package/src/Poll/index.tsx

@@ -1,27 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { PollApi, PollCampaignApi } from './api';
+import { PollApi, PollCampaignApi, PollResponseApi } from './api';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import type { PollCampaignGoalProps, PollCampaignProps, 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, Text } from '../Components';
+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 type { BEEventProps } from '../Observer/api/types';
 
 type PollCampaignModuleProps = {
     poll_campaign_id:string,
     poll_id?:string,
     player_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, poll_campaign_id, player_id }: PollCampaignModuleProps ) => {
+const PollCampaign = ({ height, poll_campaign_id, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
     const [ module_data, setModuleData ] = useState<{
         loading: boolean,
         active_poll_id?:string,
@@ -34,26 +36,37 @@ const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModul
         poll_campaign_goals:[]
     });
     const [ full_leaderboard, setFullLeaderboard ] = useState(false);
-    const [ my_data ] = useState<{
+    const [ my_data, setMyData ] = useState<{
+        action_loading:boolean,
         poll_responses:PollResponseProps[]
     }>({
+        action_loading: false,
         poll_responses: []
     });
+    const { poll_responses, action_loading } = my_data
 
     const { poll_campaign, polls, active_poll_id } = module_data;
-    const active_poll = polls.find(p => p.poll_id == active_poll_id);
-    const { poll_responses } = my_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)
 
     useEffect(() => {
         PollCampaignApi.setEnvironment();
         getDataFromServer();
+        if(player_id){}
     },[poll_campaign_id, player_id])
 
     const getDataFromServer = async() => {
         setModuleData({ ...module_data, loading:true });
         const pc = await PollCampaignApi.getPollCampaignById(poll_campaign_id);
         const ps_resp = await PollApi.getPollsByCampaignId(poll_campaign_id);
-
+        if(player_id){
+            let my_responses = await PollResponseApi.getMyCampaignResponses(poll_campaign_id);
+            setMyData({
+                ...my_data,
+                poll_responses: my_responses
+            })
+        }
         setModuleData({
             ...module_data,
             poll_campaign: pc,
@@ -63,6 +76,33 @@ const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModul
         })
     }
 
+    const handleSubmitResponse = async(pr:PollResponseProps) => {
+        if(!player_id){ return onRequestAuthenticate(poll_campaign?.auth_strategy_id) }
+        try {
+            if(action_loading){ return }
+            setMyData({ ...my_data, action_loading: true })
+            let new_pr = await PollResponseApi.createPollResponse(pr);
+            setMyData({
+                ...my_data,
+                poll_responses: poll_responses.filter(pr => pr.poll_response_id != new_pr.poll_response_id).concat(new_pr)
+            })
+        } catch (e) {
+            alert('Unable to process!')
+        }
+    }
+
+    const handleNext = async() => {
+        if(!active_poll_id){ return }
+        let active_index = active_polls.findIndex(p => p.poll_id == active_poll_id);
+        let new_poll = active_polls.find((p,i) => i > active_index && p.status == 'active');
+        if(!new_poll){
+            setModuleData({ ...module_data, active_poll_id: undefined })
+            setFullLeaderboard(true);
+            return
+        }
+        setModuleData({ ...module_data, active_poll_id: new_poll.poll_id })
+    }
+
     if(!poll_campaign){
         return (
             <View style={{ flex:1 }}>
@@ -85,7 +125,7 @@ const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModul
                 <View style={{ backgroundColor:Colors.shades.shade100 }}>
                     <CampaignProgressBar
                         poll_campaign={poll_campaign}
-                        polls={polls}
+                        polls={active_polls}
                         active_poll='0'
                         onPollSelect={(p) => console.log(p)}
                         poll_responses={poll_responses}
@@ -100,13 +140,16 @@ const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModul
                 <View nativeID='poll_questions'>
                         <PollQuestionsSection
                             poll_campaign={poll_campaign}
-                            polls={polls}
+                            polls={active_polls}
                             poll_responses={poll_responses}
-                            onSelectPoll={(p) => setModuleData({ ...module_data, active_poll_id: p.poll_id })}
+                            onSelectPoll={(p) => {
+                                if(p.status == 'paused'){ return alert('This question is currently paused. Please open when it becomes active') }
+                                setModuleData({ ...module_data, active_poll_id: p.poll_id })
+                            }}
                         />
                 </View>
             </ScrollView>
-            {active_poll ?
+            {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'
@@ -114,7 +157,15 @@ const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModul
                     from={500}
                     style={{ maxHeight:height }}
                 >
-                    <Text>HEY</Text>
+                    <PollCard
+                        poll_id={active_poll_id}
+                        action_loading={action_loading}
+                        poll_response={active_response}
+                        onSkip={() => handleNext()}
+                        onCancel={() => setModuleData({ ...module_data, active_poll_id: undefined })}
+                        onResponse={(response) => handleSubmitResponse(response)}
+                        onShowAuthenticate={() => console.log('authenticate!!')}
+                    />
                 </Spring>
             </View>
             :<></>}

package/src/types.d.ts

@@ -146,6 +146,19 @@ export interface EventProps {
     last_update_datetime: any
 }
 
+export interface ContestStatProps {
+    contest_stat_id:string,
+    contest_id:string,
+    contest_type:string,
+    participant_id:string,
+    participant_type:string,
+    stat:string,
+    stat_label:string,
+    status: string,
+    value:number,
+    create_datetime:any,
+    last_update_datetime:any
+}
 
 export interface AthleteProps {
     athlete_id:string,