be-components 6.6.3 → 6.6.4

package/lib/module/Group/index.js

@@ -11,15 +11,48 @@ import CompetitionCard from '../Engage/components/CompetitionCard';
 import { PostCard } from '../SocialComponents';
 import Pagination from '../Components/Pagination';
 import GroupCTAButton from './components/GroupCTAButton';
-const sections = ['header', 'chat', 'me', 'toggle', 'competition_toggle', 'members', 'competitions', 'activity'];
+import PollCampaignCard from '../Engage/components/PollCampaignCard';
+import SquaresCompetitionCard from '../Engage/components/SquaresCompetitionCard';
+import { showConfirmAlert } from '../Components/ConfirmAlert';
+const sections = ['header', 'chat', 'toggle', 'me', 'competition_toggle', 'new_competition', 'members', 'competitions', 'activity'];
+const member_stat_options = [{
+  stat_key: 'roi_pct',
+  label: 'ROI Percent',
+  multiplier: 100,
+  suffix: '%'
+}, {
+  stat_key: 'winnings',
+  label: 'Winnings',
+  multiplier: 1,
+  prefix: '$'
+}, {
+  stat_key: 'win_pct',
+  label: 'Win Percent',
+  multiplier: 100,
+  suffix: '%'
+}, {
+  stat_key: 'fulfilled_positions',
+  label: 'Matched Bets',
+  multiplier: 1,
+  suffix: ' Bets'
+}, {
+  stat_key: 'original_stake',
+  label: 'Betting Volume',
+  multiplier: 1,
+  prefix: '$'
+}];
 const GroupComponent = ({
+  refresh_key,
   group_id,
   player,
   mode,
   onInvitePlayer,
   onSelectCompetition,
   onSelectChat,
-  onSelectPlayer
+  onSelectPlayer,
+  onNudgePlayer,
+  onSelectPollCampaign,
+  onSelectSquaresCompetition
 }) => {
   const Colors = useColors();
   const leader_options = [{
@@ -54,6 +87,9 @@ const GroupComponent = ({
     toggle: 'upcoming',
     competition_payout_types: [],
     competition_result_types: [],
+    events: [],
+    squares_competitions: [],
+    poll_campaigns: [],
     competition_types: [],
     active_competitions: [],
     competition_players: [],
@@ -75,28 +111,35 @@ const GroupComponent = ({
     group_messages: [],
     editing: false,
     show_player_status: false,
+    stats_expanded: false,
     active_toggle: 'members',
+    active_stat: member_stat_options[0],
     group_players: [],
     players: []
   });
   const {
     loading,
     group,
+    action_loading,
+    stats_expanded,
     active_toggle,
     editing,
     show_player_status,
+    active_stat,
     group_messages,
     group_players,
     my_group_player,
     players
   } = group_data;
+  const admin = player?.player_id == group?.group_admin ? true : false;
   const {
     sorted_players,
     player_analytics
-  } = GroupHelpers.sortMembers(group_players, order_analytics);
+  } = GroupHelpers.sortMembers(group_players, order_analytics, active_stat?.stat_key);
+  const sorted_engagements = GroupHelpers.sortCompetitionAction([], comp_data.active_competitions, [], comp_data.squares_competitions, comp_data.poll_campaigns);
   useEffect(() => {
     getGroupData(group_id);
-  }, [group_id]);
+  }, [group_id, refresh_key]);
   useEffect(() => {
     getToggleData(active_toggle);
   }, [active_toggle]);
@@ -118,7 +161,7 @@ const GroupComponent = ({
   const getActitiyData = async page => {
     setActivityData({
       ...activity_data,
-      loading: false
+      loading: true
     });
     const activity = await GroupApi.getPostsByGroupId(group_id, page);
     let order_ids = [];
@@ -143,16 +186,30 @@ const GroupComponent = ({
       competition_records: [],
       competition_results: []
     };
+    let server_polls = [];
+    let server_sq = [];
+    let server_events = [];
     if (type == 'upcoming') {
       resp = await GroupApi.getActiveCompetitions(group_id);
+      server_polls = await GroupApi.getActivePolls(group_id);
+      server_sq = await GroupApi.getActiveSquares(group_id);
+      let event_ids = server_sq.map(sq => sq.event_id);
+      server_events = await GroupApi.getEventsByIds(event_ids);
     } else {
       resp = await GroupApi.getHistoryCompetitions(group_id, page);
+      server_polls = await GroupApi.getHistoryPolls(group_id, page);
+      server_sq = await GroupApi.getHistorySquares(group_id, page);
+      let event_ids = server_sq.map(sq => sq.event_id);
+      server_events = await GroupApi.getEventsByIds(event_ids);
     }
     const opts = await GroupApi.getCompetitionOptions();
     setCompData({
       ...comp_data,
       loading: false,
       toggle: type,
+      poll_campaigns: server_polls,
+      squares_competitions: server_sq,
+      events: server_events,
       competition_players: resp.competition_players,
       competition_records: resp.competition_records,
       competition_results: resp.competition_results,
@@ -205,11 +262,13 @@ const GroupComponent = ({
     });
   };
   const renderPlayers = data => {
-    const player = players.find(p => p.player_id == data.item.player_id);
-    if (!player) {
+    const pl = players.find(p => p.player_id == data.item.player_id);
+    if (!pl) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     const player_analytic = player_analytics[data.item.player_id];
+    const analytic = player_analytic ? player_analytic[active_stat?.stat_key] : 0;
+    const is_loading = action_loading == data.item.group_player_id ? true : false;
     return /*#__PURE__*/React.createElement(Button, {
       transparent: true,
       style: {
@@ -220,8 +279,36 @@ const GroupComponent = ({
         borderColor: Colors.borders.light,
         borderRadius: 0
       },
-      onPress: () => onSelectPlayer(player)
-    }, /*#__PURE__*/React.createElement(View, {
+      onPress: () => onSelectPlayer(pl)
+    }, admin && data.item.player_id != player?.player_id ? /*#__PURE__*/React.createElement(Button, {
+      title: "X",
+      title_color: Colors.text.error,
+      loading: is_loading,
+      style: {
+        padding: 10,
+        opacity: is_loading ? 0.5 : 1
+      },
+      onPress: () => {
+        showConfirmAlert('Are you sure?', 'This will boot and ban this player from the group.  You can unban the player later', async () => {
+          //Ok we have confirmed it!
+          let new_pl = await GroupApi.bootPlayer(data.item.group_player_id);
+          if (!new_pl) {
+            setGroupData({
+              ...group_data,
+              action_loading: undefined
+            });
+            return alert('Unable to boot player at this time.  Please try again');
+          }
+          setGroupData({
+            ...group_data,
+            action_loading: undefined,
+            group_players: group_players.filter(gp => gp.group_player_id != new_pl.group_player_id).concat(new_pl)
+          });
+        }), () => {
+          console.log('cancelled');
+        };
+      }
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
       float: true,
       style: {
         borderRadius: 100,
@@ -229,7 +316,7 @@ const GroupComponent = ({
       }
     }, /*#__PURE__*/React.createElement(Image, {
       source: {
-        uri: player.profile_pic
+        uri: pl.profile_pic
       },
       style: {
         height: 45,
@@ -245,32 +332,123 @@ const GroupComponent = ({
       }
     }, /*#__PURE__*/React.createElement(Text, {
       theme: "h1"
-    }, "@", player.username), /*#__PURE__*/React.createElement(Text, {
+    }, "@", pl.username), /*#__PURE__*/React.createElement(Text, {
       theme: "description",
       style: {
         marginTop: 3
       }
-    }, "Joined ", moment(data.item.create_datetime).fromNow())), player_analytic ? /*#__PURE__*/React.createElement(Text, {
-      theme: "h2"
-    }, "ROI ", (player_analytic.roi_pct * 100).toFixed(2), "%") : /*#__PURE__*/React.createElement(React.Fragment, null));
+    }, data.item.status == 'active' ? 'Joined' : 'Invited', " ", moment(data.item.last_update_datetime).fromNow())), active_stat && player_analytic && data.item.status == 'active' ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        alignItems: 'flex-end'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, active_stat.prefix, (parseFloat(analytic) * active_stat.multiplier).toFixed(2), active_stat.suffix), /*#__PURE__*/React.createElement(Text, {
+      theme: "light",
+      style: {
+        marginTop: 3
+      }
+    }, active_stat.label)) : /*#__PURE__*/React.createElement(React.Fragment, null), data.item.status == 'invited' ? /*#__PURE__*/React.createElement(Button, {
+      disabled: !admin,
+      type: "text",
+      style: {
+        padding: 10,
+        opacity: is_loading ? 0.5 : 1
+      },
+      loading: is_loading,
+      title_color: Colors.text.action,
+      title: admin ? 'Nudge' : 'Invited',
+      onPress: () => onNudgePlayer(pl, data.item)
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null), admin && data.item.status == 'invited' ? /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      style: {
+        padding: 10,
+        opacity: is_loading ? 0.5 : 1
+      },
+      title_color: Colors.text.error,
+      loading: is_loading,
+      title: "Uninvite",
+      onPress: async () => {
+        setGroupData({
+          ...group_data,
+          action_loading: data.item.group_player_id
+        });
+        const new_pl = await GroupApi.uninvitePlayer(data.item.group_player_id);
+        if (!new_pl) {
+          setGroupData({
+            ...group_data,
+            action_loading: undefined
+          });
+          return alert('Unable to uninvite player.  Please try again');
+        }
+        setGroupData({
+          ...group_data,
+          action_loading: undefined,
+          group_players: group_players.filter(gp => gp.group_player_id != new_pl.group_player_id).concat(new_pl)
+        });
+      }
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
   };
-  const renderCompetitions = data => {
-    const type = comp_data.competition_types.find(t => t.competition_type_id == data.item.competition_type_id);
-    const result = comp_data.competition_result_types.find(r => r.competition_result_type_id == data.item.competition_result_type_id);
-    if (!type || !result) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
+  const renderEngagements = data => {
+    switch (data.item.type) {
+      case 'competition':
+        const competition = comp_data.active_competitions.find(c => c.competition_id == data.item.id);
+        if (!competition) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        const type = comp_data.competition_types.find(t => t.competition_type_id == competition.competition_type_id);
+        const result = comp_data.competition_result_types.find(r => r.competition_result_type_id == competition.competition_result_type_id);
+        if (!type || !result) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        const my_result = comp_data.competition_results.find(cr => cr.player_id == player?.player_id && cr.competition_id == competition.competition_id);
+        const my_record = comp_data.competition_records.find(cr => cr.player_id == player?.player_id && cr.competition_id == competition.competition_id);
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 5
+          }
+        }, /*#__PURE__*/React.createElement(CompetitionCard, {
+          competition: competition,
+          player: player,
+          competition_type: type,
+          competition_record: my_record,
+          competition_result: my_result,
+          competition_result_type: result,
+          onCompetitionSelect: onSelectCompetition
+        }));
+      case 'bracket':
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      case 'squares':
+        const squares_comp = comp_data.squares_competitions.find(sc => sc.sq_comp_id == data.item.id);
+        if (!squares_comp) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        const event = comp_data.events.find(e => e.event_id == squares_comp.event_id);
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 5
+          }
+        }, /*#__PURE__*/React.createElement(SquaresCompetitionCard, {
+          squares_competition: squares_comp,
+          event: event,
+          onSelectCompetition: onSelectSquaresCompetition
+        }));
+      case 'poll_campaign':
+        const poll_campaign = comp_data.poll_campaigns.find(pc => pc.poll_campaign_id == data.item.id);
+        if (!poll_campaign) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 5
+          }
+        }, /*#__PURE__*/React.createElement(PollCampaignCard, {
+          poll_campaign: poll_campaign,
+          onSelectPollCampaign: onSelectPollCampaign
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-    const my_result = comp_data.competition_results.find(cr => cr.player_id == player?.player_id && cr.competition_id == data.item.competition_id);
-    const my_record = comp_data.competition_records.find(cr => cr.player_id == player?.player_id && cr.competition_id == data.item.competition_id);
-    return /*#__PURE__*/React.createElement(CompetitionCard, {
-      competition: data.item,
-      player: player,
-      competition_type: type,
-      competition_record: my_record,
-      competition_result: my_result,
-      competition_result_type: result,
-      onCompetitionSelect: onSelectCompetition
-    });
   };
   const renderPosts = data => {
     let player = players.find(p => p.player_id == data.item.player_id);
@@ -356,13 +534,49 @@ const GroupComponent = ({
           }
         }, /*#__PURE__*/React.createElement(GroupCTAButton, {
           group: group,
-          message_length: 100,
+          hide_from_player: true,
+          message_length: 20,
           players: players,
           group_messages: group_messages,
           group_players: group_players,
           onSelectChat: onSelectChat
         }));
+      case 'new_competition':
+        if (active_toggle != 'competitions') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          type: "footer",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2"
+        }, "CREATE A NEW COMPETITION"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Create a new pick-em or other engagement for this group!")), /*#__PURE__*/React.createElement(Button, {
+          type: "success",
+          style: {
+            padding: 10
+          },
+          title: "CREATE",
+          onPress: () => console.log('New competition!')
+        }));
       case 'me':
+        if (active_toggle != 'members') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
         return /*#__PURE__*/React.createElement(View, {
           type: "row",
           style: {
@@ -423,7 +637,7 @@ const GroupComponent = ({
             ...group_data,
             show_player_status: true
           })
-        }) : my_group_player?.status != 'invited' ? /*#__PURE__*/React.createElement(Button, {
+        }) : my_group_player?.status != 'invited' && !admin ? /*#__PURE__*/React.createElement(Button, {
           type: "error",
           title: "LEAVE",
           style: {
@@ -433,7 +647,10 @@ const GroupComponent = ({
             ...group_data,
             show_player_status: true
           })
-        }) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null));
+        }) : my_group_player?.status != 'invited' && admin ? /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          color: Colors.text.gold
+        }, "ADMIN") : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null));
       case 'toggle':
         return /*#__PURE__*/React.createElement(View, {
           style: {
@@ -448,7 +665,7 @@ const GroupComponent = ({
             label: 'Activity'
           }, {
             key: 'competitions',
-            label: 'Competitions'
+            label: 'Engagements'
           }],
           selected_option: active_toggle,
           onSelectOption: option => setGroupData({
@@ -471,12 +688,15 @@ const GroupComponent = ({
           style: {
             padding: 10
           }
-        }, /*#__PURE__*/React.createElement(Pagination, {
-          offset: activity_data.offset,
-          onNext: () => getActitiyData(activity_data.offset + 1),
-          onPrevious: () => getActitiyData(activity_data.offset - 1)
-        }), /*#__PURE__*/React.createElement(FlatList, {
-          data: activity_data.posts,
+        }, activity_data.loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          },
+          size: 'large',
+          color: Colors.text.h1
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FlatList, {
+          data: activity_data.posts.sort((a, b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()),
           key: 'post_list',
           keyExtractor: item => item.memo_post_id.toString(),
           renderItem: renderPosts
@@ -485,16 +705,103 @@ const GroupComponent = ({
         if (active_toggle != 'members') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        return /*#__PURE__*/React.createElement(View, {
+        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            zIndex: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Group Members"), /*#__PURE__*/React.createElement(Text, {
+          theme: "description"
+        }, "Active and invited members are show below.  You can sort the members by different leaderboards using the dropdown on the right.")), /*#__PURE__*/React.createElement(View, {
+          float: true
+        }, /*#__PURE__*/React.createElement(Button, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          },
+          onPress: () => setGroupData({
+            ...group_data,
+            stats_expanded: !stats_expanded
+          })
+        }, /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginRight: 5
+          },
+          theme: "h2"
+        }, active_stat?.label ?? 'Select'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+          direction: stats_expanded ? 'up' : 'down',
+          color: Colors.text.h1,
+          size: 8
+        })), stats_expanded ? /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: 200
+          }
+        }, member_stat_options.map(so => {
+          return /*#__PURE__*/React.createElement(Button, {
+            transparent: true,
+            style: {
+              padding: 10,
+              borderRadius: 0,
+              borderBottomWidth: 1,
+              borderColor: Colors.borders.light
+            },
+            onPress: () => setGroupData({
+              ...group_data,
+              active_stat: so,
+              stats_expanded: false
+            })
+          }, /*#__PURE__*/React.createElement(Text, {
+            theme: "h1"
+          }, so.label));
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(View, {
           style: {
             padding: 10
           }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          options: leader_options.map(o => {
+            return {
+              key: o.option,
+              label: o.label
+            };
+          }),
+          selected_option: time_option?.option,
+          onSelectOption: option => {
+            const selected = leader_options.find(o => o.option == option);
+            if (!selected) {
+              return;
+            }
+            getGroupAnalytics(group_id, selected);
+          }
+        })), /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10,
+            zIndex: -10
+          }
         }, /*#__PURE__*/React.createElement(FlatList, {
           data: sorted_players,
           keyExtractor: item => item.group_player_id.toString(),
           renderItem: renderPlayers,
+          initialNumToRender: 10,
+          windowSize: 4,
           key: 'group_members'
-        }));
+        })));
       case 'competition_toggle':
         if (active_toggle != 'competitions') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -523,11 +830,18 @@ const GroupComponent = ({
           style: {
             padding: 10
           }
-        }, /*#__PURE__*/React.createElement(FlatList, {
+        }, comp_data.loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          },
+          size: 'large',
+          color: Colors.text.h1
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FlatList, {
           key: 'competition_list',
-          keyExtractor: item => item.competition_id.toString(),
-          data: comp_data.active_competitions.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
-          renderItem: renderCompetitions
+          keyExtractor: item => item.id.toString(),
+          data: sorted_engagements.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
+          renderItem: renderEngagements
         }));
       default:
         return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -546,49 +860,11 @@ const GroupComponent = ({
     key: 'group_list',
     keyExtractor: item => item,
     renderItem: renderSections
-  }), active_toggle == 'members' ? /*#__PURE__*/React.createElement(Toggle, {
-    options: leader_options.map(o => {
-      return {
-        key: o.option,
-        label: o.label
-      };
-    }),
-    selected_option: time_option?.option,
-    onSelectOption: option => {
-      const selected = leader_options.find(o => o.option == option);
-      if (!selected) {
-        return;
-      }
-      getGroupAnalytics(group_id, selected);
-    }
-  }) : active_toggle == 'competitions' ? /*#__PURE__*/React.createElement(View, {
-    type: "footer",
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    transparent: true,
-    style: {
-      flex: 1,
-      marginRight: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "h2"
-  }, "CREATE A NEW COMPETITION"), /*#__PURE__*/React.createElement(Text, {
-    theme: "description",
-    style: {
-      marginTop: 3
-    }
-  }, "Create a new pick-em or other engagement for this group!")), /*#__PURE__*/React.createElement(Button, {
-    type: "success",
-    style: {
-      padding: 10
-    },
-    title: "CREATE",
-    onPress: () => console.log('New competition!')
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), editing && group ? /*#__PURE__*/React.createElement(View, {
+  }), active_toggle == 'members' ? /*#__PURE__*/React.createElement(React.Fragment, null) : active_toggle == 'activity' ? /*#__PURE__*/React.createElement(Pagination, {
+    offset: activity_data.offset,
+    onNext: () => getActitiyData(activity_data.offset + 1),
+    onPrevious: () => getActitiyData(activity_data.offset - 1)
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), editing && group ? /*#__PURE__*/React.createElement(View, {
     type: "blur",
     style: {
       position: 'absolute',