be-components 3.8.6 → 3.8.8

package/lib/module/SocialComponents/CompanyProfile/index.js

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image, ScrollView, FlatList, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Image, FlatList } from 'react-native';
 import { CompanyProfileApi, CompanyProfileHelpers } from './api';
-import Colors from '../../constants/colors';
-import { Icons, Text } from '../../Components';
-import { view_styles } from '../../constants/styles';
+import { Icons, Toggle } from '../../Components';
 import PlayerCard from '../PlayerCard';
 import CompetitionCard from '../../Engage/components/CompetitionCard';
 import BracketCompetitionCard from '../../Engage/components/BracketCompetitionCard';
@@ -11,6 +9,9 @@ import SquaresCompetitionCard from '../../Engage/components/SquaresCompetitionCa
 import ArticleCard from '../ArticleCard';
 import PodcastCard from '../PodcastCard';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+const co_profile_sections = ['gap', 'info', 'members', 'podcasts', 'engage_toggle', 'competitions', 'feeds'];
 const CompanyProfile = ({
   company_id,
   padding_insets,
@@ -24,6 +25,7 @@ const CompanyProfile = ({
   onBack,
   onShareCompany
 }) => {
+  const Colors = useColors();
   const [module_size, setModuleSize] = useState({
     height: 700,
     width: 300
@@ -39,7 +41,7 @@ const CompanyProfile = ({
     company_loading: false,
     company_members: [],
     players: [],
-    active_toggle: 'Comps'
+    active_toggle: 'competitions'
   });
   const {
     company_loading,
@@ -93,10 +95,10 @@ const CompanyProfile = ({
   }, [company_id]);
   useEffect(() => {
     switch (active_toggle) {
-      case 'Comps':
+      case 'competitions':
         getCompsFromServer(company_id, 0);
         return;
-      case 'Feeds':
+      case 'feeds':
         getFeedFromServer(company_id, 0);
         return;
       default:
@@ -194,14 +196,15 @@ const CompanyProfile = ({
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     return /*#__PURE__*/React.createElement(View, {
+      float: true,
       style: {
-        padding: 4
+        margin: 4
       }
     }, /*#__PURE__*/React.createElement(PlayerCard, {
       player: player,
-      width: 120,
-      border: true,
+      width: 150,
       alignment: "vertical",
+      show_follow: true,
       onSelectPlayer: onSelectPlayer,
       onFollowingUpdate: pf => console.log(pf)
     }));
@@ -213,9 +216,9 @@ const CompanyProfile = ({
       article_width = 240;
     }
     return /*#__PURE__*/React.createElement(View, {
+      float: true,
       style: {
-        width: article_width,
-        margin: 5
+        margin: 4
       }
     }, /*#__PURE__*/React.createElement(ArticleCard, {
       article_feed: article_feed,
@@ -231,33 +234,16 @@ const CompanyProfile = ({
       pod_width = 200;
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: {}
+      float: true,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/React.createElement(PodcastCard, {
       podcast: data.item,
       width: pod_width,
       onSelectPodcast: onSelectPodcast
     }));
   };
-  const renderToggles = data => {
-    const active = data.item == active_toggle ? true : false;
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
-      style: {
-        width: (module_size.width - 65) / 2,
-        padding: 15,
-        borderRadius: 22,
-        backgroundColor: active ? Colors.brand.midnight : 'transparent'
-      },
-      onPress: () => setCompanyData({
-        ...company_data,
-        active_toggle: data.item
-      })
-    }, /*#__PURE__*/React.createElement(Text, {
-      textAlign: "center",
-      weight: "bold",
-      size: 14,
-      color: active ? Colors.shades.white : Colors.brand.midnight
-    }, data.item));
-  };
   const renderComps = data => {
     switch (data.item.type) {
       case 'competition':
@@ -273,13 +259,18 @@ const CompanyProfile = ({
         if (!competition_result_type) {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        return /*#__PURE__*/React.createElement(CompetitionCard, {
+        return /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(CompetitionCard, {
           competition: competition,
           company: company,
           competition_type: competition_type,
           competition_result_type: competition_result_type,
           onCompetitionSelect: onSelectCompetition
-        });
+        }));
       case 'bracket_competition':
         const bracket_competition = bracket_competitions.find(bc => bc.bracket_competition_id == data.item.id);
         if (!bracket_competition) {
@@ -291,52 +282,284 @@ const CompanyProfile = ({
         }
         const bracket = brackets.find(b => b.bracket_id == bracket_competition.bracket_id);
         const league = leagues.find(l => l.league_id == bracket?.league_id);
-        return /*#__PURE__*/React.createElement(BracketCompetitionCard, {
+        return /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(BracketCompetitionCard, {
           bracket_competition: bracket_competition,
           competition_result_type: crt,
           company: company,
           bracket: bracket,
           league: league,
           onCompetitionSelect: onSelectBracketCompetition
-        });
+        }));
       case 'squares_competition':
         const squares_competition = squares_competitions.find(sc => sc.sq_comp_id == data.item.id);
         if (!squares_competition) {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
         const event = events.find(e => e.event_id == squares_competition.event_id);
-        return /*#__PURE__*/React.createElement(SquaresCompetitionCard, {
+        return /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            margin: 5
+          }
+        }, /*#__PURE__*/React.createElement(SquaresCompetitionCard, {
           squares_competition: squares_competition,
           onSelectCompetition: onSelectSquaresCompetition,
           company: company,
           event: event
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
+  const renderSections = data => {
+    switch (data.item) {
+      case 'gap':
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            height: 300
+          }
         });
+      case 'info':
+        if (!company) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            borderTopRightRadius: 22,
+            borderTopLeftRadius: 22
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 20,
+            borderTopRightRadius: 22,
+            borderTopLeftRadius: 22
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, company.company_name), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 4
+          },
+          theme: "description"
+        }, company.company_description)), /*#__PURE__*/React.createElement(Button, {
+          disabled: true,
+          style: {
+            backgroundColor: Colors.absolutes.highlights.highlight500
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          size: 10,
+          theme: "h1",
+          color: Colors.text.white,
+          textAlign: "center"
+        }, company.type.toUpperCase()))));
+      case 'members':
+        if (!company) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 20
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Members"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "The following are members of ", company.company_name)), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10,
+            flex: 1,
+            alignItems: 'flex-end'
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, company_members.length))), /*#__PURE__*/React.createElement(View, {
+          type: "body",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "row"
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(FlatList, {
+          key: "company_members",
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          data: company_members,
+          renderItem: renderMembers,
+          keyExtractor: item => item.player_id.toString()
+        })))));
+      case 'podcasts':
+        if (!company) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (podcasts.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',
+            padding: 20
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Podcasts"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "The following are podcasts hosted by ", company.company_name)), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h2"
+        }, podcasts.length))), /*#__PURE__*/React.createElement(View, {
+          type: "body",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "row"
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(FlatList, {
+          key: "company_pods",
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          data: podcasts,
+          renderItem: renderPodcasts,
+          keyExtractor: item => item.podcast_id.toString()
+        })))));
+      case 'engage_toggle':
+        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            paddingLeft: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Engage with ", company?.company_name), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Use the toggle to find ways to engage"))), /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          options: [{
+            key: 'competitions',
+            label: 'Comps'
+          }, {
+            key: 'feeds',
+            label: 'Feeds'
+          }],
+          selected_option: active_toggle,
+          onSelectOption: option => setCompanyData({
+            ...company_data,
+            active_toggle: option
+          })
+        })));
+      case 'competitions':
+        if (active_toggle != 'competitions') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, competition_loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+          size: "large",
+          color: Colors.text.h1,
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          }
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FlatList, {
+          key: 'comps_list',
+          data: sorted_comps.sort((a, b) => a.start_time.unix() - b.start_time.unix()),
+          renderItem: renderComps,
+          keyExtractor: item => `${item.id}:${item.type}`
+        }));
+      case 'feeds':
+        if (active_toggle != 'feeds') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
+          }
+        }, feed_loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+          size: "large",
+          color: Colors.text.h1,
+          style: {
+            padding: 20,
+            alignSelf: 'center'
+          }
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+          }
+        }, articles.sort((a, b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).map((a, i) => {
+          return renderArticles({
+            item: a,
+            index: i
+          });
+        })));
       default:
         return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
   };
