Skip to content

Instantly share code, notes, and snippets.

@ashutosh887
Last active May 18, 2022 17:39
Show Gist options
  • Save ashutosh887/55a2e0ef3cdfbf8797bbd358634b6d3d to your computer and use it in GitHub Desktop.
Save ashutosh887/55a2e0ef3cdfbf8797bbd358634b6d3d to your computer and use it in GitHub Desktop.
Screen
import React, { useEffect, useState } from "react";
import {
FlatList,
Image,
ScrollView,
Text,
View,
RefreshControl,
Pressable,
} from "react-native";
import GradientHeader from "../components/GradientHeader";
import FanplayCardItem from "../components/FanplayCardItem";
import styles from "../styles/screens/homeScreen";
import { ActivityIndicator, Card, Title, Paragraph } from "react-native-paper";
import ChallengesVideoItem from "../components/ChallengesVideoItem";
import { LinearGradient } from "expo-linear-gradient";
import moment from "moment";
import { connect } from "react-redux";
import AppActions from "../Redux/AppRedux";
const TrendingScreen = ({
navigation,
userId,
access_token,
fanplayEventsSuccess,
fanplayData,
fanplayEvents,
}) => {
const [page, setPage] = useState("/events");
const [checktext, setCheckText] = useState("");
const [refreshing, setRefreshing] = useState(false);
const [dt, setDt] = useState(Date.now());
useEffect(() => {
let secTimer = setInterval(() => {
setDt(Date.now());
}, 1000);
return () => clearInterval(secTimer);
}, []);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
fanplayEvents(page);
}, []);
useEffect(() => {
setRefreshing(true);
fanplayEvents(page);
}, []);
useEffect(() => {
if (fanplayEventsSuccess) {
setCheckText(fanplayData[0].entryFee);
console.log("Okay", fanplayData);
}
}, [fanplayData, fanplayEventsSuccess]);
function convertHMS(value) {
const sec = parseInt(value, 10); // convert value to number if it's string
let hours = Math.floor(sec / 3600); // get hours
let minutes = Math.floor((sec - hours * 3600) / 60); // get minutes
let seconds = sec - hours * 3600 - minutes * 60; // get seconds
// add 0 if value < 10; Example: 2 => 02
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + ":" + minutes + ":" + seconds; // Return is HH : MM : SS
}
return checktext == null ? (
<ActivityIndicator />
) : (
<View style={{ flex: 1 }}>
<GradientHeader title={"Fanplay"} showArrow={false} />
<LinearGradient
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 1 }}
colors={["white", "#d4bff9"]}
>
<ScrollView
style={{ marginTop: 10 }}
showsVerticalScrollIndicator={false}
>
<View>
<ScrollView
style={styles.videoThumbsScrollView}
showsVerticalScrollIndicator={false}
>
<FlatList
data={fanplayData}
renderItem={({ item }) => (
<>
<Card
//elevation={1}
mode="outlined"
onPress={() =>
navigation.navigate("FanplayChallengeScreen", {
event: fanplayData[0],
// singer: el.array,
})
}
style={{
borderRadius: 10,
width: "95%",
marginLeft: "2.5%",
}}
>
{/* <Card.Cover source={{ uri: item.fanplayPosterURL }} /> */}
<Card.Content>
<Title
style={{
fontWeight: "light",
fontSize: 14,
textAlign: "center",
}}
>
Tune Maari Entriyaan
</Title>
<Text style={{ color: "red", textAlign: "center" }}>
{convertHMS(
Math.floor(
(new Date("2022-05-05T13:07:00.175Z").getTime() -
dt) /
1000
)
)}
</Text>
<View
style={{
justifyContent: "space-between",
flexDirection: "row",
margin: 5,
}}
>
<View style={{}}>
<Image
source={{
uri: "https://picsum.photos/id/237/200/300",
}}
style={{
width: 50,
height: 50,
borderRadius: 50 / 2,
resizeMode: "cover",
alignSelf: "center",
}}
/>
<Text
style={{
fontWeight: "bold",
fontSize: 15,
margin: 5,
}}
>
ARJUN KAPOOR
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={{ color: "black" }}>Vs</Text>
</View>
<View style={{}}>
<Image
source={{
uri: "https://picsum.photos/id/237/200/300",
}}
style={{
width: 50,
height: 50,
borderRadius: 50 / 2,
resizeMode: "cover",
alignSelf: "center",
}}
/>
<Text
style={{
fontWeight: "bold",
fontSize: 15,
margin: 5,
}}
>
RANVEER SINGH
</Text>
</View>
</View>
</Card.Content>
<View
style={{
borderBottomColor: "black",
borderBottomWidth: 1,
marginTop: 10,
}}
/>
<View
style={{
backgroundColor: "#8A80CB",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
<View
style={{
justifyContent: "space-between",
flexDirection: "row",
width: "95%",
marginLeft: "2.5%",
marginTop: 2,
marginBottom: 2,
}}
>
<Text style={{ color: "white", fontWeight: "bold" }}>
{" "}
Entry Fee - Rs. {item.entryFee}
</Text>
<Text style={{ color: "white", fontWeight: "bold" }}>
{" "}
Rewards upto Rs. {item.rewards}
</Text>
</View>
</View>
</Card>
<View
style={{
marginTop: 10,
}}
></View>
</>
)}
></FlatList>
</ScrollView>
</View>
</ScrollView>
</LinearGradient>
</View>
);
};
const mapStateToProps = (state) => ({
userId: state.app.userId,
access_token: state.app.access_token,
fanplayData: state.app.fanplayData,
fanplayEventsSuccess: state.app.fanplayEventsSuccess,
});
const mapDispatchToProps = (dispatch) => ({
fanplayEvents: (page) => dispatch(AppActions.fanplayEvents(page)),
});
export default connect(mapStateToProps, mapDispatchToProps)(TrendingScreen);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment