From d481fdd9dac8d0f8044e0cdb775d23ffa2da0f07 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Wed, 25 Aug 2021 20:32:28 +0430 Subject: [PATCH] reza added blogs and blog --- src/AppRouter.js | 11 +- src/Redux/actions/public.js | 4 + src/Redux/reducers/public.js | 6 + src/views/Blog/BreadCrumb/index.js | 57 +++++++ src/views/Blog/BreadCrumb/index.scss | 8 + src/views/Blog/index.js | 143 ++++++++++++++++++ src/views/Blog/index.scss | 129 ++++++++++++++++ src/views/Blogs/BreadCrumb/index.js | 46 ++++++ src/views/Blogs/BreadCrumb/index.scss | 8 + src/views/Blogs/index.js | 110 +++++++++++--- src/views/Blogs/index.scss | 89 ++++++++++- .../VideoBox/React-video-js-player/index.js | 13 +- .../VoiceBox/Material-audio-player/index.js | 7 +- src/views/QR/VoiceBox/index.js | 13 +- 14 files changed, 589 insertions(+), 55 deletions(-) create mode 100644 src/views/Blog/BreadCrumb/index.js create mode 100644 src/views/Blog/BreadCrumb/index.scss create mode 100644 src/views/Blog/index.js create mode 100644 src/views/Blog/index.scss create mode 100644 src/views/Blogs/BreadCrumb/index.js create mode 100644 src/views/Blogs/BreadCrumb/index.scss diff --git a/src/AppRouter.js b/src/AppRouter.js index c90b746..0cb14e9 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -28,6 +28,8 @@ import AR from "./views/AR/index"; import Support from "./views/Support/index"; import Callback from "./views/Callback/index"; import NewProfile from "./views/NewProfile/index"; +import Blogs from "./views/Blogs/index"; +import Blog from "./views/Blog/index"; class AppRouter extends Component { constructor(props) { @@ -62,7 +64,7 @@ class AppRouter extends Component { {home} {mobile ? ( - window.innerWiproxy.status() ? ( + proxy.status() ? ( ) : ( + + + + + + @@ -123,7 +131,6 @@ class AppRouter extends Component { - diff --git a/src/Redux/actions/public.js b/src/Redux/actions/public.js index 3ade7e8..42b44e3 100644 --- a/src/Redux/actions/public.js +++ b/src/Redux/actions/public.js @@ -14,6 +14,10 @@ const publicApi = { await proxy.get("public/contact", data, { history, dispatch }), getArList: (data, history) => async (dispatch) => await proxy.get("public/ar", data, { history, dispatch }), + getBlogList: (data, history) => async (dispatch) => + await proxy.get("public/blogList", data, { history, dispatch }), + getBlogInfo: (data, history) => async (dispatch) => + await proxy.get("public/blogInfo", data, { history, dispatch }), }; export default publicApi; diff --git a/src/Redux/reducers/public.js b/src/Redux/reducers/public.js index fdccc5a..75ed003 100644 --- a/src/Redux/reducers/public.js +++ b/src/Redux/reducers/public.js @@ -6,6 +6,8 @@ const initialState = { searchResult: [], contactData: null, arList: [], + blogList: [], + blog: null, }; export default function publicApi(state = initialState, action) { let { type, data } = action; @@ -41,6 +43,10 @@ export default function publicApi(state = initialState, action) { return { ...state, loading: false, error: null, contactData: data }; case "public/ar": return { ...state, loading: false, error: null, arList: data }; + case "public/blogList": + return { ...state, loading: false, error: null, blogList: data }; + case "public/blogInfo": + return { ...state, loading: false, error: null, blog: data }; case "loading": return { ...state, loading: true }; case "error": diff --git a/src/views/Blog/BreadCrumb/index.js b/src/views/Blog/BreadCrumb/index.js new file mode 100644 index 0000000..32a062d --- /dev/null +++ b/src/views/Blog/BreadCrumb/index.js @@ -0,0 +1,57 @@ +import React from "react"; +import Breadcrumbs from "@material-ui/core/Breadcrumbs"; +import { Link } from "react-router-dom"; + +import "./index.scss"; + +function handleClick(event) { + event.preventDefault(); + console.info("You clicked a breadcrumb."); +} + +const maxDesktopSize = 1250; +const maxMobileSize = 650; + +const fontSize = { + desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25, +}; + +export default function ActiveLastBreadcrumb(props) { + const { name } = props; + return ( + + 1000 ? fontSize.desktop : fontSize.mobile, + }} + to={"/"} + > + صفحه اصلی + + 1000 ? fontSize.desktop : fontSize.mobile, + }} + to={"/blogs"} + > + وبلاگ + + 1000 ? fontSize.desktop : fontSize.mobile, + color: "#00CC69", + }} + to={`/blogs/${window.location.pathname.slice( + window.location.pathname.lastIndexOf("/") + 1, + window.location.pathname.length + )}`} + > + {name} + + + ); +} diff --git a/src/views/Blog/BreadCrumb/index.scss b/src/views/Blog/BreadCrumb/index.scss new file mode 100644 index 0000000..e10f243 --- /dev/null +++ b/src/views/Blog/BreadCrumb/index.scss @@ -0,0 +1,8 @@ +.MuiBreadcrumbs-li{ + a { + text-decoration: none; + font-family: numeralLight; + color: #6F7074; + letter-spacing: -1px; + } +} diff --git a/src/views/Blog/index.js b/src/views/Blog/index.js new file mode 100644 index 0000000..2bb9171 --- /dev/null +++ b/src/views/Blog/index.js @@ -0,0 +1,143 @@ +import React, { Component, Fragment } from "react"; +import Loader from "~/components/Loader/index"; +import Footer from "../Home/Footer/index"; +import Navbar from "../Home/Navbar/index"; +import BreadCrumb from "./BreadCrumb/index"; +import Image from "../QR/Image/index"; +import VideoBox from "../QR/VideoBox/index"; +import VoiceBox from "../QR/VoiceBox/index"; + +import { connect } from "react-redux"; +import { publicApi } from "~/Redux/actions"; + +import "./index.scss"; + +const maxDesktopSize = 1250; + +class Blog extends Component { + componentDidMount() { + this.props.getBlogInfo({ + id: window.location.pathname.slice( + window.location.pathname.lastIndexOf("/") + 1, + window.location.pathname.length + ), + }); + } + + render() { + const fontSize = { + desktop: { + sidebar: { + h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, + h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, + div: + window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, + }, + content: { + h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, + p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, + h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, + }, + }, + }; + const { blog } = this.props; + return ( + <> + {window.innerWidth > 1000 ? ( + <> + {blog ? ( +
+ +
+ +
+

{blog.title}

+
+
+

+
{blog.date}
+
+
+
+
+ +
+

+ {blog.text} +

+
+
+ ) : ( +
+ +
+ )} + +