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

login and sign up with account

master
Netcup Gituser 2023-12-09 23:57:16 +01:00
parent 0c25cc8e36
commit aebc1e4b79
29 changed files with 832 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/MyButton.tsx
View File

@ -10,16 +10,22 @@ import LinearGradient from 'react-native-linear-gradient';
import {MyIcon} from './MyIcon'; import {MyIcon} from './MyIcon';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import {RootState} from '@redux/store'; import {RootState} from '@redux/store';
import {Text} from '@gluestack-ui/themed'; import {Spinner, Text} from '@gluestack-ui/themed';
import {MyTouchableOpacity} from './MyTouchableOpacity'; import {MyTouchableOpacity} from './MyTouchableOpacity';
import {TouchableOpacityProps} from 'react-native';
interface MyImageButtonProps { interface MyImageButtonProps extends TouchableOpacityProps {
image: ImageSourcePropType; image: ImageSourcePropType;
imageStyle?: StyleProp<ImageStyle>; imageStyle?: StyleProp<ImageStyle>;
text: string; text: string;
} }
export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) { export function MyImageButton({
image,
imageStyle,
text,
...rest
}: MyImageButtonProps) {
const currentTheme = useSelector( const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.theme.colors, (state: RootState) => state.nonSaveVariables.theme.colors,
); );
@ -32,7 +38,8 @@ export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) {
padding: 10, padding: 10,
flexDirection: 'row', flexDirection: 'row',
borderRadius: 10, borderRadius: 10,
}}> }}
{...rest}>
<Image source={image} style={imageStyle} /> <Image source={image} style={imageStyle} />
<Text <Text
bold bold
@ -53,6 +60,7 @@ interface MyButtonProps {
text: string; text: string;
onPress?: () => void; onPress?: () => void;
disabled?: boolean; disabled?: boolean;
isLoading?: boolean;
} }
export function MyButton({ export function MyButton({
@ -61,15 +69,21 @@ export function MyButton({
text, text,
onPress, onPress,
disabled, disabled,
isLoading,
...rest
}: MyButtonProps) { }: MyButtonProps) {
const currentTheme = useSelector( const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.theme, (state: RootState) => state.nonSaveVariables.theme,
); );
const ButtonText = () => ( const ButtonText = () => (
<Text color={currentTheme.colors.white} bold size="lg"> <View style={{flexDirection: 'row', gap: 10, alignItems: 'center'}}>
{text} {isLoading && <Spinner color="$primary100" />}
</Text>
<Text color="$white" bold size="lg">
{text}
</Text>
</View>
); );
return ( return (
@ -80,8 +94,9 @@ export function MyButton({
borderRadius: 10, borderRadius: 10,
}, },
]} ]}
disabled={disabled} disabled={disabled || isLoading}
onPress={onPress}> onPress={onPress}
{...rest}>
{type === 'primary' ? ( {type === 'primary' ? (
<LinearGradient <LinearGradient
colors={[ colors={[

131
src/components/MyToast.tsx Normal file
View File

@ -0,0 +1,131 @@
import {Alert, CloseIcon, useToast} from '@gluestack-ui/themed';
import {HStack} from '@gluestack-ui/themed';
import {Text} from '@gluestack-ui/themed';
import {VStack} from '@gluestack-ui/themed';
import {AlertIcon} from '@gluestack-ui/themed';
import {MyButton} from './MyButton';
const Toast = () => {
const toast = useToast();
const ToastDetails = [
{
title: 'Account verified',
variant: 'solid',
description: 'Thanks for signing up with us.',
isClosable: true,
},
{
title: 'Something went wrong',
variant: 'subtle',
description: 'Please create a support ticket from the support page',
},
{
title: 'Network connection restored',
variant: 'left-accent',
description:
'This is to inform you that your network connectivity is restored',
isClosable: true,
},
{
title: 'Invalid email address',
variant: 'top-accent',
description: 'Please enter a valid email address',
},
{
title: 'Invalid email address',
variant: 'outline',
description: 'Please enter a valid email address',
},
];
};
interface toastType {
id?: string;
action?: 'info' | 'error' | 'success' | 'warning' | 'muted' | undefined;
variant: 'solid' | 'outline' | 'accent' | undefined;
title: any;
description: any;
isClosable?: boolean;
rest: any;
}
interface alertType extends toastType {
id: string;
}
function showToast(toast: any, item: toastType) {
const ToastAlert = ({
id,
action,
variant,
title,
description,
isClosable,
rest,
}: alertType) => (
<Alert
maxWidth="95%"
alignSelf="center"
flexDirection="row"
action={action}
variant={variant}
{...rest}>
<VStack space="xs" flexShrink={1} w="100%">
<HStack
flexShrink={1}
alignItems="center"
justifyContent="space-between">
<HStack space="sm" flexShrink={1} alignItems="center">
<AlertIcon />
<Text
fontWeight="medium"
flexShrink={1}
color={
variant === 'solid'
? '$white'
: variant !== 'outline'
? '$black'
: null
}>
{title}
</Text>
</HStack>
{isClosable ? (
<MyButton
type="secondary"
text="X"
onPress={() => toast.close(id)}
/>
) : /*<IconButton
variant="unstyled"
icon={<CloseIcon size="3" />}
_icon={{
color: variant === 'solid' ? 'lightText' : 'darkText',
}}
onPress={() => toast.close(id)}
/> */
null}
</HStack>
<Text
px="$6"
color={
variant === 'solid'
? '$white'
: variant !== 'outline'
? '$black'
: null
}>
{description}
</Text>
</VStack>
</Alert>
);
toast.show({
render: ({id}: {id: string}) => {
return <ToastAlert id={id} {...item} />;
},
});
}
export default showToast;

27
src/components/MyTouchableOpacity.tsx
View File

@ -5,39 +5,20 @@ import {
GestureResponderEvent, GestureResponderEvent,
StyleProp, StyleProp,
TouchableOpacity, TouchableOpacity,
TouchableOpacityProps,
ViewStyle, ViewStyle,
} from 'react-native'; } from 'react-native';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
interface CustomTouchableProps { interface CustomTouchableProps extends TouchableOpacityProps {}
children?: ReactNode;
onPress?: () => void;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
style?: StyleProp<ViewStyle>;
disabled?: boolean;
accessibilityRole?: AccessibilityRole | undefined;
}
export function MyTouchableOpacity({ export function MyTouchableOpacity({children, ...rest}: CustomTouchableProps) {
children,
onPress,
onLongPress,
style,
disabled,
accessibilityRole,
}: CustomTouchableProps) {
const currentTheme = useSelector( const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.theme.opacity, (state: RootState) => state.nonSaveVariables.theme.opacity,
); );
return ( return (
<TouchableOpacity <TouchableOpacity activeOpacity={currentTheme[80]} {...rest}>
disabled={disabled}
onPress={onPress}
onLongPress={onLongPress}
style={style}
activeOpacity={currentTheme[80]}
accessibilityRole={accessibilityRole}>
{children} {children}
</TouchableOpacity> </TouchableOpacity>
); );

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

@ -1,25 +1,24 @@
import React from 'react'; import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native'; import {View, Text, Image, StyleSheet} from 'react-native';
import {PA_Point} from './cluster/getData';
import {MarkerView} from '@rnmapbox/maps'; import {MarkerView} from '@rnmapbox/maps';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import {RootState, store} from '@redux/store'; import {RootState, store} from '@redux/store';
import CircleNumber from './cluster/Cluster'; import CircleNumber from './cluster/Cluster';
import {EventMarker} from './EventMarker'; import {EventMarker} from './EventMarker';
import {PA_Point} from './types';
function DisplayMarkerList(props: {markers: PA_Point[]}) { function DisplayMarkerList() {
const eventMapMarkers = props.markers; const eventMapMarkers = useSelector(
/*const eventMapMarkers = useSelector(
(state: RootState) => state.nonSaveVariables.eventMapMarkers, (state: RootState) => state.nonSaveVariables.eventMapMarkers,
);*/ );
const colors = store.getState().nonSaveVariables.theme.colors; const colors = store.getState().nonSaveVariables.theme.colors;
return ( return (
<React.Fragment> <React.Fragment>
{eventMapMarkers.map((marker: PA_Point) => { {eventMapMarkers.map((marker: PA_Point) => {
return marker.type === 'event' ? ( return marker.type === 'event' || marker.type === 'eventStore' ? (
<MarkerView <MarkerView
key={marker.id} key={marker.id}
anchor={{x: 0.5, y: 1}} anchor={{x: 0.5, y: 1}}

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

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import {Animated} from 'react-native'; import {Animated, TouchableOpacity} from 'react-native';
import colors from '@configs/colors'; import colors from '@configs/colors';
import {View, Image, Text, StyleSheet} from 'react-native'; import {View, Image, Text, StyleSheet} from 'react-native';
import {PA_Point} from './cluster/getData'; import {PA_Point, PA_Point_Event, PA_Point_EventStore} from './types';
import {store} from '@redux/store'; import {store} from '@redux/store';
import { import {
@ -15,11 +15,17 @@ import {
} from '@gluestack-ui/themed'; } from '@gluestack-ui/themed';
import tate from '@assets/tate.jpg'; import tate from '@assets/tate.jpg';
import {RootScreenNavigationProp} from '@navigation/navigation';
import {useNavigation} from '@react-navigation/native';
export function EventMarker(props: {marker: PA_Point}) { type EventType = PA_Point_Event | PA_Point_EventStore;
export function EventMarker(props: {marker: EventType}) {
const marker = props.marker; const marker = props.marker;
const colors = store.getState().nonSaveVariables.theme.colors; const colors = store.getState().nonSaveVariables.theme.colors;
const navigation = useNavigation<RootScreenNavigationProp>();
const fadeAnim = React.useRef(new Animated.Value(0)).current; const fadeAnim = React.useRef(new Animated.Value(0)).current;
const fadeAnim2 = React.useRef(new Animated.Value(0.9)).current; const fadeAnim2 = React.useRef(new Animated.Value(0.9)).current;
@ -39,9 +45,38 @@ export function EventMarker(props: {marker: PA_Point}) {
}).start(); }).start();
}, [fadeAnim2]); }, [fadeAnim2]);
return (
<Animated.View
style={{
...(marker.theme === 1 ? styles.marker1 : styles.marker),
backgroundColor: colors.backgroundDark400,
opacity: fadeAnim,
transform: [{scale: fadeAnim2}],
margin: 50,
}}>
<TouchableOpacity
onPress={() => {
console.log('marker pressed');
navigation.navigate('Home', {
screen: 'Map',
params: {screen: 'Event', params: {eventID: marker.id}},
});
}}>
{marker.theme === 1 ? (
<MarkerTheme1 marker={marker} />
) : (
<MarkerTheme0 marker={marker} />
)}
</TouchableOpacity>
{/*<Text style={styles.markerText}>{marker.type}</Text>*/}
</Animated.View>
);
}
function getEventAvatars(marker: EventType, length: number) {
const avatars = [ const avatars = [
{ {
src: 'https://image.stern.de/32707724/t/o5/v2/w1440/r1.7778/-/andrew-tate.jpg', src: tate,
alt: 'Sandeep Srivastva', alt: 'Sandeep Srivastva',
color: '$emerald600', color: '$emerald600',
}, },
@ -66,65 +101,100 @@ export function EventMarker(props: {marker: PA_Point}) {
color: '$red400', color: '$red400',
}, },
]; ];
const extraAvatars = avatars.slice(3); const extraAvatars = avatars.slice(length);
const remainingCount = extraAvatars.length; const remainingCount = extraAvatars.length > 99 ? 99 : extraAvatars.length;
return {avatars, remainingCount};
}
function MarkerTheme1({marker}: {marker: EventType}) {
const colors = store.getState().nonSaveVariables.theme.colors;
return ( return (
<Animated.View <React.Fragment>
style={{ <Image source={tate} style={styles.markerImage1} />
...styles.marker, </React.Fragment>
backgroundColor: colors.backgroundDark400, );
opacity: fadeAnim, }
transform: [{scale: fadeAnim2}],
}}> function MarkerTheme0({marker}: {marker: EventType}) {
<AvatarGroup> const colors = store.getState().nonSaveVariables.theme.colors;
{avatars.slice(0, 3).map((avatar, index) => {
return ( const {avatars, remainingCount} = getEventAvatars(marker, 3);
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 <Avatar
key={index} key={index}
size="sm" size="sm"
borderColor="$black" borderColor="$backgroundDark400"
borderWidth="$2" borderWidth="$2"
bg={avatar.color} bg={avatar.color}>
sx={{
_dark: {
borderColor: '$black',
},
}}>
<AvatarFallbackText>{avatar.alt}</AvatarFallbackText> <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
<AvatarImage source={avatar.src} alt={avatar.alt} />
</Avatar> </Avatar>
); )),
})} ]}
<Avatar
size="sm"
borderColor="$white"
borderWidth="$2"
bg="$gray600"
sx={{
_dark: {
borderColor: '$black',
},
}}>
<AvatarFallbackText>{'+ ' + remainingCount + ''}</AvatarFallbackText>
</Avatar>
</AvatarGroup> </AvatarGroup>
<Image </React.Fragment>
source={tate}
style={{width: 100, height: 100, alignSelf: 'center'}}
/>
<Text style={styles.markerText}>{marker.type}</Text>
</Animated.View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
marker: { marker: {
padding: 5, padding: 3,
borderRadius: 5, borderRadius: 10,
},
marker1: {
padding: 3,
borderRadius: (90 + 3 * 2) / 2,
},
markerImage: {
borderRadius: 10 - 3,
width: 160,
height: 100,
alignSelf: 'center',
},
markerImage1: {
borderRadius: 90 / 2,
width: 90,
height: 90,
alignSelf: 'center',
}, },
markerText: { markerText: {
color: 'white', color: 'white',
fontWeight: 'bold', fontWeight: 'bold',
}, },
avatarGroup: {
position: 'absolute',
top: -8 - 5,
//right: -8 - 5,
right: -5,
},
}); });

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

@ -1,32 +1,14 @@
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';
interface PA_Point_Cluster {
latitude: number;
longitude: number;
cluster: number;
type: 'cluster';
id: string;
}
interface PA_Point_Event {
latitude: number;
longitude: number;
type: 'event';
id: number;
}
type PA_Point = PA_Point_Cluster | PA_Point_Event;
export type {PA_Point_Cluster, PA_Point_Event, PA_Point};
const createChecksum = (ids: (number | string)[]) => { const createChecksum = (ids: (number | string)[]) => {
let checksum = 0; let checksum = 0;
for (const id of ids.sort()) { for (const id of ids.sort()) {
const value = typeof id === 'string' ? parseInt(id, 36) : id; const value = typeof id === 'string' ? parseInt(id, 36) : id;
checksum ^= value & 0xFFFF; checksum ^= value & 0xffff;
} }
return checksum; return checksum;
}; };
@ -68,42 +50,33 @@ const clusterMarkers = (markers: PA_Point[], threshold: number) => {
longitudes.reduce((a, b) => a + b, 0) / longitudes.length; longitudes.reduce((a, b) => a + b, 0) / longitudes.length;
const sumValues = cluster.reduce((sum, marker) => { const sumValues = cluster.reduce((sum, marker) => {
if (marker.type === 'event') { if (marker.type === 'event') {
if(isEvent === 0) if (isEvent === 0) isEvent = 1;
isEvent = 1; else if (isEvent === 1) isEvent = -1;
else if(isEvent === 1)
isEvent = -1;
return sum + 1}; return sum + 1;
}
isEvent = -1; isEvent = -1;
marker = marker as PA_Point_Cluster; marker = marker as PA_Point_Cluster;
return sum + (marker.cluster || 0); return sum + (marker.cluster || 0);
}, 0); }, 0);
if(isEvent === 1) if (isEvent === 1) {
{ return cluster[0] as PA_Point_Event;
return {
latitude: centerLatitude,
longitude: centerLongitude,
type: 'event',
id: cluster[0].id,
} as PA_Point;
} }
const ids = cluster.map(marker => marker.id); const ids = cluster.map(marker => marker.id);
const idChecksum = createChecksum(ids); const idChecksum = createChecksum(ids);
return { return {
latitude: centerLatitude, latitude: centerLatitude,
longitude: centerLongitude, longitude: centerLongitude,
type: 'cluster', type: 'cluster',
cluster: sumValues, cluster: sumValues,
id: idChecksum.toString(), id: idChecksum.toString(),
} as PA_Point; } as PA_Point_Cluster;
}); });
return centerPoints; return centerPoints;
@ -118,18 +91,16 @@ const clusterMarkers = (markers: PA_Point[], threshold: number) => {
};*/ };*/
const calculateRadius = (bounds: [Position, Position]) => { const calculateRadius = (bounds: [Position, Position]) => {
const distanceInMeters = getDistance(
{latitude: bounds[0][0], longitude: bounds[0][1]},
const distanceInMeters = getDistance( {latitude: bounds[1][0], longitude: bounds[1][1]},
{ latitude: bounds[0][0], longitude: bounds[0][1] }, );
{ latitude: bounds[1][0], longitude: bounds[1][1] } return distanceInMeters / 600000 / 1.5 /*android bug fix for roteration*/;
);
return distanceInMeters/600000/(1.5/*android bug fix for roteration*/);
}; };
function getLocationData( function getLocationData(
bounds: [Position, Position], zoomLevel: number bounds: [Position, Position],
zoomLevel: number,
): Promise<{locations: PA_Point[]} | undefined> { ): Promise<{locations: PA_Point[]} | undefined> {
if (bounds === undefined) return Promise.resolve(undefined); if (bounds === undefined) return Promise.resolve(undefined);
@ -148,43 +119,51 @@ function getLocationData(
{"latitude": 50.1109, "longitude": 8.6821, "cluster": 23, "type": "cluster", "id": "467132"}, {"latitude": 50.1109, "longitude": 8.6821, "cluster": 23, "type": "cluster", "id": "467132"},
{"latitude": 51.0493, "longitude": 13.7384, "cluster": 8, "type": "cluster", "id": "842906"}, {"latitude": 51.0493, "longitude": 13.7384, "cluster": 8, "type": "cluster", "id": "842906"},
{"latitude": 49.0069, "longitude": 8.4037, "cluster": 46, "type": "cluster", "id": "346708"},*/ {"latitude": 49.0069, "longitude": 8.4037, "cluster": 46, "type": "cluster", "id": "346708"},*/
{"latitude": 51.9674, "longitude": 7.6194, "type": "event", "id": 203867}, {
{"latitude": 50.7753, "longitude": 6.0839, "type": "event", "id": 501298}, latitude: 51.9674,
{"latitude": 53.0793, "longitude": 8.8017, "type": "event", "id": 763159}, longitude: 7.6197,
{"latitude": 48.7758, "longitude": 9.1829, "type": "event", "id": 917425}, type: 'event',
{"latitude": 52.3759, "longitude": 9.732, "type": "event", "id": 635028}, id: "203868",
{"latitude": 51.512, "longitude": 7.4653, "type": "event", "id": 841592}, theme: 1,
{"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.9674,
{"latitude": 51.8049, "longitude": 10.3351, "type": "event", "id": 273495}, longitude: 7.6196,
{"latitude": 50.3213, "longitude": 11.8676, "type": "event", "id": 699318}, type: 'event',
{"latitude": 49.8765, "longitude": 6.6695, "type": "event", "id": 159627}, id: "203866",
{"latitude": 52.2651, "longitude": 7.3085, "type": "event", "id": 903716}, theme: 1,
{"latitude": 53.9638, "longitude": 12.413, "type": "event", "id": 487612}, },
{"latitude": 50.9321, "longitude": 9.1847, "type": "event", "id": 827464}, {latitude: 51.9674, longitude: 7.6194, type: 'event', id: "203867"},
{"latitude": 52.4378, "longitude": 13.2847, "type": "event", "id": 931845}, {latitude: 50.7753, longitude: 6.0839, type: 'event', id: "501298"},
{"latitude": 49.4644, "longitude": 11.0168, "type": "event", "id": 674132}, {latitude: 53.0793, longitude: 8.8017, type: 'event', id: "763159"},
{"latitude": 51.1983, "longitude": 8.8998, "type": "event", "id": 298473} {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"},
], ],
}; };
console.log("got data");
const zoomLevelChanged = calculateRadius(bounds); const zoomLevelChanged = calculateRadius(bounds);
console.log(zoomLevelChanged); //console.log(zoomLevelChanged);
const data = { const data = {
locations: clusterMarkers(rawData.locations, zoomLevelChanged),//calculateThreshold(bounds) locations: clusterMarkers(rawData.locations, zoomLevelChanged), //calculateThreshold(bounds)
}; };
console.log("clustered data");
resolve(data); resolve(data);
}, 120); // Simulating a delay of 1 second for the asynchronous operation }, 2); // Simulating a delay of 1 second for the asynchronous operation
}); });
} }

