be-components 5.3.4 → 5.3.6

package/src/ProfileManager/Components/ProfilePicManager.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Image, ScrollView, TouchableOpacity } from "react-native"
+import { FlatList, Image, TouchableOpacity } from "react-native"
 import { Icons } from '../../Components';
 import ImageUploader from '../../Components/ImageUploader';
 import Colors from '../../constants/colors';
@@ -10,14 +10,15 @@ import { Button, Text, View } from '../../Components/Themed';
 
 type ProfilePicManagerProps = {
     player:MyPlayerProps, 
+    width:number,
     walkthrough?:boolean,
     onClose:() => void,
     onNext:() => void,
     onPlayerUpdate:(player:MyPlayerProps) => void
 }
 
-
-const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClose }:ProfilePicManagerProps) => {
+const sections = ['pic'];
+const ProfilePicManager = ({ player, width, onPlayerUpdate, walkthrough, onNext, onClose }:ProfilePicManagerProps) => {
     const [ loading, setLoading ] = useState(false);
 
     const handleUpdatePic = async(profile_pic:string) => {
@@ -26,43 +27,60 @@ const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClos
         onPlayerUpdate(new_player)
     }
 
+    const MAX_WIDTH = 500
+    const size = width > MAX_WIDTH ? MAX_WIDTH : width
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'pic':
+                return (
+                    <View>
+                        <View style={{ margin:5 }}>
+                            <ImageUploader
+                                public_id={`${player.player_id}_${Math.random()}`}
+                                onStartUpload={() => setLoading(true)}
+                                onCancelUpload={() => setLoading(false)}
+                                onFinishUpload={(obj) => {
+                                    console.log(obj)
+                                    handleUpdatePic(obj.secure_url)
+                                }}
+                            >
+                                <Button
+                                    title={player.profile_pic ? 'CHANGE PICTURE' : 'ADD PICTURE'}
+                                    disabled
+                                    loading={loading}
+                                    type='action'
+                                    onPress={() => console.log('NA')}
+                                />
+                            </ImageUploader>
+                        </View>
+                        <Image
+                            source={{ uri: player.profile_pic ? player.profile_pic :'https://res.cloudinary.com/hoabts6mc/image/upload/v1714408535/sports_avatar_wdzsxc.webp' }}
+                            style={{ height:size, width:size, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
 
     return (
         <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
-                {walkthrough ?
-                <View style={{ padding:20 }}>
-                    <Text size={30} theme='h1'>Update Your Picture</Text>
-                    <Text style={{ marginTop:15 }} size={16} theme='h2'>Your profile picture is how users will see you in leaderboards and activity feeds.</Text>
-                </View>
-                :<></>}
-                <View style={{ justifyContent:'center', alignItems:'center' }}>
-                <Image
-                    source={{ uri: player.profile_pic ? player.profile_pic :'https://res.cloudinary.com/hoabts6mc/image/upload/v1714408535/sports_avatar_wdzsxc.webp' }}
-                    style={{ height:400, width:400, borderRadius:4 }}
-                    resizeMode='cover'
+            {walkthrough ?
+            <View style={{ padding:20 }}>
+                <Text size={26} theme='h1'>Update Your Picture</Text>
+                <Text style={{ marginTop:15 }} size={14} theme='h2'>Your profile picture is how users will see you in leaderboards and activity feeds.</Text>
+            </View>
+            :<></>}
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={'pic_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
                 />
-                <View style={{ position:'absolute', left:0, bottom:0, right: 0, padding:10 }}>
-                    <ImageUploader
-                        public_id={`${player.player_id}_${Math.random()}`}
-                        onStartUpload={() => setLoading(true)}
-                        onCancelUpload={() => setLoading(false)}
-                        onFinishUpload={(obj) => {
-                            console.log(obj)
-                            handleUpdatePic(obj.secure_url)
-                        }}
-                    >
-                        <Button
-                            title={player.profile_pic ? 'CHANGE' : 'ADD PICTURE'}
-                            disabled
-                            loading={loading}
-                            type='close'
-                            onPress={() => console.log('NA')}
-                        />
-                    </ImageUploader>
-                </View>
-                </View>
-            </ScrollView>
+            </View>
             {walkthrough ?
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button

package/src/ProfileManager/Components/ProfileWelcome.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, ScrollView } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import { Icons } from '../../Components';
 import { ProfileHelpers } from '../api';
 import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
@@ -9,6 +9,7 @@ import { useColors } from '../../constants/useColors';
 
 type ProfileWelcomeProps = {
     player:MyPlayerProps,
+    width:number,
     onStartSetup: () => void,
     code_details: {
         code_request?:CodeRequestProps,
@@ -19,33 +20,54 @@ type ProfileWelcomeProps = {
     onClose:() => void
 }
 
-const ProfileWelcome = ({ player, code_details, onStartSetup, onClose }:ProfileWelcomeProps) => {
+const sections = ['welcome', 'code']
+const ProfileWelcome = ({ width, player, code_details, onStartSetup, onClose }:ProfileWelcomeProps) => {
     const C = useColors();
     const { code_request, promo, referrer } = code_details;
+    const MAX_WIDTH = 500
+    const size = width > MAX_WIDTH ? MAX_WIDTH : width
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'welcome':
+                return (
+                    <Image
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1714506366/Welcome_James_pfzn7z.webp' }}
+                        style={{ width:size, height:size, alignSelf:'center' }}
+                        resizeMode='cover'
+                    />
+                )
+            case 'code':
+                if(!code_request) { return <></> }
+                if(!promo){ return <></> }
+                if(['closed','fulfilled'].includes(code_request.status)){  return <></> }
+                return (
+                <View float style={{ margin:15, flexDirection:'row' }}>
+                    <View transparent style={{ padding:10, justifyContent:'center' }}>
+                        <Icons.GiftIcon size={40} color={C.text.gold} />
+                    </View>
+                    <View transparent style={{flex:1, padding:10 }}>
+                        <Text theme='h1'>@{referrer?.username} has a gift for you</Text>
+                        <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                    </View>
+                </View>
+                )
+            default:return <></>
+        }
+    }
     return (
         <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
-                <View style={{ padding:20 }}>
-                    <Text size={30} theme='h2'>Welcome @{player.username}!</Text>
-                    <Text style={{ marginTop:15 }} size={16} theme='h2'>We are so glad that you found us! Use the setup wizard to complete your account setup.</Text>
-                </View>
-                <Image
-                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1714506366/Welcome_James_pfzn7z.webp' }}
-                    style={{ width:300, height:300, alignSelf:'center' }}
-                    resizeMode='cover'
+            <View style={{ padding:20 }}>
+                <Text size={26} theme='h2'>Welcome @{player.username}!</Text>
+                <Text style={{ marginTop:15 }} size={14} theme='h2'>We are so glad that you found us! Use the setup wizard to complete your account setup.</Text>
+            </View>
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={'welcome_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
                 />
-            </ScrollView>
-            {code_request && !['closed','fulfilled'].includes(code_request.status) && promo ?
-            <View float style={{ margin:15, marginTop:-50, flexDirection:'row' }}>
-                <View transparent style={{ padding:10, justifyContent:'center' }}>
-                    <Icons.GiftIcon size={40} color={C.text.gold} />
-                </View>
-                <View transparent style={{flex:1, padding:10 }}>
-                    <Text theme='h1'>@{referrer?.username} has a gift for you</Text>
-                    <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(promo)}</Text>
-                </View>
             </View>
-            :<></>}
             <View style={{ flexDirection:'row', padding:10 }}>
                 <Button
                     title={`DO IT LATER`}