KK
/
PartyApp
Archived
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test

master
Netcup Gituser 2023-12-11 21:08:41 +01:00
parent b01bbf3a86
commit 1ab219cdf7
10 changed files with 258 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/MyImage.tsx Normal file
View File

@ -0,0 +1,14 @@
import {SourceProp} from '@user/types';
import {Image, ImageProps} from 'react-native';
type imageType = Blob | undefined;
interface CustomImageProps extends ImageProps {
hq?: {source: SourceProp; data: imageType; url: string};
}
function MyImage({...rest}: CustomImageProps) {
return <Image {...rest} />;
}
export default MyImage;

60
src/components/map/DisplayMarkerList.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, {useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native'; import {View, Text, Image, StyleSheet} from 'react-native';
import {MarkerView} from '@rnmapbox/maps'; import {MarkerView} from '@rnmapbox/maps';
@ -15,29 +15,39 @@ function DisplayMarkerList() {
const colors = store.getState().nonSaveVariables.theme.colors; const colors = store.getState().nonSaveVariables.theme.colors;
return ( useEffect(() => {
<React.Fragment> console.log('DisplayMarkerList----------');
{eventMapMarkers.map((marker: PA_Point) => { return () => {
return marker.type === 'event' || marker.type === 'eventStore' ? ( console.log('DisplayMarkerList unmount !!!');
<MarkerView };
key={marker.id} }, [eventMapMarkers]);
anchor={{x: 0.5, y: 1}}
coordinate={[marker.longitude, marker.latitude]} let markers = [];
allowOverlap={true}>
<EventMarker marker={marker} /> for (let i = 0; i < eventMapMarkers.length; i++) {
</MarkerView> let marker = eventMapMarkers[i];
) : ( markers.push(
<MarkerView marker.type === 'event' || marker.type === 'eventStore' ? (
key={marker.id} <MarkerView
anchor={{x: 0.5, y: 0.5}} key={marker.id}
coordinate={[marker.longitude, marker.latitude]} anchor={{x: 0.5, y: 1}}
allowOverlap={true}> coordinate={[marker.longitude, marker.latitude]}
<CircleNumber number={marker.cluster} /> allowOverlap={true}>
</MarkerView> <EventMarker marker={marker} />
); </MarkerView>
})} ) : (
</React.Fragment> <MarkerView
); key={marker.id}
anchor={{x: 0.5, y: 0.5}}
coordinate={[marker.longitude, marker.latitude]}
allowOverlap={true}>
<CircleNumber number={marker.cluster} />
</MarkerView>
),
);
}
return <React.Fragment>{markers}</React.Fragment>;
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -51,4 +61,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default DisplayMarkerList; export default React.memo(DisplayMarkerList);

74
src/components/map/EventMarker.tsx
View File

@ -125,42 +125,44 @@ function MarkerTheme0({marker}: {marker: EventType}) {
return ( return (
<React.Fragment> <React.Fragment>
<Image source={tate} style={styles.markerImage} /> <Image source={tate} style={styles.markerImage} />
<AvatarGroup style={styles.avatarGroup}> {
{[ <AvatarGroup style={styles.avatarGroup}>
remainingCount > 0 ? ( {[
<Avatar remainingCount > 0 ? (
key="remaining" <Avatar
size="sm" key="remaining"
borderColor="$backgroundDark400" size="sm"
borderWidth="$2" borderColor="$backgroundDark400"
bg="$backgroundDark200" borderWidth="$2"
style={{flexShrink: 0, minWidth: 16}}> bg="$backgroundDark200"
<Text style={{flexShrink: 0, minWidth: 16}}>
style={{ <Text
color: colors.textLight0, style={{
textAlign: 'center', color: colors.textLight0,
fontWeight: 'bold', textAlign: 'center',
}} fontWeight: 'bold',
numberOfLines={1}> }}
+{remainingCount} numberOfLines={1}>
</Text> +{remainingCount}
</Avatar> </Text>
) : ( </Avatar>
<></> ) : (
), <></>
...avatars.slice(0, 3).map((avatar, index) => ( ),
<Avatar ...avatars.slice(0, 3).map((avatar, index) => (
key={index} <Avatar
size="sm" key={index}
borderColor="$backgroundDark400" size="sm"
borderWidth="$2" borderColor="$backgroundDark400"
bg={avatar.color}> borderWidth="$2"
<AvatarFallbackText>{avatar.alt}</AvatarFallbackText> bg={avatar.color}>
<AvatarImage source={avatar.src} alt={avatar.alt} /> <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
</Avatar> <AvatarImage source={avatar.src} alt={avatar.alt} />
)), </Avatar>
]} )),
</AvatarGroup> ]}
</AvatarGroup>
}
</React.Fragment> </React.Fragment>
); );
} }

44
src/components/map/cluster/getData.ts
View File

@ -1,8 +1,6 @@
import {Position} from '@rnmapbox/maps/src/types/Position'; import {Position} from '@rnmapbox/maps/src/types/Position';
import {getDistance} from 'geolib'; import {getDistance} from 'geolib';
import { PA_Point, PA_Point_Cluster, PA_Point_Event } from '../types'; import {PA_Point, PA_Point_Cluster, PA_Point_Event} from '../types';
const createChecksum = (ids: (number | string)[]) => { const createChecksum = (ids: (number | string)[]) => {
let checksum = 0; let checksum = 0;
@ -123,34 +121,34 @@ function getLocationData(
latitude: 51.9674, latitude: 51.9674,
longitude: 7.6197, longitude: 7.6197,
type: 'event', type: 'event',
id: "203868", id: '203868',
theme: 1, theme: 1,
}, },
{ {
latitude: 51.9674, latitude: 51.9674,
longitude: 7.6196, longitude: 7.6196,
type: 'event', type: 'event',
id: "203866", id: '203866',
theme: 1, theme: 1,
}, },
{latitude: 51.9674, longitude: 7.6194, type: 'event', id: "203867"}, {latitude: 51.9674, longitude: 7.6194, type: 'event', id: '203867'},
{latitude: 50.7753, longitude: 6.0839, type: 'event', id: "501298"}, {latitude: 50.7753, longitude: 6.0839, type: 'event', id: '501298'},
{latitude: 53.0793, longitude: 8.8017, type: 'event', id: "763159"}, {latitude: 53.0793, longitude: 8.8017, type: 'event', id: '763159'},
{latitude: 48.7758, longitude: 9.1829, type: 'event', id: "917425"}, {latitude: 48.7758, longitude: 9.1829, type: 'event', id: '917425'},
{latitude: 52.3759, longitude: 9.732, type: 'event', id: "635028"}, {latitude: 52.3759, longitude: 9.732, type: 'event', id: '635028'},
{latitude: 51.512, longitude: 7.4653, type: 'event', id: "841592"}, {latitude: 51.512, longitude: 7.4653, type: 'event', id: '841592'},
{latitude: 49.4875, longitude: 8.466, type: 'event', id: "180356"}, {latitude: 49.4875, longitude: 8.466, type: 'event', id: '180356'},
{latitude: 51.3611, longitude: 7.0119, type: 'event', id: "592874"}, {latitude: 51.3611, longitude: 7.0119, type: 'event', id: '592874'},
{latitude: 54.3227, longitude: 10.1356, type: 'event', id: "384791"}, {latitude: 54.3227, longitude: 10.1356, type: 'event', id: '384791'},
{latitude: 51.8049, longitude: 10.3351, type: 'event', id: "273495"}, {latitude: 51.8049, longitude: 10.3351, type: 'event', id: '273495'},
{latitude: 50.3213, longitude: 11.8676, type: 'event', id: "699318"}, {latitude: 50.3213, longitude: 11.8676, type: 'event', id: '699318'},
{latitude: 49.8765, longitude: 6.6695, type: 'event', id: "159627"}, {latitude: 49.8765, longitude: 6.6695, type: 'event', id: '159627'},
{latitude: 52.2651, longitude: 7.3085, type: 'event', id: "903716"}, {latitude: 52.2651, longitude: 7.3085, type: 'event', id: '903716'},
{latitude: 53.9638, longitude: 12.413, type: 'event', id: "487612"}, {latitude: 53.9638, longitude: 12.413, type: 'event', id: '487612'},
{latitude: 50.9321, longitude: 9.1847, type: 'event', id: "827464"}, {latitude: 50.9321, longitude: 9.1847, type: 'event', id: '827464'},
{latitude: 52.4378, longitude: 13.2847, type: 'event', id: "931845"}, {latitude: 52.4378, longitude: 13.2847, type: 'event', id: '931845'},
{latitude: 49.4644, longitude: 11.0168, type: 'event', id: "674132"}, {latitude: 49.4644, longitude: 11.0168, type: 'event', id: '674132'},
{latitude: 51.1983, longitude: 8.8998, type: 'event', id: "298473"}, {latitude: 51.1983, longitude: 8.8998, type: 'event', id: '298473'},
], ],
}; };

