be-components 5.2.5 → 5.2.7

package/src/PlayerRecommender/components/ContactsSelector.tsx

@@ -7,20 +7,22 @@ import { PlayerRecommenderApi } from '../api';
 import { ActivityIndicator, FlatList, Image } from 'react-native';
 import { Button, Text, View } from '../../Components/Themed';
 import PlayerFollowButton from '../../SocialComponents/PlayerFollowButton';
-import { Icons, Toggle } from '../../Components';
+import { Checkbox, Icons, Toggle } from '../../Components';
 import SearchBox from '../../Components/SearchBox';
+import Pagination from '../../Components/Pagination';
 
 
 type ContactsSelectorProps = {
     player_id?:string,
     referral_code?:string,
-    onInviteContact: (pc:PlayerContactProps) => void,
+    onInviteContacts: (pc:PlayerContactProps[]) => void,
     onSelectContact:(pc:PlayerContactProps, p?:PublicPlayerProps) => void,
 }
-const sections = ['toggle', 'search', 'contacts','players']
-const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteContact }:ContactsSelectorProps) => {
+const sections = ['toggle', 'selected', 'search', 'pagination', 'contacts','players']
+const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteContacts }:ContactsSelectorProps) => {
     const Colors = useColors();
     const { is_available, permission, compareContacts } = useContacts({ referral_code });
+    const [ selected_contacts, setSelectedContacts ] = useState<PlayerContactProps[]>([]);
     const [ contacts, setContacts ] = useState<{
         loading:boolean,
         checked:boolean
@@ -42,14 +44,15 @@ const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteC
         players: [],
         player_followers:[]
     });
+    const [ offset, setOffset ] = useState(0);
     const { contacts_loading, players, player_followers, player_contacts, active_toggle } = contact_data
     let converted = player_contacts.filter(pc => pc.sub_type == 'phone' && pc.connected_player_id);
     let pending = player_contacts.filter(pc => pc.sub_type == 'phone' && !pc.connected_player_id)
-    let visible_converted = converted.slice(0, 20);
-    let visible_pending = pending.slice(0,20);
+    let visible_converted = converted.slice(offset * 20, (offset*20) + 20);
+    let visible_pending = pending.slice(offset * 20, (offset*20) + 20);
     if(search){
-        visible_converted = converted.filter(c => `${c.first_name} ${c.last_name}`.toLowerCase().includes(search.toLowerCase())).slice(0,20)
-        visible_pending = pending.filter(c => `${c.first_name} ${c.last_name}`.toLowerCase().includes(search.toLowerCase())).slice(0,20)
+        visible_converted = converted.filter(c => `${c.first_name} ${c.last_name}`.toLowerCase().includes(search.toLowerCase())).slice(offset * 20, (offset*20) + 20);
+        visible_pending = pending.filter(c => `${c.first_name} ${c.last_name}`.toLowerCase().includes(search.toLowerCase())).slice(offset * 20, (offset*20) + 20);
     }
 
 
@@ -84,9 +87,20 @@ const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteC
     const renderContacts = (data:{ item:PlayerContactProps, index:number }) => {
         const pf = player_followers.find(pf => pf.following_id == data.item.connected_player_id);
         const player = players.find(p => p.player_id == data.item.connected_player_id);
-        
+        const selected = selected_contacts.find(c => c.player_contact_id  == data.item.player_contact_id) ? true : false
         return (
-            <Button key={data.item.player_contact_id.toString()} float style={{ padding:0, margin:4 }} onPress={() => onSelectContact(data.item, player)}>
+            <Button 
+                key={data.item.player_contact_id.toString()} 
+                float 
+                style={{ padding:0, margin:4 }} 
+                onPress={() => {
+                    if(player){ return onSelectContact(data.item, player) }
+                    if(selected){
+                        return setSelectedContacts(selected_contacts.filter(c => c.player_contact_id != data.item.player_contact_id))
+                    }
+                    return setSelectedContacts(selected_contacts.concat(data.item))
+                }}
+                >
                 <Image
                     source={{ uri: player?.profile_pic &&  player?.profile_pic != '' ?  player?.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                     style={{ height:75, width:115, borderTopRightRadius:8, borderTopLeftRadius:8 }}
@@ -113,11 +127,18 @@ const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteC
                     />
                     :
                     <Button
-                        title='Invite!'
-                        type='success'
-                        style={{ padding:10 }}
-                        onPress={() => onInviteContact(data.item)}
-                    />
+                        transparent
+                        style={{ padding:10, flexDirection:'row', alignItems:'center' }}
+                        onPress={() => {
+                            if(selected){
+                                return setSelectedContacts(selected_contacts.filter(c => c.player_contact_id != data.item.player_contact_id))
+                            }
+                            return setSelectedContacts(selected_contacts.concat(data.item))
+                        }}
+                    >
+                        <Checkbox size={14} color={Colors.text.action} checked={selected} disabled onSelect={() => console.log('')}/>
+                        <Text theme='action' style={{ marginLeft:10 }}>Select</Text>
+                    </Button>
                     }
                 </View>
             </Button>  
@@ -135,7 +156,10 @@ const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteC
                                 { key: 'inactive', label: 'Not Joined' }
                             ]}
                             selected_option={active_toggle}
-                            onSelectOption={(key) => setContactData({ ...contact_data, active_toggle: key })}
+                            onSelectOption={(key) => {
+                                setContactData({ ...contact_data, active_toggle: key });
+                                setOffset(0)
+                            }}
                         />
                     </View>
                 )
