From 0fb682b86655061c8c5c2059f1ff510068f19072 Mon Sep 17 00:00:00 2001
From: Burhan YILMAZ <burhan.yilmaaz@gmail.com>
Date: Mon, 15 Jan 2024 00:10:08 +0300
Subject: [PATCH] feat: added explore tab - updated activity indicator color -
 refactored components

---
 .../BlogTabHeader/BlogTabHeaderGoBack.tsx     |  4 +
 src/components/Post/PostCard.tsx              | 23 +++---
 src/components/core/Button.tsx                |  3 +-
 src/components/core/Input.tsx                 | 24 +++---
 src/hooks/useDebounce.ts                      | 17 ++++
 src/navigators/BlogNavigator.tsx              |  3 +-
 src/screens/Blog/ExploreScreen.tsx            | 49 ++++++++++++
 src/screens/Blog/HomeScreen.tsx               |  9 ++-
 src/screens/Welcome/index.tsx                 |  3 +-
 src/services/Api.ts                           | 11 ++-
 src/store/PostStore.ts                        |  6 +-
 src/store/SearchStore.ts                      | 80 +++++++++++++++++++
 src/theme/colors.js                           | 13 +++
 13 files changed, 218 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/useDebounce.ts
 create mode 100644 src/screens/Blog/ExploreScreen.tsx
 create mode 100644 src/store/SearchStore.ts