114
src/event/EventManager.ts
View File

@ -40,7 +40,6 @@ async function getEvent(
eventIsInCache = true; eventIsInCache = true;
} }
} }
if (event === undefined) { if (event === undefined) {
const eveDBKeys = BigDataManager.databases.events.keys; const eveDBKeys = BigDataManager.databases.events.keys;
@ -53,7 +52,11 @@ async function getEvent(
? createEventProp( ? createEventProp(
SourceProp.offline, SourceProp.offline,
//Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryLQ]), //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryLQ]),
new Blob([eve[eveDBKeys.EventBannerPictureBinaryLQ] as unknown as string]), new Blob([
eve[
eveDBKeys.EventBannerPictureBinaryLQ
] as unknown as string,
]),
) )
: createEventProp( : createEventProp(
SourceProp.online, SourceProp.online,
@ -65,7 +68,11 @@ async function getEvent(
? createEventProp( ? createEventProp(
SourceProp.offline, SourceProp.offline,
//Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryHQ]), //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryHQ]),
new Blob([eve[eveDBKeys.EventBannerPictureBinaryHQ] as unknown as string]), new Blob([
eve[
eveDBKeys.EventBannerPictureBinaryHQ
] as unknown as string,
]),
) )
: createEventProp( : createEventProp(
SourceProp.online, SourceProp.online,
@ -91,7 +98,10 @@ async function getEvent(
SourceProp.offline, SourceProp.offline,
eve[eveDBKeys.Longitude], eve[eveDBKeys.Longitude],
), ),
Type: createEventProp(SourceProp.offline, NumToEventType(eve[eveDBKeys.Type])), Type: createEventProp(
SourceProp.offline,
NumToEventType(eve[eveDBKeys.Type]),
),
Theme: createEventProp(SourceProp.offline, eve[eveDBKeys.Theme]), Theme: createEventProp(SourceProp.offline, eve[eveDBKeys.Theme]),
FriendList: createEventProp( FriendList: createEventProp(
SourceProp.offline, SourceProp.offline,
@ -141,68 +151,70 @@ async function getEvent(
EventBannerPicture: EventBannerPicture; EventBannerPicture: EventBannerPicture;
ButtonAction: BasicEventProp<string>; */ ButtonAction: BasicEventProp<string>; */
const resp = {response:{ const resp = {
Name: 'test event', response: {
Description: 'test description', Name: 'test event',
StartDate: 1702230005, Description:
EndDate: new Date().getTime() + 100000, 'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
Latitude: 48.7758, 'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
Longitude: 9.1829, '\n\n\n' +
Type: 0, 'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
Theme: 0, 'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
FriendList: [], '\n\n\n' +
UserLength: 5, 'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
pic: 'https://www.w3schools.com/w3css/img_lights.jpg', 'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
ButtonAction: '{"url":"https://www.w3schools.com/w3css/img_lights.jpg"}', '\n\n\n' +
}}; 'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
'\n\n\n' +
'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
'\n\n\n' +
'Blckbx: \n' +
'NIGHTFUNK \n' +
'FINIQ \n' +
'DAVID HERRLICH \n' +
'ELTERNHOUSE \n' +
'LA RENZO',
StartDate: 1702230005,
EndDate: new Date().getTime() + 100000,
Latitude: 48.7758,
Longitude: 9.1829,
Type: 0,
Theme: 0,
FriendList: [],
UserLength: 5,
pic: 'https://www.w3schools.com/w3css/img_lights.jpg',
ButtonAction:
'{"url":"https://www.w3schools.com/w3css/img_lights.jpg"}',
},
};
event = { event = {
UUID, UUID,
Description: createEventProp( Description: createEventProp(
SourceProp.cached, SourceProp.cached,
resp.response.Description, resp.response.Description,
), ),
lastUpdateTimestamp: Math.floor(new Date().getTime() / 1000), lastUpdateTimestamp: Math.floor(new Date().getTime() / 1000),
EventBannerPicture: { EventBannerPicture: {
lq: createEventProp( lq: createEventProp(
SourceProp.online, SourceProp.online,
undefined, undefined,
resp.response.pic + "?type=low", resp.response.pic + '?type=low',
),
hq: createEventProp(
SourceProp.online,
undefined,
resp.response.pic,
), ),
hq: createEventProp(SourceProp.online, undefined, resp.response.pic),
}, },
Name: createEventProp( Name: createEventProp(SourceProp.cached, resp.response.Name),
SourceProp.cached, StartDate: createEventProp(SourceProp.cached, resp.response.StartDate),
resp.response.Name, EndDate: createEventProp(SourceProp.cached, resp.response.EndDate),
), Latitude: createEventProp(SourceProp.cached, resp.response.Latitude),
StartDate: createEventProp( Longitude: createEventProp(SourceProp.cached, resp.response.Longitude),
SourceProp.cached,
resp.response.StartDate,
),
EndDate: createEventProp(
SourceProp.cached,
resp.response.EndDate,
),
Latitude: createEventProp(
SourceProp.cached,
resp.response.Latitude,
),
Longitude: createEventProp(
SourceProp.cached,
resp.response.Longitude,
),
Type: createEventProp( Type: createEventProp(
SourceProp.cached, SourceProp.cached,
NumToEventType(resp.response.Type), NumToEventType(resp.response.Type),
), ),
Theme: createEventProp( Theme: createEventProp(SourceProp.cached, resp.response.Theme),
SourceProp.cached,
resp.response.Theme,
),
FriendList: createEventProp( FriendList: createEventProp(
SourceProp.cached, SourceProp.cached,
resp.response.FriendList, resp.response.FriendList,
@ -215,7 +227,6 @@ async function getEvent(
SourceProp.cached, SourceProp.cached,
resp.response.ButtonAction, resp.response.ButtonAction,
), ),
}; };
//BigDataManager.setEntry('events', event); //BigDataManager.setEntry('events', event);
@ -319,8 +330,7 @@ function initUndefinedEvent(UUID: EventID): PAEvent {
}, },
ButtonAction: createEventProp(SourceProp.online), ButtonAction: createEventProp(SourceProp.online),
}; };
} }
const EventManager = { const EventManager = {
getEvent, getEvent,

29
src/navigation/navigation.tsx
View File

@ -29,6 +29,7 @@ import {RootState, store as reduxStore} from '@redux/store';
import {Text} from '@gluestack-ui/themed'; import {Text} from '@gluestack-ui/themed';
import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; import {MyTouchableOpacity} from '@components/MyTouchableOpacity';
import {useEffect, useRef} from 'react'; import {useEffect, useRef} from 'react';
import {animated, useSpring} from '@react-spring/native';
export type RootStackNavigatorParamList = { export type RootStackNavigatorParamList = {
Home: NavigatorScreenParams<HomeStackNavigatorParamList>; Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
@ -95,6 +96,8 @@ function ChatsTabAnim(props: any) {
const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat']; const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
//const AnimationView = animated(View);
function CustomTabBar(props: BottomTabBarProps) { function CustomTabBar(props: BottomTabBarProps) {
const {state, navigation} = props; const {state, navigation} = props;
@ -121,18 +124,43 @@ function CustomTabBar(props: BottomTabBarProps) {
const allowedTabs = ['Profile', 'Calendar', 'Map', 'Chats']; const allowedTabs = ['Profile', 'Calendar', 'Map', 'Chats'];
const fadeAnim = useRef(new Animated.Value(1)).current; const fadeAnim = useRef(new Animated.Value(1)).current;
/*
const [motionProps, api] = useSpring(
() => ({
from: {
translateY: 0,
},
}),
[],
); */
useEffect(() => { useEffect(() => {
if ( if (
nestedRouteName === undefined || nestedRouteName === undefined ||
(allowedTabs.includes(routeName) && nestedRouteName === 'Overview') (allowedTabs.includes(routeName) && nestedRouteName === 'Overview')
) { ) {
/*api.start({
to: [
{
translateY: 0,
},
],
}); */
Animated.timing(fadeAnim, { Animated.timing(fadeAnim, {
toValue: 0, toValue: 0,
duration: 250, duration: 250,
useNativeDriver: true, useNativeDriver: true,
}).start(); }).start();
} else { } else {
/*api.start({
to: [
{
translateY: 100,
},
],
}); */
Animated.timing(fadeAnim, { Animated.timing(fadeAnim, {
toValue: 100, toValue: 100,
duration: 150, duration: 150,
@ -146,6 +174,7 @@ function CustomTabBar(props: BottomTabBarProps) {
style={{ style={{
backgroundColor: currentTheme.backgroundDark400, backgroundColor: currentTheme.backgroundDark400,
transform: [{translateY: fadeAnim}], transform: [{translateY: fadeAnim}],
//transform: [{translateY: motionProps.translateY}],
}}> }}>
<View <View
style={{ style={{

8
src/navigation/tabs/main/ProfileTab.tsx
View File

@ -8,12 +8,18 @@ import {MyIconButton} from '@components/MyButton';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import { import {
ProfileOverview, ProfileOverview,
ProfileSettings,
UpdatePassword, UpdatePassword,
UpdateUsername, UpdateUsername,
} from '@pages/profile/profile'; } from '@pages/profile/profile';
import {Help} from '@pages/profile/help'; import {Help} from '@pages/profile/help';
import {About} from '@pages/profile/about'; import {About} from '@pages/profile/about';
import {lazy, Suspense} from 'react';
const ProfileSettings = lazy(() =>
import('@pages/profile/profile').then(module => ({
default: module.ProfileSettings,
})),
);
export const ProfileTabName = 'Profile'; export const ProfileTabName = 'Profile';

2
src/pages/calendar/calendar.tsx
View File

@ -23,8 +23,6 @@ export function CalendarScreen() {
return ( return (
<MyScreenContainer> <MyScreenContainer>
<Text>Calendar</Text> <Text>Calendar</Text>
<View style={{}}></View>
</MyScreenContainer> </MyScreenContainer>
); );
} }

50
src/pages/event/EventPage.tsx
View File

@ -1,7 +1,51 @@
import {Text} from '@gluestack-ui/themed'; import {Center, Spinner, Text, View} from '@gluestack-ui/themed';
function EventPage() { import {EventID} from '@event/types';
return <Text>EventPage</Text>;
import EventManager from '@event/EventManager';
import {MyScreenContainer} from '@components/MyScreenContainer';
import {SourceProp} from '@user/types';
import MyImage from '@components/MyImage';
import {Image} from 'react-native';
function EventPageLoading() {
// center also horizontally and vertically
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Spinner color="$secondary400" size={'large'} />
</View>
);
}
function EventPage({route}: {route: {params: {eventID: EventID}}}) {
const {eventID} = route.params;
const event = EventManager.getEventSelector(eventID);
if (event.Name.source === SourceProp.online) return <EventPageLoading />;
let image = event.EventBannerPicture.hq;
if (image === undefined) {
image = event.EventBannerPicture.lq;
}
return (
<MyScreenContainer scrollView={true}>
{
<>
<Text>{event.Name.data}</Text>
<Image
source={{
uri: 'https://res.cloudinary.com/coin-nft/image/upload/c_limit,q_auto,w_329/f_auto/v1/cache/1/f2/65/f26573682335fe72b50f0f74041736905308345d6043abbac832856b3a4d2246-ZGMwNDMxZTktYTY4NS00OTQ1LWJiYmUtMDRhY2Q0YzUzMjAy?_a=ATCkFAA0',
}}
style={{width: '100%', height: 400}}
alt="Event banner"
/>
<Text>{event.Description.data}</Text>
</>
}
</MyScreenContainer>
);
} }
export default EventPage; export default EventPage;

6
src/pages/map/map.tsx
View File

@ -81,7 +81,11 @@ export const Map = () => {
} }
function onMapMoveFinished() { function onMapMoveFinished() {
getVisibleBounds(); //console.log('xxxxxxxxxxxxxxxxxxxdad');
(async () => {
await getVisibleBounds();
})();
} }
React.useEffect(() => { React.useEffect(() => {