diligent-react-native/screens/HomeScreen.jsx

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  ScrollView,
  ImageBackground,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import Feather from "@expo/vector-icons/Feather";
import ListItem from "@components/ListItem/ListItem";
import filter from "lodash.filter";
import { globalStyles } from "@styles/global";
import Layout from "@components/Layout/Layout";
import { useTheme } from "@styles";
import { useTranslation } from "react-i18next";
import { useAllPostsQuery } from "@features/posts/postsApiSlice";
import Loader from "@components/Loader";

const HomeScreen = ({ navigation }) => {
  const { colors } = useTheme();
  const { t } = useTranslation();
  const { data, isLoading } = useAllPostsQuery();

  const [query, setQuery] = useState("");
  const [posts, setPosts] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  const contains = (name, search) => {
    if (name.includes(search)) {
      return true;
    }
    return false;
  };

  const searchFilter = (text) => {
    const formatedText = text.toLowerCase();

    const data = filter(posts, (item) => {
      return contains(item?.attributes.title.toLowerCase(), formatedText);
    });
    setFilteredData(data);
    setQuery(formatedText);
  };

  useEffect(() => {
    if (data?.data) {
      setPosts(data?.data);
    }
  }, [data]);

  useEffect(() => {
    if (posts) {
      setFilteredData(posts);
    }
  }, [posts]);
  return (
    <Layout>
      <Loader visible={isLoading} />
      <View style={styles.wrapper}>
        <Text style={{ fontSize: 18, color: colors.textPrimary }}>
          {t("common.hello")}, Diligent
        </Text>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <ImageBackground
            source={require("../assets/images/diligent-purple.png")}
            style={styles.imageBackground}
            imageStyle={{ borderRadius: 25 }}
          />
        </TouchableOpacity>
      </View>
      <View style={styles.search}>
        <Feather
          name="search"
          size={20}
          color="#C6C6C6"
          style={{ marginRight: 5 }}
        />
        <TextInput
          onChangeText={(text) => searchFilter(text)}
          autoCapitalize="none"
          autoCorrect={false}
          placeholder={t("common.search")}
          value={query}
          placeholderTextColor="#C6C6C6"
          style={{ flex: 1, color: colors.textPrimary }}
        />
      </View>
      <Text>
        {filteredData?.length === 0 && (
            <View style={{paddingHorizontal: 18}}>
              <Text
                style={[globalStyles.boldText, { color: colors.textPrimary }]}
              >
                {t('common.noResults')}
              </Text>
            </View>
          )}
        {!isLoading && (
          <ScrollView style={{ flex: 1, paddingHorizontal: 18 }}>
            {query.length === 0
              ? posts?.map((post) => (
                  <ListItem
                    key={post?.id}
                    title={post?.attributes?.title}
                    photo={
                      post?.attributes?.profileImage?.data?.attributes?.formats
                    }
                    publishedAt={post?.attributes?.publishedAt}
                    onPress={() =>
                      navigation.navigate("PostDetails", {
                        title: post?.attributes?.title,
                        id: post?.id,
                      })
                    }
                  />
                ))
              : filteredData.map((post) => (
                  <ListItem
                    key={post?.id}
                    title={post?.attributes?.title}
                    photo={
                      post?.attributes?.profileImage?.data?.attributes?.formats
                    }
                    publishedAt={post?.attributes?.publishedAt}
                    onPress={() =>
                      navigation.navigate("PostDetails", {
                        title: post?.attributes?.title,
                        id: post?.id,
                      })
                    }
                  />
                ))}
          </ScrollView>
        )}
      </Text>
    </Layout>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 20,
    padding: 18,
  },
  imageBackground: {
    width: 35,
    height: 35,
  },
  search: {
    flexDirection: "row",
    borderColor: "#C6C6C6",
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    paddingVertical: 8,
    marginBottom: 20,
    marginHorizontal: 18,
  },
});

export default HomeScreen;