reza added hashtag to blog

src/redux/actions/blog.js

@@ -6,6 +6,8 @@ const blog = {
       await proxy.get("public/blogList", data, { dispatch }),
   info: (data) => async (dispatch) =>
     await proxy.get("public/blogInfo", data, { dispatch }),
+  setHashtag: (data) => async (dispatch) =>
+    await dispatch({ type: "public/setHashtag", data }),
 };
 
 export default blog;

src/redux/reducers/blog.js

@@ -3,42 +3,27 @@ const initialState = {
   error: null,
   list: [],
   info: null,
-  hashtags: [
-    {
-      title: "فناوری اطلاعات",
-      color: "#019BC3",
-    },
-    {
-      title: "سخت افزار",
-      color: "#7CC301",
-    },
-    {
-      title: "آموزشی",
-      color: "#C5B90C",
-    },
-    {
-      title: "فرهنگی",
-      color: "#C2684D",
-    },
-    {
-      title: "معرفی کتاب",
-      color: "#8B4DC2",
-    },
-    {
-      title: "مهارت آموزی",
-      color: "#780D6D",
-    },
-    {
-      title: "پیشرفت شخصی",
-      color: "#E63F15",
-    },
-  ],
+  hashtags : [],
+  hashtag : null,
 };
 export default function blog(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
+    case "public/setHashtag":
+      return {
+        ...state,
+        loading: false,
+        hashtag: data,
+        error: null,
+      };
     case "public/blogList":
-      return { ...state, loading: false, list: data, error: null };
+      return {
+        ...state,
+        loading: false,
+        list: data,
+        hashtags: [...new Set(data.map((object) => object.tag))],
+        error: null,
+      };
     case "public/blogInfo":
       return { ...state, loading: false, error: null, blog: data };
     case "blog/loading":

src/screens/Blogs/index.js

@@ -7,15 +7,20 @@ import {
   StatusBar,
   LayoutAnimation,
   FlatList,
+  Dimensions,
+  Image,
+  Text,
+  Pressable
 } from "react-native";
 
 import { connect } from "react-redux";
 import { blog } from "../../redux/actions";
+import {useNavigation} from "@react-navigation/native";
 
 //components
 import Navbar from "../../components/Navbar";
 import Drawer from "../../components/Drawer";
-// import Hashtags from "./layouts/Hashtags";
+import Hashtags from "./layouts/Hashtags";
 import Header from "./layouts/Header";
 import Single from "./layouts/Single";
 import New from "./layouts/New";
@@ -23,12 +28,18 @@ import Target from "./layouts/Target";
 
 //style
 import tw from "tailwind-rn";
+import fontSize from "../../constants/fontSize";
+import Colors from "../../constants/Colors";
 
-function Blogs({ getList, blogs }) {
+const { width, height } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
+
+function Blogs({ getList, blogs, hashtag, setHashtag, theme }) {
   const [position, setPosition] = React.useState("100%");
 
   React.useEffect(() => {
     getList();
+    setHashtag(null);
   }, []);
 
   const setBoxPosition = () => {
@@ -56,11 +67,22 @@ function Blogs({ getList, blogs }) {
         }}
       />
       <Drawer setBoxPosition={setBoxPosition} position={position} />
+      <Hashtags />
+      {hashtag ? (
+        <FlatList
+          contentContainerStyle={styles.contentContainerStyle}
+          style={tw("px-4")}
+          data={blogs.filter((blog) => blog.tag === hashtag)}
+          renderItem={({ item }) => (
+            <HashtagBlog blog={item} blogsPage={true} theme={theme} />
+          )}
+          keyExtractor={(item) => item.id}
+        />
+      ) : (
         <ScrollView
           contentContainerStyle={styles.contentContainerStyle}
           style={[styles.container, tw("flex px-4")]}
         >
-        {/* <Hashtags /> */}
           <Single />
           <Header title={"تازه‌ترین‌ها از وبلاگ"} />
           <FlatList
@@ -85,24 +107,59 @@ function Blogs({ getList, blogs }) {
           <Header title={"از دنیای آموزش"} />
           <Target blogs={blogs.slice(0, 3)} />
         </ScrollView>
+      )}
     </SafeAreaView>
   );
 }
 
+const HashtagBlog = ({ blog, theme }) => {
+  const navigation = useNavigation();
+  return (
+    <Pressable
+      style={[tw("w-full flex pb-4 mb-4")]}
+      onPress={() => navigation.push("Blog", { id: blog?.id })}
+    >
+      <Image
+        source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
+        resizeMode="contain"
+        style={[
+          tw("rounded-sm"),
+          { width: "100%", height: ((width - 32) * 3) / 4 },
+        ]}
+      />
+      <Text
+        style={{
+          fontSize: fontSize.lg,
+          fontFamily: "bold",
+          color:
+            theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
+          marginTop: 5,
+          textAlign: ios ? "right" : "auto",
+        }}
+      >
+        {blog?.title}
+      </Text>
+    </Pressable>
+  );
+};
+
 const mapStateToProps = (state) => ({
   blogs: state.blog.list,
+  hashtag: state.blog.hashtag,
+  theme : state.publicApi.theme
 });
 
 const mapDispatchToProps = {
   getList: blog.list,
+  setHashtag: blog.setHashtag,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Blogs);
 
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 80,
-    paddingTop : 30
+    paddingBottom: height / 4,
+    paddingTop: 0,
   },
   container: {
     paddingVertical: 0,

src/screens/Blogs/layouts/Hashtags.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { View, Text, FlatList } from "react-native";
+import { View, Text, FlatList, Pressable } from "react-native";
 import { connect } from "react-redux";
+import { blog } from "../../../redux/actions";
 import Svg, { Path } from "react-native-svg";
 
 //style
@@ -8,14 +9,15 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-export const Hashtags = ({ hashtags, theme }) => {
+export const Hashtags = ({ hashtags, theme, setHashtag, hashtag }) => {
   return (
     <View
       style={[
-        tw(
-          "flex flex-row-reverse py-1 pl-3 rounded-full items-center w-full mb-7"
-        ),
-        {borderWidth : 2, borderColor : Colors.theme1.greenFF1 + (theme === 'light' ? "" : "55")}
+        tw("flex flex-row-reverse pl-3 rounded-full items-center w-full mb-7 mt-3"),
+        {
+          borderWidth: 2,
+          borderColor: Colors.theme1.greenFF1 + (theme === "light" ? "" : "55"),
+        },
       ]}
     >
       <Svg xmlns="http://www.w3.org/2000/svg" width={31.486} height={19.692}>
@@ -34,33 +36,60 @@ export const Hashtags = ({ hashtags, theme }) => {
         inverted={true}
         style={[tw("flex flex-row mt-3 pb-3 mr-2")]}
         data={hashtags}
-        renderItem={({ item }) => <Hashtag hashtag={item} />}
-        keyExtractor={(item, index) => {return index}}
+        renderItem={({ item }) => (
+          <Hashtag
+            hashtag={item}
+            theme={theme}
+            setHashtag={setHashtag}
+            activeTag={hashtag}
+          />
+        )}
+        keyExtractor={(item, index) => {
+          return index;
+        }}
       />
     </View>
   );
 };
 
-const Hashtag = ({ hashtag }) => {
+const Hashtag = ({ hashtag, theme, setHashtag, activeTag }) => {
+  const active = React.useMemo(() => {
+    return activeTag === hashtag;
+  }, [hashtag, activeTag]);
   return (
+    <Pressable
+      onPress={() => (active ? setHashtag(null) : setHashtag(hashtag))}
+    >
       <Text
-      style={{
+        style={[
+          tw("px-2 py-0.5 mx-1"),
+          {
             fontFamily: "bold",
             fontSize: fontSize.sm,
-        color: hashtag.color,
-        marginHorizontal: 8,
-      }}
+            color:
+              theme === "light"
+                ? active
+                  ? Colors.theme1.white
+                  : Colors.theme1.gray20
+                : Colors.theme1.white,
+            backgroundColor: active ? Colors.theme1.greenCF : null,
+          },
+        ]}
       >
-      {"#" + " " + hashtag.title}
+        {"#" + " " + hashtag}
       </Text>
+    </Pressable>
   );
 };
 
 const mapStateToProps = (state) => ({
   hashtags: state.blog.hashtags,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
+  hashtag: state.blog.hashtag,
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  setHashtag: blog.setHashtag,
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Hashtags);

src/screens/Blogs/layouts/More.js

@@ -26,7 +26,7 @@ import Colors from "../../../constants/Colors";
 const ios = Platform.OS === "ios";
 const { width, height } = Dimensions.get("window");
 
-const MoreBlog = ({ mobile, theme, blogs }) => {
+const MoreBlog = ({ mobile, theme, blogs, blogsPage }) => {
   const styles = React.useMemo(() => {
     return StyleSheet.create({
       contentContainerStyle: {
@@ -47,6 +47,7 @@ const MoreBlog = ({ mobile, theme, blogs }) => {
         position: "relative",
       }}
     >
+      {blogsPage ? null : (
         <Navbar
           headerOptions={{
             logo: false,
@@ -58,6 +59,8 @@ const MoreBlog = ({ mobile, theme, blogs }) => {
             back: true,
           }}
         />
+      )}
+
       <FlatList
         data={blogs}
         style={tw("px-4")}