be-components 1.9.6 → 1.9.8

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -46,6 +46,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         expanded:false,
         athletes:[]
     })
+    const [ sponsor, setSponsor ] = useState(false);
     const [ competitions_expanded, setCompetitionsExpanded ] = useState(false);
     const { expanded, athletes, loaded, loading } = expanded_data;
     const event_status = TeamEventMarketHelpers.getEventStatus(event);
@@ -54,8 +55,15 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     useEffect(() => {
         MarketComponentApi.setEnvironment();
         if(init_expanded){ expandedEvent(); }
+        if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
     },[])
 
+    const getCompanyFromServer = async(company_id:string) => {
+        const resp = await MarketComponentApi.getCompanyById(company_id)
+        if(!resp?.company){ return }
+        setSponsor(resp.company)
+    }
+
     const expandedEvent = async() => {
         if(!event){ return }
         if(onExpand){ onExpand(expanded ? false : true) }
@@ -214,6 +222,9 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     const { non_primary_markets, available } = TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades)
     return (
         <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            {sponsor ?
+            <Text>HEY</Text>
+            :<></>}
             <View nativeID='event_header_data' style={{ flexDirection:'row', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
                 {onActivate && event_status != 'closed' ?
                 <Button
@@ -297,7 +308,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                     </View>
                     <FlatList
                         key={`${event.event_id}_primary_markets`}
-                        data={primary_markets}
+                        data={primary_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
                         horizontal
                         renderItem={renderPrimaryMarkets}
                         keyExtractor={(item) => item.market_id.toString()}

package/src/Poll/components/CampaignHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import type { PollCampaignProps } from '../../types';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type CampaignHeaderProps = {
+    poll_campaign:PollCampaignProps,
+    onSharePollCampaign:(pc:PollCampaignProps) => void
+}
+
+const CampaignHeader = ({ poll_campaign, onSharePollCampaign }:CampaignHeaderProps) => {
+
+    return (
+        <View>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{ uri: poll_campaign.campaign_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{poll_campaign.name}</Text>
+                </View>
+                <TouchableOpacity style={{ paddingLeft:10 }} onPress={() => onSharePollCampaign(poll_campaign)}>
+                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+export default CampaignHeader

package/src/Poll/components/CampaignLeaderboard.tsx

@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from 'react';
+import { View, ScrollView, Image, FlatList, ActivityIndicator } from "react-native"
+import type { PollCampaignLeaderProps, PollCampaignProps, PublicPlayerProps } from '../../types';
+import { PollCampaignApi } from '../api';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+
+type CampaignLeaderboardProps = {
+    poll_campaign:PollCampaignProps,
+    view_mode: "short"|"full",
+    height?:number,
+    onShowFullLeaderboard?: () => void,
+    onClose?:() => void
+}
+
+const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeaderboard, onClose }:CampaignLeaderboardProps) => {
+    const [ leaderboard_data, setLeaderData ] = useState<{
+        loading:boolean,
+        offset:number,
+        leaders:PollCampaignLeaderProps[],
+        players:PublicPlayerProps[],
+        my_leader?: PollCampaignLeaderProps
+    }>({
+        loading:false,
+        offset:0,
+        leaders:[],
+        players:[]
+    })
+    const { loading, leaders, players, my_leader, offset } = leaderboard_data;
+    const me = players.find(p => p.player_id == my_leader?.player_id);
+
+    let filtered_leaders = [ ...leaders ]
+    if(view_mode == 'short'){
+        filtered_leaders = filtered_leaders.sort((a,b) => a.place - b.place).slice(0,3);
+    }
+
+    useEffect(() => {
+        getDataFromServer(0);
+    },[poll_campaign.poll_campaign_id])
+
+    const getDataFromServer = async(offset:number) => {
+        setLeaderData({ ...leaderboard_data, loading:true })
+        const ls = await PollCampaignApi.getLeadersByCampaignId(poll_campaign.poll_campaign_id, offset)
+        const player_ids = ls.poll_campaign_leaders.map(l => l.player_id);
+        if(ls.my_leaderboard){
+            let my_id = player_ids.find(id => id == ls.my_leaderboard?.player_id);
+            if(!my_id){ player_ids.push(ls.my_leaderboard.player_id) }
+        }
+        const ps = await PollCampaignApi.getPlayersByPlayerIds(player_ids);
+        setLeaderData({
+            ...leaderboard_data,
+            players:ps,
+            offset,
+            loading: false,
+            leaders: ls.poll_campaign_leaders,
+            my_leader: ls.my_leaderboard
+        })
+    }
+
+    const renderTrophy = (place:number) => {
+        switch(place){
+            case 1: return <Icons.TrophyIcon color={Colors.incentive.gold} size={16}/>
+            case 2: return <Icons.TrophyIcon color={Colors.incentive.silver} size={16}/>
+            case 3: return <Icons.TrophyIcon color={Colors.incentive.bronze} size={16}/>
+            default: return <></>
+        }
+    }
+
+
+    const renderLeaders = (data: {item:PollCampaignLeaderProps, index:number}) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
+                    <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{offset > 0 ? offset:''}{data.index+1}</Text>
+                </View>
+                <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View nativeID="profile_pic" style={{ marginRight:10 }}>
+                        <Image
+                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                            style={{ height:40, width:40, borderRadius:100 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1 }} nativeID="name">
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
+                    </View>
+                    <View>
+                        {renderTrophy(data.index+1)}
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1, height:height, backgroundColor:Colors.shades.shade100 }}>
+            {my_leader && me ?
+            <View nativeID="my_results">
+                    <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white }}>
+                    <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
+                        <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{my_leader.place}</Text>
+                    </View>
+                    <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <View nativeID="profile_pic" style={{ marginRight:10 }}>
+                            <Image
+                                source={{ uri: me.profile_pic && me.profile_pic != '' ? me.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                                style={{ height:40, width:40, borderRadius:100 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <View style={{ flex:1 }} nativeID="name">
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{me.username}</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{my_leader.winnings.toFixed(2)} Points</Text>
+                        </View>
+                        <View>
+                            {renderTrophy(my_leader.place)}
+                        </View>
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            <ScrollView style={{flex:1}}>
+                {loading ?
+                    <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:10, alignSelf:'center' }} />
+                :<></>}
+                <FlatList
+                    data={filtered_leaders}
+                    renderItem={renderLeaders}
+                    keyExtractor={((item) => item.player_id.toString())}
+                />
+            </ScrollView>
+            {view_mode == 'full' ?
+            <View style={{ flexDirection:'row', alignItems:'center' }}>
+                {offset > 0 ?
+                <Button
+                    title='PREV'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset - 1)}
+                />
+                :<></>}
+                <View style={{flex:1}} />
+                <Button
+                    title='NEXT'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset + 1)}
+                />
+            </View>
+            :<></>}
+            {view_mode == 'short' && onShowFullLeaderboard ?
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='See Full Leaderboard'
+                    style={{ flex:1, alignSelf:'center' }}
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => onShowFullLeaderboard()}
+                />
+            </View>
+            :<></>}
+            {onClose ?
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1 }}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CampaignLeaderboard

