videos2.jsx

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
} from "react-native";
import DrawerButton from "../drawer/drawerButton";
// import FirebaseService from "../api/FirebaseService";
import { db, auth } from "../api/FirebaseApi";
import { Button } from "react-native-paper";
import AbortController from "abort-controller";

export default function Videos2() {
  const [query, setQuery] = useState("");
  const [clients, setClients] = useState([]);
  const [main, setmain] = useState(true);
  const [currentclient, setcurrent] = useState("");
  const [contents, setContent] = useState("");
  const [user, currentuser] = useState("");
  const [describe, setDescribe] = useState("");
  const [show, setshow] = useState(false);
  const controller = new AbortController();
  const signal = controller.signal;

  useEffect(() => {
    const fetchPosts = async () => {
      if (query == "") {
        setshow(false);
      } else {
        setshow(true);
      }
      db.ref("client/").on("value", (snapshot) => {
        setClients(
          Object.keys(snapshot.val()).filter((x) => x.indexOf(query) >= 0)
        );
      });

      let currentmember = auth.currentUser.uid;
      console.log(auth.currentUser.uid);
      db.ref("agent/").on("value", (snapshot) => {
        if (snapshot.val() != null) {
          Object.keys(snapshot.val()).map((val) => {
            db.ref("agent/" + val + "/agent/").on("value", function (snapshot) {
              if (snapshot.val()) {
                if (snapshot.val()) {
                  if (snapshot.val().useruid.trim() == currentmember.trim()) {
                    currentuser(snapshot.val().displayname);
                  }
                }
              }
            });
          });
        }
      });
    };
    fetchPosts().then();
  }, [query]);

  const backbutton = () => {
    setmain(true);
    setQuery("");
    setContent("");
  };

  const Search = (query) => {
    setQuery(query);
  };

  const sendData = () => {
    db.ref(
      "client/" + currentclient.trim() + "/agent/" + user + "/Videos"
    ).push({
      Video: contents,
      Description: describe,
    });
    setQuery("");
    setContent("");
  };

  const renderItems = (rowData) => {
    const { index, item } = rowData;
    return (
      <TouchableOpacity
        onPress={() => {
          setmain(false), setcurrent(item);
        }}
        style={{
          padding: 10,
          borderWidth: 1,
          width: "100%",
          alignItems: "center",
        }}
      >
        <Text> {item} </Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      {main == true ? (
        <View style={{ flex: 1, alignItems: "center", marginTop: 50 }}>
          <TextInput
            style={{
              borderWidth: 1,
              width: "80%",
              padding: 10,
              borderRadius: 10,
              marginTop: 20,
            }}
            value={query}
            onChangeText={(text) => {
              setQuery(text);
            }}
          />
          <View
            style={{ width: "80%", display: show == true ? "flex" : "none" }}
          >
            <FlatList
              data={clients}
              keyExtractor={(item, index) => index.toString()}
              renderItem={renderItems}
            />
          </View>
        </View>
      ) : (
        <View>
          <Text> {currentclient} </Text>
          <Button onPress={backbutton}> back </Button>
          <>
            <Text>Send Youtube or Vimeo links to your client</Text>
          </>
          <TextInput
            multiline={false}
            maxLength={10000}
            style={{
              borderWidth: 1,
              width: "80%",
              padding: 10,
              borderRadius: 10,
              marginTop: 20,
            }}
            value={contents}
            onChangeText={(text) => {
              setContent(text);
            }}
          />
          <>
            <Text>Video name</Text>
          </>
          <TextInput
            style={{
              borderWidth: 1,
              width: "80%",
              height: 40,
            }}
            value={describe}
            onChangeText={(text) => {
              setDescribe(text);
            }}
          />
          <Button onPress={sendData}> send </Button>{" "}
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({});

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