test

2023-12-11 21:08:41 +01:00 · 2023-12-11 21:08:41 +01:00 · 1ab219cdf7
parent b01bbf3a86
commit 1ab219cdf7
10 changed files with 258 additions and 143 deletions
--- a/src/components/MyImage.tsx
+++ 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 <Image {...rest} />;
+}
+
+export default MyImage;
--- 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 (
-    <React.Fragment>
-      {eventMapMarkers.map((marker: PA_Point) => {
-        return marker.type === 'event' || marker.type === 'eventStore' ? (
-          <MarkerView
-            key={marker.id}
-            anchor={{x: 0.5, y: 1}}
-            coordinate={[marker.longitude, marker.latitude]}
-            allowOverlap={true}>
-            <EventMarker marker={marker} />
-          </MarkerView>
-        ) : (
-          <MarkerView
-            key={marker.id}
-            anchor={{x: 0.5, y: 0.5}}
-            coordinate={[marker.longitude, marker.latitude]}
-            allowOverlap={true}>
-            <CircleNumber number={marker.cluster} />
-          </MarkerView>
-        );
-      })}
-    </React.Fragment>
-  );
+  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' ? (
+        <MarkerView
+          key={marker.id}
+          anchor={{x: 0.5, y: 1}}
+          coordinate={[marker.longitude, marker.latitude]}
+          allowOverlap={true}>
+          <EventMarker marker={marker} />
+        </MarkerView>
+      ) : (
+        <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({
@ -51,4 +61,4 @@ const styles = StyleSheet.create({
  },
 });

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

--- 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<string>; */

-      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,
--- 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<HomeStackNavigatorParamList>;
@ -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}],
      }}>
      <View
        style={{
--- a/src/navigation/tabs/main/ProfileTab.tsx
+++ b/src/navigation/tabs/main/ProfileTab.tsx
@ -8,12 +8,18 @@ import {MyIconButton} from '@components/MyButton';
 import {useNavigation} from '@react-navigation/native';
 import {
  ProfileOverview,
-  ProfileSettings,
  UpdatePassword,
  UpdateUsername,
 } from '@pages/profile/profile';
 import {Help} from '@pages/profile/help';
 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';

--- a/src/pages/calendar/calendar.tsx
+++ b/src/pages/calendar/calendar.tsx
@ -23,8 +23,6 @@ export function CalendarScreen() {
  return (
    <MyScreenContainer>
      <Text>Calendar</Text>
-
-      <View style={{}}></View>
    </MyScreenContainer>
  );
 }
--- 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 <Text>EventPage</Text>;
+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 (
+    <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;
--- 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(() => {