be-components 6.7.8 → 6.8.0

package/lib/commonjs/CompetitionManager/components/AdminCompetitionList.js

@@ -7,20 +7,24 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _api = require("../api");
-var _colors = _interopRequireDefault(require("../../constants/colors"));
-var _styles = require("../../constants/styles");
 var _Components = require("../../Components");
+var _Themed = require("../../Components/Themed");
+var _useColors = require("../../constants/useColors");
+var _Pagination = _interopRequireDefault(require("../../Components/Pagination"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const sections = ['header', 'toggle', 'active_past_toggle', 'pagination', 'loading', 'admin_competitions', 'competitions', 'admin_squares', 'squares', 'admin_brackets', 'brackets'];
 const AdminCompetitionList = ({
-  width,
-  height,
+  header_style,
+  float,
+  footer_style,
   onClose,
   onCreateNew,
   onSelectCompetition,
   onSelectBracketCompetition,
   onSelectSquaresCompetition
 }) => {
+  const Colors = (0, _useColors.useColors)();
   const [list_data, setData] = (0, _react.useState)({
     loading: false,
     offset: 0,
@@ -29,8 +33,13 @@ const AdminCompetitionList = ({
     competitions: [],
     competition_players: [],
     competition_records: [],
+    show_admin_brackets: false,
+    show_admin_competitions: false,
+    show_admin_squares: false,
     competition_results: [],
+    admin_brackets: [],
     admin_competitions: [],
+    admin_squares: [],
     competition_seasons: [],
     competition_season_players: [],
     competition_season_results: [],
@@ -43,6 +52,11 @@ const AdminCompetitionList = ({
     offset,
     active_tab,
     active_engagement,
+    show_admin_brackets,
+    show_admin_competitions,
+    show_admin_squares,
+    admin_squares,
+    admin_brackets,
     loading,
     competitions,
     admin_competitions,
@@ -94,20 +108,24 @@ const AdminCompetitionList = ({
         return;
       case 'brackets':
         if (active_tab == 'active') {
+          const admin_bracks_active = await _api.ManageCompetitionApi.getMyActiveAdminBracketCompetitions();
           const b_resp = await _api.ManageCompetitionApi.getMyActiveBracketCompetitions();
           setData({
             ...list_data,
             loading: false,
+            admin_brackets: admin_bracks_active,
             bracket_competitions: b_resp.bracket_competitions,
             player_brackets: b_resp.player_brackets,
             competition_player_brackets: b_resp.competition_player_brackets,
             offset
           });
         } else {
+          const admin_bracks_history = await _api.ManageCompetitionApi.getMyHistoryAdminBracketCompetitions(offset);
           const b_resp = await _api.ManageCompetitionApi.getMyHistoryBracketCompetitions(offset);
           setData({
             ...list_data,
             loading: false,
+            admin_brackets: admin_bracks_history,
             bracket_competitions: b_resp.bracket_competitions,
             player_brackets: b_resp.player_brackets,
             competition_player_brackets: b_resp.competition_player_brackets,
@@ -117,18 +135,22 @@ const AdminCompetitionList = ({
         return;
       case 'squares':
         if (active_tab == 'active') {
+          const active_admin_squares = await _api.ManageCompetitionApi.getMyActiveAdminSquares();
           const s_resp = await _api.ManageCompetitionApi.getMyActiveSquaresCompetitions();
           setData({
             ...list_data,
             loading: false,
             offset,
+            admin_squares: active_admin_squares,
             squares_competitions: s_resp.squares_competitions
           });
         } else {
+          const past_admin_squares = await _api.ManageCompetitionApi.getMyHistoryAdminSquares(offset);
           const s_resp = await _api.ManageCompetitionApi.getMyHistorySquaresCompetitions(offset);
           setData({
             ...list_data,
             loading: false,
+            admin_squares: past_admin_squares,
             offset,
             squares_competitions: s_resp.squares_competitions
           });
@@ -141,12 +163,14 @@ const AdminCompetitionList = ({
   const renderCompetitions = data => {
     const competition_result = competition_results.find(cr => cr.competition_id == data.item.competition_id);
     const cl = data.item.market_type == 'FOR_MONEY' ? '$' : 'E';
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.Button, {
       style: {
-        ..._styles.view_styles.body_row,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 0,
         padding: 15,
         borderBottomWidth: 1,
-        borderColor: _colors.default.shades.shade600
+        borderColor: Colors.borders.light
       },
       onPress: () => onSelectCompetition(data.item)
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
@@ -159,82 +183,46 @@ const AdminCompetitionList = ({
         borderRadius: 4
       },
       resizeMode: "cover"
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         flex: 1,
         marginLeft: 10
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      theme: "header_2"
-    }, data.item.competition_name), /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+      theme: "h2"
+    }, data.item.competition_name), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       style: {
         marginTop: 3
       },
-      theme: "body"
-    }, data.item.competition_description)), competition_result ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      theme: "description"
+    }, data.item.competition_description)), competition_result ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         marginRight: 10,
         marginLeft: 10,
         justifyContent: 'center'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+      size: 12
+    }, _api.ManageCompetitionHelpers.formatPlace(competition_result.place)), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       size: 12,
-      color: _colors.default.brand.midnight,
-      weight: "bold",
-      textAlign: "center"
-    }, _api.ManageCompetitionHelpers.formatPlace(competition_result.place)), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      size: 12,
-      color: _colors.default.brand.midnight,
-      textAlign: "center",
       style: {
         marginTop: 3
       }
     }, cl, competition_result.winnings.toFixed(2))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
       direction: "right",
       size: 8,
-      color: _colors.default.brand.midnight
+      color: Colors.text.h1
     }));
   };
-  const renderAdminCompetitions = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-      style: {
-        borderRadius: 8,
-        backgroundColor: _colors.default.shades.white,
-        width: width / 3,
-        borderWidth: 1,
-        borderColor: _colors.default.shades.shade600
-      },
-      onPress: () => onSelectCompetition(data.item)
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-      source: {
-        uri: data.item.image?.url
-      },
-      style: {
-        height: width / 3 * 0.5,
-        width: width / 3,
-        borderRadius: 4,
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0
-      },
-      resizeMode: "cover"
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        marginTop: 5,
-        padding: 10
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      size: 14,
-      textAlign: "center",
-      weight: "bold"
-    }, data.item.competition_name)));
-  };
   const renderSquares = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.Button, {
       style: {
-        ..._styles.view_styles.body_row,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 0,
         padding: 10,
         borderBottomWidth: 1,
-        borderColor: _colors.default.shades.shade600
+        borderColor: Colors.borders.light
       },
       onPress: () => onSelectSquaresCompetition(data.item)
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
@@ -247,33 +235,35 @@ const AdminCompetitionList = ({
         borderRadius: 4
       },
       resizeMode: "cover"
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         flex: 1,
         marginLeft: 10
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      theme: "header_2"
-    }, data.item.sq_comp_name), /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+      theme: "h2"
+    }, data.item.sq_comp_name), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       style: {
         marginTop: 3
       },
