app/(tabs)/two.tsx - master - Muip/ProBody

app/(tabs)/two.tsx
179 строк6 KB
chmerev
new
14 авг 2024, 12:02
14 авг 2024, 12:02595f266
import { StyleSheet, Image, SafeAreaView, ScrollView, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
import AView from '../../components/AView';
import AText from '../../components/AText';
import React, { useEffect, useState } from 'react';
import AButton from '../../components/AButton';
import { useNavigation } from 'expo-router';
import useAirTable from '../../hooks/useAirTable';
import { Meditation } from '../../airtable/propsMeditation';
import Play from '../../assets/images/player/play-global.png';
import Arrow from '../../assets/images/player/arrow.png';
import Colors from '../../constants/Colors';
import Background from '../../assets/images/background.png';
import useUser from '../../hooks/useUser';
import LockIcon from '../../assets/images/icons/lock.svg'


const ListSize = 6;


export default function TabTwoScreen() {
	const airTable = useAirTable();
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	const navigate = useNavigation();

	const user = useUser();

	const [page, setPage] = useState(1);

	const [allMeditations, setAllMeditations] = useState<Meditation[]>([]);
	const [currentMeditations, setCurrentMeditations] = useState<Meditation[]>([]);

	useEffect(() => {
		(async() => {
			const getArticles = await airTable.GetMeditations();
			setAllMeditations(getArticles);
		})()
	},[])

	useEffect(() => {
		const firstArticles: Meditation[] = [];

		for (let i = 0; i < allMeditations.length; i++) {
			if (i > ListSize) {
				break
			}
			if (i < ListSize) {
				firstArticles.push(allMeditations[i]);
			}
		}

		setCurrentMeditations([...firstArticles]);
	},[allMeditations])

	function loadMoreArticles() {

		const newArticles: Meditation[] = [];

		for (let i = 0; i < ListSize; i++) {
			if (allMeditations[((page + 1) * ListSize) - (ListSize - i)]) {
				newArticles.push(allMeditations[((page + 1) * ListSize) - (ListSize - i)])
			}
		}

		setPage(page+ 1)
		setCurrentMeditations([...currentMeditations, ...newArticles])
	}

	const trimText = (text: string, length: number) => {
		let sliced = text.slice(0,length);
		if (sliced.length < text.length) {
			sliced += '...';
		}
		return sliced
	}

	return (
		<SafeAreaView style={styles.container}>

			{currentMeditations.length === 0 &&
				<ActivityIndicator color={Colors.accent} size={'large'} style={styles.loading} />
			}

			<Image source={Background} style={styles.backgroundImage} resizeMode='stretch' />
			
			<ScrollView style={{width:'100%', backgroundColor: 'transparent'}}>

				<AView style={{...styles.container, backgroundColor: 'transparent'}}>

					<AText style={{paddingLeft: 20, paddingBottom: 20, fontSize: 28, fontWeight: 'bold', width: '100%', paddingTop: Platform.OS === 'ios' ? 25 : 40}}>{'телесные \n'}<AText style={{color: Colors.accent, paddingLeft: 20, paddingBottom: 20, fontSize: 28, fontWeight: 'bold', width: '100%', paddingTop: 25}}>трансы и гипнозы</AText></AText>

					{currentMeditations && currentMeditations.length > 0 && currentMeditations.map((meditation) => (
						<TouchableOpacity disabled={meditation.groupId !== 'free' && !user?.groups?.map(group => group.id).includes(meditation.groupId) ? true : false} style={{width: '100%', alignItems: 'center', marginBottom: 10}} key={meditation?.id} onPress={() => {

							if (meditation.groupId === 'free' || user?.groups?.map(group => group.id).includes(meditation.groupId)) {
								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
								//@ts-ignore
								navigate.navigate('meditation-in', {id: meditation.id, url: meditation.url, title: meditation.name.replaceAll('\r', '').replaceAll('\n', ''), author: meditation.author, image: meditation.image, description: meditation.description, fullDescription: meditation.fullDescription})
							}}
						}>

							<AView style={{padding: 18 , backgroundColor: 'white', width: '85%', borderRadius: 24, justifyContent: 'space-between', flexDirection: 'row', opacity: meditation.groupId !== 'free' && !user?.groups?.map(group => group.id).includes(meditation.groupId) ? 0.5 : 1}}>

								<AView style={{flexDirection: 'row', alignItems: 'center', backgroundColor: 'transparent'}}>

									{meditation.groupId !== 'free' && !user?.groups?.map(group => group.id).includes(meditation.groupId) ? 
									
										<AView style={{width: 48, height: 48, marginRight: 10, backgroundColor: '#DFE5EE', borderRadius: 13, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
											<LockIcon width={24} height={24}/>
										</AView> :
									
										<Image source={Play} style={{width: 48, height: 48, marginRight: 10}}/> 
									}

									<AView style={{backgroundColor: 'transparent'}}>
										<AText style={{fontSize: 15, color: '#2B2D3F', fontFamily: 'SfProDisplayMedium'}}>{trimText(meditation.name, 22)}</AText>
										<AText style={{fontSize: 12, color: '#2B2D3F', paddingTop: 3}}>{trimText(meditation?.description, 35)}</AText>
									</AView>
								</AView>

								<AView style={{justifyContent: 'center', backgroundColor: 'transparent'}}>
									<Image source={Arrow} style={{width: 8, height: 16}}></Image>
								</AView>
								
							</AView>
						</TouchableOpacity>
					))}

					{allMeditations.length !== currentMeditations.length && <AButton style={{width: '80%', marginTop: 20, marginBottom: Platform.OS === 'android' ? 100 : 30,  alignSelf:'center'}} onPress={loadMoreArticles} text='Показать еще'></AButton>}


				</AView>

			</ScrollView>
		</SafeAreaView>
		
	);
}

const styles = StyleSheet.create({
	backgroundImage: {
		position: 'absolute', width: '120%', height: '120%', top: 0, left: 0
	},
	container: {
		flex: 1,
		width: '100%',
		backgroundColor: 'transparent',
		minHeight: '100%',
		alignItems: 'center',
		position: 'relative',
	},
	title: {
		fontSize: 20,
		fontWeight: 'bold',
	},
	separator: {
		marginVertical: 30,
		height: 1,
		width: '80%',
	},
	image: {
		width: 120,
		height: 120,
		borderRadius: 10
	},
	topArticle: {
		display: 'flex',
		flexDirection: 'row',
		width: '100%',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginBottom: 16
	},
	loading: {
		position: 'absolute',
		top: '50%',
		left: '50%',
		transform: [{ translateX: -20 }, { translateY: -20 }]
	},
});