diff --git a/src/redux/actions/blog.js b/src/redux/actions/blog.js
index 42e911b..1b62948 100644
--- a/src/redux/actions/blog.js
+++ b/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;
diff --git a/src/redux/reducers/blog.js b/src/redux/reducers/blog.js
index d85621d..a7f09db 100644
--- a/src/redux/reducers/blog.js
+++ b/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":
diff --git a/src/screens/Blogs/index.js b/src/screens/Blogs/index.js
index 408a3c2..0100bf3 100644
--- a/src/screens/Blogs/index.js
+++ b/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,19 +28,25 @@ 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 = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
-
+
return (
-
- {/* */}
-
-
+
+ {hashtag ? (
}
+ contentContainerStyle={styles.contentContainerStyle}
+ style={tw("px-4")}
+ data={blogs.filter((blog) => blog.tag === hashtag)}
+ renderItem={({ item }) => (
+
+ )}
keyExtractor={(item) => item.id}
/>
-
- }
- keyExtractor={(item) => item.id}
- />
-
-
-
+ ) : (
+
+
+
+ }
+ keyExtractor={(item) => item.id}
+ />
+
+ }
+ keyExtractor={(item) => item.id}
+ />
+
+
+
+ )}
);
}
+const HashtagBlog = ({ blog, theme }) => {
+ const navigation = useNavigation();
+ return (
+ navigation.push("Blog", { id: blog?.id })}
+ >
+
+
+ {blog?.title}
+
+
+ );
+};
+
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,
diff --git a/src/screens/Blogs/layouts/Hashtags.js b/src/screens/Blogs/layouts/Hashtags.js
index c756012..deebb09 100644
--- a/src/screens/Blogs/layouts/Hashtags.js
+++ b/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 (
);
};
-const Hashtag = ({ hashtag }) => {
+const Hashtag = ({ hashtag, theme, setHashtag, activeTag }) => {
+ const active = React.useMemo(() => {
+ return activeTag === hashtag;
+ }, [hashtag, activeTag]);
return (
- (active ? setHashtag(null) : setHashtag(hashtag))}
>
- {"#" + " " + hashtag.title}
-
+
+ {"#" + " " + hashtag}
+
+
);
};
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);
diff --git a/src/screens/Blogs/layouts/More.js b/src/screens/Blogs/layouts/More.js
index 44e4c78..379dd6e 100644
--- a/src/screens/Blogs/layouts/More.js
+++ b/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,17 +47,20 @@ const MoreBlog = ({ mobile, theme, blogs }) => {
position: "relative",
}}
>
-
+ {blogsPage ? null : (
+
+ )}
+