be-components 6.1.0 → 6.1.2

package/src/BetMatch/components/ManageFilter.tsx

@@ -0,0 +1,830 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed";
+import type { AthleteProps, FocusPositionProps, LeagueProps, MarketProps, MyPlayerProps, PlayerFilterProps, PublicPlayerProps, TeamProps } from '../../types';
+import { BetMatchApi, BetMatchHelpers } from '../api';
+import { ActivityIndicator, FlatList } from 'react-native';
+import { AthleteLozenge, Checkbox, Icons, LeagueLozenge, MarketLozenge, PlayerLozenge, Toggle } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { MarketComponentApi } from '../../MarketComponents/api';
+import SearchBox from '../../Components/SearchBox';
+import TeamLozenge from '../../Components/TeamLozenge';
+import Pagination from '../../Components/Pagination';
+
+type ManageFilterProps = {
+    me:MyPlayerProps,
+    player_filter_id:string,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    onRunFilter:(player_filter:PlayerFilterProps) => void,
+    onUpdateFilter:(player_filter:PlayerFilterProps) => void
+}
+
+type GradeBoxProps = {
+    min:number,
+    max:number,
+    success_color:string,
+    fail_color:string,
+}
+
+const grade_boxes:GradeBoxProps[] = [
+    { min: 0, max: 79, success_color: 'rgba(125,205,133,0.2)', fail_color: 'rgba(213,87, 59, 0.2)' },
+    { min: 80, max: 94, success_color: 'rgba(125,205,133,0.4)', fail_color: 'rgba(213,87, 59, 0.4)' },
+    { min:95, max: 97.5, success_color: 'rgba(125,205,133,0.6)', fail_color: 'rgba(213,87, 59, 0.6)' },
+    { min:97.6, max: 99.99, success_color: 'rgba(125,205,133,0.8)', fail_color: 'rgba(213,87, 59, 0)' },
+    { min: 100, max: 200, success_color: 'rgba(125,205,133,1)', fail_color: 'rgba(213,87, 59, 0)' }
+]
+
+const books = [
+    'DraftKings', 'FanDuel', 'MGM', 'PointsBet'
+]
+
+const sections = ['header','name','toggle','status', 'leagues', 'market_types', 'markets','athletes','teams', 'players','order_grades','external_sources']
+const ManageFilter = ({ me, player_filter_id, onFocusPosition, onRunFilter, onUpdateFilter } : ManageFilterProps) => {
+    const Colors = useColors();
+    const [ player_search, setPlayerSearch ] = useState<{
+        loading:boolean,
+        players:PublicPlayerProps[],
+        offset:number,
+        value:string
+    }>({
+        loading: false,
+        players:[],
+        offset:0,
+        value:''
+    });
+    const [ confirm_delete, setConfirmDelete ] = useState(false);
+    const [ athlete_search, setAthleteSearch ] = useState<{
+        loading:boolean,
+        value:string,
+        offset:number,
+        athletes:AthleteProps[]
+    }>({
+        loading: false,
+        offset: 0,
+        value: '',
+        athletes: []
+    });
+    const [ filter_athletes, setFilterAthletes ] = useState<AthleteProps[]>([]);
+    const [ filter_teams, setFilterTeams ] = useState<TeamProps[]>([]);
+    const [ filter_players, setFilterPlayers ] = useState<PublicPlayerProps[]>([]);
+    const [ team_search, setTeamSearch ] = useState<{
+        loading:boolean,
+        value:string,
+        offset:number,
+        teams:TeamProps[]
+    }>({
+        loading: false,
+        value: '',
+        offset:0,
+        teams: []
+    });
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ static_data, setStaticData ] = useState<{
+        static_loading:boolean,
+        loaded:boolean,
+        leagues:LeagueProps[],
+        markets:MarketProps[]
+    }>({
+        static_loading: false,
+        loaded:false, 
+        leagues:[],
+        markets:[]
+    });
+    const { static_loading, loaded, leagues, markets } = static_data;
+
+    const [ filter_data, setFilterData ] = useState<{
+        loading:boolean,
+        player_filter?:PlayerFilterProps,
+        active_toggle:string,
+        draft_filter?:PlayerFilterProps,
+    }>({
+        loading:false,
+        active_toggle: 'markets',
+    });
+    const { loading, player_filter, draft_filter, active_toggle } = filter_data;
+    let filtered_markets = BetMatchHelpers.filterMarkets(markets, leagues, draft_filter);
+    const premium_allowed = me.type == 'premium' ? true : false
+
+    useEffect(() => {
+        if(!loaded){ return }
+        loadData(player_filter_id);
+    },[player_filter_id, loaded]);
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        BetMatchApi.setEnvironment();
+        loadStaticData();
+    },[])
+
+    const loadStaticData = async() => {
+        setStaticData({ ...static_data, static_loading:false });
+        const lgs = await MarketComponentApi.getLeagues();
+        const mks = await MarketComponentApi.getMarkets();
+        setStaticData({
+            ...static_data,
+            leagues:lgs,
+            markets: mks,
+            loaded: true,
+            static_loading: false
+        })
+    }
+
+    const loadData = async(id:string) => {
+        setFilterData({ ...filter_data, loading:true });
+        const pf = await BetMatchApi.getPlayerFilterById(id);
+        if(!pf){ return alert('Unable to get filter details.  It may have been deleted') }
+        let athlete_ids:string[] = pf?.filter.athlete_ids ?? []
+        let team_ids:string[] = pf?.filter.team_ids ?? []
+        let player_ids:string[] = pf?.filter.player_ids ?? []
+        let f_players = await BetMatchApi.getPlayersByPlayerIds(player_ids)
+        let f_teams = await BetMatchApi.getTeamsByIds(team_ids);
+        let f_athletes = await BetMatchApi.getAthletesByIds(athlete_ids);
+        setFilterAthletes(f_athletes);
+        setFilterTeams(f_teams);
+        setFilterPlayers(f_players)
+        setFilterData({
+            ...filter_data,
+            loading:false,
+            player_filter: pf,
+            draft_filter: pf
+        });
+    }
+
+    
+    const isValid = () => {
+        let errors:string[] = []
+        if(!draft_filter?.filter){ return ['Filter is empty'] }
+        if(!draft_filter.name || player_filter?.name == ''){ errors.push('Must add name to filter') }
+        if(draft_filter.filter.league_ids.length < 1){ errors.push('Need to select 1 league') }
+        if(!draft_filter.filter.market_types){ errors.push('Must select market type') }
+        if(draft_filter.filter.league_ids.length > 1){ errors.push('Filter can only include up to 1 leagues') }
+        if(draft_filter.filter.market_ids.length == 0){ errors.push('Need to selected at least one market') }
+        if(draft_filter.filter.minimum_grade > 0 && me?.type != 'premium'){ errors.push('Only premium users are allowed to create filters with minimum grades') }
+        if(draft_filter.filter.external_book && draft_filter.filter.external_book != '' && me?.type != 'premium'){ errors.push('Only premium users are allowed to compare to an external book') }
+        return errors
+    }
+
+    const errors = isValid();
+
+    const minimumGradeText = (minimum_grade:number) => {
+        let text = 'Show me everything'
+        if(minimum_grade >= 80){
+            text = 'I just want to get this fulfilled as long as its reasonable'
+        }
+        if(minimum_grade >= 95){
+            text = 'Around the consensus price but may not be better'
+        }
+        if(minimum_grade >= 97.5){
+            text = 'Better than the Consensus price with vig'
+        }
+        if(minimum_grade >= 100){
+            text = 'MAX - Better than the Consensus price with vig removed'
+        }
+        return text
+    }
+
+    const handleUpdate = async(draft_player_filter:PlayerFilterProps) => {
+        setActionLoading(true);
+        const pf = await BetMatchApi.updatePlayerFilter(draft_player_filter);
+        if(!pf){ 
+            setActionLoading(false);
+            return alert('Unable to update') 
+        }
+        setFilterData({
+            ...filter_data,
+            player_filter: pf,
+            draft_filter: pf
+        })
+        setActionLoading(false);
+        onUpdateFilter(pf)
+    }
+    const handleLeagueSelect = (league:LeagueProps) => {
+        if(!draft_filter){ return }
+        let existing_leagues = draft_filter.filter.league_ids
+        let already_selected = existing_leagues.find(l => l == league.league_id)
+        if(already_selected){
+            existing_leagues = existing_leagues.filter(l => l != league.league_id)
+        } else {
+            if(existing_leagues.length > 0){ return alert('Only 1 league can be selected') }
+            existing_leagues = existing_leagues.concat(league.league_id)
+        }
+        let new_filter:PlayerFilterProps = { ...draft_filter, filter: { ...draft_filter.filter, league_ids: existing_leagues } }
+        handleUpdate(new_filter)
+    }
+
+    const handleMarketSelect = (market:MarketProps) => {
+        if(!draft_filter){ return }
+        let existing_markets = draft_filter.filter.market_ids
+        let already_selected = existing_markets.find(l => l == market.market_id)
+        if(already_selected){
+            existing_markets = existing_markets.filter(l => l != market.market_id)
+        } else {
+            existing_markets = existing_markets.concat(market.market_id)
+        }
+        let new_filter:PlayerFilterProps = { ...draft_filter, filter: { ...draft_filter.filter, market_ids: existing_markets } }
+        handleUpdate(new_filter)
+    }
+
+    const handlePlayerSelect = (player:PublicPlayerProps) => {
+        if(!draft_filter){ return }
+        let existing_players = draft_filter.filter.player_ids
+        let already_selected = existing_players.find(l => l == player.player_id)
+        if(already_selected){
+            existing_players = existing_players.filter(l => l != player.player_id)
+            setFilterPlayers(filter_players.filter(t => t.player_id != player.player_id));
+            
+        } else {
+            existing_players = existing_players.concat(player.player_id)
+            setFilterPlayers(filter_players.concat(player));
+        }
+        let new_filter:PlayerFilterProps = { ...draft_filter, filter: { ...draft_filter.filter, player_ids: existing_players } }
+        handleUpdate(new_filter)
+    }
+
+    const handleAthleteSelect = (athlete:AthleteProps) => {
+        if(!draft_filter){ return }
+        let existing_athletes = draft_filter.filter.athlete_ids
+        let already_selected = existing_athletes.find(l => l == athlete.athlete_id)
+        if(already_selected){
+            existing_athletes = existing_athletes.filter(l => l != athlete.athlete_id)
+            setFilterAthletes(filter_athletes.filter(t => t.athlete_id != athlete.athlete_id));
+            
+        } else {
+            existing_athletes = existing_athletes.concat(athlete.athlete_id)
+            setFilterAthletes(filter_athletes.concat(athlete));
+        }
+        let new_filter:PlayerFilterProps = { ...draft_filter, filter: { ...draft_filter.filter, athlete_ids: existing_athletes } }
+        handleUpdate(new_filter)
+    }
+
+    const handleTeamSelect = (team:TeamProps) => {
+        if(!draft_filter){ return }
+        let existing_teams = draft_filter.filter.team_ids
+        let already_selected = existing_teams.find(l => l == team.team_id)
+        if(already_selected){
+            existing_teams = existing_teams.filter(l => l != team.team_id)
+            setFilterTeams(filter_teams.filter(t => t.team_id != team.team_id));
+            
+        } else {
+            existing_teams = existing_teams.concat(team.team_id);
+            setFilterTeams(filter_teams.concat(team));
+        }
+        let new_filter:PlayerFilterProps = { ...draft_filter, filter: { ...draft_filter.filter, team_ids: existing_teams } }
+        handleUpdate(new_filter)
+    }
+
+    const handleSearchPlayers = async(page:number) => {
+        setPlayerSearch({ ...player_search, loading: true });
+        const pls = await BetMatchApi.searchPlayersByValue(player_search.value, page);
+        setPlayerSearch({
+            ...player_search,
+            loading: false,
+            players: pls,
+            offset: page
+        })
+    }
+
+    const handleSearchAthletes = async(page:number) => {
+        setAthleteSearch({ ...athlete_search, loading: true });
+        const aths = await BetMatchApi.searchAthletes(athlete_search.value, page, draft_filter?.filter?.league_ids);
+        setAthleteSearch({
+            ...athlete_search,
+            loading: false,
+            athletes: aths,
+            offset: page
+        })
+    }
+
+    const handleSearchTeams = async(page:number) => {
+        setTeamSearch({ ...team_search, loading: true });
+        const tms = await BetMatchApi.searchTeams(team_search.value, page, draft_filter?.filter?.league_ids);
+        setTeamSearch({
+            ...athlete_search,
+            loading: false,
+            teams: tms,
+            offset: page
+        })
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'name':
+                if(!draft_filter){ return <></> }
+                return (
+                    <View>
+                        <View transparent style={{ padding:10 }}>
+                            <Text theme='h1'>Name</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Give this filter a memorable name based on the criteria set (i.e., NFL QB Padding Tds, etc)</Text>
+                        </View>
+                        <TextInput
+                            style={{ margin:10 }}
+                            onFocusPosition={onFocusPosition}
+                            value={draft_filter.name}
+                            placeholder='Enter name here ...'
+                            onChangeText={(text) => setFilterData({ ...filter_data, draft_filter: { ...draft_filter, name: text } })}
+                        />
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'markets', label: 'Markets' },
+                                { key: 'people', label: 'People' },
+                                { key: 'premium', label: 'Premium' }
+                            ]}
+                            onSelectOption={(option) => setFilterData({ ...filter_data, active_toggle: option })}
+                            selected_option={active_toggle}
+                        />
+                    </View>
+                )
+            case 'status':
+                if(!draft_filter){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+                    <View nativeID='filter_order_status' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Event Status</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>Set to show all orders or filter to only orders related to an event that is currently inprogress</Text>
+                        </View>
+                        <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            <Button transparent style={{ borderRadius:0, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                                onPress={() => {
+                                    let new_filter:PlayerFilterProps = { ...draft_filter }
+                                    new_filter.filter.live_only = false
+                                    handleUpdate(new_filter);
+                                }}
+                            >
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={draft_filter.filter.live_only?false:true} 
+                                    onSelect={() => console.log('')}
+                                    disabled
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Any Event Status (Scheduled and Live)</Text>
+                            </Button>
+                            <Button transparent style={{ borderRadius:0, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                                onPress={() => {
+                                     let new_filter:PlayerFilterProps = { ...draft_filter }
+                                    new_filter.filter.live_only = true
+                                    handleUpdate(new_filter);
+                                }}
+                            >
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    disabled
+                                    checked={draft_filter.filter.live_only?true:false} 
+                                    onSelect={() => console.log('')}
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Live Only - Events currently in progress</Text>
+                            </Button>
+                        </View>
+                    </View>
+                )
+            case 'leagues':
+                if(!draft_filter){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+                    <View nativeID='filter_leagues' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Leagues</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Only show orders related to specific leagues (must select 1)</Text>
+                        </View>
+                        <View style={{ flexDirection:'row', flexWrap:'wrap',  margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            {leagues.sort((a,b) => a.status.localeCompare(b.status) || a.priority - b.priority).map((l) => {
+                                const selected = draft_filter.filter.league_ids && draft_filter.filter.league_ids.find(el => el == l.league_id) ? true : false
+                                return (
+                                    <LeagueLozenge key={`${l.league_id.toString()}`} style={{ flexGrow:1 }} is_active={selected} league={l} onSelect={(league) => handleLeagueSelect(league)}/>
+                                )
+                            })}
+                        </View>
+                    </View>
+                )
+            case 'market_types':
+                if(!draft_filter){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+                    <View nativeID='filter_order_status' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Market Types</Text>
+                            <Text style={{ marginTop:4 }}theme='description'>Set to show all orders or filter to only orders related to an event that is currently inprogress</Text>
+                        </View>
+                        <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            <Button transparent style={{ borderRadius:0, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                                onPress={() => {
+                                    let new_filter:PlayerFilterProps = { ...draft_filter }
+                                    new_filter.filter.market_types = 'event'
+                                    handleUpdate(new_filter);
+                                }}
+                            >
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={draft_filter.filter.market_types =='event'?true:false} 
+                                    onSelect={() => console.log('')}
+                                    disabled
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Event Level (Winner, Spread, Total)</Text>
+                            </Button>
+                            <Button transparent style={{ borderRadius:0, flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                                onPress={() => {
+                                    let new_filter:PlayerFilterProps = { ...draft_filter }
+                                    new_filter.filter.market_types = 'player_stat'
+                                    handleUpdate(new_filter);
+                                }}
+                            >
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={draft_filter.filter.market_types == 'player_stat'?true:false} 
+                                    onSelect={() => console.log('')}
+                                    disabled
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Player Stats</Text>
+                            </Button>
+                        </View>
+                    </View>
+                )
+            case 'markets':
+                if(!draft_filter){ return <></> }
+                if(draft_filter.filter.league_ids?.length <= 0){ return <></> }
+                if(!draft_filter.filter.market_types){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+
+                    <View nativeID='filter_leagues' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Included Markets</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Only show orders related to specific markets</Text>
+                        </View>
+                        <View style={{ flexDirection:'row', flexWrap:'wrap',  margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            {filtered_markets.map((m) => {
+                                const selected = draft_filter.filter.market_ids.find(el => el == m.market_id) ? true : false
+                                return (
+                                    <MarketLozenge style={{ flexGrow:1 }} is_active={selected} market={m} onSelect={(market) => handleMarketSelect(market)}/>
+                                )
+                            })}
+                        </View>
+                    </View>
+                )
+            case 'athletes':
+                if(!draft_filter){ return <></> }
+                if(draft_filter.filter.league_ids?.length <= 0){ return <></> }
+                if(draft_filter.filter.market_types != 'player_stat'){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+                    <View nativeID='filter_athletes' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Included Athletes</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Only show orders related to specific athletes</Text>
+                        </View>
+                        <View>
+                            <View>
+                                <SearchBox
+                                    onFocusPosition={onFocusPosition}
+                                    onChange={(text) => setAthleteSearch({ ...athlete_search, value: text })}
+                                    onSearch={() => handleSearchAthletes(0)}
+                                />
+                            </View>
+                            <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                                <View style={{ flexDirection:'row', flexWrap:'wrap'}}>
+                                    {draft_filter.filter.athlete_ids.map((id) => {
+                                        const athlete = filter_athletes.find(a => a.athlete_id == id);
+                                        if(!athlete){ return <></> }
+                                        const selected = draft_filter.filter.athlete_ids.find(el => el == id) ? true : false
+                                        return (
+                                            <AthleteLozenge key={`filter_${id.toString()}`} leagues={leagues} is_active={selected} athlete={athlete} abbr_only onSelect={(athlete) => handleAthleteSelect(athlete)}/>
+                                        )
+                                    })}
+                                </View>
+                                <View style={{ flexDirection:'row', flexWrap:'wrap'}}>
+                                    {athlete_search.athletes.map((a) => {
+                                        const selected = draft_filter.filter.athlete_ids.find(el => el == a.athlete_id) ? true : false
+                                        if(selected){ return <></> }
+                                        return (
+                                            <AthleteLozenge key={`search_${a.athlete_id.toString()}`} leagues={leagues} is_active={false} athlete={a} onSelect={(athlete) => handleAthleteSelect(athlete)}/>
+                                        )
+                                    })}
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'teams':
+                if(!draft_filter){ return <></> }
+                if(draft_filter.filter.league_ids?.length <= 0){ return <></> }
+                if(draft_filter.filter.market_types != 'event'){ return <></> }
+                if(active_toggle != 'markets'){ return <></> }
+                return (
+                    <View nativeID='filter_teams' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Included Teams</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Only show orders related to specific teams</Text>
+                        </View>
+                        <View>
+                            <View>
+                                <SearchBox
+                                    onFocusPosition={onFocusPosition}
+                                    onChange={(text) => setTeamSearch({ ...team_search, value: text })}
+                                    onSearch={() => handleSearchTeams(0)}
+                                />
+                            </View>
+                            <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                                <View style={{ flexDirection:'row', flexWrap:'wrap'}}>
+                                {draft_filter.filter.team_ids.map((id) => {
+                                    const team = filter_teams.find(a => a.team_id == id);
+                                    if(!team){ return <></> }
+                                    const selected = draft_filter.filter.team_ids.find(el => el == id) ? true : false
+                                    return (
+                                        <TeamLozenge is_active={selected} team={team} leagues={leagues} onSelect={(team) => handleTeamSelect(team)}/>
+                                    )
+                                })}
+                                </View>
+                                <View style={{ flexDirection:'row', flexWrap:'wrap'}}>
+                                    {team_search.teams.map((a) => {
+                                        const selected = draft_filter.filter.team_ids.find(el => el == a.team_id) ? true : false
+                                        if(selected){ return <></> }
+                                        return (
+                                            <TeamLozenge is_active={selected} team={a} leagues={leagues} onSelect={(team) => handleTeamSelect(team)}/>
+                                        )
+                                    })}
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'players':
+                if(!draft_filter){ return <></> }
+                if(active_toggle != 'people'){ return <></> }
+                return (
+                    <View nativeID='filter_people' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Show Orders From</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Set specific players or groups you would like to see these orders from (i.e., people I follow or Todd my neighbor)</Text>
+                        </View>
+                        <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            <Button disabled style={{ flexDirection:'row', alignItems:'center', padding:0 }}>
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={!draft_filter.filter.custom_players && !draft_filter.filter.following_only?true:false} 
+                                    onSelect={() => {
+                                        let new_filter:PlayerFilterProps = { ...draft_filter }
+                                        new_filter.filter.custom_players = false
+                                        new_filter.filter.following_only = false
+                                        handleUpdate(new_filter);
+                                    }}
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Everyone</Text>
+                            </Button>
+                            <Button disabled style={{ flexDirection:'row', alignItems:'center', marginTop:12, padding:0 }}>
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={draft_filter.filter.following_only?true:false} 
+                                    onSelect={() => {
+                                        let new_filter:PlayerFilterProps = { ...draft_filter }
+                                        new_filter.filter.following_only = true
+                                        new_filter.filter.custom_players = false
+                                        handleUpdate(new_filter);
+                                    }}
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>People I Follow</Text>
+                            </Button>
+                            <Button disabled style={{ flexDirection:'row', alignItems:'center', marginTop:12, padding:0 }}>
+                                <Checkbox 
+                                    style={{ borderRadius:100 }}
+                                    fill_style={{ borderRadius:100 }}
+                                    color={Colors.text.highlight}
+                                    checked={draft_filter.filter.custom_players?true:false} 
+                                    onSelect={() => {
+                                        let new_filter:PlayerFilterProps = { ...draft_filter }
+                                        new_filter.filter.following_only = false
+                                        new_filter.filter.custom_players = true
+                                        handleUpdate(new_filter);
+                                    }}
+                                />
+                                <Text style={{ marginLeft: 14 }} size={14} theme='h2'>Custom Players</Text>
+                            </Button>
+                        </View>
+                    
+
+                        {draft_filter.filter.custom_players ?
+                        <View>
+                            <View style={{ flexDirection:'row', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light}}>
+                                {draft_filter.filter.player_ids.map((id) => {
+                                    const player = filter_players.find(a => a.player_id == id);
+                                    if(!player){ return <></> }
+                                    const selected = draft_filter.filter.player_ids.find(el => el == id) ? true : false
+                                    return (
+                                        <PlayerLozenge hide_name={true} is_active={selected} player={player} onSelect={(player) => handlePlayerSelect(player)}/>
+                                    )
+                                })}
+                            </View>
+                            <View style={{ marginTop:5 }}>
+                                <SearchBox
+                                    onFocusPosition={onFocusPosition}
+                                    onChange={(text) => setPlayerSearch({ ...player_search, value: text })}
+                                    onSearch={() => handleSearchPlayers(0)}
+                                />
+                            </View>
+                            <Pagination
+                                offset={player_search.offset}
+                                onNext={() => handleSearchPlayers(player_search.offset + 1)}
+                                onPrevious={() => handleSearchPlayers(player_search.offset - 1)}
+                            />
+                            <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                                <View style={{ flexDirection:'row', flexWrap:'wrap'}}>
+                                {player_search.players.map((a) => {
+                                    const selected = draft_filter.filter.player_ids.find(el => el == a.player_id) ? true : false
+                                    if(selected){ return <></> }
+                                    return (
+                                        <PlayerLozenge is_active={selected} player={a} onSelect={(player) => handlePlayerSelect(player)}/>
+                                    )
+                                })}
+                                </View>
+                            </View>
+                        </View>
+                        :<></>}
+                </View>
+                )
+            case 'order_grades':
+                if(active_toggle != 'premium'){ return <></> }
+                if(!draft_filter){ return <></> }
+                return (
+                    <View nativeID='order_grades' style={{ marginTop:10 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Minimum Order Grade</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Only show orders that are graded above a certain threshold</Text>
+                        </View>
+                        <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            <View style={{ flexDirection:'row', justifyContent:'center' }}>
+                                {grade_boxes.map(b => {
+                                    const filled = draft_filter?.filter.minimum_grade >= b.min ? true : false
+                                    const success = b.min > 97.5 ? true : false
+                                    return (
+                                        <Button 
+                                            float
+                                            style={{ padding:0, height:20, width:20, margin:10, borderRadius:4, borderWidth:1, borderColor:success?b.success_color:b.fail_color, backgroundColor:filled?success?b.success_color:b.fail_color:undefined }} 
+                                            onPress={() => {
+                                                if(!premium_allowed){ return alert('Must be a premium member to add this option') }
+                                                let new_filter:PlayerFilterProps = { ...draft_filter }
+                                                new_filter.filter.minimum_grade = b.min
+                                                handleUpdate(new_filter);
+                                            }}
+                                        />
+                                    )
+                                })}
+                            </View>
+                            <Text size={14} weight='semibold' textAlign='center'>{minimumGradeText(draft_filter.filter.minimum_grade)}</Text>
+                        </View>
+                    </View>
+                )
+            case 'external_sources':
+                if(active_toggle != 'premium'){ return <></> }
+                if(!draft_filter){ return <></> }
+                return (
+                    <View nativeID='filter_order_status'>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>External Price Compare</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>When viewing orders, we can show you what the price is at a specific book. Select which book below.  If the price is not available, we will use the consensus if possible.</Text>
+                        </View>
+                        <View style={{ margin:10, padding:10, borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}>
+                            {books.map((b) => {
+                                return (
+                                <Button key={b} style={{ flexDirection:'row', alignItems:'center', padding:10}} onPress={() => {
+                                    if(!premium_allowed){ return alert('Must be a premium member to add this option') }
+                                    let new_filter:PlayerFilterProps = { ...draft_filter }
+                                    new_filter.filter.external_book = b
+                                    handleUpdate(new_filter);
+                                    
+                                }}>
+                                    <Checkbox 
+                                        disabled
+                                        style={{ borderRadius:100 }}
+                                        fill_style={{ borderRadius:100 }}
+                                        color={Colors.text.highlight}
+                                        checked={draft_filter.filter.external_book == b ? true:false} 
+                                        onSelect={() => console.log('')}
+                                    />
+                                    <Text style={{ marginLeft:10 }} theme='h2'>{b.toUpperCase()}</Text>
+                                </Button>
+                                )
+                            })}
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    const is_changed = JSON.stringify(player_filter) != JSON.stringify(draft_filter) ? true : false
+    return (
+        <View style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>MANAGE FILTER</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Create rulesets to filter all open orders on BettorEdge</Text>
+                </View>
+                {errors.length > 0 ?
+                <Button float style={{ padding:5, borderRadius:100 }} onPress={() => alert(errors[0])}>
+                    <Icons.AlertIcon color={Colors.text.warning} size={16} />
+                </Button>
+                :<></>}
+                <Button
+                    title='SAVE'
+                    type='success'
+                    disabled={!is_changed || action_loading}
+                    loading={action_loading}
+                    style={{ marginLeft:10, padding:10, opacity: action_loading || !is_changed ? 0.5 : 1 }}
+                    onPress={async() => {
+                        if(!draft_filter){ return }
+                        handleUpdate(draft_filter);
+                    }}
+                />
+            </View>
+            <View style={{ flex:1 }}>
+                {static_loading || loading ?
+                <ActivityIndicator
+                    style={{ padding:20, alignSelf:'center' }}
+                    size={'large'}
+                    color={Colors.text.h1}
+                />
+                :<></>}
+                <FlatList
+                    data={sections}
+                    key={'manage_filter_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+                {player_filter ?
+                <View type='footer' style={{ flexDirection:'row', padding:10 }}>
+                    {!confirm_delete ?
+                    <Button
+                        style={{ flex:1, opacity:action_loading?0.5:1 }}
+                        type='error'
+                        loading={action_loading}
+                        title='DELETE'
+                        onPress={() => {
+                            setActionLoading(true)
+                            setTimeout(() => {
+                                setConfirmDelete(true);
+                                setActionLoading(false)
+                            }, 500);
+                        }}
+                    />
+                    :<></>}
+                    {confirm_delete ?
+                    <Button
+                        style={{ flex:1, opacity:action_loading?0.5:1 }}
+                        type='error'
+                        loading={action_loading}
+                        title='DELETE THIS FILTER'
+                        onPress={async() => {
+                            setActionLoading(true);
+                            let new_pf = await BetMatchApi.deletePlayerFilter(player_filter_id)
+                            if(!new_pf){
+                                setActionLoading(false);
+                                setConfirmDelete(false);
+                                return alert('Unable to process this')
+                            }
+                            setActionLoading(false);
+                            setConfirmDelete(false);
+                            setFilterData({
+                                ...filter_data,
+                                player_filter: new_pf,
+                                draft_filter: new_pf
+                            });
+                            onUpdateFilter(new_pf);
+                        }}
+                    />
+                    :
+                    <Button
+                        style={{ flex:2, marginLeft:10 }}
+                        type='action'
+                        title='RUN'
+                        onPress={() => onRunFilter(player_filter)}
+                    />
+                    }
+                </View>
+                :<></>}
+                {player_filter?.status == 'deleted' ?
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                    <View float style={{ width:400, height:400, justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1'>This filter has been deleted</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default ManageFilter