transactions.tsx

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, RefreshControl } from "react-native";
import Timeline from "react-native-timeline-flatlist";
import { db, auth } from "../api/FirebaseApi";

export default function Transactions() {
  const [contents, setContent] = useState("");
  const [user, currentuser] = useState("");
  const [refresh, setRefresh] = useState(false);
  const [seed, setSeed] = useState(1);
  const [page, setPage] = useState(1);
  const fetchPosts = async () => {
    let currentmember = auth.currentUser.uid;
    let elements = [];
    await db.ref("client/").onSnapshot((snapshot) => {
      if (snapshot.val() != null) {
        Object.keys(snapshot.val()).map((val) => {
          db.ref("client/" + val + "/client/").onSnapshot((snapshot) => {
            if (snapshot.val()) {
              if (snapshot.val().useruid.trim() == currentmember.trim()) {
                currentuser(snapshot.val().displayname);
                db.ref("client/" + val + "/agent/").onSnapshot((snapshot) => {
                  Object.keys(snapshot.val()).map((val2) => {
                    db.ref("client/" + val + "/agent/" + val2 + "/").onSnapshot(
                      (snapshot) => {
                        elements.push({
                          agentName: val2,
                          content: snapshot.val().content.trim(),
                        });
                      }
                    );
                  });
                });
                return;
              }
            }
          });
        });
      }
    });
    setContent(elements);
  };

  useEffect(fetchPosts);
  const data = [
    {
      time: "09:00",
      title: "Archery Training",
      description:
        "The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ",
      lineColor: "#009688",
      imageUrl:
        "https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg",
    },
    {
      time: "10:45",
      title: "Play Badminton",
      description:
        "Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.",
      imageUrl:
        "https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg",
    },
    {
      time: "12:00",
      title: "Lunch",
    },
    {
      time: "14:00",
      title: "Watch Soccer",
      description:
        "Team sport played between two teams of eleven players with a spherical ball. ",
      lineColor: "#009688",
      imageUrl:
        "https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg",
    },
    {
      time: "16:30",
      title: "Go to Fitness center",
      description: "Look out for the Best Gym & Fitness Centers around me :)",
      imageUrl:
        "https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg",
    },
  ];

  const renderItems = (rowData) => {
    const { index, item } = rowData;
    return (
      <View
        style={{
          padding: 10,
          borderWidth: 1,
          width: "100%",
          alignItems: "center",
        }}
      >
        <Text> {item.agentName} </Text> <Text> {item.content} </Text>
      </View>
    );
  };
  const handleRefresh = () => {
    setRefresh(true);
    setSeed(seed + 1);
    setPage(1);
    fetchPosts();
  };

  return (
    <View style={styles.container}>
      <Timeline
        style={styles.list}
        data={data}
        renderItems={renderItems}
        circleSize={20}
        circleColor="rgba(0,0,0,0)"
        lineColor="rgb(45,156,219)"
        timeContainerStyle={{ minWidth: 52, marginTop: -5 }}
        timeStyle={{
          textAlign: "center",
          backgroundColor: "#ff9797",
          color: "white",
          padding: 5,
          borderRadius: 13,
        }}
        descriptionStyle={{ color: "gray" }}
        options={{
          style: { paddingTop: 5 },
        }}
        innerCircle={"icon"}
        showsVerticalScrollIndicator={false}
        onRefresh={handleRefresh}
        refreshing={refresh}
        separator={false}
        detailContainerStyle={{
          marginBottom: 20,
          paddingLeft: 5,
          paddingRight: 5,
          backgroundColor: "#BBDAFF",
          borderRadius: 10,
        }}
        columnFormat="two-column"
        refreshControl={
          <RefreshControl
            refreshing={refresh}
            onRefresh={handleRefresh}
            tintColor="red"
            title="Getting Fresh Posts..."
            titleColor="red"
          />
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  list: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: "bold",
  },
  descriptionContainer: {
    flexDirection: "row",
    paddingRight: 50,
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  textDescription: {
    marginLeft: 10,
    color: "gray",
  },
});

Transactions.navigationOptions = ({ navigation }) => {
  return {
    headerTitle: "Search",
    headerTintColor: "white",
    headerStyle: {
      backgroundColor: "black",
    },
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  };
};