be-components 7.4.2 → 7.4.3

package/src/BettorBot/index.tsx

@@ -0,0 +1,295 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed"
+import { FlatList, Image } from 'react-native';
+import type { DiscordPlayerStatsProps, FocusPositionProps, MyPlayerProps, PublicPlayerProps, ServerInfo } from '../types';
+import { BettorBotApi } from './api';
+import Pagination from '../Components/Pagination';
+import { useColors } from '../constants/useColors';
+import { Checkbox, SearchBox } from '../Components';
+import moment from 'moment-mini';
+import ServerInfoCard from './components/ServerInfoCard';
+import BroadcastMessageCard from './components/BroadcastMessageCard';
+
+type BettorBotDashboardProps = {
+    me?:MyPlayerProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+}
+const PAGE_SIZE = 5
+const sections = ['broadcast', 'row_1', 'row_2']
+const BettorBotDashboard = ({ me, onFocusPosition }:BettorBotDashboardProps) => {
+    const Colors = useColors();
+    const [ size, setSize ] = useState({ width:0, height:0 });
+    const [ server_offset, setServerOffset ] = useState(0);
+    const [ server_search, setServerSearch ] = useState('');
+    const [ show_server_id, setShowServerId ] = useState<string|undefined>(undefined);
+    const [ player_offset, setPlayerOffset ] = useState(0);
+    const [ player_search, setPlayerSearch ] = useState('');
+    const [ selected_servers, setSelectedServers ] = useState<{ guild_id:string, channels:string[] }[]>([]);
+    const [ show_message, setShowMessage ] = useState(false);
+    const [ state, setState ] = useState<{
+        loading: boolean,
+        servers:ServerInfo[],
+        players:PublicPlayerProps[],
+        discord_player_stats:DiscordPlayerStatsProps[]
+    }>({
+        loading:false,
+        servers: [],
+        players:[],
+        discord_player_stats:[]
+    });
+    const { servers, discord_player_stats, players } = state;
+    const total_servers = servers.length
+    const total_channels = servers.reduce((a,b) => a + b.accessibleChannels.length, 0)
+    const total_members = servers.reduce((a,b) => a + b.memberCount, 0);
+    let filtered_servers = servers.sort((a,b) => b.memberCount - a.memberCount || a.name.localeCompare(b.name)).slice(server_offset * PAGE_SIZE, (server_offset * PAGE_SIZE) + PAGE_SIZE);
+    if(server_search){ filtered_servers = servers.filter(s => `${s.name}`.toLowerCase().includes(server_search.toLowerCase())).slice(server_offset * PAGE_SIZE, (server_offset * PAGE_SIZE) + PAGE_SIZE) }
+
+    const total_discord_players = discord_player_stats.reduce((a,b) => a + b.count, 0)
+    const connected = discord_player_stats.filter(s => s.status == 'active').reduce((a,b) => a + b.count, 0);
+    const not_connected = discord_player_stats.filter(s => s.status != 'active').reduce((a,b) => a + b.count, 0);
+
+    let filtered_players = players.sort((a,b) => a.username.localeCompare(b.username)).slice(player_offset * PAGE_SIZE, (player_offset * PAGE_SIZE) + PAGE_SIZE);
+    if(player_search){ filtered_players = players.filter(s => `${s.username}`.toLowerCase().includes(player_search.toLowerCase())).slice(player_offset * PAGE_SIZE, (player_offset * PAGE_SIZE) + PAGE_SIZE) }
+
+    const show_server = servers.find(s => s.id == show_server_id);
+    const selected_channel_count = selected_servers.reduce((a,b) => a + b.channels.length, 0);
+
+    useEffect(() => {
+        if(!me){ return }
+        if(me.role != 'admin'){ return alert('You are not authorized') }
+        BettorBotApi.setEnvironment();
+        getData();
+    },[me]);
+
+    const getData = async() => {
+        setState({ ...state, loading:true });
+        const resp = await BettorBotApi.getServers();
+        if(resp.error){ alert('Unable to get data') }
+        const dps = await BettorBotApi.getDiscordStats();
+        let player_ids:string[] = []
+        dps.map(p => p.player_ids.map(id => player_ids.push(id)));
+        let s_players = await BettorBotApi.getPlayersByPlayerIds(player_ids)
+        setState({
+            ...state,
+            servers: resp.servers,
+            discord_player_stats: dps,
+            players: s_players,
+            loading: false,
+
+        })
+    }
+
+    const renderPlayers = (data:{ item:PublicPlayerProps, index:number }) => {
+        return (
+            <View transparent type='row' style={{ padding:8, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Image
+                    source={{ uri: data.item.profile_pic ?? '' }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.username}</Text>
+                    <Text theme='description' style={{ marginTop:3, maxWidth: size.width *0.7 }}>Joined {moment(data.item.create_datetime).fromNow()}</Text>
+                </View>
+            </View>
+        )
+    } 
+
+    const renderServers = (data:{ item:ServerInfo, index:number }) => {
+        const selected = selected_servers.find(s => s.guild_id == data.item.id) ? true : false
+        return (
+            <View transparent type='row' style={{ padding:8, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Checkbox
+                    style={{ marginRight:10 }}
+                    checked={selected}
+                    onSelect={() => {
+                        if(!selected){
+                            setSelectedServers(selected_servers.concat({ guild_id: data.item.id, channels: [] }));
+                            return setShowServerId(data.item.id);
+                        }
+                        setSelectedServers(selected_servers.filter(s => s.guild_id != data.item.id))
+                    }}
+                />
+                <Image
+                    source={{ uri: data.item.icon ?? '' }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.name}</Text>
+                    <Text theme='description' style={{ marginTop:3, maxWidth: size.width *0.7 }}>{data.item.description}</Text>
+                </View>
+                <View transparent style={{ padding:5 }}>
+                    <Text theme='h1'>{data.item.memberCount}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Members</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'row_1':
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float style={{ margin:5, minWidth:150, flexGrow:1 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Bot Stats</Text>
+                              </View>
+                            </View>
+                            <View transparent style={{ padding:10 }}>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Total Servers</Text>
+                                    <Text theme='h1'>{total_servers}</Text>
+                                </View>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Total Channels</Text>
+                                    <Text theme='h1'>{total_channels}</Text>
+                                </View>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Total Members</Text>
+                                    <Text theme='h1'>{total_members}</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View float style={{ margin:5, minWidth:350, flexGrow:1 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Servers</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Select Servers to send message to below.</Text>
+                              </View>
+                              {selected_servers.length > 0 && selected_channel_count > 0 ?
+                              <Button type='action' style={{ padding:10 }} onPress={() => setShowMessage(true)}>
+                                <Text theme='description' color={Colors.text.white}>Send Message</Text>
+                                <Text style={{ marginTop:3 }} theme='light' color={Colors.text.white}>{selected_servers.length} Servers</Text>
+                              </Button>
+                              :<></>}
+                            </View>
+                            <View transparent>
+                                <View transparent style={{ padding:10 }}>
+                                    <SearchBox
+                                        hide_search_button
+                                        onChange={(text) => {
+                                            setServerSearch(text);
+                                            setServerOffset(0)
+                                        }}
+                                    />
+                                </View>
+                                <Pagination offset={server_offset} onNext={() => setServerOffset(server_offset + 1)} onPrevious={() => setServerOffset(server_offset - 1)} />
+                                <FlatList
+                                    data={filtered_servers.sort((a,b) => b.memberCount - a.memberCount || a.name.localeCompare(b.name))}
+                                    renderItem={renderServers}
+                                    keyExtractor={item => item.id}
+                                    key={'server_list'}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'row_2':
+                return (
+                     <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float style={{ margin:5, minWidth:150, flexGrow:1 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Connection Stats</Text>
+                              </View>
+                            </View>
+                            <View transparent style={{ padding:10 }}>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Total Players</Text>
+                                    <Text theme='h1'>{total_discord_players}</Text>
+                                </View>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Fully Connected</Text>
+                                    <Text theme='h1'>{connected}</Text>
+                                </View>
+                                <View transparent type='row' style={{ padding:5 }}>
+                                    <Text style={{ flex:1 }} theme='h2'>Inactive</Text>
+                                    <Text theme='h1'>{not_connected}</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View float style={{ margin:5, minWidth:350, flexGrow:1 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Players</Text>
+                              </View>
+                            </View>
+                            <View transparent>
+                                <View transparent style={{ padding:10 }}>
+                                    <SearchBox
+                                        hide_search_button
+                                        onChange={(text) => {
+                                            setPlayerSearch(text);
+                                            setPlayerOffset(0)
+                                        }}
+                                    />
+                                </View>
+                                <Pagination offset={player_offset} onNext={() => setPlayerOffset(player_offset + 1)} onPrevious={() => setPlayerOffset(player_offset - 1)} />
+                                <FlatList
+                                    data={filtered_players.sort((a,b) => a.username.localeCompare(b.username))}
+                                    renderItem={renderPlayers}
+                                    keyExtractor={item => item.player_id.toString()}
+                                    key={'player_list'}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setSize({ height, width })
+        }}>
+            <FlatList
+                data={sections}
+                key={'bot_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            {show_server ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, padding:10 }}>
+                <ServerInfoCard
+                    selected_channels={selected_servers.find(s => s.guild_id == show_server.id)?.channels ?? []}
+                    server={show_server}
+                    onClose={() => setShowServerId(undefined)}
+                    onSelectChannel={(channel_id) => {
+                        let guild = selected_servers.find(s => s.guild_id == show_server.id);
+                        if(!guild){ return alert('Error') }
+                        let channels = guild.channels.concat(channel_id);
+                        setSelectedServers(selected_servers.filter(s => s.guild_id != show_server.id).concat({ guild_id: show_server.id, channels }))
+                    }}
+                    onDeselectChannel={(channel_id) => {
+                        let guild = selected_servers.find(s => s.guild_id == show_server.id);
+                        if(!guild){ return alert('Error') }
+                        let channels = guild.channels.filter(id => id != channel_id);
+                        setSelectedServers(selected_servers.filter(s => s.guild_id != show_server.id).concat({ guild_id: show_server.id, channels }))
+                    }}
+                />
+            </View>
+            :<></>}
+            {show_message ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, padding:10 }}>
+                <BroadcastMessageCard
+                    selected_servers={selected_servers}
+                    servers={servers}
+                    onFocusPosition={onFocusPosition}
+                    onClose={() => setShowMessage(false)}
+                    onSendMessage={(_) => {
+                        setSelectedServers([])
+                        setShowMessage(false)
+                    }}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default BettorBotDashboard

package/src/index.tsx

@@ -69,6 +69,7 @@ import CreateEmbed from './PartnerPortal/components/CreateEmbed';
 import ReferralCodeManager from './PartnerPortal/components/ReferralCodeManager';
 import FlashCampaignManager from './PartnerPortal/components/FlashCampaignManager';
 import MyAction from './MyAction';
+import BettorBotDashboard from './BettorBot';
 
 export {
   Authenticator,
@@ -80,6 +81,7 @@ export {
   DiscordConnectionManager,
   BEEventApi,
   FlashCampaignManager,
+  BettorBotDashboard,
   EmbedManager,
   RankingsCard,
   ManageFlashMarket,

package/src/types.d.ts

@@ -133,6 +133,11 @@ export interface PublicPlayerProps {
 
 
 //DiscordPlayer
+export interface DiscordPlayerStatsProps {
+    status: string,
+    player_ids:string[],
+    count: number
+}
 export interface DiscordPlayerProps {
     discord_player_id:string,
     player_id:string,
@@ -3152,3 +3157,46 @@ export interface CompanyEmbedProps {
     create_datetime:any,
     last_update_datetime:any
 }
+
+
+
+
+export interface BroadcastTarget {
+  guild_id: string;
+  channel_id?: string;
+}
+
+export interface BroadcastResult {
+  guild_id: string;
+  channel_id?: string;
+  success: boolean;
+  error?: string;
+}
+
+
+export interface AccessibleChannel {
+  id: string;
+  name: string;
+  type: ChannelType;
+}
+
+export interface ServerInfo {
+  id: string;
+  name: string;
+  icon: string | null;
+  memberCount: number;
+  ownerId: string;
+  description: string | null;
+  premiumTier: GuildPremiumTier;
+  premiumSubscriptionCount: number | null;
+  createdAt: Date;
+  features: string[];
+  vanityURL: string | null;
+  accessibleChannels: AccessibleChannel[];
+}
+
+export interface ServersResponse {
+  totalGuilds: number;
+  servers: ServerInfo[];
+  error?:string
+}