package/src/Poll/components/CampaignPlay.tsx

@@ -35,7 +35,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
     //const [ shareImage, setImage ] = useState<any>(undefined)
     const [ share_in_process ] = useState(false);
     const [ play_width, setPlayWidth ] = useState(0);
-    const [ show_live, setShowLive ] = useState(false);
+    //const [ show_live, setShowLive ] = useState(false);
     const [ active_poll, setActivePoll ] = useState<PollProps|undefined>(undefined);
     const [ active_view, setActiveView ] = useState('select_poll')
     
@@ -45,7 +45,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
         if(a.priority && b.priority){ return a.priority - b.priority }
         else { return parseInt(b.poll_id) - parseInt(a.poll_id) }
     })
-    const playable_polls = polls.filter(p => ['closed','active'].includes(p.status))
+    const playable_polls = polls.filter(p => ['closed','active','paused'].includes(p.status))
     const active_polls = polls.filter(p => p.status == 'active');
     const pending_polls = polls.filter(p => ['pending','paused'].includes(p.status));
     const closed_polls = polls.filter(p => p.status == 'closed');
@@ -57,6 +57,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
     const active_responded = poll_responses.find(pr => pr.poll_id == active_poll?.poll_id) ? true : false;
     let active_index = playable_polls.findIndex(p => p.poll_id == active_poll?.poll_id)
 
+    console.log(playable_polls)
 
     //const progressRef = useRef()
 