diff --git a/src/components/BlogTabHeader/BlogTabHeaderGoBack.tsx b/src/components/BlogTabHeader/BlogTabHeaderGoBack.tsx
index e474998..f68bc6e 100644
--- a/src/components/BlogTabHeader/BlogTabHeaderGoBack.tsx
+++ b/src/components/BlogTabHeader/BlogTabHeaderGoBack.tsx
@@ -5,6 +5,10 @@ import { Pressable } from 'react-native';
 const BlogTabHeaderGoBack = () => {
   const { dispatch } = useNavigation();
 
+  if (!__DEV__) {
+    return null;
+  }
+
   return (
     <Pressable className="ml-5" onPress={() => dispatch(StackActions.popToTop)}>
       <ArrowLeft className="text-zinc-800" />
diff --git a/src/components/Post/PostCard.tsx b/src/components/Post/PostCard.tsx
index 37423f5..10d0dcf 100644
--- a/src/components/Post/PostCard.tsx
+++ b/src/components/Post/PostCard.tsx
@@ -15,7 +15,7 @@ const CARD_IMAGE_WIDTH = (width - 40) * 0.3;
 const CARD_IMAGE_HEIGHT = (width - 40) * 0.35;
 
 type Props = {
-  title: string;
+  title?: string;
   image?: string;
   category?: string;
   onPressPost: () => void;
@@ -25,22 +25,27 @@ type Props = {
 const PostCard = ({ image, title, category, onPressPost, onPressSave }: Props) => (
   <Pressable
     onPress={onPressPost}
+    style={{ minHeight: 120 }}
     className="pb-4 bg-white border-b-b1 border-zinc-100 mb-4 flex-row">
-    <View style={styles.cardImage} className="items-center justify-center bg-zinc-50 rounded-md">
+    <View
+      style={styles.cardImage}
+      className="items-center justify-center bg-zinc-50 rounded-md overflow-hidden">
       {image ? (
         <Image source={{ uri: image }} className="mb-2 rounded-md" style={styles.cardImage} />
       ) : (
         <ActivityIndicator />
       )}
     </View>
-    <View className="flex-1 ml-4">
-      <View className="mb-2 h-5">
-        <Text className={text({ type: 'subhead', class: 'text-zinc-500' })}>{category}</Text>
+    <View className="flex-1 ml-4 justify-between">
+      <View>
+        <View className="mb-2 h-5">
+          <Text className={text({ type: 'subhead', class: 'text-zinc-500' })}>{category}</Text>
+        </View>
+        <Text className={text({ type: 'title4', class: 'text-zinc-900' })} numberOfLines={3}>
+          {title}
+        </Text>
       </View>
-      <Text className={text({ type: 'title4', class: 'text-zinc-900' })} numberOfLines={3}>
-        {title}
-      </Text>
-      <View className="absolute bottom-0 left-0 w-full self-center justify-center items-end">
+      <View className="bottom-0 left-0 w-full self-center justify-center items-end">
         <TouchableOpacity onPress={onPressSave}>
           <Bookmark className="text-zinc-300" />
         </TouchableOpacity>
diff --git a/src/components/core/Button.tsx b/src/components/core/Button.tsx
index cb35d66..eb52794 100644
--- a/src/components/core/Button.tsx
+++ b/src/components/core/Button.tsx
@@ -1,3 +1,4 @@
+import colors from '@theme/colors';
 import { text } from '@theme/text';
 import { ActivityIndicator, Text, TouchableOpacity } from 'react-native';
 
@@ -10,7 +11,7 @@ type Props = {
 const Button = ({ title, onPress, isLoading }: Props) => (
   <TouchableOpacity onPress={onPress} className="px-6 py-4 bg-zinc-900 rounded-lg">
     {isLoading ? (
-      <ActivityIndicator />
+      <ActivityIndicator color={colors.zinc[200]} />
     ) : (
       <Text className={text({ type: 'subtitle', isCenter: true, class: 'text-white' })}>
         {title}
diff --git a/src/components/core/Input.tsx b/src/components/core/Input.tsx
index 6d640ec..7281fd5 100644
--- a/src/components/core/Input.tsx
+++ b/src/components/core/Input.tsx
@@ -1,20 +1,26 @@
-import { TextInput } from 'react-native';
+import { ReactNode } from 'react';
+import { TextInput, View } from 'react-native';
 
 type Props = {
   value?: string;
   placeholder?: string;
+  rightIcon?: ReactNode;
   containerClass?: string;
-  onPressClose?: () => void;
   onChangeText: (value: string) => void;
 };
 
-const Input = ({ value, containerClass, placeholder, onChangeText }: Props) => (
-  <TextInput
-    value={value}
-    placeholder={placeholder}
-    onChangeText={onChangeText}
-    className={`border-[2px] rounded-lg h-[50px] border-zinc-700 text-zinc-600 px-4 pr-10 font-Medium bg-white ${containerClass}`}
-  />
+const Input = ({ value, containerClass, placeholder, onChangeText, rightIcon }: Props) => (
+  <View className="">
+    <TextInput
+      value={value}
+      placeholder={placeholder}
+      onChangeText={onChangeText}
+      className={`border-[2px] rounded-lg h-[50px] border-zinc-700 text-zinc-600 px-4 pr-10 font-Medium bg-white ${containerClass}`}
+    />
+    {rightIcon ? (
+      <View className="justify-center items-center absolute right-4  h-full z-50">{rightIcon}</View>
+    ) : null}
+  </View>
 );
 
 export default Input;
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..c3a4bde
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(handler);
+  }, [value]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/src/navigators/BlogNavigator.tsx b/src/navigators/BlogNavigator.tsx
index 92d06a2..26014a9 100644
--- a/src/navigators/BlogNavigator.tsx
+++ b/src/navigators/BlogNavigator.tsx
@@ -4,6 +4,7 @@ import BlogTabHeaderTitle from '@components/BlogTabHeader/BlogTabHeaderTitle';
 import BottomTab from '@components/BottomTab';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import ExploreScreen from '@screens/Blog/ExploreScreen';
 import BlogHomeScreen from '@screens/Blog/HomeScreen';
 import TestScreen from '@screens/Test';
 
@@ -33,7 +34,7 @@ const BlogTab = () => (
       headerTitle: props => <BlogTabHeaderTitle title={props.children} />,
     }}>
     <Tab.Screen name="Home" component={BlogHomeScreen} />
-    <Tab.Screen name="Explore" component={TestScreen} />
+    <Tab.Screen name="Explore" component={ExploreScreen} />
     <Tab.Screen name="Saved" component={TestScreen} />
   </Tab.Navigator>
 );
diff --git a/src/screens/Blog/ExploreScreen.tsx b/src/screens/Blog/ExploreScreen.tsx
new file mode 100644
index 0000000..978d370
--- /dev/null
+++ b/src/screens/Blog/ExploreScreen.tsx
@@ -0,0 +1,49 @@
+import Input from '@components/core/Input';
+import Post from '@containers/Post';
+import useDebounce from '@hooks/useDebounce';
+import searchStore from '@store/SearchStore';
+import colors from '@theme/colors';
+import { Search } from 'lucide-react-native';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import { ActivityIndicator, FlatList, SafeAreaView, View } from 'react-native';
+
+const ExploreScreen = () => {
+  const value = useDebounce(searchStore.term, 300);
+
+  useEffect(() => {
+    if (value.length > 2) {
+      searchStore.searchPost();
+    }
+  }, [value]);
+
+  return (
+    <SafeAreaView className="bg-white flex-1">
+      <View className="px-4 mb-4">
+        <Input
+          placeholder="Search..."
+          onChangeText={searchStore.setTerm}
+          rightIcon={
+            searchStore.loading ? (
+              <ActivityIndicator className="" color={colors.zinc[800]} />
+            ) : (
+              <Search className="text-zinc-600" />
+            )
+          }
+        />
+      </View>
+
+      <FlatList
+        windowSize={6}
+        className="px-5 pt-4"
+        removeClippedSubviews
+        initialNumToRender={6}
+        maxToRenderPerBatch={6}
+        data={searchStore.listResult || []}
+        renderItem={({ item }) => <Post post={item} />}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default observer(ExploreScreen);
diff --git a/src/screens/Blog/HomeScreen.tsx b/src/screens/Blog/HomeScreen.tsx
index eab90fc..ba2e068 100644
--- a/src/screens/Blog/HomeScreen.tsx
+++ b/src/screens/Blog/HomeScreen.tsx
@@ -1,5 +1,6 @@
 import Post from '@containers/Post';
 import postStore, { PostType } from '@store/PostStore';
+import colors from '@theme/colors';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import { ActivityIndicator, FlatList, ListRenderItem, View } from 'react-native';
@@ -19,7 +20,11 @@ const BlogHomeScreen = () => {
   return (
     <View className="bg-white  flex-1">
       {postStore.loading && posts.length > 0 && (
-        <ActivityIndicator size="large" className="absolute z-50 right-0 left-0 bottom-4" />
+        <ActivityIndicator
+          size="large"
+          color={colors.zinc[600]}
+          className="absolute z-50 right-0 left-0 bottom-4"
+        />
       )}
       <FlatList
         data={posts}
@@ -30,7 +35,7 @@ const BlogHomeScreen = () => {
         maxToRenderPerBatch={6}
         renderItem={RenderItem}
         onEndReached={postStore.increasePage}
-        ListEmptyComponent={<ActivityIndicator />}
+        ListEmptyComponent={<ActivityIndicator size="large" color={colors.zinc[600]} />}
       />
     </View>
   );
diff --git a/src/screens/Welcome/index.tsx b/src/screens/Welcome/index.tsx
index fd7437d..6349bb1 100644
--- a/src/screens/Welcome/index.tsx
+++ b/src/screens/Welcome/index.tsx
@@ -49,10 +49,11 @@ const WelcomeScreen = () => {
       <View className="w-full">
         <Input
           value={postStore.url}
-          containerClass="w-full mb-4"
+          containerClass="w-full"
           onChangeText={postStore.setUrl}
           placeholder="Type your wordpress site link"
         />
+        <View className="h-4" />
         <Button
           isLoading={postStore.loading}
           onPress={onConvertWpIntoMobile}
diff --git a/src/services/Api.ts b/src/services/Api.ts
index 86b786e..453ea08 100644
--- a/src/services/Api.ts
+++ b/src/services/Api.ts
@@ -14,7 +14,16 @@ class API {
 
   getPost(pagination: number): Promise<ApiPostType[]> {
     return this.instance
-      .url(`wp-json/wp/v2/posts?order_by=date&per_page=6&page=${pagination || 1}`)
+      .url(`wp-json/wp/v2/posts?order_by=date&per_page=12&page=${pagination || 1}`)
+      .get()
+      .json(result => result);
+  }
+
+  searchPost(term: string): Promise<ApiPostType[]> {
+    return this.instance
+      .url(
+        `wp-json/wp/v2/posts?search=${term}&orderby=relevance&per_page=50&search_columns=post_title`,
+      )
       .get()
       .json(result => result);
   }
diff --git a/src/store/PostStore.ts b/src/store/PostStore.ts
index d14b6fd..7edf358 100644
--- a/src/store/PostStore.ts
+++ b/src/store/PostStore.ts
@@ -3,8 +3,8 @@ import { removeHtmlAndDecimalEntities } from '@utils/helpers';
 import { ApiPostType } from '@utils/types/BlogTypes';
 import { Instance, flow, t } from 'mobx-state-tree';
 
-const Post = t
-  .model({
+export const Post = t
+  .model('Post', {
     title: t.string,
     id: t.identifier,
     mediaUrl: t.string,
@@ -42,7 +42,7 @@ const Post = t
   }));
 
 const PostStore = t
-  .model({
+  .model('PostStore', {
     url: t.string,
     page: t.number,
     posts: t.map(Post),
diff --git a/src/store/SearchStore.ts b/src/store/SearchStore.ts
new file mode 100644
index 0000000..ccf9b53
--- /dev/null
+++ b/src/store/SearchStore.ts
@@ -0,0 +1,80 @@
+import { api } from '@services/Api';
+import { removeHtmlAndDecimalEntities } from '@utils/helpers';
+import { ApiPostType } from '@utils/types/BlogTypes';
+import { Instance, detach, t } from 'mobx-state-tree';
+
+import postStore, { Post } from './PostStore';
+
+const SearchStore = t
+  .model('SearchStore', {
+    term: t.string,
+    results: t.map(Post),
+    loading: t.optional(t.boolean, false),
+  })
+  .views(self => ({
+    get listResult() {
+      return Array.from(self.results.values());
+    },
+  }))
+  .actions(self => ({
+    addPost: (post: ApiPostType) => {
+      self.results.set(
+        post.id,
+        Post.create({
+          id: post.id.toString(),
+          mediaUrl: post?._links?.['wp:featuredmedia']?.[0]?.href || '',
+          title: removeHtmlAndDecimalEntities(post?.title?.rendered || ''),
+          category: removeHtmlAndDecimalEntities(post?.primary_category?.name || ''),
+        }),
+      );
+    },
+
+    setTerm(term: string) {
+      self.term = term;
+    },
+
+    setLoading(loading: boolean) {
+      self.loading = loading;
+    },
+
+    clearResult() {
+      detach(self.results);
+    },
+
+    async searchPost() {
+      if (!postStore.url) {
+        return;
+      }
+
+      this.setLoading(true);
+      try {
+        const posts = await api.searchPost(self.term);
+        this.clearResult();
+        if (posts?.length > 0) {
+          posts.forEach(this.addPost);
+        }
+
+        this.setLoading(false);
+
+        return posts;
+      } catch {
+        this.setLoading(false);
+
+        return [];
+      }
+    },
+
+    clearAll() {
+      self.term = '';
+      self.loading = false;
+      self.results.clear();
+    },
+  }));
+
+const searchStore = SearchStore.create({
+  term: '',
+});
+
+export default searchStore;
+
+export type PostType = Instance<typeof Post>;
diff --git a/src/theme/colors.js b/src/theme/colors.js
index 1e73795..d0107e0 100644
--- a/src/theme/colors.js
+++ b/src/theme/colors.js
@@ -1,4 +1,17 @@
 module.exports = {
   white: '#ffffff',
   black: '#000000',
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
 };