be-components 6.5.1 → 6.5.2

package/lib/module/RankingsCard/index.js

@@ -0,0 +1,655 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed";
+import { RankingsApi, RankingsHelpers } from './api';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import moment from 'moment-mini';
+import { useColors } from '../constants/useColors';
+import { Icons } from '../Components';
+import { TeamImage } from '../Components/Jerseys';
+const RankingsCard = ({
+  league_id,
+  team_id
+}) => {
+  const Colors = useColors();
+  const [show_types, setShowTypes] = useState(false);
+  const [show_years, setShowYears] = useState(false);
+  const [show_sub_divisions, setShowSubDivisions] = useState(false);
+  const [rankings_state, setRankingsState] = useState({
+    loading: false,
+    teams: [],
+    ranking_type: 'PRE',
+    active_division: '',
+    years: [2025, 2024, 2023],
+    year: 2025,
+    ranking_types: [],
+    sub_type: 'sub_division',
+    leagues: [],
+    team_rankings: [],
+    team_records: [],
+    divisions: [],
+    sub_divisions: []
+  });
+  const {
+    loading,
+    team,
+    ranking_type,
+    active_sub_division,
+    active_division,
+    years,
+    year,
+    ranking_types,
+    league,
+    sub_type,
+    teams,
+    team_rankings,
+    team_records,
+    divisions
+  } = rankings_state;
+  const division_teams = teams.filter(t => t.division == active_division);
+  let available_sub_divisions = [...new Set(division_teams.map(t => t.sub_division ?? 'NA'))].filter(sd => sd && sd != 'NA');
+  let visible_sub_divisions = [...available_sub_divisions];
+  if (active_sub_division) {
+    visible_sub_divisions = available_sub_divisions.filter(sd => sd == active_sub_division);
+  }
+  useEffect(() => {
+    getRankings(league_id);
+  }, [league_id, team_id]);
+  const getRankings = async (id, local_year) => {
+    RankingsApi.setEnvironment();
+    setRankingsState({
+      ...rankings_state,
+      loading: true
+    });
+    const api_leagues = await RankingsApi.getLeagues();
+    let api_league = api_leagues.find(l => l.league_id == id);
+    const st = await RankingsApi.getStandingsByLeague(league_id, local_year ?? api_league?.active_year ?? moment().year());
+    if (!st) {
+      return alert('Unable to load standings at this time');
+    }
+    const api_ranking_types = [...new Set(st.team_rankings.map(r => r.ranking_type))];
+    const api_ranking_type = st.league.active_season_type ?? 'REG';
+    let api_divisions = [...new Set(st.teams.map(t => t.division ?? 'NA'))].filter(sd => sd && sd != 'NA');
+    let api_active_sub_division = undefined;
+    let api_active_division = st.teams.find(t => t.team_id == team_id)?.division;
+    if (!api_active_division && api_divisions.length > 2) {
+      api_active_division = RankingsHelpers.sortDivisions(id, api_divisions)[0];
+    }
+    let api_sub_divisions = [...new Set(st.teams.map(t => t.sub_division ?? 'NA'))].filter(sd => sd && sd != 'NA');
+    if (team_id) {
+      api_active_sub_division = st.teams.find(T => T.team_id == team_id)?.sub_division;
+    }
+    let api_team = st.teams.find(t => t.team_id == team_id);
+    let api_team_record = st.team_records.find(r => r.team_id == team_id && r.record_type == api_ranking_type && r.sub_type == 'overall');
+    let api_team_ranking = st.team_rankings.find(r => r.team_id == team_id && r.ranking_type == api_ranking_type);
+    setRankingsState({
+      ...rankings_state,
+      loading: false,
+      ranking_type: api_ranking_type,
+      league: st.league,
+      team: api_team,
+      active_division: api_active_division,
+      active_sub_division: api_active_sub_division,
+      year: local_year ?? st.league.active_year ?? moment().year(),
+      team_records: st.team_records,
+      ranking_types: api_ranking_types,
+      team_rankings: st.team_rankings,
+      team_ranking: api_team_ranking,
+      team_record: api_team_record,
+      leagues: api_leagues,
+      teams: st.teams,
+      divisions: api_divisions,
+      sub_divisions: api_sub_divisions
+    });
+  };
+  const renderSubDivisionOptions = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      style: {
+        borderRadius: 0,
+        padding: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      onPress: () => {
+        setRankingsState({
+          ...rankings_state,
+          active_sub_division: data.item
+        });
+        setShowSubDivisions(false);
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, RankingsHelpers.getRankingTypeDescriptor(data.item)));
+  };
+  const renderTypes = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      style: {
+        borderRadius: 0,
+        padding: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      onPress: () => {
+        setRankingsState({
+          ...rankings_state,
+          ranking_type: data.item
+        });
+        setShowTypes(false);
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, RankingsHelpers.getRankingTypeDescriptor(data.item)));
+  };
+  const renderYears = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      style: {
+        padding: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      onPress: () => {
+        getRankings(league_id, data.item);
+        setShowYears(false);
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.toString()));
+  };
+  const renderDivisionOptions = data => {
+    const active = active_division == data.item ? true : false;
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      style: {
+        borderRadius: 0,
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        borderBottomWidth: 1,
+        borderColor: active ? Colors.text.success : Colors.borders.light
+      },
+      onPress: () => setRankingsState({
+        ...rankings_state,
+        active_division: data.item,
+        active_sub_division: undefined
+      })
+    }, /*#__PURE__*/React.createElement(Text, {
+      textAlign: "center",
+      color: active ? Colors.text.success : Colors.text.h1,
+      theme: active ? 'h2' : 'description'
+    }, RankingsHelpers.getDivisionLabel(data.item)));
+  };
+  const renderTeams = data => {
+    const team = teams.find(t => t.team_id == data.item.team_id);
+    if (!team) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    const team_record = team_records.find(tr => tr.record_type == ranking_type && tr.sub_type == 'overall' && tr.team_id == team.team_id);
+    const win_pct = RankingsHelpers.getWinPct(team_record?.wins ?? 0, team_record?.losses ?? 0, team_record?.draws ?? 0);
+    const active = data.item.team_id == team_id ? true : false;
+    return /*#__PURE__*/React.createElement(View, {
+      type: "row",
+      style: {
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light,
+        padding: 5
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(TeamImage, {
+      team: team,
+      padding: 2,
+      size: 14
+    }), team.rank ? /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      color: Colors.text.action,
+      style: {
+        marginLeft: 5
+      }
+    }, team.rank) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+      theme: "h1",
+      size: 12,
+      style: {
+        marginLeft: 5
+      },
+      color: active ? Colors.text.success : Colors.text.h1
+    }, team.market_name, " ", team.name))), team_record ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, team_record.wins)), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, team_record.losses)), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, team_record.draws)), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, (win_pct * 100).toFixed(2), "%"))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  };
+  const renderSubDivisions = data => {
+    const sub_division_teams = data.teams.filter(t => t.sub_division == data.item);
+    const sub_division_rankings = team_rankings.filter(tr => sub_division_teams.map(dt => dt.team_id).includes(tr.team_id) && tr.ranking_type == ranking_type && tr.sub_type == sub_type);
+    if (sub_division_teams.length == 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    if (sub_division_rankings.length == 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      type: "header",
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item)), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, "W")), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, "L")), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, "D")), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h2",
+      textAlign: "center"
+    }, "PCT")))), /*#__PURE__*/React.createElement(FlatList, {
+      data: sub_division_rankings.sort((a, b) => a.rank - b.rank),
+      key: 'sub_division_teams',
+      keyExtractor: item => item.team_ranking_id.toString(),
+      renderItem: renderTeams
+    }));
+  };
+  const renderDivisions = data => {
+    let division_teams = teams.filter(t => t.division == data.item);
+    let division_sub_divisions = [...new Set(division_teams.map(t => t.sub_division ?? 'NA'))].filter(sd => sd && sd != 'NA');
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      type: "header",
+      style: {
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, null, data.item)), division_sub_divisions.length > 0 ? /*#__PURE__*/React.createElement(FlatList, {
+      key: 'sub_division_list',
+      keyExtractor: item => item,
+      renderItem: ({
+        item,
+        index
+      }) => renderSubDivisions({
+        item,
+        index,
+        teams: division_teams
+      }),
+      data: division_sub_divisions
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  };
+  if (!league) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(View, null, team ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(TeamImage, {
+    team: team,
+    size: 20
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: league.league_image
+    },
+    style: {
+      height: 35,
+      width: 35
+    },
+    resizeMode: "contain"
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, league.league_name, " ", RankingsHelpers.getRankingTypeDescriptor(ranking_type), " ", league.active_year ?? moment().year())), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    onPress: () => setShowYears(true)
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginRight: 10
+    }
+  }, year), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "down",
+    size: 6,
+    color: Colors.text.h1
+  })), active_division ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    onPress: () => setShowSubDivisions(true)
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginRight: 10
+    }
+  }, active_sub_division ?? 'All Conferences'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "down",
+    size: 6,
+    color: Colors.text.h1
+  })) : /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    onPress: () => setShowTypes(true)
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginRight: 10
+    }
+  }, RankingsHelpers.getRankingTypeDescriptor(ranking_type)), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "down",
+    size: 6,
+    color: Colors.text.h1
+  }))), /*#__PURE__*/React.createElement(View, {
+    type: "body"
+  }, active_division ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, RankingsHelpers.sortDivisions(league_id, divisions).map((d, i) => {
+    return renderDivisionOptions({
+      item: d,
+      index: i
+    });
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), active_division ? /*#__PURE__*/React.createElement(FlatList, {
+    data: visible_sub_divisions.sort((a, b) => a.localeCompare(b)),
+    renderItem: ({
+      item,
+      index
+    }) => renderSubDivisions({
+      item,
+      index,
+      teams: division_teams
+    }),
+    key: 'division_list',
+    keyExtractor: item => item
+  }) : /*#__PURE__*/React.createElement(FlatList, {
+    data: divisions.sort((a, b) => a.localeCompare(b)),
+    renderItem: renderDivisions,
+    key: 'division_list',
+    keyExtractor: item => item
+  })), show_types ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingTop: 20,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      height: 400,
+      width: 400
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Select Type"))), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    type: "body",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: ranking_types,
+    key: 'ranking_types',
+    keyExtractor: item => item,
+    renderItem: renderTypes
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    title: "CLOSE",
+    type: "close",
+    onPress: () => setShowTypes(false)
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_sub_divisions ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingTop: 20,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      height: 400,
+      width: 400
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Select Conference"))), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    type: "body",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: available_sub_divisions,
+    key: 'sub_division_options',
+    keyExtractor: item => item,
+    renderItem: renderSubDivisionOptions
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    title: "CLOSE",
+    type: "close",
+    onPress: () => setShowTypes(false)
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_years ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingTop: 20,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      height: 400,
+      width: 400
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Select Year"))), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    type: "body",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: years,
+    key: 'years_list',
+    keyExtractor: item => item.toString(),
+    renderItem: renderYears
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    title: "CLOSE",
+    type: "close",
+    onPress: () => setShowYears(false)
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), loading ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingTop: 20,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    style: {
+      marginTop: 50
+    },
+    size: 30,
+    color: Colors.text.h1
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default RankingsCard;
+//# sourceMappingURL=index.js.map