@@ -105,66 +106,6 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
         setLoading(false);
     }
 
-    /*
-    const getImage = async() => {
-        if(!progressRef?.current){ return alert('Nothing to capture') }
-        setShareInProcess(true)
-    }
-    */
-    
-
-    /*
-    const share = async(newImage:string) => {
-        if(!player){ return }
-        if(!company){ return alert('no company')}
-        let text = '';
-        let url = `https://share.mybe.app/polls/${company.short_name}?poll_campaign_id=${poll_campaign.poll_campaign_id}`
-        setShareInProcess(false)
-        if(!newImage){ return alert('No image!') }
-        if(!navigator?.share){ return alert('Browser does not support sharing')}
-        const blob = await (await fetch(newImage)).blob();
-        const filesArray = [
-            new File([blob], `${player.player_id}_poll.png`, { type:blob.type } )
-        ]
-        navigator.share({ text, files:filesArray, url }).then(() => {
-            //segEventTrack({ event: 'Shared Position', properties: { be_type:route.params.be_type, result:shareablePosition.result_ind } })
-        }).catch((e) => console.log(e))
-    }
-    */
-
-    /*
-
-    const nativeShare = () => {
-        if(!navigator?.share){ return alert('Your browser does not support native sharing') }
-        if(!company){ return alert('no company')}
-        let text = ``
-        let total = playable_polls.length
-        let total_resolved = playable_polls.filter(pp => pp.winning_option_id || pp.winning_value).length
-        let wins = 0
-        playable_polls.sort((a,b) => a.priority - b.priority).map(pp => {
-            let resp = poll_responses.find(pr => pr.poll_id == pp.poll_id)
-            if(!resp && (!pp.winning_option_id || !pp.winning_value)){ return }
-            if(!resp){ text += `🕚`; return }
-            if(!resp.result_ind){ text += '🕚'; return }
-            if(resp.result_ind == 'win'){ wins += 1; text += '✅'; return }
-            if(resp.result_ind == 'lose'){ text += '❌'; return }
-            text += '🕚'
-            return
-        })
-        let message = `I just went ${wins} out of ${total} in ${poll_campaign.name}! \n${text}`
-        if(total_resolved < total){ message = `I just completed the ${poll_campaign.name}!` }
-        let link = window.location.href
-        //let link = `https://share.mybe.app/polls/${company.short_name}?poll_campaign_id=${poll_campaign.poll_campaign_id}`
-        navigator.share({ 
-            text:`${message}`,
-            url: link
-        }).then(() => {
-            //segEventTrack({ event: 'Shared Position', properties: { be_type:route.params.be_type, result:shareablePosition.result_ind } })
-        }).catch((e) => console.log(e))
-
-    }
-    */
-
     const handleNavPoll = (poll:PollProps) => {
         if(active_poll?.seconds_allowed){
             let responded = poll_responses.find(pr => pr.poll_id == active_poll.poll_id)
@@ -187,9 +128,9 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
         const selected = active_poll?.poll_id == data.item.poll_id ? true : false;
         const poll_response = poll_responses.find(pr => pr.poll_id == data.item.poll_id);
         const response_option = data.item.poll_options?.find(po => po.poll_option_id == poll_response?.poll_option_id)
+        console.log(data.item)
         return (
             <PollSelectCard
-                index={data.index}
                 poll_campaign={poll_campaign}
                 disabled={data.item.status == 'pending' ? true : false}
                 poll={data.item}
@@ -234,22 +175,10 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
                         <TouchableOpacity style={{ padding:10 }} onPress={() => console.log('NATIVE SHARE')}>
                             <Icons.ShareIcon color={Colors.brand.midnight} size={12}/>
                         </TouchableOpacity>
-                        {poll_campaign.stream ?
-                        <TouchableOpacity style={{ padding:10 }} onPress={() => setShowLive(!show_live)}>
-                            {show_live ?
-                            <Icons.CloseIcon color={Colors.utility.error} size={14}/>
-                            :
-                            <Icons.TVIcon color={Colors.brand.midnight} size={14} />
-                            }
-                        </TouchableOpacity>
-                        :<></>}
+
                     </View>
                 </View>
-                {poll_campaign.stream ?
-                <View nativeID='campaign_stream' style={{ marginTop: show_live ? 5: 0, height:show_live ? undefined : 0, overflow:'hidden', justifyContent:'center', alignItems:'center' }}>
-                    <Text>STREAM!</Text>
-                </View>
-                :<></>}
+
             </View>
             <View style={{ flex:1 }}>
                 <View nativeID='progress' style={{ padding:10, backgroundColor:Colors.shades.shade600 }}>
@@ -277,7 +206,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
                             </View>
                             <View nativeID='active_questions_list' style={{ marginTop: 10, backgroundColor:Colors.shades.shade100, borderRadius:22 }}>
                                 <FlatList
-                                    data={active_polls}
+                                    data={playable_polls.sort((a,b) => a.priority - b.priority)}
                                     renderItem={renderPolls}
                                 />
                             </View>
@@ -391,11 +320,11 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
                     <View nativeID='campaign_results' style={{ flex:1 }}>
                         <CampaignResult
                             poll_campaign={poll_campaign}
-                            polls={polls}
+                            //polls={polls}
                             //hide_back={init_view && init_view !='undefined' ? true : false}
-                            onShare={() => console.log('Share this bad boi!')}
-                            poll_responses={poll_responses}
-                            onClose={() => setActiveView('select_poll')}
+                            //onShare={() => console.log('Share this bad boi!')}
+                            //poll_responses={poll_responses}
+                            //onClose={() => setActiveView('select_poll')}
                         />
                     </View>
                 :<></>}

package/src/Poll/components/CampaignProgressBar.tsx

@@ -27,7 +27,6 @@ const CampaignProgressBar = ({ poll_responses, active_poll, polls, onPollSelect}
         let color = Colors.shades.white
         let response = poll_responses.find(pr => pr.poll_id == data.item.poll_id)
         if(response){ color = getBarColor(response) }
-        console.log('rendering!!!')
         const active = active_poll == data.item.poll_id ? true : false
         return (
             <TouchableOpacity

package/src/Poll/components/CampaignResult.tsx

@@ -1,174 +1,35 @@
-import { FlatList, Image, ScrollView, TouchableOpacity, View } from "react-native"
-import React, { useEffect, useState } from "react"
-import { PollCampaignApi } from "../api"
-import type { PollCampaignLeaderProps, PollCampaignProps, PollProps, PollResponseProps, PublicPlayerProps } from "../../types"
-import { Button, Icons, Text } from "../../Components"
+import { TouchableOpacity, View } from "react-native"
+import React, { useState } from "react"
+import type { PollCampaignProps } from "../../types"
+import { Icons, Text } from "../../Components"
 import Colors from '../../constants/colors';
+import { view_styles } from "../../constants/styles"
+import CampaignLeaderboard from "./CampaignLeaderboard"
 
 type CampaignResultProps = {
     poll_campaign:PollCampaignProps,
-    polls:PollProps[],
-    onShare?:() => void,
-    hide_back?:boolean,
-    poll_responses:PollResponseProps[],
-    onClose: () => void
+    onShowFullLeaderboard?:() => void
 }
-const CampaignResult = ({ poll_campaign, polls, poll_responses, hide_back, onClose, onShare } : CampaignResultProps) => {
-    const [ leaders_state, setLeadersState ] = useState<{
-        loading:boolean,
-        offset:number,
-        players:PublicPlayerProps[]
-        poll_campaign_leaders:PollCampaignLeaderProps[]
-    }>({ 
-        loading:false, 
-        offset:0,
-        poll_campaign_leaders:[],
-        players: []
-    });
-    const [ points_expanded, setPointsExpanded ] = useState(false);
 
-    const { players, poll_campaign_leaders } = leaders_state;
-
-    useEffect(() => {
-        getDataFromServer(poll_campaign.poll_campaign_id, 0)
-    },[poll_campaign.poll_campaign_id])
-
-    const getDataFromServer = async(poll_campaign_id:string, offset:number) => {
-        setLeadersState({ ...leaders_state, loading:true })
-        const leaders = await PollCampaignApi.getLeadersByCampaignId(poll_campaign_id, offset)
-        const player_ids = leaders.poll_campaign_leaders.map(l => l.player_id);
-        const ps = await PollCampaignApi.getPlayersByPlayerIds(player_ids);
-        setLeadersState({ 
-            loading:false,
-            poll_campaign_leaders: leaders.poll_campaign_leaders,
-            players: ps,
-            offset
-        })
-    }
-
-    const renderTrophy = (place:number) => {
-        switch(place){
-            case 1: return <Icons.TrophyIcon color={Colors.incentive.gold} size={16}/>
-            case 2: return <Icons.TrophyIcon color={Colors.incentive.silver} size={16}/>
-            case 3: return <Icons.TrophyIcon color={Colors.incentive.bronze} size={16}/>
-            default: return <></>
-        }
-    }
-
-    const renderLeaders = (data: {item:PollCampaignLeaderProps, index:number}) => {
-        const player = players.find(p => p.player_id == data.item.player_id);
-        if(!player){ return <></> }
-        return (
-            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white }}>
-                <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
-                    <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{data.index+1}</Text>
-                </View>
-                <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
-                    <View nativeID="profile_pic" style={{ marginRight:10 }}>
-                        <Image
-                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
-                            style={{ height:40, width:40, borderRadius:100 }}
-                            resizeMode='cover'
-                        />
-                    </View>
-                    <View style={{ flex:1 }} nativeID="name">
-                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
-                    </View>
-                    <View>
-                        {renderTrophy(data.index + 1)}
-                    </View>
-                </View>
-            </View>
-        )
-    }
-
-
-    //const questions_answered = poll_responses.length
-    let correct_answers = poll_responses.filter(pr => pr.result_ind == 'win').length
-    //let incorrect_answers = poll_responses.filter(pr => pr.result_ind == 'lose').length
-    let ungraded_answers = poll_responses.filter(pr => !pr.result_ind).length
-    let points_earned = poll_responses.reduce((a,b) => a + b.winnings, 0)
+const CampaignResult = ({ poll_campaign, onShowFullLeaderboard } : CampaignResultProps) => {
+    const [ expanded, setExpanded ] = useState(true);
 
     return (
-        <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1, padding:10, marginBottom:10 }}>
-                <TouchableOpacity 
-                    style={{ flexDirection:'row', padding:10, paddingRight:15, paddingLeft:15, borderRadius:22, justifyContent:'center', alignItems:'center', marginBottom:10, backgroundColor:Colors.incentive.gold }}
-                    onPress={() => {
-                        if(onShare){ onShare() }
-                    }}
-                    >
-                    <Icons.ShareSocialIcon color={Colors.shades.white} size={14}/>
-                    <Text style={{ marginLeft:5 }} size={14} color={Colors.shades.white} weight='bold'>Share your results for a chance at a prize!</Text>
-                </TouchableOpacity>
-                <View nativeID="my_results">
-                    <Text style={{ margin:10 }} size={16} color={Colors.brand.midnight} weight='bold'>My Results</Text>
-                    <View style={{borderRadius:22, backgroundColor:Colors.shades.shade100, padding:20}}>
-                        <View nativeID="completion" style={{ flexDirection: 'row' }}>
-                            <View nativeID="total_questions" style={{ flex:1 }}>
-                                <Text size={12} color={Colors.brand.slate} weight='semibold'>TOTAL QUESTIONS</Text>
-                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{polls.length} Questions</Text>
-                            </View>
-                            <View nativeID="completion_pct" style={{ flex:1 }}>
-                                <Text size={12} color={Colors.brand.slate} weight='semibold'>COMPLETION</Text>
-                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{(((polls.length - ungraded_answers) / polls.length) * 100).toFixed()}%</Text>
-                            </View>
-                        </View>
-                        <View nativeID="performance" style={{ flexDirection: 'row', marginTop:10 }}>
-                            <View nativeID="total_questions" style={{ flex:1 }}>
-                                <Text size={12} color={Colors.brand.slate} weight='semibold'>SUCCESS RATE</Text>
-                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{((correct_answers / polls.length)*100).toFixed()}%</Text>
-                            </View>
-                            <View nativeID="completion_pct" style={{ flex:1 }}>
-                                <Text size={12} color={Colors.brand.slate} weight='semibold'>POINTS EARNED</Text>
-                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{points_earned.toFixed()} Points</Text>
-                            </View>
-                        </View>
-                        <View style={{ borderRadius:22, backgroundColor:Colors.highlights.highlight200Faded, padding:10, marginTop:10 }}>
-                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setPointsExpanded(!points_expanded)}>
-                                <View style={{ flexDirection:'row', alignItems:'center', flex:1 }}>
-                                    <Icons.AlertIcon color={Colors.brand.midnight} size={14}/>
-                                    <Text style={{ marginLeft:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>How are points calculated?</Text>
-                                </View>
-                                <Icons.ChevronIcon direction={points_expanded ? 'up' : 'down'} color={Colors.brand.midnight}/>
-                            </TouchableOpacity>
-                            {points_expanded ?
-                            <>
-                                <Text size={12} color={Colors.brand.midnight} style={{ marginTop:10 }} weight='regular'>Points are calculated based on the total responses by all participants.  Each response is worth 1 point.  The responders that selected the winning option will split the total point pool.</Text>
-                                <Text size={12} color={Colors.brand.midnight} style={{ marginTop:5 }} weight='regular'>Therefore, points earned will not be updated until the question is closed!</Text>
-                            </>
-                            :<></>}
-                        </View>
-                    </View>
-                </View>
-                <View nativeID="leader_header" style={{ margin:10, flexDirection:'row', alignItems:'center' }}>
-                    <Text style={{ flex:1 }} size={16} color={Colors.brand.midnight} weight='bold'>Leaderboard</Text>
-                    <View style={{ borderRadius:22, padding:10, backgroundColor:Colors.accents.accent100 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{poll_campaign.total_responders} Participants</Text>
-                    </View>
-                </View>
-                <View nativeID="leaderboard" style={{ flex:1, borderTopRightRadius:22, borderTopLeftRadius:22, padding:10, backgroundColor:Colors.shades.shade100}}>
-                    {poll_campaign.status == 'active' ?
-                    <Text size={12} color={Colors.utility.warning} textAlign="center">Points change as new responses come in</Text>
-                    :<></>}
-                    <FlatList
-                        data={poll_campaign_leaders}
-                        renderItem={renderLeaders}
-                        keyExtractor={((item) => item.player_id.toString())}
-                    />
+        <View style={{ flex:1, ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <Icons.PodiumIcon size={18} color={Colors.brand.midnight} />
+                <View style={{flex:1, marginLeft:10}}>
+                    <Text theme="header">Leaderboard</Text>
+                    <Text style={{ marginTop:3 }} theme="body">Below are the leaderboard results!</Text>
                 </View>
-            </ScrollView>
-            {!hide_back ?
-            <View nativeID="result_actions" style={{ marginTop:5, padding:10 }}>
-                <Button
-                    title='Go Back'
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    padding={14}
-                    borderColor={Colors.brand.electric}
-                    onPress={() => onClose()}
-                    borderRadius={22}
+                <Icons.ChevronIcon size={8} color={Colors.brand.midnight} direction={expanded ? 'up' : 'down'} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body, padding:0, backgroundColor:Colors.shades.shade100 }}>
+                <CampaignLeaderboard
+                    view_mode="short"
+                    poll_campaign={poll_campaign}
+                    onShowFullLeaderboard={onShowFullLeaderboard}
                 />
             </View>
             :<></>}
@@ -176,4 +37,23 @@ const CampaignResult = ({ poll_campaign, polls, poll_responses, hide_back, onClo
     )
 }
 
+
+/*
+<View style={{ borderRadius:22, backgroundColor:Colors.highlights.highlight200Faded, padding:10, marginTop:10 }}>
+                    <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setPointsExpanded(!points_expanded)}>
+                        <View style={{ flexDirection:'row', alignItems:'center', flex:1 }}>
+                            <Icons.AlertIcon color={Colors.brand.midnight} size={14}/>
+                            <Text style={{ marginLeft:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>How are points calculated?</Text>
+                        </View>
+                        <Icons.ChevronIcon direction={points_expanded ? 'up' : 'down'} color={Colors.brand.midnight}/>
+                    </TouchableOpacity>
+                    {points_expanded ?
+                    <View>
+                        <Text size={12} color={Colors.brand.midnight} style={{ marginTop:10 }} weight='regular'>Points are calculated based on the total responses by all participants.  Each response is worth 1 point.  The responders that selected the winning option will split the total point pool.</Text>
+                        <Text size={12} color={Colors.brand.midnight} style={{ marginTop:5 }} weight='regular'>Therefore, points earned will not be updated until the question is closed!</Text>
+                    </View>
+                    :<></>}
+                </View>
+*/
+
 export default CampaignResult