-      theme: "body"
+      theme: "description"
     }, data.item.sq_comp_description)), /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
       direction: "right",
       size: 8,
-      color: _colors.default.brand.midnight
+      color: Colors.text.h1
     }));
   };
   const renderBrackets = data => {
     const competition_player_bracket = competition_player_brackets.find(cpb => cpb.bracket_competition_id == data.item.bracket_competition_id);
     const cl = data.item.market_type == 'FOR_MONEY' ? '$' : 'E';
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.Button, {
       style: {
-        ..._styles.view_styles.body_row,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 0,
         padding: 10,
         borderBottomWidth: 1,
-        borderColor: _colors.default.shades.shade600
+        borderColor: Colors.borders.light
       },
       onPress: () => onSelectBracketCompetition(data.item)
     }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
@@ -286,259 +276,388 @@ const AdminCompetitionList = ({
         borderRadius: 4
       },
       resizeMode: "cover"
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         flex: 1,
         marginLeft: 10
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      theme: "header_2"
-    }, data.item.competition_name), /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+      theme: "h2"
+    }, data.item.competition_name), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       style: {
         marginTop: 3
       },
-      theme: "body"
-    }, data.item.competition_description)), competition_player_bracket ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      theme: "description"
+    }, data.item.competition_description)), competition_player_bracket ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         marginRight: 10,
         marginLeft: 10,
         justifyContent: 'center'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
