From dbd05f287a2ca0809b78c8fba472776c4c993c8b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 2 Mar 2022 17:33:27 +0330 Subject: [PATCH] reza added blogs page --- navigation/index.js | 4 + package.json | 1 + src/redux/actions/blog.js | 20 +--- src/redux/reducers/blog.js | 41 +++++-- src/screens/Blogs/index.js | 119 +++++++++++++++++-- src/screens/Blogs/layouts/Hashtags.js | 65 ++++++++++ src/screens/Blogs/layouts/Header.js | 36 ++++++ src/screens/Blogs/layouts/New.js | 68 +++++++++++ src/screens/Blogs/layouts/Single.js | 134 +++++++++++++++++++++ src/screens/Blogs/layouts/Target.js | 164 ++++++++++++++++++++++++++ yarn.lock | 5 + 11 files changed, 622 insertions(+), 35 deletions(-) create mode 100644 src/screens/Blogs/layouts/Hashtags.js create mode 100644 src/screens/Blogs/layouts/Header.js create mode 100644 src/screens/Blogs/layouts/New.js create mode 100644 src/screens/Blogs/layouts/Single.js create mode 100644 src/screens/Blogs/layouts/Target.js diff --git a/navigation/index.js b/navigation/index.js index e3ca014..3b6d4e0 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -32,6 +32,8 @@ import Address from "../src/screens/Address"; import Profile from "../src/screens/Profile"; import ProfileBookmark from "../src/screens/Profile/components/ProfileBookmark"; import ProfileAddress from "../src/screens/Profile/components/ProfileAddress"; +import Blogs from "../src/screens/Blogs"; +import Blog from "../src/screens/Blog"; //style import fontSize from "../src/constants/fontSize"; @@ -343,6 +345,8 @@ const HomeStackScreen = () => { + + ); }; diff --git a/package.json b/package.json index 6cbfcef..e13ad43 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "expo-camera": "~12.1.0", "expo-device": "~4.1.0", "expo-font": "^10.0.4", + "expo-linear-gradient": "~11.0.3", "expo-screen-orientation": "~4.1.1", "expo-status-bar": "~1.2.0", "i18next": "^21.6.3", diff --git a/src/redux/actions/blog.js b/src/redux/actions/blog.js index d873065..42e911b 100644 --- a/src/redux/actions/blog.js +++ b/src/redux/actions/blog.js @@ -4,24 +4,8 @@ const blog = { (data = {}) => async (dispatch) => await proxy.get("public/blogList", data, { dispatch }), - // update: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.put("blog/update", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, - // add: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.post("blog/add", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, - // del: - // (data = {}, data2 = {}) => - // async (dispatch : Dispatch) => { - // await proxy.delete("blog/delete", data); - // await proxy.get("blog/list", data2, { dispatch }); - // }, + info: (data) => async (dispatch) => + await proxy.get("public/blogInfo", data, { dispatch }), }; export default blog; diff --git a/src/redux/reducers/blog.js b/src/redux/reducers/blog.js index 9f3005c..d85621d 100644 --- a/src/redux/reducers/blog.js +++ b/src/redux/reducers/blog.js @@ -2,23 +2,48 @@ const initialState = { loading: false, 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", + }, + ], }; export default function blog(state = initialState, action) { let { type, data } = action; switch (type) { case "public/blogList": return { ...state, loading: false, list: data, error: null }; - // case "blog/update": - // return { ...state, loading: false, error: null }; - // case "blog/add": - // return { ...state, loading: false, error: null }; - // case "blog/delete": - // return { ...state, loading: false, error: null }; - ///////////// + case "public/blogInfo": + return { ...state, loading: false, error: null, blog: data }; case "blog/loading": return { ...state, loading: true }; case "blog/error": - // toast.error(data.message); return { ...state, loading: false, error: data.message }; default: return state; diff --git a/src/screens/Blogs/index.js b/src/screens/Blogs/index.js index 273d7c7..3fb43ca 100644 --- a/src/screens/Blogs/index.js +++ b/src/screens/Blogs/index.js @@ -1,13 +1,114 @@ -import React from 'react' -import { View, Text } from 'react-native'; -import {connect} from 'react-redux'; +import React from "react"; +import { + View, + StyleSheet, + ScrollView, + SafeAreaView, + Platform, + StatusBar, + LayoutAnimation, + FlatList, +} from "react-native"; + +import { connect } from "react-redux"; +import { blog } from "../../redux/actions"; + +//components +import Navbar from "../../components/Navbar"; +import Drawer from "../../components/Drawer"; +import Hashtags from "./layouts/Hashtags"; +import Header from "./layouts/Header"; +import Single from "./layouts/Single"; +import New from "./layouts/New"; +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 [position, setPosition] = React.useState("100%"); + + React.useEffect(() => { + getList(); + }, []); + + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; -function Blogs({}) { return ( - - - - ) + + + + + + +
+ } + keyExtractor={(item) => item.id} + /> +
+ } + keyExtractor={(item) => item.id} + /> +
+ + + + ); } -export default Blogs; +const mapStateToProps = (state) => ({ + blogs: state.blog.list, +}); + +const mapDispatchToProps = { + getList: blog.list, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Blogs); + +const styles = StyleSheet.create({ + contentContainerStyle: { + paddingBottom: 100, + }, + container: { + backgroundColor: "white", + paddingVertical: 0, + paddingHorizontal: 0, + }, +}); diff --git a/src/screens/Blogs/layouts/Hashtags.js b/src/screens/Blogs/layouts/Hashtags.js new file mode 100644 index 0000000..08900ba --- /dev/null +++ b/src/screens/Blogs/layouts/Hashtags.js @@ -0,0 +1,65 @@ +import React from "react"; +import { View, Text, FlatList, Appearance } from "react-native"; +import { connect } from "react-redux"; +import Svg, { Path } from "react-native-svg"; + +//style +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import Colors from "../../../constants/Colors"; + +export const Hashtags = ({ hashtags }) => { + const colorScheme = Appearance.getColorScheme(); + const Hashtag = ({ hashtag }) => { + return ( + + {"#" + " " + hashtag.title} + + ); + }; + return ( + + + + + } + keyExtractor={(item) => item.id} + /> + + ); +}; + +const mapStateToProps = (state) => ({ + hashtags: state.blog.hashtags, +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Hashtags); diff --git a/src/screens/Blogs/layouts/Header.js b/src/screens/Blogs/layouts/Header.js new file mode 100644 index 0000000..c8e5870 --- /dev/null +++ b/src/screens/Blogs/layouts/Header.js @@ -0,0 +1,36 @@ +import React from "react"; +import { View, Text, Appearance } from "react-native"; +import { connect } from "react-redux"; + +//style +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import Colors from "../../../constants/Colors"; + +export const Header = ({ title }) => { + const colorScheme = Appearance.getColorScheme(); + return ( + + + {title} + + + + ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Header); diff --git a/src/screens/Blogs/layouts/New.js b/src/screens/Blogs/layouts/New.js new file mode 100644 index 0000000..f096191 --- /dev/null +++ b/src/screens/Blogs/layouts/New.js @@ -0,0 +1,68 @@ +import React from "react"; +import { + View, + Text, + Dimensions, + Pressable, + Image, + Appearance, + Platform, +} from "react-native"; +import { connect } from "react-redux"; +import { useNavigation } from "@react-navigation/native"; + +//style +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import Colors from "../../../constants/Colors"; + +const { height, width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; + +export const New = ({ blog }) => { + const navigation = useNavigation(); + const colorScheme = Appearance.getColorScheme(); + return ( + navigation.push("Blog", { id: blog.id })} + > + + + {blog?.title} + + + هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس + + + ); +}; + +export default New; diff --git a/src/screens/Blogs/layouts/Single.js b/src/screens/Blogs/layouts/Single.js new file mode 100644 index 0000000..20c1983 --- /dev/null +++ b/src/screens/Blogs/layouts/Single.js @@ -0,0 +1,134 @@ +import React from "react"; +import { + Pressable, + View, + Text, + Dimensions, + Image, + Appearance, +} from "react-native"; +import { connect } from "react-redux"; +import { LinearGradient } from "expo-linear-gradient"; +import { useNavigation } from "@react-navigation/native"; + +//style +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import Colors from "../../../constants/Colors"; + +const { height, width } = Dimensions.get("window"); + +export const Single = ({ blog }) => { + const navigation = useNavigation(); + const colorScheme = Appearance.getColorScheme(); + return ( + navigation.push("Blog", { id: blog?.id })} + > + + + + + + + + + {"نوشته از:" + " " + "کامران ایزدی"} + + + {"سردبیر بخش وبلاگ دانوین"} + + + + + + {"زمان مطالعه" + " " + "۳۰ دقیقه"} + + + {"1400/11/24"} + + + + + + + + + {blog?.title} + + + هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس + می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد + بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن + بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان{" "} + + + + + ); +}; + +const mapStateToProps = (state) => ({ + blog: state.blog.list[0], +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Single); diff --git a/src/screens/Blogs/layouts/Target.js b/src/screens/Blogs/layouts/Target.js new file mode 100644 index 0000000..4fd80aa --- /dev/null +++ b/src/screens/Blogs/layouts/Target.js @@ -0,0 +1,164 @@ +import React from "react"; +import { + View, + Text, + Dimensions, + Pressable, + Image, + Appearance, + Platform, +} from "react-native"; +import { connect } from "react-redux"; +import { useNavigation } from "@react-navigation/native"; +import { LinearGradient } from "expo-linear-gradient"; + +//style +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import Colors from "../../../constants/Colors"; + +const { height, width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; + +const Target = ({ blogs }) => { + const navigation = useNavigation(); + const colorScheme = Appearance.getColorScheme(); + const Large = ({ blog }) => { + return ( + + + + + + + {blog?.title} + + + + + + + {"نوشته از:" + " " + "کامران ایزدی"} + + + {"سردبیر بخش وبلاگ دانوین"} + + + + + + {"زمان مطالعه" + " " + "۳۰ دقیقه"} + + + {"1400/11/24"} + + + + + ); + }; + + const Small = ({ blog }) => { + return ( + + + + + {blog?.title} + + + + ); + }; + return ( + + + + {blogs?.slice(1, 3).map((blog, index) => ( + + ))} + + + ); +}; + +export default Target; diff --git a/yarn.lock b/yarn.lock index 6d7d6a4..f4f7f03 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3058,6 +3058,11 @@ expo-keep-awake@~10.0.1: resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-10.0.1.tgz#9f1176216c41eee20843c8232acfdca2bc32d334" integrity sha512-kcBtoDGkm3RRe6BpKDvR7gof/ErajEia38u92pRvNRctdh+p8AFO7GQuiipyg3iMfhcCFVTCIV7h3tuA0g/yDw== +expo-linear-gradient@~11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-11.0.3.tgz#bc559b9a251c9dc8aa37fb6c66c7a497fe92993c" + integrity sha512-LuzTM5+iEHCQfC2TBHAAI+ZjPvf0TvGiA7GYMsyTnakGA2r4JtsV8Ah/miQPKhfG06jLDOo4grUoSMGqbmSrEw== + expo-modules-autolinking@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-0.5.2.tgz#fb8812a88d6e22d014188c8252ea0c17c1ef4893"