From 486ef5186339ddce8ded7cd7b6c637a6486f697e Mon Sep 17 00:00:00 2001 From: Netcup Gituser Date: Sat, 16 Dec 2023 09:38:51 +0100 Subject: [PATCH] map --- src/components/MyIcon.tsx | 2 +- src/components/MyImage.tsx | 21 +++ src/components/MySuspenseFallback.tsx | 9 +- src/configs/appNonSaveVarReducer.ts | 9 +- src/event/EventManager.ts | 73 ++++++++--- src/event/types.ts | 6 +- src/helper/request.ts | 7 +- src/helper/storage/bdm/schemas/events.ts | 9 ++ src/lang/default.ts | 7 + src/lang/en.ts | 7 + src/navigation/navigation.tsx | 31 ++++- src/navigation/tabs/main/MapTab.tsx | 2 +- src/navigation/tabs/main/ProfileTab.tsx | 8 +- src/pages/calendar/calendar.tsx | 82 +++++++++++- src/pages/event/EventPage.tsx | 160 ++++++++++++++++++----- src/pages/map/map.tsx | 48 ++++++- src/pages/profile/profile.tsx | 27 +++- src/pages/welcome/login/login.tsx | 2 +- src/user/MyUserManager.ts | 2 + 19 files changed, 424 insertions(+), 88 deletions(-) diff --git a/src/components/MyIcon.tsx b/src/components/MyIcon.tsx index 5ecb418..958bdb7 100644 --- a/src/components/MyIcon.tsx +++ b/src/components/MyIcon.tsx @@ -4,7 +4,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; interface MyIconProps { name: string; size?: number | undefined; - color?: number | ColorValue | undefined + color?: number | ColorValue | undefined; } export function MyIcon({name, size, color}: MyIconProps) { diff --git a/src/components/MyImage.tsx b/src/components/MyImage.tsx index c292da8..3de8b3c 100644 --- a/src/components/MyImage.tsx +++ b/src/components/MyImage.tsx @@ -3,6 +3,11 @@ import {Image, ImageProps} from 'react-native'; type imageType = Blob | undefined; +export interface BasicImageProp { + source: SourceProp; + url?: string; + data?: imageType; +} interface CustomImageProps extends ImageProps { hq?: {source: SourceProp; data: imageType; url: string}; } @@ -11,4 +16,20 @@ function MyImage({...rest}: CustomImageProps) { return ; } +export function getImageURL( + image: (BasicImageProp | undefined)[], +): string | undefined { + for (let i = 0; i < image.length; i++) { + const img = image[i]; + + if (img === undefined) continue; + + if (img.source === SourceProp.online) { + if (img.url !== undefined) return img.url; + } + } + + return undefined; +} + export default MyImage; diff --git a/src/components/MySuspenseFallback.tsx b/src/components/MySuspenseFallback.tsx index 67c8ba2..abb1065 100644 --- a/src/components/MySuspenseFallback.tsx +++ b/src/components/MySuspenseFallback.tsx @@ -2,12 +2,5 @@ import {Suspense} from 'react'; import {Text} from 'react-native'; export function MySuspenseFallback({children}: {children: React.ReactNode}) { - console.log('MySuspenseFallback'); - - return ( - loading...}> - {children} - - ); + return loading...}>{children}; } diff --git a/src/configs/appNonSaveVarReducer.ts b/src/configs/appNonSaveVarReducer.ts index 8b3e202..ac4aa70 100644 --- a/src/configs/appNonSaveVarReducer.ts +++ b/src/configs/appNonSaveVarReducer.ts @@ -4,10 +4,10 @@ import {appStatus, non_save_vars} from './appNonSaveVar'; import {ThemeTokensType} from '@configs/colors'; import {chatEntity, roomId} from '@configs/chat/types'; -import {User} from '@user/types'; +import {SourceProp, User} from '@user/types'; import {AccountName, EventId} from './types'; import {PA_Point} from '@components/map/types'; -import {PAEvent} from '@event/types'; +import {PAEvent, createEventProp} from '@event/types'; export const appNonSaveVariablesSlice = createSlice({ name: 'non_save_vars', @@ -31,7 +31,10 @@ export const appNonSaveVariablesSlice = createSlice({ removeCachedEvent: (state, action: PayloadAction) => { delete state.cachedEvents[action.payload]; }, - + setJoinedEvent: (state, action: PayloadAction<{id: EventId, isJoined: number}>) => { + state.cachedEvents[action.payload.id].isJoined = createEventProp(SourceProp.cached, action.payload.isJoined); + }, + setSelectedChat: (state, action: PayloadAction) => { state.selectedChat = action.payload; }, diff --git a/src/event/EventManager.ts b/src/event/EventManager.ts index 4a12c6e..2c00de4 100644 --- a/src/event/EventManager.ts +++ b/src/event/EventManager.ts @@ -17,6 +17,8 @@ import { } from './types'; import {SourceProp} from '@user/types'; +import { appVarActions } from '@configs/appVarReducer'; +import { get } from '@gluestack-style/react'; let cachedEventList: EventID[] = []; @@ -117,6 +119,12 @@ async function getEvent( ), lastUpdateTimestamp: eve[eveDBKeys.lastUpdateTimestamp], EventBannerPicture, + isJoined: createEventProp(SourceProp.offline, eve[eveDBKeys.isJoined]), + minAge: createEventProp(SourceProp.offline, eve[eveDBKeys.minAge]), + AddressText: createEventProp( + SourceProp.offline, + eve[eveDBKeys.AddressText], + ), }; } } @@ -153,23 +161,10 @@ async function getEvent( const resp = { response: { - Name: 'test event', + Name: 'Bootshaus', 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' + @@ -183,10 +178,13 @@ async function getEvent( Type: 0, Theme: 0, FriendList: [], - UserLength: 5, - pic: 'https://www.w3schools.com/w3css/img_lights.jpg', + UserLength: 2121, + pic: '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', ButtonAction: - '{"url":"https://www.w3schools.com/w3css/img_lights.jpg"}', + '{"url":"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"}', + + minAge: 18, + AddressText: 'Bootshaus / Auenweg 173 / 51063 Cologne', }, }; @@ -227,6 +225,12 @@ async function getEvent( SourceProp.cached, resp.response.ButtonAction, ), + minAge: createEventProp(SourceProp.cached, resp.response.minAge), + AddressText: createEventProp( + SourceProp.cached, + resp.response.AddressText, + ), + isJoined: createEventProp(SourceProp.cached, 0), }; //BigDataManager.setEntry('events', event); @@ -329,13 +333,48 @@ function initUndefinedEvent(UUID: EventID): PAEvent { hq: createEventProp(SourceProp.online), }, ButtonAction: createEventProp(SourceProp.online), + isJoined: createEventProp(SourceProp.online), + minAge: createEventProp(SourceProp.online), + AddressText: createEventProp(SourceProp.online), }; } + + +function joinEvent(UUID: EventID): Promise { + + return new Promise((resolve, reject) => { + setTimeout(() => { + store.dispatch(appNonSaveVarActions.setJoinedEvent({id:UUID, isJoined: 1})); + + getEvent(UUID, true).then(() => { + resolve(true); + }).catch(() => { + reject(false); + }); + + },1000); + }); + +} + +function quitEvent(UUID: EventID): Promise { + + return new Promise((resolve, reject) => { + setTimeout(() => { + store.dispatch(appNonSaveVarActions.setJoinedEvent({id:UUID, isJoined: 0})); + resolve(true); + },1000); + }); + +} + const EventManager = { getEvent, getEventSelector, getEventSelectorPicture, initUndefinedEvent, + joinEvent, + quitEvent, }; export default EventManager; diff --git a/src/event/types.ts b/src/event/types.ts index f9c4b99..59f11ad 100644 --- a/src/event/types.ts +++ b/src/event/types.ts @@ -46,9 +46,9 @@ export interface PAEvent { UserLength: BasicEventProp; EventBannerPicture: EventBannerPicture; ButtonAction: BasicEventProp; - //isJoined - //minAge - //AddressText + isJoined: BasicEventProp; + minAge: BasicEventProp; + AddressText: BasicEventProp; } export function NumToEventType(num: number): EventType { diff --git a/src/helper/request.ts b/src/helper/request.ts index 4709059..35de46a 100644 --- a/src/helper/request.ts +++ b/src/helper/request.ts @@ -19,7 +19,7 @@ export const apiPath = { export enum apiBackendRequest { LOGIN = '/user/login', - APP_START = '/appstart', + APP_START = '/user', GET_USER_PROFILE = '/users/:accountName', LOGOUT = '/user/logout', SIGN_UP = '/user/signup', @@ -29,8 +29,7 @@ export enum apiBackendRequest { REGISTER_STEP_2 = '/verify/email/:xToken/:verifyId', REGISTER_STEP_FINAL = '/admin/users', REGISTER_STEP_FINAL_ACCOUNT_NAME_CHECK = '/admin/users/validation/accountname', - LOGIN = '/user', - APP_START = '/appstart', */ + LOGIN = '/user', */ } type requestGET = {[key: string]: string}; @@ -161,6 +160,8 @@ interface APP_START extends defaultRequest { path: apiBackendRequest.APP_START; response: { + accountName: AccountName; + username: Username; /* TokenValid: boolean; AccountName: AccountName; Username: Username; diff --git a/src/helper/storage/bdm/schemas/events.ts b/src/helper/storage/bdm/schemas/events.ts index da8da44..56bd2b9 100644 --- a/src/helper/storage/bdm/schemas/events.ts +++ b/src/helper/storage/bdm/schemas/events.ts @@ -21,6 +21,9 @@ enum keys { EventBannerPictureBinaryLQ = 'n', EventBannerPictureBinaryHQ = 'o', ButtonAction = 'p', + isJoined = 'q', + minAge = 'r', + AddressText = 's', } const name = 'events'; @@ -43,6 +46,9 @@ const propsType: {[key in keyof typeof propsDefault]: string} = { [keys.EventBannerPictureBinaryLQ]: 'data', [keys.EventBannerPictureBinaryHQ]: 'data', [keys.ButtonAction]: 'string', + [keys.isJoined]: 'int', + [keys.minAge]: 'int', + [keys.AddressText]: 'string', }; const propsDefault = { @@ -62,6 +68,9 @@ const propsDefault = { [keys.EventBannerPictureBinaryLQ]: new ArrayBuffer(0), [keys.EventBannerPictureBinaryHQ]: new ArrayBuffer(0), [keys.ButtonAction]: '', + [keys.isJoined]: 0, + [keys.minAge]: 0, + [keys.AddressText]: '', }; const thisSchema: databaseConf = { diff --git a/src/lang/default.ts b/src/lang/default.ts index 28261bf..83d9f9a 100644 --- a/src/lang/default.ts +++ b/src/lang/default.ts @@ -6,6 +6,13 @@ interface LangDetails { export default interface LangFormat { details: LangDetails; appName: string; + event: { + info: string; + details: string; + tickets: string; + join: string; + quit: string; + }; navigation: { home: { profile: { diff --git a/src/lang/en.ts b/src/lang/en.ts index ad2d530..ebf75b6 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -5,6 +5,13 @@ export const lang: LangFormat = { langCode: 'en', langName: 'English', }, + event: { + info: 'INFO', + details: 'DETAILS', + tickets: 'Tickets', + join: 'Join', + quit: 'Quit', + }, appName: 'Party App', navigation: { home: { diff --git a/src/navigation/navigation.tsx b/src/navigation/navigation.tsx index 53f7db1..1810bab 100644 --- a/src/navigation/navigation.tsx +++ b/src/navigation/navigation.tsx @@ -16,7 +16,7 @@ import ProfileTab, { ProfileStackNavigatorParamList, } from './tabs/main/ProfileTab'; import {FadeInView} from '@helper/animations'; -import {Animated, View} from 'react-native'; +import {Animated, AppState, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import { RegistrationScreenAnim, @@ -30,6 +30,7 @@ import {Text} from '@gluestack-ui/themed'; import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; import {useEffect, useRef} from 'react'; import {animated, useSpring} from '@react-spring/native'; +import {apiBackendRequest, makeRequest} from '@helper/request'; export type RootStackNavigatorParamList = { Home: NavigatorScreenParams; @@ -43,6 +44,32 @@ export default function Navigation() { const currentUser = reduxStore.getState().appVariables.preferences.selectedAccount; + useEffect(() => { + console.log('APP NAVIGATION'); + + makeRequest({ + path: apiBackendRequest.APP_START, + response: { + accountName: '', + username: '', + /* + AccountName: '', + Description: '', + FollowersCount: 0, + FollowingCount: 0, + Username: '', + XpLevel: 0, + XpPoints: 0, + AvatarUrl: '', + AccountStatus: 0, + Events: {}, + TokenValid: false, */ + }, + }).then(response => { + console.log(response); + }); + }, []); + return ( import('@pages/profile/help').then(module => ({default: module.Help})), ); +const LazyAbout = lazy(() => + import('@pages/profile/about').then(module => ({default: module.About})), +); + const Help = () => { return ( @@ -40,10 +44,6 @@ const Help = () => { ); }; -const LazyAbout = lazy(() => - import('@pages/profile/about').then(module => ({default: module.About})), -); - const About = () => { return ( diff --git a/src/pages/calendar/calendar.tsx b/src/pages/calendar/calendar.tsx index 5365ebf..7707f10 100644 --- a/src/pages/calendar/calendar.tsx +++ b/src/pages/calendar/calendar.tsx @@ -1,19 +1,58 @@ -import {MyScreenContainer} from '@components/MyScreenContainer'; +import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; import {Text} from '@gluestack-ui/themed'; import {RootState} from '@redux/store'; +import {Image} from 'react-native'; +import {FlatList} from 'react-native'; import {View} from 'react-native'; import {useSelector} from 'react-redux'; +const baseUrls = [ + 'https://www.w3schools.com/w3css/img_lights.jpg', + 'https://suburbanmen.com/wp-content/uploads/2021/12/instagram-crush-emilia-bte-20211202-125.jpg', + 'https://i.ytimg.com/vi/X0I6PbIWmPo/hqdefault.jpg', + 'https://i.ytimg.com/vi/RDrJ1VmRi0w/hqdefault.jpg', +]; + +const events: ArrayLike | null | undefined = []; + +for (let i = 1; i <= 100; i++) { + const randomUrlIndex = Math.floor(Math.random() * baseUrls.length); + + events.push({ + id: i, + url: baseUrls[randomUrlIndex], + title: 'Bootshaus', + description: '01.12.2023 20:00 Uhr', + }); +} + +/* const events = [ { + id: 1, + url: 'https://www.w3schools.com/w3css/img_lights.jpg', title: 'Bootshaus', description: '01.12.2023 20:00 Uhr', }, { + id: 2, + url: 'https://suburbanmen.com/wp-content/uploads/2021/12/instagram-crush-emilia-bte-20211202-125.jpg', title: 'Bootshaus', description: '01.12.2023 20:00 Uhr', }, -]; + { + id: 3, + url: 'https://i.ytimg.com/vi/X0I6PbIWmPo/hqdefault.jpg', + title: 'Bootshaus', + description: '01.12.2023 20:00 Uhr', + }, + { + id: 4, + url: 'https://i.ytimg.com/vi/RDrJ1VmRi0w/hqdefault.jpg', + title: 'Bootshaus', + description: '01.12.2023 20:00 Uhr', + }, +];*/ export function CalendarScreen() { const currentTheme = useSelector( @@ -21,8 +60,41 @@ export function CalendarScreen() { ); return ( - - Calendar - + + `${item.id}${index}`} + renderItem={({item}) => ( + + + + + + + + {item.title} + + {item.description} + + + )} + /> + ); } diff --git a/src/pages/event/EventPage.tsx b/src/pages/event/EventPage.tsx index 353f56e..65829e2 100644 --- a/src/pages/event/EventPage.tsx +++ b/src/pages/event/EventPage.tsx @@ -1,12 +1,16 @@ -import {Center, Spinner, Text, View} from '@gluestack-ui/themed'; +import {Box, Center, Spinner, Text, View} from '@gluestack-ui/themed'; 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'; +import MyImage, {getImageURL} from '@components/MyImage'; +import {Image, Linking} from 'react-native'; +import {useEffect, useState} from 'react'; +import {useSelector} from 'react-redux'; +import {RootState} from '@redux/store'; +import {MyButton} from '@components/MyButton'; function EventPageLoading() { // center also horizontally and vertically @@ -17,48 +21,138 @@ function EventPageLoading() { ); } -function EventPage({route}: {route: {params: {eventID: EventID}}}) { +function EventPage({ + route, + navigation, +}: { + route: {params: {eventID: EventID}}; + navigation: any; +}) { const {eventID} = route.params; const event = EventManager.getEventSelector(eventID); - if (event.Name.source === SourceProp.online) return ; + const lang = useSelector((state: RootState) => state.appVariables.lang.event); - let image = event.EventBannerPicture.hq; - if (image === undefined) { - image = event.EventBannerPicture.lq; - } - - const imageUrl = - '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'; + const [isJoining, setIsJoining] = useState(false); // for join button (loading) useEffect(() => { - // Fetch the image dimensions and calculate the aspect ratio - Image.getSize( - imageUrl, - (width, height) => { - const calculatedAspectRatio = width / height; - setAspectRatio(calculatedAspectRatio); - }, - error => { - console.error('Error getting image size: ', error); - }, - ); - }, [imageUrl]); + navigation.setOptions({ + title: event.Name.data, + }); + }, [event.Name.data]); + + if (event.Name.source === SourceProp.online) return ; + + const imageUrl = getImageURL([ + event.EventBannerPicture.hq, + event.EventBannerPicture.lq, + ]); + + const isJoinedToEvent = event.isJoined.data === 1; + + //const imageUrl = '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'; return ( { <> - {event.Name.data} - Event banner - {event.Description.data} + + + + + {lang.info} + + + {event.Description.data} + + + + {lang.details} + + + {event.UserLength.data} + {event.minAge.data} + {event.AddressText.data} + + + { + // open link in browser + + if (event.ButtonAction.data === undefined) return; + { + const button = JSON.parse(event.ButtonAction.data); + + if (button.url !== undefined) Linking.openURL(button.url); + } + }} + /> + + { + setIsJoining(true); + + if (!isJoinedToEvent) { + EventManager.joinEvent(eventID) + .then(() => { + setIsJoining(false); + }) + .catch(() => { + setIsJoining(false); + }); + } else { + EventManager.quitEvent(eventID) + .then(() => { + setIsJoining(false); + }) + .catch(() => { + setIsJoining(false); + }); + } + }} + /> + + + debug + + + {event.StartDate.data} + {event.EndDate.data} + + } diff --git a/src/pages/map/map.tsx b/src/pages/map/map.tsx index 747dd32..eb65dca 100644 --- a/src/pages/map/map.tsx +++ b/src/pages/map/map.tsx @@ -7,11 +7,18 @@ import DisplayMarkerList from '@components/map/DisplayMarkerList'; import getLocationData from '@components/map/cluster/getData'; import {PA_Point} from '@components/map/types'; -import {store} from '@redux/store'; +import {RootState, store} from '@redux/store'; import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer'; import {Position} from '@rnmapbox/maps/src/types/Position'; import {Dimensions} from 'react-native'; +import {MyIconButton} from '@components/MyButton'; +import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; +import {MyIcon} from '@components/MyIcon'; +import {useSelector} from 'react-redux'; +import {Button, ButtonIcon} from '@gluestack-ui/themed'; + +import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; Mapbox.setAccessToken( 'pk.eyJ1IjoidGl0YW5pdW1iYWNoIiwiYSI6ImNscGgzZGJxMDAwbHQyaXA2N3BtOWUxbWkifQ.x-f8JJxwQHWmPFI3P6Qn-w', @@ -25,6 +32,10 @@ export const Map = () => { //const [mapMarkers, setMapMarkers] = useState([]); // Add useState for visibleBounds const [lastDataRerender, setLastDataRerender] = useState(0); // Add useState for visibleBounds + const colors = useSelector( + (state: RootState) => state.nonSaveVariables.theme.colors, + ); + const getVisibleBounds = async () => { // return when lastDataRerender is 300ms ago const now = Date.now(); @@ -124,6 +135,14 @@ export const Map = () => { projection="globe"> + {}} + /> ); @@ -143,3 +162,30 @@ const styles = StyleSheet.create({ flex: 1, }, }); + +function MapIconButton({ + onPress, + MyIconProps, +}: { + onPress: () => void; + MyIconProps: { + name: string; + color?: string; + size: number; + backgroundColor?: string; + }; +}) { + return ( + + + + ); +} diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx index 54d66cf..dd97862 100644 --- a/src/pages/profile/profile.tsx +++ b/src/pages/profile/profile.tsx @@ -17,6 +17,8 @@ import {MyTouchableOpacity} from '@components/MyTouchableOpacity'; import UserManager from '@user/UserManager'; import MyUserManager from '@user/MyUserManager'; import {apiBackendRequest, makeRequest} from '@helper/request'; +import reactStringReplace from 'react-string-replace'; +import {passwordOptions, userNameOptions} from '@configs/types'; function UserAvatar() { return ( @@ -262,13 +264,22 @@ export function UpdateUsername() { ); const navigation = useNavigation(); - // TODO: get username from current logged in user - const username = 'Max Mustermann'; + const user = UserManager.getUserSelector( + useSelector( + (state: RootState) => state.appVariables.preferences.selectedAccount, + ), + ); - const [newUsername, setNewUsername] = useState(username); + const [newUsername, setNewUsername] = useState(user.Username.data || ''); + + const info2Text = reactStringReplace( + lang.changeUsername.info2, + '${minLength}', + () => userNameOptions.minLength.toString(), + ); useEffect(() => { - const changed = username !== newUsername; + const changed = user.Username.data !== newUsername; navigation.setOptions({ headerRight: () => @@ -299,7 +310,7 @@ export function UpdateUsername() { {lang.changeUsername.info} - {lang.changeUsername.info2} + {info2Text} ); } @@ -318,6 +329,10 @@ export function UpdatePassword() { const [newPassword, setNewPassword] = useState(''); const [repeatNewPassword, setRepeatNewPassword] = useState(''); + const infoText = reactStringReplace(lang.info, '${minLength}', () => + passwordOptions.minLength.toString(), + ); + useEffect(() => { const passwordChanged = currentPassword.length > 0 && @@ -375,7 +390,7 @@ export function UpdatePassword() { - {lang.info} + {infoText} {lang.info2} diff --git a/src/pages/welcome/login/login.tsx b/src/pages/welcome/login/login.tsx index d1e3ab9..d8a46eb 100644 --- a/src/pages/welcome/login/login.tsx +++ b/src/pages/welcome/login/login.tsx @@ -27,7 +27,7 @@ export function Login() { const [isLoading, setIsLoading] = useState(false); const [accountName, setAccountName] = useState('anna'); - const [password, setPassword] = useState('testtesttest'); + const [password, setPassword] = useState('testtesttest1#S'); const loginEnabled = accountName.length > 0 && password.length > 0; diff --git a/src/user/MyUserManager.ts b/src/user/MyUserManager.ts index e60706a..f7d2c98 100644 --- a/src/user/MyUserManager.ts +++ b/src/user/MyUserManager.ts @@ -41,6 +41,8 @@ function createNewMyUser( path: apiBackendRequest.APP_START, requestGET: {':AccountName': AccountName}, response: { + accountName: '', + username: '', /* AccountName: '', Description: '',