123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- 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>
-
- {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 }}
- showsVerticalScrollIndicator={false}
- >
- {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>
- )}
- </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;
|