reza added hashtag to blog

master
Reza_ashrafi 2 years ago
parent b99e054b74
commit ebdf6726a0
  1. 2
      src/redux/actions/blog.js
  2. 47
      src/redux/reducers/blog.js
  3. 119
      src/screens/Blogs/index.js
  4. 69
      src/screens/Blogs/layouts/Hashtags.js
  5. 27
      src/screens/Blogs/layouts/More.js

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

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

@ -7,15 +7,20 @@ import {
StatusBar, StatusBar,
LayoutAnimation, LayoutAnimation,
FlatList, FlatList,
Dimensions,
Image,
Text,
Pressable
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { blog } from "../../redux/actions"; import { blog } from "../../redux/actions";
import {useNavigation} from "@react-navigation/native";
//components //components
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer"; import Drawer from "../../components/Drawer";
// import Hashtags from "./layouts/Hashtags"; import Hashtags from "./layouts/Hashtags";
import Header from "./layouts/Header"; import Header from "./layouts/Header";
import Single from "./layouts/Single"; import Single from "./layouts/Single";
import New from "./layouts/New"; import New from "./layouts/New";
@ -23,19 +28,25 @@ import Target from "./layouts/Target";
//style //style
import tw from "tailwind-rn"; 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%"); const [position, setPosition] = React.useState("100%");
React.useEffect(() => { React.useEffect(() => {
getList(); getList();
setHashtag(null);
}, []); }, []);
const setBoxPosition = () => { const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%"); setPosition(position === "100%" ? "0%" : "100%");
}; };
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{
@ -56,53 +67,99 @@ function Blogs({ getList, blogs }) {
}} }}
/> />
<Drawer setBoxPosition={setBoxPosition} position={position} /> <Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView <Hashtags />
contentContainerStyle={styles.contentContainerStyle} {hashtag ? (
style={[styles.container, tw("flex px-4")]}
>
{/* <Hashtags /> */}
<Single />
<Header title={"تازهترینها از وبلاگ"} />
<FlatList <FlatList
showsHorizontalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}
horizontal={true} style={tw("px-4")}
inverted={true} data={blogs.filter((blog) => blog.tag === hashtag)}
style={[tw("flex flex-row mt-3 pb-3")]} renderItem={({ item }) => (
data={blogs.slice(0, 7)} <HashtagBlog blog={item} blogsPage={true} theme={theme} />
renderItem={({ item }) => <New blog={item} />} )}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
/> />
<Header title={"پیشنهاد سردبیر"} /> ) : (
<FlatList <ScrollView
showsHorizontalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}
horizontal={true} style={[styles.container, tw("flex px-4")]}
inverted={true} >
style={[tw("flex flex-row mt-3 pb-3")]} <Single />
data={blogs.slice(0, 7)} <Header title={"تازهترینها از وبلاگ"} />
renderItem={({ item }) => <New blog={item} />} <FlatList
keyExtractor={(item) => item.id} showsHorizontalScrollIndicator={false}
/> horizontal={true}
<Header title={"از دنیای آموزش"} /> inverted={true}
<Target blogs={blogs.slice(0, 3)} /> style={[tw("flex flex-row mt-3 pb-3")]}
</ScrollView> data={blogs.slice(0, 7)}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item) => item.id}
/>
<Header title={"پیشنهاد سردبیر"} />
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-3")]}
data={blogs.slice(0, 7)}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item) => item.id}
/>
<Header title={"از دنیای آموزش"} />
<Target blogs={blogs.slice(0, 3)} />
</ScrollView>
)}
</SafeAreaView> </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) => ({ const mapStateToProps = (state) => ({
blogs: state.blog.list, blogs: state.blog.list,
hashtag: state.blog.hashtag,
theme : state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
getList: blog.list, getList: blog.list,
setHashtag: blog.setHashtag,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Blogs); export default connect(mapStateToProps, mapDispatchToProps)(Blogs);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
contentContainerStyle: { contentContainerStyle: {
paddingBottom: 80, paddingBottom: height / 4,
paddingTop : 30 paddingTop: 0,
}, },
container: { container: {
paddingVertical: 0, paddingVertical: 0,

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

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

Loading…
Cancel
Save