be-components 6.6.1 → 6.6.2

package/lib/module/Group/index.js

@@ -0,0 +1,663 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed";
+import { GroupApi, GroupHelpers } from './api';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import { Icons, Toggle } from '../Components';
+import { useColors } from '../constants/useColors';
+import moment from 'moment-mini';
+import ManageGroupForm from './components/ManageGroupForm';
+import GroupPlayerActionForm from './components/GroupPlayerActionForm';
+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'];
+const GroupComponent = ({
+  group_id,
+  player,
+  mode,
+  onInvitePlayer,
+  onSelectCompetition,
+  onSelectChat,
+  onSelectPlayer
+}) => {
+  const Colors = useColors();
+  const leader_options = [{
+    to: moment().subtract(1, 'days').unix(),
+    from: moment().unix(),
+    option: '24_hours',
+    label: '24 Hours'
+  }, {
+    to: moment().subtract(7, 'days').unix(),
+    from: moment().unix(),
+    option: '7_days',
+    label: '7 Days'
+  }, {
+    to: moment().subtract(30, 'days').unix(),
+    from: moment().unix(),
+    option: '30_days',
+    label: '30 Days'
+  }, {
+    to: moment().subtract(60, 'days').unix(),
+    from: moment().unix(),
+    option: '60_days',
+    label: '60 Days'
+  }];
+  const [activity_data, setActivityData] = useState({
+    loading: false,
+    posts: [],
+    orders: [],
+    offset: 0
+  });
+  const [comp_data, setCompData] = useState({
+    loading: false,
+    toggle: 'upcoming',
+    competition_payout_types: [],
+    competition_result_types: [],
+    competition_types: [],
+    active_competitions: [],
+    competition_players: [],
+    competition_records: [],
+    competition_results: [],
+    offset: 0
+  });
+  const [group_analytics, setGroupAnalytics] = useState({
+    loading: false,
+    time_option: leader_options[0],
+    order_analytics: []
+  });
+  const {
+    time_option,
+    order_analytics
+  } = group_analytics;
+  const [group_data, setGroupData] = useState({
+    loading: false,
+    group_messages: [],
+    editing: false,
+    show_player_status: false,
+    active_toggle: 'members',
+    group_players: [],
+    players: []
+  });
+  const {
+    loading,
+    group,
+    active_toggle,
+    editing,
+    show_player_status,
+    group_messages,
+    group_players,
+    my_group_player,
+    players
+  } = group_data;
+  const {
+    sorted_players,
+    player_analytics
+  } = GroupHelpers.sortMembers(group_players, order_analytics);
+  useEffect(() => {
+    getGroupData(group_id);
+  }, [group_id]);
+  useEffect(() => {
+    getToggleData(active_toggle);
+  }, [active_toggle]);
+  const getToggleData = async toggle => {
+    switch (toggle) {
+      case 'members':
+        if (!time_option) {
+          return;
+        }
+        return getGroupAnalytics(group_id, time_option);
+      case 'competitions':
+        return getCompetitionData(comp_data.toggle, 0);
+      case 'activity':
+        return getActitiyData(0);
+      default:
+        return;
+    }
+  };
+  const getActitiyData = async page => {
+    setActivityData({
+      ...activity_data,
+      loading: false
+    });
+    const activity = await GroupApi.getPostsByGroupId(group_id, page);
+    let order_ids = [];
+    activity.filter(a => a.memo_orders).map(mo => mo.memo_orders.map(o => order_ids.push(o)));
+    let activity_orders = await GroupApi.getBulkOrders(order_ids);
+    setActivityData({
+      ...activity_data,
+      loading: false,
+      offset: page,
+      orders: activity_orders,
+      posts: activity.sort((a, b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())
+    });
+  };
+  const getCompetitionData = async (type, page) => {
+    setCompData({
+      ...comp_data,
+      loading: true
+    });
+    let resp = {
+      competitions: [],
+      competition_players: [],
+      competition_records: [],
+      competition_results: []
+    };
+    if (type == 'upcoming') {
+      resp = await GroupApi.getActiveCompetitions(group_id);
+    } else {
+      resp = await GroupApi.getHistoryCompetitions(group_id, page);
+    }
+    const opts = await GroupApi.getCompetitionOptions();
+    setCompData({
+      ...comp_data,
+      loading: false,
+      toggle: type,
+      competition_players: resp.competition_players,
+      competition_records: resp.competition_records,
+      competition_results: resp.competition_results,
+      competition_payout_types: opts.competition_payout_types,
+      competition_result_types: opts.competition_result_types,
+      competition_types: opts.competition_types,
+      active_competitions: resp.competitions,
+      offset: page
+    });
+  };
+  const getGroupAnalytics = async (id, time_option) => {
+    setGroupAnalytics({
+      ...group_analytics,
+      loading: true
+    });
+    let analytics = await GroupApi.getGroupAnalytics(id, time_option.to, time_option.from);
+    setGroupAnalytics({
+      ...group_analytics,
+      loading: false,
+      time_option: time_option,
+      order_analytics: analytics
+    });
+  };
+  const getGroupData = async id => {
+    GroupApi.setEnvironment();
+    setGroupData({
+      ...group_data,
+      loading: true
+    });
+    const g_data = await GroupApi.getGroupById(id);
+    if (!g_data) {
+      setGroupData({
+        ...group_data,
+        loading: false
+      });
+      return alert('Unable to get group information.  Please try again later');
+    }
+    let player_ids = [...new Set(g_data.group_players.map(p => p.player_id).concat(g_data.group_messages.map(m => m.player_id)))];
+    let plyers = await GroupApi.getPlayersByIds(player_ids);
+    setGroupData({
+      ...group_data,
+      loading: false,
+      players: plyers,
+      group: g_data.group,
+      show_player_status: !g_data.my_group_player ? true : g_data.my_group_player.status == 'active' ? false : true,
+      //Show to join if we can
+      group_messages: g_data.group_messages,
+      group_players: g_data.group_players,
+      my_group_player: g_data.my_group_player
+    });
+  };
+  const renderPlayers = data => {
+    const player = players.find(p => p.player_id == data.item.player_id);
+    if (!player) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    const player_analytic = player_analytics[data.item.player_id];
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        borderRadius: 0
+      },
+      onPress: () => onSelectPlayer(player)
+    }, /*#__PURE__*/React.createElement(View, {
+      float: true,
+      style: {
+        borderRadius: 100,
+        padding: 2
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: player.profile_pic
+      },
+      style: {
+        height: 45,
+        width: 45,
+        borderRadius: 100
+      },
+      resizeMode: "contain"
+    })), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, "@", player.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));
+  };
+  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 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);
+    let orders = activity_data.orders.filter(o => data.item.memo_orders.includes(o.order_id));
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 5
+      }
+    }, /*#__PURE__*/React.createElement(PostCard, {
+      post: data.item,
+      player: player,
+      orders: orders,
+      onRequestAuthenticate: () => console.log(''),
+      onSelectArticle: () => console.log(''),
+      articles: [],
+      width: 300,
+      onSelectImage: () => console.log(''),
+      onSelectPlayer: onSelectPlayer,
+      onSelectTag: () => console.log('')
+    }));
+  };
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        if (!group) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: group.group_image?.url
+          },
+          style: {
+            height: 50,
+            width: 50
+          },
+          resizeMode: "cover"
+        }), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, group.name), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, group.description)), player?.player_id == group.group_admin ? /*#__PURE__*/React.createElement(Button, {
+          float: true,
+          style: {
+            padding: 10
+          },
+          onPress: () => setGroupData({
+            ...group_data,
+            editing: true
+          })
+        }, /*#__PURE__*/React.createElement(Icons.EditIcon, {
+          size: 14,
+          color: Colors.text.h1
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+      case 'chat':
+        if (!group || !onSelectChat) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            padding: 10,
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(GroupCTAButton, {
+          group: group,
+          message_length: 100,
+          players: players,
+          group_messages: group_messages,
+          group_players: group_players,
+          onSelectChat: onSelectChat
+        }));
+      case 'me':
+        return /*#__PURE__*/React.createElement(View, {
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, player ? /*#__PURE__*/React.createElement(View, {
+          style: {
+            flex: 1
+          },
+          type: "row",
+          transparent: true
+        }, /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            borderRadius: 100,
+            padding: 2
+          }
+        }, /*#__PURE__*/React.createElement(Image, {
+          style: {
+            height: 30,
+            width: 30,
+            borderRadius: 100
+          },
+          source: {
+            uri: player.profile_pic
+          },
+          resizeMode: "contain"
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "@", player.username), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Member since ", moment(player.create_datetime).format('MM/DD/YYYY'))), my_group_player?.status == 'invited' ? /*#__PURE__*/React.createElement(Button, {
+          type: "action",
+          title: "INVTED",
+          style: {
+            padding: 10
+          },
+          onPress: () => setGroupData({
+            ...group_data,
+            show_player_status: true
+          })
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), !my_group_player || my_group_player.status == 'inactive' ? /*#__PURE__*/React.createElement(Button, {
+          type: "success",
+          title: "JOIN",
+          style: {
+            padding: 10
+          },
+          onPress: () => setGroupData({
+            ...group_data,
+            show_player_status: true
+          })
+        }) : my_group_player?.status != 'invited' ? /*#__PURE__*/React.createElement(Button, {
+          type: "error",
+          title: "LEAVE",
+          style: {
+            padding: 10
+          },
+          onPress: () => setGroupData({
+            ...group_data,
+            show_player_status: true
+          })
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null));
+      case 'toggle':
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          options: [{
+            key: 'members',
+            label: 'Members'
+          }, {
+            key: 'activity',
+            label: 'Activity'
+          }, {
+            key: 'competitions',
+            label: 'Competitions'
+          }],
+          selected_option: active_toggle,
+          onSelectOption: option => setGroupData({
+            ...group_data,
+            active_toggle: option
+          })
+        }), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+          size: "large",
+          color: Colors.text.h1,
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          }
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+      case 'activity':
+        if (active_toggle != 'activity') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          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,
+          key: 'post_list',
+          keyExtractor: item => item.memo_post_id.toString(),
+          renderItem: renderPosts
+        }));
+      case 'members':
+        if (active_toggle != 'members') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(FlatList, {
+          data: sorted_players,
+          keyExtractor: item => item.group_player_id.toString(),
+          renderItem: renderPlayers,
+          key: 'group_members'
+        }));
+      case 'competition_toggle':
+        if (active_toggle != 'competitions') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          options: [{
+            key: 'upcoming',
+            label: 'Upcoming'
+          }, {
+            key: 'history',
+            label: 'History'
+          }],
+          selected_option: comp_data.toggle,
+          onSelectOption: option => getCompetitionData(option, 0)
+        }));
+      case 'competitions':
+        if (active_toggle != 'competitions') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__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
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: sections,
+    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, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: mode == 'desktop' ? {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: 500,
+      height: 500
+    } : {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(ManageGroupForm, {
+    group: group,
+    onInvitePlayer: onInvitePlayer,
+    onClose: () => setGroupData({
+      ...group_data,
+      editing: false
+    }),
+    onUpdateGroup: g => setGroupData({
+      ...group_data,
+      group: g
+    })
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_player_status && group && player ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: mode == 'desktop' ? {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: 500,
+      height: 500
+    } : {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(GroupPlayerActionForm, {
+    group: group,
+    group_player: my_group_player,
+    me: player,
+    onResponse: new_gp => {
+      setGroupData({
+        ...group_data,
+        group_players: group_players.filter(gp => gp.group_player_id != new_gp.group_player_id).concat(new_gp),
+        my_group_player: new_gp,
+        show_player_status: false
+      });
+    },
+    onClose: () => setGroupData({
+      ...group_data,
+      show_player_status: false
+    })
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default GroupComponent;
+//# sourceMappingURL=index.js.map