From 1ab219cdf7385d00483c4e15bf82beb00f376d5b Mon Sep 17 00:00:00 2001 From: Netcup Gituser Date: Mon, 11 Dec 2023 21:08:41 +0100 Subject: [PATCH] test --- src/components/MyImage.tsx | 14 +++ src/components/map/DisplayMarkerList.tsx | 60 +++++++----- src/components/map/EventMarker.tsx | 74 ++++++++------- src/components/map/cluster/getData.ts | 44 +++++---- src/event/EventManager.ts | 114 ++++++++++++----------- src/navigation/navigation.tsx | 29 ++++++ src/navigation/tabs/main/ProfileTab.tsx | 8 +- src/pages/calendar/calendar.tsx | 2 - src/pages/event/EventPage.tsx | 50 +++++++++- src/pages/map/map.tsx | 6 +- 10 files changed, 258 insertions(+), 143 deletions(-) create mode 100644 src/components/MyImage.tsx diff --git a/src/components/MyImage.tsx b/src/components/MyImage.tsx new file mode 100644 index 0000000..c292da8 --- /dev/null +++ b/src/components/MyImage.tsx @@ -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 ; +} + +export default MyImage; diff --git a/src/components/map/DisplayMarkerList.tsx b/src/components/map/DisplayMarkerList.tsx index 2d7a99a..6150b9d 100644 --- a/src/components/map/DisplayMarkerList.tsx +++ b/src/components/map/DisplayMarkerList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {View, Text, Image, StyleSheet} from 'react-native'; import {MarkerView} from '@rnmapbox/maps'; @@ -15,29 +15,39 @@ function DisplayMarkerList() { const colors = store.getState().nonSaveVariables.theme.colors; - return ( - - {eventMapMarkers.map((marker: PA_Point) => { - return marker.type === 'event' || marker.type === 'eventStore' ? ( - - - - ) : ( - - - - ); - })} - - ); + useEffect(() => { + console.log('DisplayMarkerList----------'); + return () => { + console.log('DisplayMarkerList unmount !!!'); + }; + }, [eventMapMarkers]); + + let markers = []; + + for (let i = 0; i < eventMapMarkers.length; i++) { + let marker = eventMapMarkers[i]; + markers.push( + marker.type === 'event' || marker.type === 'eventStore' ? ( + + + + ) : ( + + + + ), + ); + } + + return {markers}; } const styles = StyleSheet.create({ @@ -51,4 +61,4 @@ const styles = StyleSheet.create({ }, }); -export default DisplayMarkerList; +export default React.memo(DisplayMarkerList); diff --git a/src/components/map/EventMarker.tsx b/src/components/map/EventMarker.tsx index 619e608..48dba94 100644 --- a/src/components/map/EventMarker.tsx +++ b/src/components/map/EventMarker.tsx @@ -125,42 +125,44 @@ function MarkerTheme0({marker}: {marker: EventType}) { return ( - - {[ - remainingCount > 0 ? ( - - - +{remainingCount} - - - ) : ( - <> - ), - ...avatars.slice(0, 3).map((avatar, index) => ( - - {avatar.alt} - - - )), - ]} - + { + + {[ + remainingCount > 0 ? ( + + + +{remainingCount} + + + ) : ( + <> + ), + ...avatars.slice(0, 3).map((avatar, index) => ( + + {avatar.alt} + + + )), + ]} + + } ); } diff --git a/src/components/map/cluster/getData.ts b/src/components/map/cluster/getData.ts index b4fb87e..4be2753 100644 --- a/src/components/map/cluster/getData.ts +++ b/src/components/map/cluster/getData.ts @@ -1,8 +1,6 @@ import {Position} from '@rnmapbox/maps/src/types/Position'; 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)[]) => { let checksum = 0; @@ -123,34 +121,34 @@ function getLocationData( latitude: 51.9674, longitude: 7.6197, type: 'event', - id: "203868", + id: '203868', theme: 1, }, { latitude: 51.9674, longitude: 7.6196, type: 'event', - id: "203866", + id: '203866', theme: 1, }, - {latitude: 51.9674, longitude: 7.6194, type: 'event', id: "203867"}, - {latitude: 50.7753, longitude: 6.0839, type: 'event', id: "501298"}, - {latitude: 53.0793, longitude: 8.8017, type: 'event', id: "763159"}, - {latitude: 48.7758, longitude: 9.1829, type: 'event', id: "917425"}, - {latitude: 52.3759, longitude: 9.732, type: 'event', id: "635028"}, - {latitude: 51.512, longitude: 7.4653, type: 'event', id: "841592"}, - {latitude: 49.4875, longitude: 8.466, type: 'event', id: "180356"}, - {latitude: 51.3611, longitude: 7.0119, type: 'event', id: "592874"}, - {latitude: 54.3227, longitude: 10.1356, type: 'event', id: "384791"}, - {latitude: 51.8049, longitude: 10.3351, type: 'event', id: "273495"}, - {latitude: 50.3213, longitude: 11.8676, type: 'event', id: "699318"}, - {latitude: 49.8765, longitude: 6.6695, type: 'event', id: "159627"}, - {latitude: 52.2651, longitude: 7.3085, type: 'event', id: "903716"}, - {latitude: 53.9638, longitude: 12.413, type: 'event', id: "487612"}, - {latitude: 50.9321, longitude: 9.1847, type: 'event', id: "827464"}, - {latitude: 52.4378, longitude: 13.2847, type: 'event', id: "931845"}, - {latitude: 49.4644, longitude: 11.0168, type: 'event', id: "674132"}, - {latitude: 51.1983, longitude: 8.8998, type: 'event', id: "298473"}, + {latitude: 51.9674, longitude: 7.6194, type: 'event', id: '203867'}, + {latitude: 50.7753, longitude: 6.0839, type: 'event', id: '501298'}, + {latitude: 53.0793, longitude: 8.8017, type: 'event', id: '763159'}, + {latitude: 48.7758, longitude: 9.1829, type: 'event', id: '917425'}, + {latitude: 52.3759, longitude: 9.732, type: 'event', id: '635028'}, + {latitude: 51.512, longitude: 7.4653, type: 'event', id: '841592'}, + {latitude: 49.4875, longitude: 8.466, type: 'event', id: '180356'}, + {latitude: 51.3611, longitude: 7.0119, type: 'event', id: '592874'}, + {latitude: 54.3227, longitude: 10.1356, type: 'event', id: '384791'}, + {latitude: 51.8049, longitude: 10.3351, type: 'event', id: '273495'}, + {latitude: 50.3213, longitude: 11.8676, type: 'event', id: '699318'}, + {latitude: 49.8765, longitude: 6.6695, type: 'event', id: '159627'}, + {latitude: 52.2651, longitude: 7.3085, type: 'event', id: '903716'}, + {latitude: 53.9638, longitude: 12.413, type: 'event', id: '487612'}, + {latitude: 50.9321, longitude: 9.1847, type: 'event', id: '827464'}, + {latitude: 52.4378, longitude: 13.2847, type: 'event', id: '931845'}, + {latitude: 49.4644, longitude: 11.0168, type: 'event', id: '674132'}, + {latitude: 51.1983, longitude: 8.8998, type: 'event', id: '298473'}, ], }; diff --git a/src/event/EventManager.ts b/src/event/EventManager.ts index c5c524a..4a12c6e 100644 --- a/src/event/EventManager.ts +++ b/src/event/EventManager.ts @@ -40,7 +40,6 @@ async function getEvent( eventIsInCache = true; } } - if (event === undefined) { const eveDBKeys = BigDataManager.databases.events.keys; @@ -53,7 +52,11 @@ async function getEvent( ? createEventProp( SourceProp.offline, //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryLQ]), - new Blob([eve[eveDBKeys.EventBannerPictureBinaryLQ] as unknown as string]), + new Blob([ + eve[ + eveDBKeys.EventBannerPictureBinaryLQ + ] as unknown as string, + ]), ) : createEventProp( SourceProp.online, @@ -65,7 +68,11 @@ async function getEvent( ? createEventProp( SourceProp.offline, //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryHQ]), - new Blob([eve[eveDBKeys.EventBannerPictureBinaryHQ] as unknown as string]), + new Blob([ + eve[ + eveDBKeys.EventBannerPictureBinaryHQ + ] as unknown as string, + ]), ) : createEventProp( SourceProp.online, @@ -91,7 +98,10 @@ async function getEvent( SourceProp.offline, 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]), FriendList: createEventProp( SourceProp.offline, @@ -141,68 +151,70 @@ async function getEvent( EventBannerPicture: EventBannerPicture; ButtonAction: BasicEventProp; */ - const resp = {response:{ - Name: 'test event', - Description: 'test description', - 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"}', - }}; + const resp = { + response: { + Name: 'test event', + Description: + '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' + + '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' + + '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 = { UUID, Description: createEventProp( SourceProp.cached, resp.response.Description, - ), + ), lastUpdateTimestamp: Math.floor(new Date().getTime() / 1000), EventBannerPicture: { lq: createEventProp( SourceProp.online, undefined, - resp.response.pic + "?type=low", - ), - hq: createEventProp( - SourceProp.online, - undefined, - resp.response.pic, + resp.response.pic + '?type=low', ), + hq: createEventProp(SourceProp.online, undefined, resp.response.pic), }, - Name: createEventProp( - SourceProp.cached, - resp.response.Name, - ), - StartDate: createEventProp( - 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, - ), + Name: createEventProp(SourceProp.cached, resp.response.Name), + StartDate: createEventProp(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( SourceProp.cached, NumToEventType(resp.response.Type), ), - Theme: createEventProp( - SourceProp.cached, - resp.response.Theme, - ), + Theme: createEventProp(SourceProp.cached, resp.response.Theme), FriendList: createEventProp( SourceProp.cached, resp.response.FriendList, @@ -215,7 +227,6 @@ async function getEvent( SourceProp.cached, resp.response.ButtonAction, ), - }; //BigDataManager.setEntry('events', event); @@ -319,8 +330,7 @@ function initUndefinedEvent(UUID: EventID): PAEvent { }, ButtonAction: createEventProp(SourceProp.online), }; - } - +} const EventManager = { getEvent, diff --git a/src/navigation/navigation.tsx b/src/navigation/navigation.tsx index 027604d..53f7db1 100644 --- a/src/navigation/navigation.tsx +++ b/src/navigation/navigation.tsx @@ -29,6 +29,7 @@ import {RootState, store as reduxStore} from '@redux/store'; import {Text} from '@gluestack-ui/themed'; import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; import {useEffect, useRef} from 'react'; +import {animated, useSpring} from '@react-spring/native'; export type RootStackNavigatorParamList = { Home: NavigatorScreenParams; @@ -95,6 +96,8 @@ function ChatsTabAnim(props: any) { const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat']; +//const AnimationView = animated(View); + function CustomTabBar(props: BottomTabBarProps) { const {state, navigation} = props; @@ -121,18 +124,43 @@ function CustomTabBar(props: BottomTabBarProps) { const allowedTabs = ['Profile', 'Calendar', 'Map', 'Chats']; const fadeAnim = useRef(new Animated.Value(1)).current; + /* + const [motionProps, api] = useSpring( + () => ({ + from: { + translateY: 0, + }, + }), + [], + ); */ useEffect(() => { if ( nestedRouteName === undefined || (allowedTabs.includes(routeName) && nestedRouteName === 'Overview') ) { + /*api.start({ + to: [ + { + translateY: 0, + }, + ], + }); */ + Animated.timing(fadeAnim, { toValue: 0, duration: 250, useNativeDriver: true, }).start(); } else { + /*api.start({ + to: [ + { + translateY: 100, + }, + ], + }); */ + Animated.timing(fadeAnim, { toValue: 100, duration: 150, @@ -146,6 +174,7 @@ function CustomTabBar(props: BottomTabBarProps) { style={{ backgroundColor: currentTheme.backgroundDark400, transform: [{translateY: fadeAnim}], + //transform: [{translateY: motionProps.translateY}], }}> + import('@pages/profile/profile').then(module => ({ + default: module.ProfileSettings, + })), +); export const ProfileTabName = 'Profile'; diff --git a/src/pages/calendar/calendar.tsx b/src/pages/calendar/calendar.tsx index 794b543..5365ebf 100644 --- a/src/pages/calendar/calendar.tsx +++ b/src/pages/calendar/calendar.tsx @@ -23,8 +23,6 @@ export function CalendarScreen() { return ( Calendar - - ); } diff --git a/src/pages/event/EventPage.tsx b/src/pages/event/EventPage.tsx index ec0eaa1..15acd35 100644 --- a/src/pages/event/EventPage.tsx +++ b/src/pages/event/EventPage.tsx @@ -1,7 +1,51 @@ -import {Text} from '@gluestack-ui/themed'; +import {Center, Spinner, Text, View} from '@gluestack-ui/themed'; -function EventPage() { - return EventPage; +import {EventID} from '@event/types'; + +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 ( + + + + ); +} + +function EventPage({route}: {route: {params: {eventID: EventID}}}) { + const {eventID} = route.params; + + const event = EventManager.getEventSelector(eventID); + + if (event.Name.source === SourceProp.online) return ; + + let image = event.EventBannerPicture.hq; + if (image === undefined) { + image = event.EventBannerPicture.lq; + } + + return ( + + { + <> + {event.Name.data} + Event banner + {event.Description.data} + + } + + ); } export default EventPage; diff --git a/src/pages/map/map.tsx b/src/pages/map/map.tsx index d5d5547..747dd32 100644 --- a/src/pages/map/map.tsx +++ b/src/pages/map/map.tsx @@ -81,7 +81,11 @@ export const Map = () => { } function onMapMoveFinished() { - getVisibleBounds(); + //console.log('xxxxxxxxxxxxxxxxxxxdad'); + + (async () => { + await getVisibleBounds(); + })(); } React.useEffect(() => {