32
src/components/map/types.ts Normal file
View File

@ -0,0 +1,32 @@
type EventID = string;
interface BasicEvent {
id: EventID;
latitude: number;
longitude: number;
}
interface PA_Point_Cluster extends BasicEvent {
type: 'cluster';
cluster: number;
}
interface PA_Point_Event extends BasicEvent {
type: 'event';
theme?: number;
}
interface PA_Point_EventStore extends BasicEvent {
type: 'eventStore';
theme?: number;
}
type PA_Point = PA_Point_Cluster | PA_Point_Event | PA_Point_EventStore;
export type {
PA_Point_Cluster,
PA_Point_Event,
PA_Point_EventStore,
PA_Point,
EventID,
};

6
src/configs/appNonSaveVar.ts
View File

@ -2,12 +2,12 @@
import {chatEntity, roomId} from '@configs/chat/types'; import {chatEntity, roomId} from '@configs/chat/types';
import {User} from '@user/types'; import {User} from '@user/types';
import {UserId} from './types'; import {AccountName} from './types';
import {getVersionByNum, VersionType} from '@helper/version'; import {getVersionByNum, VersionType} from '@helper/version';
import configDarkTheme, {ThemeTokensType} from '@configs/colors'; import configDarkTheme, {ThemeTokensType} from '@configs/colors';
import { PA_Point } from '@components/map/cluster/getData'; import {PA_Point} from '@components/map/cluster/getData';
export const APP_VERSION = getVersionByNum(1); export const APP_VERSION = getVersionByNum(1);
export const AppVarMaxBackups: number = 10; export const AppVarMaxBackups: number = 10;
@ -30,7 +30,7 @@ export interface NON_SAVE_VARS {
appStatus: appStatus; appStatus: appStatus;
theme: ThemeTokensType; theme: ThemeTokensType;
connectionStatus: connectionStatus; connectionStatus: connectionStatus;
cachedUsers: {[key: UserId]: User}; cachedUsers: {[key: AccountName]: User};
chats: {[key: roomId]: chatEntity}; chats: {[key: roomId]: chatEntity};
chatActivity: roomId[]; chatActivity: roomId[];
selectedChat: roomId | 'none'; selectedChat: roomId | 'none';

8
src/configs/appNonSaveVarReducer.ts
View File

@ -5,7 +5,7 @@ import {ThemeTokensType} from '@configs/colors';
import {chatEntity, roomId} from '@configs/chat/types'; import {chatEntity, roomId} from '@configs/chat/types';
import {User} from '@user/types'; import {User} from '@user/types';
import {UserId} from './types'; import {AccountName} from './types';
import {PA_Point} from '@components/map/cluster/getData'; import {PA_Point} from '@components/map/cluster/getData';
export const appNonSaveVariablesSlice = createSlice({ export const appNonSaveVariablesSlice = createSlice({
@ -19,9 +19,9 @@ export const appNonSaveVariablesSlice = createSlice({
state.theme = action.payload; state.theme = action.payload;
}, },
setCachedUser: (state, action: PayloadAction<User>) => { setCachedUser: (state, action: PayloadAction<User>) => {
state.cachedUsers[action.payload.UserId] = action.payload; state.cachedUsers[action.payload.AccountName] = action.payload;
}, },
removeCachedUser: (state, action: PayloadAction<UserId>) => { removeCachedUser: (state, action: PayloadAction<AccountName>) => {
delete state.cachedUsers[action.payload]; delete state.cachedUsers[action.payload];
}, },
setSelectedChat: (state, action: PayloadAction<roomId>) => { setSelectedChat: (state, action: PayloadAction<roomId>) => {
@ -56,7 +56,7 @@ export const appNonSaveVariablesSlice = createSlice({
}, },
setMapMarkers: (state, action: PayloadAction<PA_Point[]>) => { setMapMarkers: (state, action: PayloadAction<PA_Point[]>) => {
state.eventMapMarkers = action.payload; state.eventMapMarkers = action.payload;
} },
}, },
}); });

22
src/configs/appVar.ts
View File

@ -1,4 +1,4 @@
import {EMail, UserId, XToken} from '@configs/types'; import {XToken, AccountName, Username} from '@configs/types';
import {VersionType} from '@helper/version'; import {VersionType} from '@helper/version';
import {MyUserAccount} from '@user/types'; import {MyUserAccount} from '@user/types';
import {APP_VERSION} from './appNonSaveVar'; import {APP_VERSION} from './appNonSaveVar';
@ -41,9 +41,11 @@ export function applyUpdateChanges(appVar: any): Promise<void> {
//these variables may be changed by the user and will be saved in storage //these variables may be changed by the user and will be saved in storage
export interface RegisterProcess { export interface RegisterProcess {
isRegistering: false | 'stepTwo' | 'stepFinal'; //isRegistering: false | 'stepTwo' | 'stepFinal';
XToken: XToken | undefined; //XToken: XToken | undefined;
EMail: EMail; Username: Username;
Password: string;
AccountName: AccountName;
} }
export interface PREFERENCES_VARS { export interface PREFERENCES_VARS {
@ -51,8 +53,8 @@ export interface PREFERENCES_VARS {
version: VersionType; version: VersionType;
theme: ThemeMode; theme: ThemeMode;
RegisterProcess: RegisterProcess; RegisterProcess: RegisterProcess;
selectedAccount: UserId | 'none'; selectedAccount: AccountName | 'none';
accounts: {[key: UserId]: MyUserAccount}; accounts: {[key: AccountName]: MyUserAccount};
} }
export const preferences_vars_default: PREFERENCES_VARS = { export const preferences_vars_default: PREFERENCES_VARS = {
@ -60,9 +62,11 @@ export const preferences_vars_default: PREFERENCES_VARS = {
version: APP_VERSION, //version of datatypes in storage version: APP_VERSION, //version of datatypes in storage
theme: ThemeMode.Dark, theme: ThemeMode.Dark,
RegisterProcess: { RegisterProcess: {
isRegistering: false, Username: '',
XToken: undefined, Password: '',
EMail: '', //isRegistering: false,
//XToken: undefined,
AccountName: '',
}, },
selectedAccount: 'none', selectedAccount: 'none',
accounts: {}, accounts: {},

6
src/configs/appVarReducer.ts
View File

@ -7,7 +7,7 @@ import {
} from './appVar'; } from './appVar';
import LangFormat from '@lang/default'; import LangFormat from '@lang/default';
import {lang as defaultLang} from '@lang/en'; import {lang as defaultLang} from '@lang/en';
import {UserId} from './types'; import {AccountName} from './types';
import {MyUserAccount} from '@user/types'; import {MyUserAccount} from '@user/types';
import {ThemeMode} from './colors'; import {ThemeMode} from './colors';
@ -37,11 +37,11 @@ export const appVariablesSlice = createSlice({
setRegisterProcess: (state, action: PayloadAction<RegisterProcess>) => { setRegisterProcess: (state, action: PayloadAction<RegisterProcess>) => {
state.preferences.RegisterProcess = action.payload; state.preferences.RegisterProcess = action.payload;
}, },
setCurrentAccount: (state, action: PayloadAction<UserId>) => { setCurrentAccount: (state, action: PayloadAction<AccountName>) => {
state.preferences.selectedAccount = action.payload; state.preferences.selectedAccount = action.payload;
}, },
setAccount: (state, action: PayloadAction<MyUserAccount>) => { setAccount: (state, action: PayloadAction<MyUserAccount>) => {
state.preferences.accounts[action.payload.UserId] = action.payload; state.preferences.accounts[action.payload.AccountName] = action.payload;
}, },
setDBEK: (state, action: PayloadAction<number>) => { setDBEK: (state, action: PayloadAction<number>) => {
state.preferences.dbek = action.payload; state.preferences.dbek = action.payload;

13
src/configs/types.ts
View File

@ -1,6 +1,6 @@
import {ThemeMode} from './appVar'; //import {ThemeMode} from './appVar';
export type EMail = string; //export type EMail = string;
export type langCode = 'en' | string; export type langCode = 'en' | string;
@ -11,11 +11,11 @@ export type Username = string | undefined;
export type Password = string; export type Password = string;
export type UserAgent = string; export type UserAgent = string;
export type XToken = string; export type XToken = string;
export type verifyId = string; //export type verifyId = string;
export type XAuthorization = string; export type XAuthorization = string;
export type UserId = string; //export type UserId = string;
export type WebSocketSessionId = string; //export type WebSocketSessionId = string;
export const accountNameOptions = { export const accountNameOptions = {
minLength: 4, minLength: 4,
@ -42,6 +42,7 @@ export const passwordOptions = {
}, },
}; };
/*
export const emailOptions = { export const emailOptions = {
maxLength: 48, maxLength: 48,
isAllowed: (email: string) => { isAllowed: (email: string) => {
@ -49,4 +50,4 @@ export const emailOptions = {
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
); );
}, },
}; }; */

1
src/helper/animations.tsx
View File

@ -1,6 +1,5 @@
import {useFocusEffect} from '@react-navigation/native'; import {useFocusEffect} from '@react-navigation/native';
import {animated, useSpring} from '@react-spring/native'; import {animated, useSpring} from '@react-spring/native';
import {useEffect} from 'react';
import {Dimensions, View} from 'react-native'; import {Dimensions, View} from 'react-native';
const AnimationView = animated(View); const AnimationView = animated(View);

9
src/helper/base64.ts Normal file
View File

@ -0,0 +1,9 @@
import {Buffer} from 'buffer';
export function ToBase64(str: string) {
return Buffer.from(str).toString('base64');
}
export function FromBase64(str: string) {
return Buffer.from(str, 'base64').toString();
}

69
src/helper/request.ts
View File

@ -1,39 +1,35 @@
import {types} from '@babel/core';
import {store} from '@redux/store'; import {store} from '@redux/store';
import {Any} from '@react-spring/types';
import {type} from 'os';
import {Platform} from 'react-native'; import {Platform} from 'react-native';
import getUserAgent from './userAgent'; import getUserAgent from './userAgent';
import { import {
AccountName, AccountName,
EMail,
Password, Password,
XAuthorization, XAuthorization,
UserId,
Username, Username,
verifyId,
WebSocketSessionId,
XToken,
} from '../configs/types'; } from '../configs/types';
import MyUserManager from '@user/MyUserManager'; import MyUserManager from '@user/MyUserManager';
export const apiPath = { export const apiPath = {
backend: { backend: {
prefix: 'https://alpha-api.clickandjoin.umbach.dev/v1', prefix: 'https://api-partyapp.ex.umbach.dev/api/v1',
}, },
}; };
export enum apiBackendRequest { export enum apiBackendRequest {
REGISTER_STEP_1 = '/admin/users/email', LOGIN = '/user/login',
APP_START = '/appstart',
GET_USER_PROFILE = '/users/:accountName',
LOGOUT = '/user/logout',
SIGN_UP = '/user/signup',
/*REGISTER_STEP_1 = '/admin/users/email',
REGISTER_RESEND_MAIL = '/admin/users/email/resend', REGISTER_RESEND_MAIL = '/admin/users/email/resend',
REGISTER_STEP_2 = '/verify/email/:xToken/:verifyId', REGISTER_STEP_2 = '/verify/email/:xToken/:verifyId',
REGISTER_STEP_FINAL = '/admin/users', REGISTER_STEP_FINAL = '/admin/users',
REGISTER_STEP_FINAL_ACCOUNT_NAME_CHECK = '/admin/users/validation/accountname', REGISTER_STEP_FINAL_ACCOUNT_NAME_CHECK = '/admin/users/validation/accountname',
LOGIN = '/user', LOGIN = '/user',
GET_USER_PROFILE = '/users/:userId', APP_START = '/appstart', */
APP_START = '/appstart',
} }
type requestGET = {[key: string]: string}; type requestGET = {[key: string]: string};
@ -46,6 +42,7 @@ export interface defaultRequest {
requestHeader?: requestHeader; requestHeader?: requestHeader;
} }
/*
interface REGISTER_STEP_1 extends defaultRequest { interface REGISTER_STEP_1 extends defaultRequest {
path: apiBackendRequest.REGISTER_STEP_1; path: apiBackendRequest.REGISTER_STEP_1;
@ -105,17 +102,30 @@ interface REGISTER_STEP_FINAL extends defaultRequest {
WebSocketSessionId: WebSocketSessionId; WebSocketSessionId: WebSocketSessionId;
}; };
} }
*/
interface LOGIN extends defaultRequest { interface LOGIN extends defaultRequest {
path: apiBackendRequest.LOGIN; path: apiBackendRequest.LOGIN;
request: { request: {
Email: EMail; AccountName: AccountName;
//Email: EMail;
Password: Password; Password: Password;
}; };
response?: { response?: {
XAuthorization: XAuthorization; XAuthorization: XAuthorization;
UserId: UserId; Username: Username;
WebSocketSessionId: WebSocketSessionId; };
}
interface SIGN_UP extends defaultRequest {
path: apiBackendRequest.SIGN_UP;
request: {
AccountName: AccountName;
Username: Username;
Password: Password;
};
response?: {
XAuthorization: XAuthorization;
Username: Username;
}; };
} }
@ -123,10 +133,10 @@ interface GET_USER_PROFILE extends defaultRequest {
path: apiBackendRequest.GET_USER_PROFILE; path: apiBackendRequest.GET_USER_PROFILE;
requestGET: { requestGET: {
':userId': UserId; ':accountName': AccountName;
}; };
response: { response: {
AccountName: AccountName; //AccountName: AccountName;
Username: Username; Username: Username;
Description: string; Description: string;
FollowersCount: number; FollowersCount: number;
@ -141,7 +151,7 @@ interface APP_START extends defaultRequest {
path: apiBackendRequest.APP_START; path: apiBackendRequest.APP_START;
response: { response: {
TokenValid: boolean; /* TokenValid: boolean;
AccountName: AccountName; AccountName: AccountName;
Username: Username; Username: Username;
Description: string; Description: string;
@ -151,23 +161,30 @@ interface APP_START extends defaultRequest {
XpPoints: number; XpPoints: number;
AccountStatus: number; AccountStatus: number;
AvatarUrl: string; AvatarUrl: string;
Events: any; Events: any; */
}; };
} }
interface LOGOUT extends defaultRequest {
path: apiBackendRequest.LOGOUT;
}
type FetchTypes = type FetchTypes =
| REGISTER_STEP_1 | LOGIN
| SIGN_UP
/*| REGISTER_STEP_1
| REGISTER_RESEND_MAIL | REGISTER_RESEND_MAIL
| REGISTER_STEP_2 | REGISTER_STEP_2
| REGISTER_STEP_FINAL | REGISTER_STEP_FINAL
| REGISTER_STEP_FINAL_ACCOUNT_NAME_CHECK | REGISTER_STEP_FINAL_ACCOUNT_NAME_CHECK
| LOGIN | LOGIN*/
| GET_USER_PROFILE | GET_USER_PROFILE
| APP_START; | APP_START
| LOGOUT;
/*
function isA(obj: any): obj is REGISTER_STEP_1 { function isA(obj: any): obj is REGISTER_STEP_1 {
return obj.request !== undefined; return obj.request !== undefined;
} } */
export function makeRequest<T1 extends FetchTypes>(type: T1): Promise<T1> { export function makeRequest<T1 extends FetchTypes>(type: T1): Promise<T1> {
let makeRequestObj: any = type; let makeRequestObj: any = type;
@ -204,6 +221,8 @@ export function makeRequest<T1 extends FetchTypes>(type: T1): Promise<T1> {
const SessionId = MyUserManager.getSessionId(); const SessionId = MyUserManager.getSessionId();
if (SessionId !== undefined) headers['X-Authorization'] = SessionId; if (SessionId !== undefined) headers['X-Authorization'] = SessionId;
console.log('session id: ' + SessionId);
const requestOptions: RequestInit = { const requestOptions: RequestInit = {
method: makeRequestObj.request !== undefined ? 'POST' : 'GET', method: makeRequestObj.request !== undefined ? 'POST' : 'GET',

2
src/helper/storage/bdm/getDB.ts
View File

@ -63,7 +63,7 @@ export async function openMyDatabase(
schema: databaseConfType, schema: databaseConfType,
nameObj: databaseNameSuffix, nameObj: databaseNameSuffix,
): Promise<DBType> { ): Promise<DBType> {
const folderPath = MyUserManager.getSelectedUserId(); const folderPath = MyUserManager.getSelectedUserAccount();
const path = const path =
folderPath + folderPath +
'/' + '/' +

28
src/helper/storage/bdm/schemas/users.ts
View File

@ -5,26 +5,25 @@ import {setEntry} from '../set';
import {databaseConf, possibleDBKeys} from '../types'; import {databaseConf, possibleDBKeys} from '../types';
enum keys { enum keys {
UserId = 'a', // UserId = 'a',
AccountName = 'b', AccountName = 'a',
Username = 'c', Username = 'b',
Description = 'd', Description = 'c',
FollowersCount = 'e', FollowersCount = 'd',
FollowingCount = 'f', FollowingCount = 'e',
lastUpdateTimestamp = 'g', lastUpdateTimestamp = 'f',
ProfilePicture = 'h', ProfilePicture = 'g',
ProfilePictureBinaryLQ = 'i', ProfilePictureBinaryLQ = 'h',
ProfilePictureBinaryHQ = 'j', ProfilePictureBinaryHQ = 'i',
XpLevel = 'k', XpLevel = 'j',
XpPoints = 'l', XpPoints = 'k',
} }
const name = 'users'; const name = 'users';
const primaryKey: keyof typeof propsDefault = keys.UserId; const primaryKey: keyof typeof propsDefault = keys.AccountName;
const propsType: {[key in keyof typeof propsDefault]: string} = { const propsType: {[key in keyof typeof propsDefault]: string} = {
[keys.UserId]: 'string',
[keys.AccountName]: 'string', [keys.AccountName]: 'string',
[keys.Username]: 'string', [keys.Username]: 'string',
[keys.Description]: 'string', [keys.Description]: 'string',
@ -40,7 +39,6 @@ const propsType: {[key in keyof typeof propsDefault]: string} = {
}; };
const propsDefault = { const propsDefault = {
[keys.UserId]: '',
[keys.AccountName]: '', [keys.AccountName]: '',
[keys.Username]: '', [keys.Username]: '',
[keys.Description]: '', [keys.Description]: '',

2
src/lang/en.ts
View File

@ -58,7 +58,7 @@ export const lang: LangFormat = {
}, },
login: { login: {
title: 'Welcome back!', title: 'Welcome back!',
inputPhoneNumberOrAccountName: 'PHONE NUMBER OR ACCOUNT NAME', inputPhoneNumberOrAccountName: 'ACCOUNT NAME',
inputPassword: 'PASSWORD', inputPassword: 'PASSWORD',
}, },
signUpStepUsername: { signUpStepUsername: {

2
src/navigation/navigation.tsx
View File

@ -38,6 +38,8 @@ export default function Navigation() {
const currentUser = const currentUser =
reduxStore.getState().appVariables.preferences.selectedAccount; reduxStore.getState().appVariables.preferences.selectedAccount;
console.log('NAVIGATION', currentUser);
return ( return (
<Stack.Navigator <Stack.Navigator
screenOptions={{ screenOptions={{

31
src/navigation/registration/registration.tsx
View File

@ -25,16 +25,16 @@ import {Login} from '@pages/welcome/login/login';
import { import {
SignUpStepAccountName, SignUpStepAccountName,
SignUpStepPassword, SignUpStepPassword,
SignUpStepPhoneNumber, //SignUpStepPhoneNumber,
SignUpStepUsername, SignUpStepUsername,
SignUpStepVerifyPhoneNumber, //SignUpStepVerifyPhoneNumber,
} from '@pages/welcome/signUp/signUp'; } from '@pages/welcome/signUp/signUp';
export type RegistrationStackNavigatorParamList = { export type RegistrationStackNavigatorParamList = {
SignUpPreview: undefined; SignUpPreview: undefined;
SignUpStepUsername: undefined; SignUpStepUsername: undefined;
SignUpStepPhoneNumber: undefined; // SignUpStepPhoneNumber: undefined;
SignUpStepVerifyPhoneNumber: undefined; // SignUpStepVerifyPhoneNumber: undefined;
SignUpStepPassword: undefined; SignUpStepPassword: undefined;
SignUpStepAccountName: undefined; SignUpStepAccountName: undefined;
LoginPreview: undefined; LoginPreview: undefined;
@ -64,6 +64,19 @@ export function RegistrationScreen() {
headerTitle: '', headerTitle: '',
}; };
/*
<RegistrationStack.Screen
name="SignUpStepPhoneNumber"
component={SignUpStepPhoneNumber}
options={{...headerStyle}}
/>
<RegistrationStack.Screen
name="SignUpStepVerifyPhoneNumber"
component={SignUpStepVerifyPhoneNumber}
options={{...headerStyle}}
/>
*/
return ( return (
<RegistrationStack.Navigator screenOptions={{headerShown: false}}> <RegistrationStack.Navigator screenOptions={{headerShown: false}}>
<RegistrationStack.Screen <RegistrationStack.Screen
@ -81,16 +94,6 @@ export function RegistrationScreen() {
component={SignUpStepUsername} component={SignUpStepUsername}
options={{...headerStyle}} options={{...headerStyle}}
/> />
<RegistrationStack.Screen
name="SignUpStepPhoneNumber"
component={SignUpStepPhoneNumber}
options={{...headerStyle}}
/>
<RegistrationStack.Screen
name="SignUpStepVerifyPhoneNumber"
component={SignUpStepVerifyPhoneNumber}
options={{...headerStyle}}
/>
<RegistrationStack.Screen <RegistrationStack.Screen
name="SignUpStepPassword" name="SignUpStepPassword"
component={SignUpStepPassword} component={SignUpStepPassword}

14
src/navigation/tabs/main/MapTab.tsx
View File

@ -10,10 +10,14 @@ import {useSelector} from 'react-redux';
import {Map} from '@pages/map/map'; import {Map} from '@pages/map/map';
import {EventID} from '@components/map/types';
export const MapTabName = 'Map'; export const MapTabName = 'Map';
export type MapStackNavigatorParamList = { export type MapStackNavigatorParamList = {
Overview: undefined; Overview: undefined;
Event: {eventID: EventID};
EventStore: {eventID: EventID};
}; };
const MapStack = createNativeStackNavigator<MapStackNavigatorParamList>(); const MapStack = createNativeStackNavigator<MapStackNavigatorParamList>();
@ -41,6 +45,16 @@ function MapTab() {
options={{headerShown: false}} options={{headerShown: false}}
component={MapScreen} component={MapScreen}
/> />
<MapStack.Screen
name="Event"
options={{headerShown: true}}
component={MapScreen}
/>
<MapStack.Screen
name="EventStore"
options={{headerShown: true}}
component={MapScreen}
/>
</MapStack.Navigator> </MapStack.Navigator>
); );
} }

9
src/pages/appStart/StartHelper.tsx
View File

@ -5,19 +5,13 @@ import {SafeAreaView} from 'react-native-safe-area-context';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import {RootState, store} from '@redux/store'; import {RootState, store} from '@redux/store';
import {useEffect} from 'react'; import {useEffect} from 'react';
import imgSrc from '@img/maimg.png';
import {placeholder} from '@lang/default';
import {initAppData} from '@helper/appData'; import {initAppData} from '@helper/appData';
import {appStatus} from '@configs/appNonSaveVar'; import {appStatus} from '@configs/appNonSaveVar';
import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer'; import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer';
import BigDataManager from '@helper/storage/BigDataManager'; import BigDataManager from '@helper/storage/BigDataManager';
import {initKey} from '@helper/storage/bdm/encryption'; import {initKey} from '@helper/storage/bdm/encryption';
import UserManager from '@user/UserManager';
import MyUserManager from '@user/MyUserManager';
import DBSchemas from '@helper/storage/bdm/schemas'; import DBSchemas from '@helper/storage/bdm/schemas';
import {chatTags, convertDatabaseChat} from '@configs/chat/types'; import {convertDatabaseChat} from '@configs/chat/types';
import {addChatEntity} from '@components/chat/initChatDatabase'; import {addChatEntity} from '@components/chat/initChatDatabase';
import {initDatabase} from '@helper/storage/bdm/init'; import {initDatabase} from '@helper/storage/bdm/init';
@ -68,7 +62,6 @@ export async function onAppStart() {
console.log('finish'); console.log('finish');
const usrDBKeys = BigDataManager.databases.users.keys; const usrDBKeys = BigDataManager.databases.users.keys;
await BigDataManager.databases.users.setEntry({ await BigDataManager.databases.users.setEntry({
[usrDBKeys.UserId]: 'test',
[usrDBKeys.AccountName]: '#845613', [usrDBKeys.AccountName]: '#845613',
[usrDBKeys.Username]: 'TestGroupVirtual', [usrDBKeys.Username]: 'TestGroupVirtual',
[usrDBKeys.Description]: 'This is a test account that is not real. ^^', [usrDBKeys.Description]: 'This is a test account that is not real. ^^',

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

@ -21,7 +21,7 @@ let isRerenderData = 0;
export const Map = () => { export const Map = () => {
const mapRef = React.useRef<Mapbox.MapView | null>(null); const mapRef = React.useRef<Mapbox.MapView | null>(null);
const [mapMarkers, setMapMarkers] = useState<PA_Point[]>([]); // Add useState for visibleBounds //const [mapMarkers, setMapMarkers] = useState<PA_Point[]>([]); // Add useState for visibleBounds
const [lastDataRerender, setLastDataRerender] = useState(0); // Add useState for visibleBounds const [lastDataRerender, setLastDataRerender] = useState(0); // Add useState for visibleBounds
const getVisibleBounds = async () => { const getVisibleBounds = async () => {
@ -32,7 +32,7 @@ export const Map = () => {
isRerenderData = now; isRerenderData = now;
console.log('----1'); //console.log('----1');
if (mapRef.current) { if (mapRef.current) {
const visibleBounds = await ( const visibleBounds = await (
@ -53,17 +53,17 @@ export const Map = () => {
//const zoomLevel = await (mapRef.current as Mapbox.MapView).getZoom(); //const zoomLevel = await (mapRef.current as Mapbox.MapView).getZoom();
console.log('----2', Date.now() - now + 'ms'); //console.log('----2', Date.now() - now + 'ms');
//console.log(visibleBounds); //console.log(visibleBounds);
let markerData = (await getLocationData(visibleBounds, 0))?.locations; let markerData = (await getLocationData(visibleBounds, 0))?.locations;
console.log('----3', Date.now() - now + 'ms'); //console.log('----3', Date.now() - now + 'ms');
//store.dispatch(appNonSaveVarActions.setMapMarkers(markerData || [])); store.dispatch(appNonSaveVarActions.setMapMarkers(markerData || []));
setMapMarkers(markerData || []); //setMapMarkers(markerData || []);
console.log('----4', Date.now() - now + 'ms'); //console.log('----4', Date.now() - now + 'ms');
} }
isRerenderData = 0; isRerenderData = 0;
@ -75,7 +75,7 @@ export const Map = () => {
if (now - lastCameraChange > 500) { if (now - lastCameraChange > 500) {
lastCameraChange = now; lastCameraChange = now;
setTimeout(getVisibleBounds, 500); setTimeout(getVisibleBounds, 500);
console.log('------------5', Date.now() - now + 'ms'); //console.log('------------5', Date.now() - now + 'ms');
} }
} }
@ -117,7 +117,7 @@ export const Map = () => {
logoPosition={{top: 10, left: 10}} logoPosition={{top: 10, left: 10}}
styleURL="mapbox://styles/titaniumbach/clpij5uoo00o301pg2dj23j0m" styleURL="mapbox://styles/titaniumbach/clpij5uoo00o301pg2dj23j0m"
projection="globe"> projection="globe">
<DisplayMarkerList markers={mapMarkers} /> <DisplayMarkerList />
</Mapbox.MapView> </Mapbox.MapView>
</View> </View>
</View> </View>

57
src/pages/profile/profile.tsx
View File

@ -14,6 +14,9 @@ import {useSelector} from 'react-redux';
import {RootState} from '@redux/store'; import {RootState} 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 UserManager from '@user/UserManager';
import MyUserManager from '@user/MyUserManager';
import {apiBackendRequest, makeRequest} from '@helper/request';
function UserAvatar() { function UserAvatar() {
return ( return (
@ -29,6 +32,11 @@ export function ProfileOverview() {
const lang = useSelector( const lang = useSelector(
(state: RootState) => state.appVariables.lang.profile.overview.statistics, (state: RootState) => state.appVariables.lang.profile.overview.statistics,
); );
const user = UserManager.getUserSelector(
useSelector(
(state: RootState) => state.appVariables.preferences.selectedAccount,
),
);
return ( return (
<MyScreenContainer <MyScreenContainer
@ -41,14 +49,16 @@ export function ProfileOverview() {
<UserAvatar /> <UserAvatar />
</View> </View>
<MyTitle text="Max Mustermann" /> <MyTitle
text={user.Username.data === undefined ? '' : user.Username.data}
/>
<View style={{flexDirection: 'row', gap: 12}}> <View style={{flexDirection: 'row', gap: 12}}>
<Statistic title={lang.followers} value="400.3k" /> <Statistic title={lang.followers} value="0" />
<MyVerticalDivider /> <MyVerticalDivider />
<Statistic title={lang.following} value="40.3k" /> <Statistic title={lang.following} value="0" />
<MyVerticalDivider /> <MyVerticalDivider />
<Statistic title={lang.visited} value="2k" /> <Statistic title={lang.visited} value="0" />
</View> </View>
</MyScreenContainer> </MyScreenContainer>
); );
@ -97,6 +107,20 @@ export function ProfileSettings() {
const navigation = useNavigation<ProfileScreenNavigationProp>(); const navigation = useNavigation<ProfileScreenNavigationProp>();
const rootNavigation = useNavigation<RootScreenNavigationProp>(); const rootNavigation = useNavigation<RootScreenNavigationProp>();
const user = UserManager.getUserSelector(
useSelector(
(state: RootState) => state.appVariables.preferences.selectedAccount,
),
);
/*
<SettingsItem
icon="phone-iphone"
title={lang.accountData.phoneNumber}
value="+49 1510 21334143"
/>
*/
return ( return (
<MyScreenContainer <MyScreenContainer
scrollView scrollView
@ -111,21 +135,15 @@ export function ProfileSettings() {
<SettingsItem <SettingsItem
icon="person" icon="person"
title={lang.accountData.accountName} title={lang.accountData.accountName}
value="max_mustermann" value={user.AccountName === undefined ? '' : user.AccountName}
/> />
<SettingsItem <SettingsItem
icon="person" icon="person"
title={lang.accountData.username} title={lang.accountData.username}
value="Max Mustermann" value={user.Username.data === undefined ? '' : user.Username.data}
onPress={() => navigation.navigate('UpdateUsername')} onPress={() => navigation.navigate('UpdateUsername')}
/> />
<SettingsItem
icon="phone-iphone"
title={lang.accountData.phoneNumber}
value="+49 1510 21334143"
/>
</SettingsItemContainer> </SettingsItemContainer>
<SettingsItemContainer title={lang.changePassword.title}> <SettingsItemContainer title={lang.changePassword.title}>
@ -153,9 +171,18 @@ export function ProfileSettings() {
<SettingsItem <SettingsItem
icon="logout" icon="logout"
title={lang.moreInfo.logout} title={lang.moreInfo.logout}
onPress={() => onPress={() => {
rootNavigation.navigate('Registration', {screen: 'LoginPreview'}) makeRequest({
} path: apiBackendRequest.LOGOUT,
request: {},
response: {},
}).catch(reason => {
console.log('logout failed, err: ', reason);
});
MyUserManager.logoutMyUser();
rootNavigation.navigate('Registration', {screen: 'LoginPreview'});
}}
/> />
</SettingsItemContainer> </SettingsItemContainer>
</MyScreenContainer> </MyScreenContainer>

158
src/pages/welcome/login/login.tsx
View File

@ -1,58 +1,114 @@
import { MyButton } from "@components/MyButton"; import {MyButton} from '@components/MyButton';
import { MyIconInput } from "@components/MyInput"; import {MyIconInput} from '@components/MyInput';
import { MyScreenContainer } from "@components/MyScreenContainer"; import {MyScreenContainer} from '@components/MyScreenContainer';
import { MyTitle } from "@components/MyTitle"; import {MyTitle} from '@components/MyTitle';
import { RootScreenNavigationProp } from "@navigation/navigation"; import {apiBackendRequest, makeRequest} from '@helper/request';
import { ContentContainer, navigateToHome } from "@navigation/registration/registration"; import {RootScreenNavigationProp} from '@navigation/navigation';
import { useNavigation } from "@react-navigation/native"; import {
import { RootState } from "@redux/store"; ContentContainer,
import { useState } from "react"; navigateToHome,
import { View } from "react-native"; } from '@navigation/registration/registration';
import { useSelector } from "react-redux"; import {useNavigation} from '@react-navigation/native';
import {RootState} from '@redux/store';
import MyUserManager from '@user/MyUserManager';
import {useState} from 'react';
import {View} from 'react-native';
import {useSelector} from 'react-redux';
import {ToBase64} from '@helper/base64';
import showToast from '@components/MyToast';
import {useToast} from '@gluestack-ui/themed';
export function Login() { export function Login() {
const lang = useSelector( const lang = useSelector(
(state: RootState) => state.appVariables.lang.registration, (state: RootState) => state.appVariables.lang.registration,
); );
const navigation = useNavigation<RootScreenNavigationProp>(); const navigation = useNavigation<RootScreenNavigationProp>();
const toast = useToast();
const [username, setUsername] = useState(''); const [isLoading, setIsLoading] = useState(false);
const [password, setPassword] = useState(''); const [accountName, setAccountName] = useState('anna');
const [password, setPassword] = useState('testtesttest');
const loginEnabled = username.length > 0 && password.length > 0; const loginEnabled = accountName.length > 0 && password.length > 0;
return ( return (
<MyScreenContainer <MyScreenContainer
style={{ style={{
flexDirection: 'column', flexDirection: 'column',
}}> }}>
<ContentContainer> <ContentContainer>
<MyTitle text={lang.login.title} /> <MyTitle text={lang.login.title} />
<View style={{gap: 12}}> <View style={{gap: 12}}>
<MyIconInput <MyIconInput
text={lang.login.inputPhoneNumberOrAccountName} text={lang.login.inputPhoneNumberOrAccountName}
iconName="person" iconName="person"
value={username} value={accountName}
onChangeText={text => setUsername(text)} onChangeText={text => setAccountName(text)}
/> />
<MyIconInput <MyIconInput
text={lang.login.inputPassword} text={lang.login.inputPassword}
iconName="lock" iconName="lock"
secureTextEntry secureTextEntry
value={password} value={password}
onChangeText={text => setPassword(text)} onChangeText={text => setPassword(text)}
/> />
<MyButton <MyButton
type="primary" type="primary"
text={lang.buttonLogin} isLoading={isLoading}
style={{marginBottom: 20}} text={lang.buttonLogin}
onPress={() => navigateToHome(navigation)} style={{marginBottom: 20}}
disabled={!loginEnabled} onPress={() => {
/> console.log('login');
</View>
</ContentContainer> setIsLoading(true);
</MyScreenContainer>
); makeRequest({
} path: apiBackendRequest.LOGIN,
request: {
AccountName: accountName,
Password: ToBase64(password),
},
response: {
XAuthorization: '',
Username: '',
},
})
.then(resp => {
console.log('resp', resp);
MyUserManager.createNewMyUser(
accountName,
resp.response.Username,
resp.response.XAuthorization,
)
.then(async () => {
setIsLoading(false);
navigateToHome(navigation);
})
.catch(err => {
console.log('catch', err);
});
})
.catch(reason => {
console.log('reason', reason);
setIsLoading(false);
showToast(toast, {
title: 'Failed',
variant: 'solid',
action: 'error',
description: undefined,
isClosable: true,
rest: {colorScheme: 'primary'},
});
});
}}
disabled={!loginEnabled}
/>
</View>
</ContentContainer>
</MyScreenContainer>
);
}

101
src/pages/welcome/signUp/signUp.tsx
View File

@ -1,17 +1,21 @@
import {MyButton} from '@components/MyButton'; import {MyButton} from '@components/MyButton';
import {MyClickableText} from '@components/MyClickableText'; import {MyIconInput} from '@components/MyInput';
import {ConfirmationCodeInput, MyIconInput} from '@components/MyInput';
import {MyScreenContainer} from '@components/MyScreenContainer'; import {MyScreenContainer} from '@components/MyScreenContainer';
import {MyTitle} from '@components/MyTitle'; import {MyTitle} from '@components/MyTitle';
import {appVarActions} from '@configs/appVarReducer';
import {ToBase64} from '@helper/base64';
import {apiBackendRequest, makeRequest} from '@helper/request';
import {RootScreenNavigationProp} from '@navigation/navigation'; import {RootScreenNavigationProp} from '@navigation/navigation';
import { import {
ContentContainer, ContentContainer,
navigateToHome, navigateToHome,
} from '@navigation/registration/registration'; } from '@navigation/registration/registration';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import {RootState} from '@redux/store'; import {RootState, store} from '@redux/store';
import MyUserManager from '@user/MyUserManager';
import {useState} from 'react';
import {Text} from 'react-native'; import {Text} from 'react-native';
import {KeyboardAvoidingView, ScrollView, View} from 'react-native'; import {View} from 'react-native';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
function Title({text, description}: {text: string; description?: string}) { function Title({text, description}: {text: string; description?: string}) {
@ -29,6 +33,12 @@ export function SignUpStepUsername() {
); );
const navigation = useNavigation<RootScreenNavigationProp>(); const navigation = useNavigation<RootScreenNavigationProp>();
const registerProcess = useSelector(
(state: RootState) => state.appVariables.preferences.RegisterProcess,
);
const [username, setUsername] = useState('');
return ( return (
<MyScreenContainer <MyScreenContainer
style={{ style={{
@ -44,6 +54,8 @@ export function SignUpStepUsername() {
<MyIconInput <MyIconInput
text={lang.signUpStepUsername.inputUsername} text={lang.signUpStepUsername.inputUsername}
iconName="person" iconName="person"
value={username}
onChangeText={text => setUsername(text)}
/> />
<MyButton <MyButton
@ -51,8 +63,14 @@ export function SignUpStepUsername() {
text={lang.buttonNext} text={lang.buttonNext}
style={{marginBottom: 20}} style={{marginBottom: 20}}
onPress={() => { onPress={() => {
let rp = {...registerProcess};
rp.Username = username;
store.dispatch(appVarActions.setRegisterProcess(rp));
navigation.navigate('Registration', { navigation.navigate('Registration', {
screen: 'SignUpStepPhoneNumber', screen: /*'SignUpStepPhoneNumber' */ 'SignUpStepPassword',
}); });
}} }}
/> />
@ -61,7 +79,7 @@ export function SignUpStepUsername() {
</MyScreenContainer> </MyScreenContainer>
); );
} }
/*
export function SignUpStepPhoneNumber() { export function SignUpStepPhoneNumber() {
const lang = useSelector( const lang = useSelector(
(state: RootState) => state.appVariables.lang.registration, (state: RootState) => state.appVariables.lang.registration,
@ -143,13 +161,19 @@ export function SignUpStepVerifyPhoneNumber() {
</MyScreenContainer> </MyScreenContainer>
); );
} }
*/
export function SignUpStepPassword() { export function SignUpStepPassword() {
const lang = useSelector( const lang = useSelector(
(state: RootState) => state.appVariables.lang.registration, (state: RootState) => state.appVariables.lang.registration,
); );
const navigation = useNavigation<RootScreenNavigationProp>(); const navigation = useNavigation<RootScreenNavigationProp>();
const registerProcess = useSelector(
(state: RootState) => state.appVariables.preferences.RegisterProcess,
);
const [password, setPassword] = useState('');
return ( return (
<MyScreenContainer <MyScreenContainer
style={{ style={{
@ -166,17 +190,25 @@ export function SignUpStepPassword() {
text={lang.signUpStepPassword.inputPassword} text={lang.signUpStepPassword.inputPassword}
iconName="lock" iconName="lock"
secureTextEntry secureTextEntry
value={password}
onChangeText={text => setPassword(text)}
/> />
<MyButton <MyButton
type="secondary" type="secondary"
text={lang.buttonNext} text={lang.buttonNext}
style={{marginBottom: 2}} style={{marginBottom: 2}}
onPress={() => onPress={() => {
let rp = {...registerProcess};
rp.Password = ToBase64(password);
store.dispatch(appVarActions.setRegisterProcess(rp));
navigation.navigate('Registration', { navigation.navigate('Registration', {
screen: 'SignUpStepAccountName', screen: 'SignUpStepAccountName',
}) });
} }}
/> />
</View> </View>
</ContentContainer> </ContentContainer>
@ -190,6 +222,13 @@ export function SignUpStepAccountName() {
); );
const navigation = useNavigation<RootScreenNavigationProp>(); const navigation = useNavigation<RootScreenNavigationProp>();
const registerProcess = useSelector(
(state: RootState) => state.appVariables.preferences.RegisterProcess,
);
const [isLoading, setIsLoading] = useState(false);
const [accountName, setAccountName] = useState('');
return ( return (
<MyScreenContainer <MyScreenContainer
scrollView scrollView
@ -206,13 +245,53 @@ export function SignUpStepAccountName() {
<MyIconInput <MyIconInput
text={lang.signUpStepAccountName.inputAccountName} text={lang.signUpStepAccountName.inputAccountName}
iconName="person" iconName="person"
value={accountName}
onChangeText={text => setAccountName(text)}
/> />
<MyButton <MyButton
type="primary" type="primary"
text={lang.signUpStepAccountName.buttonGetStarted} text={lang.signUpStepAccountName.buttonGetStarted}
style={{marginBottom: 2}} style={{marginBottom: 2}}
onPress={() => navigateToHome(navigation)} isLoading={isLoading}
onPress={() => {
let rp = {...registerProcess};
rp.AccountName = accountName;
store.dispatch(appVarActions.setRegisterProcess(rp));
console.log('registerProcess', rp);
makeRequest({
path: apiBackendRequest.SIGN_UP,
request: rp,
method: 'POST',
response: {
XAuthorization: '',
Username: '',
},
})
.then(resp => {
console.log('response', resp);
MyUserManager.createNewMyUser(
accountName,
resp.response.Username,
resp.response.XAuthorization,
)
.then(async () => {
setIsLoading(false);
navigateToHome(navigation);
})
.catch(err => {
console.log('catch', err);
});
})
.catch(error => {
console.log('error', error);
});
}}
/> />
</View> </View>
</ContentContainer> </ContentContainer>

54
src/user/MyUserManager.ts
View File

@ -1,12 +1,5 @@
import {appVarActions} from '@configs/appVarReducer'; import {appVarActions} from '@configs/appVarReducer';
import { import {AccountName, XAuthorization, Username} from '@configs/types';
AccountName,
EMail,
XAuthorization,
UserId,
Username,
WebSocketSessionId,
} from '@configs/types';
import {saveVarChanges} from '@helper/appData'; import {saveVarChanges} from '@helper/appData';
import {apiBackendRequest, makeRequest} from '@helper/request'; import {apiBackendRequest, makeRequest} from '@helper/request';
import BigDataManager from '@helper/storage/BigDataManager'; import BigDataManager from '@helper/storage/BigDataManager';
@ -15,30 +8,24 @@ import {useSelector} from 'react-redux';
import {MyUserAccount, createUserProp, SourceProp} from './types'; import {MyUserAccount, createUserProp, SourceProp} from './types';
function createNewMyUser( function createNewMyUser(
UserId: UserId,
AccountName: AccountName, AccountName: AccountName,
Username: Username, Username: Username,
EMail: EMail,
SessionId: XAuthorization, SessionId: XAuthorization,
WebSocketSessionId: WebSocketSessionId,
): Promise<void> { ): Promise<void> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let user: MyUserAccount = { let user: MyUserAccount = {
UserId, AccountName /*: createUserProp(SourceProp.offline, AccountName)*/,
AccountName: createUserProp(SourceProp.offline, AccountName),
Username: createUserProp(SourceProp.offline, Username), Username: createUserProp(SourceProp.offline, Username),
Description: createUserProp(SourceProp.online), /* Description: createUserProp(SourceProp.online),
FollowersCount: createUserProp(SourceProp.online), FollowersCount: createUserProp(SourceProp.online),
FollowingCount: createUserProp(SourceProp.online), FollowingCount: createUserProp(SourceProp.online),
XpLevel: createUserProp(SourceProp.online), XpLevel: createUserProp(SourceProp.online),
XpPoints: createUserProp(SourceProp.online), XpPoints: createUserProp(SourceProp.online),
EMail,
SessionId,
WebSocketSessionId,
lastUpdateTimestamp: Math.floor(new Date().getTime() / 1000), lastUpdateTimestamp: Math.floor(new Date().getTime() / 1000),
ProfilePicture: { ProfilePicture: {
lq: createUserProp(SourceProp.online), lq: createUserProp(SourceProp.online),
}, }, */
SessionId,
userSettings: { userSettings: {
lang: store.getState().appVariables.lang.details.langCode, lang: store.getState().appVariables.lang.details.langCode,
theme: store.getState().appVariables.preferences.theme, theme: store.getState().appVariables.preferences.theme,
@ -48,10 +35,13 @@ function createNewMyUser(
createMyUser(user); createMyUser(user);
BigDataManager.initDatabase(); BigDataManager.initDatabase();
console.log('appstart');
makeRequest({ makeRequest({
path: apiBackendRequest.APP_START, path: apiBackendRequest.APP_START,
requestGET: {':userId': UserId}, requestGET: {':AccountName': AccountName},
response: { response: {
/*
AccountName: '', AccountName: '',
Description: '', Description: '',
FollowersCount: 0, FollowersCount: 0,
@ -62,11 +52,12 @@ function createNewMyUser(
AvatarUrl: '', AvatarUrl: '',
AccountStatus: 0, AccountStatus: 0,
Events: {}, Events: {},
TokenValid: false, TokenValid: false, */
}, },
}) })
.then(resp => { .then(resp => {
let user = {...getMyUser(UserId)}; let user = {...getMyUser(AccountName)};
/*
user.AccountName = createUserProp( user.AccountName = createUserProp(
SourceProp.offline, SourceProp.offline,
resp.response.AccountName, resp.response.AccountName,
@ -94,13 +85,13 @@ function createNewMyUser(
user.XpPoints = createUserProp( user.XpPoints = createUserProp(
SourceProp.offline, SourceProp.offline,
resp.response.XpPoints, resp.response.XpPoints,
); );*/
setMyUser(user); setMyUser(user);
resolve(); resolve();
}) })
.catch(resp => { .catch(resp => {
console.error(resp.status); console.error(`appstart req failed: ${resp.status}`);
reject(); reject();
}); });
}); });
@ -108,12 +99,12 @@ function createNewMyUser(
function createMyUser(user: MyUserAccount) { function createMyUser(user: MyUserAccount) {
store.dispatch(appVarActions.setAccount(user)); store.dispatch(appVarActions.setAccount(user));
store.dispatch(appVarActions.setCurrentAccount(user.UserId)); store.dispatch(appVarActions.setCurrentAccount(user.AccountName));
saveVarChanges(); saveVarChanges();
} }
function getMyUser(userId: UserId): MyUserAccount { function getMyUser(accountName: AccountName): MyUserAccount {
return store.getState().appVariables.preferences.accounts[userId]; return store.getState().appVariables.preferences.accounts[accountName];
} }
function setMyUser(user: MyUserAccount) { function setMyUser(user: MyUserAccount) {
@ -126,7 +117,7 @@ function logoutMyUser() {
saveVarChanges(); saveVarChanges();
} }
function getSelectedUserId(): UserId { function getSelectedUserAccount(): AccountName {
return store.getState().appVariables.preferences.selectedAccount; return store.getState().appVariables.preferences.selectedAccount;
} }
@ -142,9 +133,12 @@ function getSelectedMyUserSelector(): MyUserAccount | undefined {
return myUser; return myUser;
} }
function getSessionId(userId?: UserId): XAuthorization | undefined { function getSessionId(accountName?: AccountName): XAuthorization | undefined {
const preferences = store.getState().appVariables.preferences; const preferences = store.getState().appVariables.preferences;
let user = preferences.accounts[userId || preferences.selectedAccount];
console.log('pref', preferences);
let user = preferences.accounts[accountName || preferences.selectedAccount];
if (user === undefined) return undefined; if (user === undefined) return undefined;
@ -156,7 +150,7 @@ function getSessionId(userId?: UserId): XAuthorization | undefined {
const MyUserManager = { const MyUserManager = {
createNewMyUser, createNewMyUser,
getSessionId, getSessionId,
getSelectedUserId, getSelectedUserAccount,
logoutMyUser, logoutMyUser,
getSelectedMyUserSelector, getSelectedMyUserSelector,
}; };

103
src/user/UserManager.ts
View File

@ -1,6 +1,6 @@
import {maxCachedUsers} from '@configs/appNonSaveVar'; import {maxCachedUsers} from '@configs/appNonSaveVar';
import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer'; import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer';
import {UserId, XAuthorization} from '@configs/types'; import {AccountName, XAuthorization} from '@configs/types';
import {makeRequest, apiBackendRequest} from '@helper/request'; import {makeRequest, apiBackendRequest} from '@helper/request';
import BigDataManager from '@helper/storage/BigDataManager'; import BigDataManager from '@helper/storage/BigDataManager';
import {RootState, store} from '@redux/store'; import {RootState, store} from '@redux/store';
@ -14,13 +14,13 @@ import {
User, User,
} from './types'; } from './types';
let cachedUserList: UserId[] = []; let cachedUserList: AccountName[] = [];
async function getUser( async function getUser(
UserId: UserId, AccountName: AccountName,
save?: boolean, save?: boolean,
): Promise<User | undefined> { ): Promise<User | undefined> {
if (UserId === 'none') { if (AccountName === 'none') {
return undefined; return undefined;
} }
@ -30,35 +30,34 @@ async function getUser(
let userIsInCache = false; let userIsInCache = false;
{ {
const usr = state.nonSaveVariables.cachedUsers[UserId]; const usr = state.nonSaveVariables.cachedUsers[AccountName];
if (usr !== undefined) { if (usr !== undefined) {
user = usr; user = usr;
userIsInCache = true; userIsInCache = true;
} }
} }
if (UserId === state.appVariables.preferences.selectedAccount) { if (AccountName === state.appVariables.preferences.selectedAccount) {
const usr = state.appVariables.preferences.accounts[UserId]; const usr = state.appVariables.preferences.accounts[AccountName];
if (usr !== undefined) { if (usr !== undefined) {
user = { user = {
AccountName: usr.AccountName, AccountName: usr.AccountName,
Description: usr.Description, /*Description: usr.Description,
FollowersCount: usr.FollowersCount, FollowersCount: usr.FollowersCount,
FollowingCount: usr.FollowingCount, FollowingCount: usr.FollowingCount,
lastUpdateTimestamp: usr.lastUpdateTimestamp, lastUpdateTimestamp: usr.lastUpdateTimestamp,
ProfilePicture: usr.ProfilePicture, ProfilePicture: usr.ProfilePicture, */
UserId, Username: usr.Username /*
Username: usr.Username,
XpLevel: usr.XpLevel, XpLevel: usr.XpLevel,
XpPoints: usr.XpPoints, XpPoints: usr.XpPoints,*/,
}; };
} }
} }
if (user === undefined) { if (user === undefined) {
const usrDBKeys = BigDataManager.databases.users.keys; const usrDBKeys = BigDataManager.databases.users.keys;
const usr = await BigDataManager.databases.users.getEntry(UserId); const usr = await BigDataManager.databases.users.getEntry(AccountName);
if (usr !== undefined && usr !== null) { if (usr !== undefined && usr !== null) {
let ProfilePicture = { let ProfilePicture = {
@ -87,10 +86,7 @@ async function getUser(
}; };
user = { user = {
AccountName: createUserProp( AccountName,
SourceProp.offline,
usr[usrDBKeys.AccountName],
),
Description: createUserProp( Description: createUserProp(
SourceProp.offline, SourceProp.offline,
usr[usrDBKeys.Description], usr[usrDBKeys.Description],
@ -105,7 +101,6 @@ async function getUser(
), ),
lastUpdateTimestamp: usr[usrDBKeys.lastUpdateTimestamp], lastUpdateTimestamp: usr[usrDBKeys.lastUpdateTimestamp],
ProfilePicture, ProfilePicture,
UserId,
Username: createUserProp(SourceProp.offline, usr[usrDBKeys.Username]), Username: createUserProp(SourceProp.offline, usr[usrDBKeys.Username]),
XpLevel: createUserProp(SourceProp.offline, usr[usrDBKeys.XpLevel]), XpLevel: createUserProp(SourceProp.offline, usr[usrDBKeys.XpLevel]),
XpPoints: createUserProp(SourceProp.offline, usr[usrDBKeys.XpPoints]), XpPoints: createUserProp(SourceProp.offline, usr[usrDBKeys.XpPoints]),
@ -117,9 +112,8 @@ async function getUser(
try { try {
const resp = await makeRequest({ const resp = await makeRequest({
path: apiBackendRequest.GET_USER_PROFILE, path: apiBackendRequest.GET_USER_PROFILE,
requestGET: {':userId': UserId}, requestGET: {':accountName': AccountName},
response: { response: {
AccountName: '',
Description: '', Description: '',
FollowersCount: 0, FollowersCount: 0,
FollowingCount: 0, FollowingCount: 0,
@ -131,10 +125,7 @@ async function getUser(
}); });
user = { user = {
AccountName: createUserProp( AccountName: AccountName,
SourceProp.cached,
resp.response.AccountName,
),
Description: createUserProp( Description: createUserProp(
SourceProp.cached, SourceProp.cached,
resp.response.Description, resp.response.Description,
@ -155,7 +146,6 @@ async function getUser(
resp.response.AvatarUrl, resp.response.AvatarUrl,
), ),
}, },
UserId,
Username: createUserProp(SourceProp.offline, resp.response.Username), Username: createUserProp(SourceProp.offline, resp.response.Username),
XpLevel: createUserProp(SourceProp.cached, resp.response.XpLevel), XpLevel: createUserProp(SourceProp.cached, resp.response.XpLevel),
XpPoints: createUserProp(SourceProp.cached, resp.response.XpPoints), XpPoints: createUserProp(SourceProp.cached, resp.response.XpPoints),
@ -170,7 +160,7 @@ async function getUser(
if (userIsInCache === false && user !== undefined) { if (userIsInCache === false && user !== undefined) {
console.log('save in cache'); console.log('save in cache');
store.dispatch(appNonSaveVarActions.setCachedUser(user)); store.dispatch(appNonSaveVarActions.setCachedUser(user));
cachedUserList.push(user.UserId); cachedUserList.push(user.AccountName);
if (cachedUserList.length > maxCachedUsers) { if (cachedUserList.length > maxCachedUsers) {
let usrId = cachedUserList[0]; let usrId = cachedUserList[0];
@ -189,47 +179,47 @@ enum GetParam {
SAVE, SAVE,
} }
let getUserList: {[key: UserId]: GetParam} = {}; let getUserList: {[key: AccountName]: GetParam} = {};
async function refreshUsers() { async function refreshUsers() {
for (let UserId in getUserList) { for (let AccountName in getUserList) {
const param = getUserList[UserId]; const param = getUserList[AccountName];
delete getUserList[UserId]; delete getUserList[AccountName];
await getUser(UserId); await getUser(AccountName);
} }
} }
setInterval(refreshUsers, 500); setInterval(refreshUsers, 500);
function addUserToGetQueue(UserId: UserId, param: GetParam) { function addUserToGetQueue(AccountName: AccountName, param: GetParam) {
if (getUserList[UserId] === undefined) { if (getUserList[AccountName] === undefined) {
getUserList[UserId] = param; getUserList[AccountName] = param;
} else if (getUserList[UserId] < param) { } else if (getUserList[AccountName] < param) {
getUserList[UserId] = param; getUserList[AccountName] = param;
} }
} }
function getUserSelector(UserId: UserId) { function getUserSelector(AccountName: AccountName) {
addUserToGetQueue(UserId, GetParam.CACHE); addUserToGetQueue(AccountName, GetParam.CACHE);
const myUser = useSelector( const myUser = useSelector(
(state: RootState) => state.nonSaveVariables.cachedUsers[UserId], (state: RootState) => state.nonSaveVariables.cachedUsers[AccountName],
); );
if (myUser === undefined) { if (myUser === undefined) {
return initUndefinedUser(UserId); return initUndefinedUser(AccountName);
} }
return myUser; return myUser;
} }
function getUserSelectorPicture(UserId: UserId): ProfilePicture { function getUserSelectorPicture(AccountName: AccountName): ProfilePicture {
addUserToGetQueue(UserId, GetParam.CACHE); addUserToGetQueue(AccountName, GetParam.CACHE);
const myUser = useSelector( const myUser = useSelector(
(state: RootState) => (state: RootState) =>
state.nonSaveVariables.cachedUsers[UserId]?.ProfilePicture, state.nonSaveVariables.cachedUsers[AccountName]?.ProfilePicture,
); );
if (myUser === undefined) { if (myUser === undefined) {
@ -241,13 +231,15 @@ function getUserSelectorPicture(UserId: UserId): ProfilePicture {
return myUser; return myUser;
} }
/*
function getUserSelectorAccountName(UserId: UserId): BasicUserProp<string> { function getUserSelectorAccountName(
addUserToGetQueue(UserId, GetParam.CACHE); AccountName: AccountName,
): AccountName {
addUserToGetQueue(AccountName, GetParam.CACHE);
const myUser = useSelector( const myUser = useSelector(
(state: RootState) => (state: RootState) =>
state.nonSaveVariables.cachedUsers[UserId]?.AccountName, state.nonSaveVariables.cachedUsers[AccountName]?.AccountName,
); );
if (myUser === undefined) { if (myUser === undefined) {
@ -255,23 +247,22 @@ function getUserSelectorAccountName(UserId: UserId): BasicUserProp<string> {
} }
return myUser; return myUser;
} } */
function initUndefinedUser(UserId: UserId): User { function initUndefinedUser(AccountName: AccountName): User {
return { return {
AccountName: createUserProp(SourceProp.online), AccountName: AccountName,
Description: createUserProp(SourceProp.online), /* Description: createUserProp(SourceProp.online),
FollowersCount: createUserProp(SourceProp.online), FollowersCount: createUserProp(SourceProp.online),
FollowingCount: createUserProp(SourceProp.online), FollowingCount: createUserProp(SourceProp.online),
lastUpdateTimestamp: 0, lastUpdateTimestamp: 0,
ProfilePicture: { ProfilePicture: {
lq: createUserProp(SourceProp.online), lq: createUserProp(SourceProp.online),
hq: createUserProp(SourceProp.online), hq: createUserProp(SourceProp.online),
}, }, */
UserId, Username: createUserProp(SourceProp.online) /*
Username: createUserProp(SourceProp.online),
XpLevel: createUserProp(SourceProp.online), XpLevel: createUserProp(SourceProp.online),
XpPoints: createUserProp(SourceProp.online), XpPoints: createUserProp(SourceProp.online), */,
}; };
} }
@ -279,7 +270,7 @@ const UserManager = {
getUser, getUser,
getUserSelector, getUserSelector,
getUserSelectorPicture, getUserSelectorPicture,
getUserSelectorAccountName, //getUserSelectorAccountName,
initUndefinedUser, initUndefinedUser,
}; };
export default UserManager; export default UserManager;

19
src/user/types.ts
View File

@ -1,13 +1,10 @@
import {ThemeMode} from '@configs/colors'; import {ThemeMode} from '@configs/colors';
import { import {
AccountName, AccountName,
EMail,
langCode, langCode,
XAuthorization, XAuthorization,
timestamp, timestamp,
UserId,
Username, Username,
WebSocketSessionId,
} from '@configs/types'; } from '@configs/types';
export enum SourceProp { export enum SourceProp {
@ -30,23 +27,23 @@ export interface ProfilePicture {
} }
export interface User { export interface User {
UserId: UserId; //UserId: UserId;
AccountName: AccountName;
ProfilePicture: ProfilePicture; /* ProfilePicture: ProfilePicture;
lastUpdateTimestamp: timestamp; lastUpdateTimestamp: timestamp; */
AccountName: BasicUserProp<AccountName>; Username: BasicUserProp<Username> /*
Username: BasicUserProp<Username>;
Description: BasicUserProp<string>; Description: BasicUserProp<string>;
FollowersCount: BasicUserProp<number>; FollowersCount: BasicUserProp<number>;
FollowingCount: BasicUserProp<number>; FollowingCount: BasicUserProp<number>;
XpLevel: BasicUserProp<number>; XpLevel: BasicUserProp<number>;
XpPoints: BasicUserProp<number>; XpPoints: BasicUserProp<number>; */;
} }
export interface MyUserAccount extends User { export interface MyUserAccount extends User {
EMail: EMail; //EMail: EMail;
SessionId: XAuthorization; SessionId: XAuthorization;
WebSocketSessionId: WebSocketSessionId; //WebSocketSessionId: WebSocketSessionId;
userSettings: userSettings; userSettings: userSettings;
} }