@@ -144,10 +168,58 @@ const ContactsSelector = ({ player_id, referral_code, onSelectContact, onInviteC
                     <View style={{ padding:10, paddingTop:0 }}>
                         <SearchBox
                             hide_search_button
-                            onChange={(text) => setSearch(text)}
+                            onChange={(text) => {
+                                if(offset != 0){ setOffset(0) }
+                                setSearch(text)
+                            }}
                         />                        
                     </View>
                 )
+            case 'selected':
+                if(selected_contacts.length == 0){ return <></> }
+                if(active_toggle == 'active'){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Selected Contacts</Text>
+                                <Text style={{ marginTop:3 }}>Send these contacts an invite!</Text>
+                            </View>
+                            <View transparent style={{ marginLeft:10, marginRight:10 }}>
+                                <Text theme='h1' color={Colors.text.action}>{selected_contacts.length}</Text>
+                            </View>
+                            <Button
+                                title='X'
+                                transparent
+                                title_color={Colors.text.error}
+                                style={{ marginRight:10 }}
+                                onPress={() => setSelectedContacts([])}
+                            />
+                            <Button
+                                title='Invite'
+                                type='success'
+                                onPress={() => onInviteContacts(selected_contacts)}
+                            />
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <FlatList
+                                data={selected_contacts}
+                                renderItem={renderContacts}
+                                keyExtractor={(item) => item.player_contact_id.toString()}
+                                horizontal
+                                key={'selected_list'}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'pagination':
+                return (
+                    <Pagination
+                        offset={offset}
+                        onNext={() => setOffset(offset + 1)}
+                        onPrevious={() => setOffset(offset - 1)}
+                    />
+                )
             case 'contacts':
                 if(active_toggle != 'inactive'){ return <></> }
                 return (

package/src/SocialComponents/Contacts/api/index.tsx

@@ -43,7 +43,6 @@ const ContactsApi = {
     compareContacts: async(player_contacts:PlayerContactProps[]):Promise<PlayerContactProps[]> => {
         try {
             const resp = await axios.post(`${AUTH_SVC_API}/v1/players/contacts/compare`, { player_contacts });
-            console.log(resp.data)
             return resp.data.player_contacts
         } catch (e) {
             console.log(e)

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -90,20 +90,16 @@ const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border,
     }
 
     const searchPlayer = async(tag:TextTagProps) => {
-        setActionLoading(true);
         const player = await SocialComponentApi.searchPlayerByUsername(tag.tag);
         if(player){
             validateTag({ ...tag, local_id: (Math.random()*10000).toFixed(), data: player, tag_type_id:player.player_id });
-            setActionLoading(false);
         } else {
             setTagSelector({
                 visible:true,
                 working_tag:tag,
                 type:'player'
             });
-        }
-        setActionLoading(false);
-        
+        }        
     }
 
 

package/src/SocialComponents/GroupChat/index.tsx

@@ -360,6 +360,7 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, insets, di
                 <FlatList
                     data={sections}
                     key={'chat_sections'}
+                    keyboardShouldPersistTaps
                     scrollEnabled={false}
                     keyExtractor={item => item}
                     renderItem={renderSections}

package/src/SocialComponents/PostCard/components/ImageList.tsx

@@ -11,7 +11,7 @@ type ImageListProps = {
 }
 const ImageList = ({ width, images, onSelectImage }:ImageListProps) => {
     
-    const new_images = SocialComponentHelpers.organizeImages(images, width-2, 250, 2, 150)
+    const new_images = SocialComponentHelpers.organizeImages(images, width-2, 350, 2, 125)
     
 
     const renderImages = (data:{ item:any, index:number }) => {

package/src/SocialComponents/Poster/index.tsx

@@ -255,6 +255,7 @@ const Poster = ({ width, post_id, insets, onCreatePost, onSelectImage }: PosterP
             <FlatList
                 data={sections}
                 key={`poster_sections`}
+                keyboardShouldPersistTaps
                 renderItem={renderSections}
                 keyExtractor={item => item}
             />