-  if (company_loading || !company) {
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        flex: 1
-      }
-    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
-      style: {
-        padding: 20,
-        alignSelf: 'center'
-      },
-      size: "large",
-      color: Colors.brand.midnight
-    }));
-  }
   return /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      backgroundColor: Colors.shades.black_faded
     },
     onLayout: ev => {
       const {
@@ -359,218 +582,29 @@ const CompanyProfile = ({
     nativeID: "profile_image"
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
-      uri: company.company_image?.url
+      uri: company?.company_image?.url
     },
     style: {
       width: module_size.width,
       height: module_size.width,
       borderBottomRightRadius: 50,
-      borderBottomLeftRadius: 50
+      borderBottomLeftRadius: 50,
+      backgroundColor: Colors.text.white
     },
     resizeMode: "cover"
-  })), /*#__PURE__*/React.createElement(ScrollView, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section,
-      marginTop: module_size.width - 150
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      marginRight: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, company.company_name), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 4
-    },
-    theme: "body_2"
-  }, company.company_description)), /*#__PURE__*/React.createElement(View, {
-    style: {
-      backgroundColor: Colors.highlights.highlight500,
-      padding: 10,
-      borderRadius: 22
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 10,
-    weight: "bold",
-    color: Colors.shades.white,
-    textAlign: "center"
-  }, company.type.toUpperCase())))), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Company Members"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "The following are members of ", company.company_name)), /*#__PURE__*/React.createElement(View, {
-    style: {
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
-  }, company_members.length))), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.body_row
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(FlatList, {
-    key: "company_members",
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    data: company_members,
-    renderItem: renderMembers,
-    keyExtractor: item => item.player_id.toString()
-  }))))), podcasts.length > 0 ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Podcasts"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "The following are podcasts hosted by ", company.company_name)), /*#__PURE__*/React.createElement(View, {
-    style: {
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
-  }, podcasts.length))), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      padding: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.body_row
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(FlatList, {
-    key: "company_pods",
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    data: podcasts,
-    renderItem: renderPodcasts,
-    keyExtractor: item => item.podcast_id.toString()
-  }))))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Engage"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "Use the toggles below to see recent activity from ", company.company_name))), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      padding: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.body_row,
-      margin: 10,
-      marginLeft: 20,
-      marginRight: 20,
-      borderRadius: 22,
-      padding: 1,
-      backgroundColor: Colors.shades.shade100
-    }
-  }, /*#__PURE__*/React.createElement(FlatList, {
-    key: 'toggles',
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    data: ['Comps', 'Feeds'],
-    renderItem: renderToggles,
-    keyExtractor: item => item
-  })), active_toggle == 'Comps' ? /*#__PURE__*/React.createElement(View, null, competition_loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "large",
-    color: Colors.brand.midnight,
-    style: {
-      padding: 20,
-      alignSelf: 'center'
-    }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FlatList, {
-    key: 'comps_list',
-    data: sorted_comps.sort((a, b) => a.start_time.unix() - b.start_time.unix()),
-    renderItem: renderComps,
-    keyExtractor: item => `${item.id}:${item.type}`
-  })) : active_toggle == 'Feeds' ? /*#__PURE__*/React.createElement(View, null, feed_loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "large",
-    color: Colors.brand.midnight,
-    style: {
-      padding: 20,
-      alignSelf: 'center'
-    }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    }
-  }, articles.sort((a, b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).map((a, i) => {
-    return renderArticles({
-      item: a,
-      index: i
-    });
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)))), onBack ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  })), /*#__PURE__*/React.createElement(FlatList, {
+    data: co_profile_sections,
+    key: "co_profile_sections_list",
+    keyExtractor: item => item,
+    onRefresh: () => getCompanyDataFromServer(company_id),
+    refreshing: company_loading,
+    renderItem: renderSections
+  }), onBack ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
     style: {
       position: 'absolute',
       top: padding_insets?.top ?? 0,
       left: 0,
-      ...view_styles.section,
-      backgroundColor: Colors.shades.shade100,
       height: 50,
       width: 50,
       borderRadius: 100,
@@ -580,15 +614,14 @@ const CompanyProfile = ({
     onPress: () => onBack()
   }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
     direction: "left",
-    color: Colors.brand.midnight,
+    color: Colors.text.h1,
     size: 14
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), onShareCompany ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), company && onShareCompany ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
     style: {
       position: 'absolute',
       top: padding_insets?.top ?? 0,
       right: 0,
-      ...view_styles.section,
-      backgroundColor: Colors.shades.shade100,
       height: 50,
       width: 50,
       borderRadius: 100,
@@ -597,9 +630,9 @@ const CompanyProfile = ({
     },
     onPress: () => onShareCompany(company)
   }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
-    color: Colors.brand.electric,
+    color: Colors.text.h1,
     size: 14
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default CompanyProfile;
 //# sourceMappingURL=index.js.map