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 ( @@ -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 }) => } - keyExtractor={(item, index) => {return index}} + renderItem={({ item }) => ( + + )} + keyExtractor={(item, index) => { + return index; + }} /> ); }; -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 : ( + + )} +