Screen

TrendingScreen-Copy.js

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);