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 }),
info: (data) => async (dispatch) =>
await proxy.get("public/blogInfo", data, { dispatch }),
setHashtag: (data) => async (dispatch) =>
await dispatch({ type: "public/setHashtag", data }),
};
export default blog;

@ -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":

@ -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 (
<SafeAreaView
style={{
@ -56,53 +67,99 @@ function Blogs({ getList, blogs }) {
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex px-4")]}
>
{/* <Hashtags /> */}
<Single />
<Header title={"تازهترینها از وبلاگ"} />
<Hashtags />
{hashtag ? (
<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} />}
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}
/>
<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>
) : (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex px-4")]}
>
<Single />
<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={"پیشنهاد سردبیر"} />
<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>
);
}
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,

@ -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 (
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: hashtag.color,
marginHorizontal: 8,
}}
<Pressable
onPress={() => (active ? setHashtag(null) : setHashtag(hashtag))}
>
{"#" + " " + 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) => ({
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);

@ -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",
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: null,
bookmark: false,
qr: false,
back: true,
}}
/>
{blogsPage ? null : (
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: null,
bookmark: false,
qr: false,
back: true,
}}
/>
)}
<FlatList
data={blogs}
style={tw("px-4")}

Loading…
Cancel
Save