+    }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+      size: 12
+    }, _api.ManageCompetitionHelpers.formatPlace(competition_player_bracket.place)), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
       size: 12,
-      color: _colors.default.brand.midnight,
-      weight: "bold",
-      textAlign: "center"
-    }, _api.ManageCompetitionHelpers.formatPlace(competition_player_bracket.place)), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-      size: 12,
-      color: _colors.default.brand.midnight,
-      textAlign: "center",
       style: {
         marginTop: 3
       }
     }, cl, competition_player_bracket.winnings.toFixed(2))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
       direction: "right",
       size: 8,
-      color: _colors.default.brand.midnight
+      color: Colors.text.h1
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      maxWidth: width,
-      minWidth: 300,
-      minHeight: 400,
-      height: height,
-      backgroundColor: _colors.default.shades.white
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_header
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header"
-  }, "MY ENGAGEMENTS"), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Use the buttons below to see your active and past engagements (competitions, brackets, squares, etc)"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      margin: 10,
-      borderRadius: 22,
-      borderWidth: 4,
-      borderColor: _colors.default.shades.shade100
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            ...header_style
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "My Admin Engagements"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Use the buttons below to see your active and past engagements (competitions, brackets, squares, etc)")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          title: "X",
+          float: true,
+          title_color: Colors.text.error,
+          onPress: () => onClose()
+        }));
+      case 'toggle':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Toggle, {
+          options: [{
+            key: 'competitions',
+            label: 'Competitions'
+          }, {
+            key: 'squares',
+            label: 'Squares'
+          }, {
+            key: 'brackets',
+            label: 'Brackets'
+          }],
+          selected_option: active_engagement,
+          onSelectOption: o => setData({
+            ...list_data,
+            active_engagement: o
+          })
+        }));
+      case 'active_past_toggle':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Toggle, {
+          options: [{
+            key: 'closed',
+            label: 'Closed'
+          }, {
+            key: 'active',
+            label: 'Active'
+          }],
+          selected_option: active_tab,
+          onSelectOption: o => setData({
+            ...list_data,
+            active_tab: o
+          })
+        }));
+      case 'pagination':
+        if (active_tab != 'closed') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true
+        }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+          offset: offset,
+          onNext: () => getDataFromServer(offset + 1),
+          onPrevious: () => getDataFromServer(offset - 1)
+        }));
+      case 'loading':
+        if (!loading) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true
+        }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+          style: {
+            alignSelf: 'center',
+            padding: 20
+          },
+          size: "large",
+          color: Colors.text.h1
+        }));
+      case 'admin_competitions':
+        if (active_engagement != 'competitions') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (admin_competitions.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Admin Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the competitions that you are the admin of")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          onPress: () => setData({
+            ...list_data,
+            show_admin_competitions: !show_admin_competitions
+          })
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
+          size: 10,
+          direction: show_admin_competitions ? 'up' : 'down',
+          color: Colors.text.action
+        }))), show_admin_competitions ? /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: admin_competitions,
+          key: 'admin_comps_list',
+          keyExtractor: item => `admin_${item.competition_id}`,
+          renderItem: renderCompetitions
+        }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      case 'competitions':
+        if (active_engagement != 'competitions') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (competitions.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "My Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the competitions that you have joined"))), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: competitions,
+          key: 'competitions_list',
+          keyExtractor: item => item.competition_id.toString(),
+          renderItem: renderCompetitions
+        }));
+      case 'admin_squares':
+        if (active_engagement != 'squares') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (admin_squares.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Admin Squares Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the squares competitions that you are the admin of")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          onPress: () => setData({
+            ...list_data,
+            show_admin_squares: !show_admin_squares
+          })
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
+          size: 10,
+          direction: show_admin_squares ? 'up' : 'down',
+          color: Colors.text.action
+        }))), show_admin_squares ? /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: admin_squares,
+          key: 'admin_squares_list',
+          keyExtractor: item => `admin_${item.sq_comp_id}`,
+          renderItem: renderSquares
+        }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      case 'squares':
+        if (active_engagement != 'squares') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (squares_competitions.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Squares Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the squares competitions that you are participating in"))), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: squares_competitions,
+          key: 'squares_list',
+          keyExtractor: item => `${item.sq_comp_id}`,
+          renderItem: renderSquares
+        }));
+      case 'admin_brackets':
+        if (active_engagement != 'brackets') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (admin_brackets.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Admin Bracket Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the bracket competitions that you are the admin of")), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          onPress: () => setData({
+            ...list_data,
+            show_admin_brackets: !show_admin_brackets
+          })
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ChevronIcon, {
+          size: 10,
+          direction: show_admin_brackets ? 'up' : 'down',
+          color: Colors.text.action
+        }))), show_admin_brackets ? /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: admin_brackets,
+          key: 'admin_brackets_list',
+          keyExtractor: item => `admin_${item.bracket_competition_id}`,
+          renderItem: renderBrackets
+        }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      case 'brackets':
+        if (active_engagement != 'brackets') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (bracket_competitions.length == 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Bracket Competitions"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, "Below are the bracket competitions that you have participated in"))), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          data: bracket_competitions,
+          key: 'brackets_list',
+          keyExtractor: item => `${item.bracket_competition_id}`,
+          renderItem: renderBrackets
+        }));
+      default:
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "COMPETITIONS",
-    title_color: active_engagement == 'competitions' ? _colors.default.shades.white : _colors.default.brand.midnight,
-    backgroundColor: active_engagement == 'competitions' ? _colors.default.brand.midnight : _colors.default.shades.white,
-    title_weight: active_engagement == 'competitions' ? 'bold' : 'regular',
-    borderRadius: 0,
-    padding: 10,
-    style: {
-      flex: 1,
-      borderTopLeftRadius: 22,
-      borderBottomLeftRadius: 22
-    },
-    onPress: () => setData({
-      ...list_data,
-      active_engagement: 'competitions'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "SQUARES",
-    title_color: active_engagement == 'squares' ? _colors.default.shades.white : _colors.default.brand.midnight,
-    backgroundColor: active_engagement == 'squares' ? _colors.default.brand.midnight : _colors.default.shades.white,
-    title_weight: active_engagement == 'squares' ? 'bold' : 'regular',
-    borderRadius: 0,
-    padding: 10,
+  };
+  return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    float: float,
     style: {
       flex: 1
-    },
-    onPress: () => setData({
-      ...list_data,
-      active_engagement: 'squares'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "BRACKETS",
-    title_color: active_engagement == 'brackets' ? _colors.default.shades.white : _colors.default.brand.midnight,
-    backgroundColor: active_engagement == 'brackets' ? _colors.default.brand.midnight : _colors.default.shades.white,
-    title_weight: active_engagement == 'brackets' ? 'bold' : 'regular',
-    borderRadius: 0,
-    padding: 10,
-    style: {
-      flex: 1,
-      borderTopRightRadius: 22,
-      borderBottomRightRadius: 22
-    },
-    onPress: () => setData({
-      ...list_data,
-      active_engagement: 'brackets'
-    })
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    style: {
-      ..._styles.view_styles.section_body,
-      padding: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_header,
-      backgroundColor: _colors.default.shades.shade100
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1,
-      marginRight: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header"
-  }, "Showing ", active_tab, " ", active_engagement), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Use the toggle to the right to see active / closed engagements")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "ACTIVE",
-    title_color: active_tab == 'active' ? _colors.default.shades.white : _colors.default.brand.midnight,
-    backgroundColor: active_tab == 'active' ? _colors.default.utility.success : _colors.default.shades.white,
-    title_weight: active_tab == 'active' ? 'bold' : 'regular',
-    borderRadius: 0,
-    style: {
-      borderTopLeftRadius: 22,
-      borderBottomLeftRadius: 22
-    },
-    padding: 10,
-    onPress: () => setData({
-      ...list_data,
-      active_tab: 'active'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "CLOSED",
-    title_color: active_tab == 'closed' ? _colors.default.shades.white : _colors.default.brand.midnight,
-    backgroundColor: active_tab == 'closed' ? _colors.default.utility.error : _colors.default.shades.white,
-    title_weight: active_tab == 'closed' ? 'bold' : 'regular',
-    borderRadius: 0,
-    padding: 10,
-    style: {
-      borderTopRightRadius: 22,
-      borderBottomRightRadius: 22
-    },
-    onPress: () => setData({
-      ...list_data,
-      active_tab: 'closed'
-    })
-  }))), active_tab == 'closed' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_footer
-    }
-  }, offset > 0 ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "PREV",
-    title_color: _colors.default.brand.electric,
-    backgroundColor: "transparent",
-    onPress: () => getDataFromServer(offset - 1)
-  }) : /*#__PURE__*/_react.default.createElement(_reactNative.View, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "NEXT",
-    title_color: _colors.default.brand.electric,
-    backgroundColor: "transparent",
-    onPress: () => getDataFromServer(offset + 1)
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    style: {
-      padding: 20,
-      alignSelf: 'center'
-    },
-    size: "large",
-    color: _colors.default.brand.midnight
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_engagement == 'competitions' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, admin_competitions.length > 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: sections,
+    key: 'admin_list',
+    keyExtractor: item => item,
+    renderItem: renderSections
+  })), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "footer",
     style: {
+      flexDirection: 'row',
+      alignItems: 'center',
       padding: 10,
-      backgroundColor: _colors.default.incentive.gold_faded
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      padding: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    theme: "header_2"
-  }, "Admin Competitions"), /*#__PURE__*/_react.default.createElement(_Components.Text, {
-    style: {
-      marginTop: 4
-    },
-    theme: "body"
-  }, "These are the competitions you are an admin of")), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    key: "admin_competition",
-    data: admin_competitions,
-    horizontal: true,
-    renderItem: renderAdminCompetitions,
-    keyExtractor: item => item.competition_id.toString()
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    key: 'my_competitions',
-    data: competitions,
-    renderItem: renderCompetitions,
-    keyExtractor: item => item.competition_id.toString()
-  })) : active_engagement == 'brackets' ? /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    data: bracket_competitions,
-    renderItem: renderBrackets,
-    keyExtractor: item => item.bracket_competition_id.toString()
-  }) : active_engagement == 'squares' ? /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    data: squares_competitions,
-    renderItem: renderSquares,
-    keyExtractor: item => item.sq_comp_id.toString()
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_footer
+      ...footer_style
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "CREATE NEW",
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
-      flex: 1,
-      marginRight: 5
-    },
-    title_color: _colors.default.shades.white,
-    backgroundColor: _colors.default.utility.success,
-    padding: 15,
-    onPress: () => onCreateNew(active_engagement)
-  }), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "CLOSE",
-    title_color: _colors.default.shades.white,
-    style: {
-      flex: 2,
-      marginRight: 8
+      flex: 1
     },
-    padding: 15,
-    backgroundColor: _colors.default.utility.error,
-    onPress: () => onClose()
+    onPress: () => onCreateNew(active_engagement),
+    type: "success",
+    title: "CREATE NEW ENGAGEMENT"
   })));
 };
 var _default = exports.default = AdminCompetitionList;