reza added blogs and blog

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}
           <Route exact path={"/faq"}>
             {mobile ? (
-              window.innerWiproxy.status() ? (
+              proxy.status() ? (
                 <Faq />
               ) : (
                 <Redirect
@@ -93,6 +95,12 @@ class AppRouter extends Component {
           <Route exact path={"/callback"}>
             <Callback />
           </Route>
+          <Route exact path={"/blogs"}>
+            <Blogs />
+          </Route>
+          <Route exact path={"/blogs/:id"}>
+            <Blog />
+          </Route>
           <Route exact path={"/about"}>
             <About />
           </Route>
@@ -123,7 +131,6 @@ class AppRouter extends Component {
           <Route exact path={"/qr-scan"}>
             <QRScan />
           </Route>
-
           <Route exact path={"/activation"}>
             <Activation />
           </Route>

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;

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

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 (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        to={"/"}
+      >
+        صفحه اصلی
+      </Link>
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        to={"/blogs"}
+      >
+        وبلاگ
+      </Link>
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+          color: "#00CC69",
+        }}
+        to={`/blogs/${window.location.pathname.slice(
+          window.location.pathname.lastIndexOf("/") + 1,
+          window.location.pathname.length
+        )}`}
+      >
+        {name}
+      </Link>
+    </Breadcrumbs>
+  );
+}

src/views/Blog/BreadCrumb/index.scss

@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+  a {
+    text-decoration: none;
+    font-family: numeralLight;
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+}

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 ? (
+              <div className="landscape-blog d-flex flex-column">
+                <Navbar />
+                <div className="landscape-blog__header d-flex flex-column">
+                  <BreadCrumb name={blog.title} />
+                  <div className="landscape-blog__header--top d-flex">
+                    <h1>{blog.title}</h1>
+                  </div>
+                  <div className="landscape-blog__header--bottom d-flex">
+                    <h2></h2>
+                    <div>{blog.date}</div>
+                  </div>
+                </div>
+                <div className="landscape-blog__body d-flex flex-column">
+                  <div className="landscape-blog__body--image d-flex">
+                    <Identifier data={blog} fontSize={fontSize} />
+                  </div>
+                  <p className="landscape-blog__body--text d-flex">
+                    {blog.text}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <div
+                className="d-flex justify-content-center align-items-center"
+                style={{ height: "100vh", width: "100vw" }}
+              >
+                <Loader />
+              </div>
+            )}
+
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          blog ? (
+            <div className="portrait-blog d-flex flex-column">
+              <Navbar />
+              <div className="portrait-blog__header d-flex flex-column">
+                <BreadCrumb name={blog.title} />
+                <div className="portrait-blog__header--top d-flex">
+                  <h1>{blog.title}</h1>
+                </div>
+                <div className="portrait-blog__header--bottom d-flex">
+                  <h2>{blog.subTitle}</h2>
+                  <div>{blog.date}</div>
+                </div>
+              </div>
+              <div className="portrait-blog__body d-flex flex-column">
+                <div className="portrait-blog__body--image d-flex">
+                  <Identifier data={blog} />
+                </div>
+                <p className="portrait-blog__body--text d-flex">{blog.text}</p>
+              </div>
+            </div>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default connect(
+  (state) => ({
+    blog: state.publicApi.blog,
+  }),
+  { getBlogInfo: publicApi.getBlogInfo }
+)(Blog);
+
+const Identifier = (props) => {
+  const { data } = props;
+  console.log(data);
+  return (
+    <>
+      {data.type === "audio" ? (
+        <VoiceBox fontSize={props.fontSize} data={data} />
+      ) : null}
+      {data.type === "video" ? (
+        <VideoBox fontSize={props.fontSize} data={data} />
+      ) : null}
+      {data.type === "image" ? (
+        <img
+          src={"https://dnvn.ir/api/v1/file/" + data.fileIds}
+          alt={data.fileIds}
+        />
+      ) : null}
+    </>
+  );
+};

src/views/Blog/index.scss

@@ -0,0 +1,129 @@
+.portrait-blog {
+  width: 100vw;
+  // height: 100vh;
+  padding: 0px 10px;
+  position: relative;
+  &__header {
+    direction: rtl;
+    width: 100%;
+    margin-top: 80px;
+    &--top {
+      width: 100%;
+      text-align: right;
+      align-items: center;
+      margin-top: 20px;
+      h1 {
+        font-size: 24px;
+        // color : $dusk;
+        margin-bottom: 10px;
+        letter-spacing: -2px;
+      }
+    }
+    &--bottom {
+      align-items: center;
+      direction: rtl;
+      width: 100%;
+      justify-content: space-between;
+      h2 {
+        font-size: 14px;
+        // color : $dusk;
+        margin-bottom: 5px;
+        letter-spacing: -1px;
+      }
+      & div {
+        font-size: 14px;
+        // color : $dusk;
+        margin-bottom: 0px;
+        letter-spacing: -1px;
+        font-family: IRANSansNumeral;
+      }
+    }
+  }
+  &__body {
+    width: 100%;
+    margin-top: 15px;
+    &--image {
+      width: 100%;
+      & img {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+      }
+    }
+    &--text {
+      margin-top: 10px;
+      width: 100%;
+      direction: rtl;
+      text-align: justify !important;
+      // color: $dusk;
+      color: #4e4e4e;
+      font-size: 14px;
+      letter-spacing: -1px;
+      font-family: numeralLight;
+    }
+  }
+}
+
+.landscape-blog {
+  width: 100vw;
+  padding: 0px 10px;
+  position: relative;
+  text-align: right;
+  max-width: 1250px;
+  margin: 0px auto;
+  &__header {
+    direction: rtl;
+    width: 100%;
+    margin-top: 100px;
+    max-width: 800px;
+    &--top {
+      width: 100%;
+      text-align: right;
+      align-items: center;
+      margin-top: 20px;
+      h1 {
+        font-size: 28px;
+        // color : $dusk;
+        margin-bottom: 10px;
+        letter-spacing: -1px;
+      }
+    }
+    &--bottom {
+      align-items: center;
+      direction: rtl;
+      width: 100%;
+      justify-content: space-between;
+      h2 {
+        font-size: 14px;
+        // color : $dusk;
+        margin-bottom: 5px;
+        letter-spacing: -1px;
+      }
+      & div {
+        font-size: 16px;
+        // color : $dusk;
+        margin-bottom: 5px;
+        letter-spacing: -1px;
+        font-family: IRANSansNumeral;
+      }
+    }
+  }
+  &__body {
+    width: 100%;
+    &--image {
+      width: 100%;
+      max-height: 300px;
+    }
+    &--text {
+      margin-top: 40px;
+      width: 100%;
+      direction: rtl;
+      text-align: justify;
+      // color: $dusk;
+      color: #4e4e4e;
+      font-size: 18px;
+      letter-spacing: -1px;
+      font-family: numeralLight;
+    }
+  }
+}

src/views/Blogs/BreadCrumb/index.js

@@ -0,0 +1,46 @@
+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() {
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link
+        to={"/"}
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        // onClick={handleClick}
+      >
+        صفحه اصلی
+      </Link>
+      <Link
+        to={"/blogs"}
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+          color: "#00CC69",
+        }}
+        // onClick={handleClick}
+      >
+        وبلاگ
+      </Link>
+    </Breadcrumbs>
+  );
+}

src/views/Blogs/BreadCrumb/index.scss

@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+  a {
+    text-decoration: none;
+    font-family: numeralLight;
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+}

src/views/Blogs/index.js

@@ -1,40 +1,67 @@
 import React, { Component } from "react";
+import { Link } from "react-router-dom";
 import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";
+
+import Navbar from "../Home/Navbar";
+import Footer from "../Home/Footer";
+import BreadCrumb from "./BreadCrumb/index";
+import Loader from "~/components/Loader/index";
 
 import "./index.scss";
+
 class Blogs extends Component {
   componentDidMount() {
-    // this.props.contentList(1, 100, CONTENT_LIST_3);
+    this.props.getBlogList();
   }
-
   render() {
-    const { blogs } = this.props;
+    const { list } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <div className="landscape-blogs d-flex flex-column">
+          <>
-            <div className="landscape-blogs__header d-flex">
+            {list.length > 0 ? (
-              <span></span>
+              <div className="landscape-blogs d-flex flex-column">
-              <h3>اخبار</h3>
+                <Navbar />
-            </div>
+                <BreadCrumb />
-            <div className="landscape-blogs__scroll d-flex flex-column">
+                <div className="landscape-blogs__scroll d-flex flex-column">
-              {blogs.map((item) => (
+                  {list.map((item) => (
-                <Item item={item} key={item.id} getSingle={getSingle} />
+                    <Item item={item} key={item.id} />
-              ))}
+                  ))}
-            </div>
+                </div>
-          </div>
+              </div>
+            ) : (
+              <div
+                className="d-flex justify-content-center align-items-center"
+                style={{ height: "100vh", width: "100vw" }}
+              >
+                <Loader />
+              </div>
+            )}
+
+            <Footer />
+          </>
         ) : null}
         {window.innerWidth < 1000 ? (
           <div className="portrait-blogs d-flex flex-column">
-            <div className="portrait-blogs__header d-flex">
+            {list.length > 0 ? (
-              <span></span>
+              <>
-              <h3>اخبار</h3>
+                <Navbar />
-            </div>
+                <BreadCrumb />
-            <div className="portrait-blogs__scroll d-flex flex-column">
+                <div className="portrait-blogs__scroll d-flex flex-column">
-              {blogs.map((item) => (
+                  {list.map((item) => (
-                <Item item={item} key={item.id} getSingle={getSingle} />
+                    <Item item={item} key={item.id} />
-              ))}
+                  ))}
-            </div>
+                </div>
+              </>
+            ) : (
+              <div
+                className="d-flex justify-content-center align-items-center"
+                style={{ height: "100vh", width: "100vw" }}
+              >
+                <Loader />
+              </div>
+            )}
           </div>
         ) : null}
       </>
@@ -42,9 +69,42 @@ class Blogs extends Component {
   }
 }
 
+const Item = (props) => {
+  const { item } = props;
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <Link to={"/blogs/" + item.id} className="landscape-blogs-item d-flex">
+          <div className="landscape-blogs-item__pic">
+            <img src={`https://dnvn.ir/api/v1/file/${item.id}`} alt={item.id} />
+          </div>
+          <div className="landscape-blogs-item__left d-flex flex-column">
+            <h1>{item.title}</h1>
+            <span>مطالعه کامل</span>
+          </div>
+        </Link>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <Link
+          to={"/blogs/" + item.id}
+          className="portrait-blogs-item d-flex flex-column"
+        >
+          <img
+            src={`https://dnvn.ir/api/v1/file/${item.id}`}
+            alt={item.title}
+          />
+          <h1>{item.title}</h1>
+          {/* <p>{item.text}</p> */}
+          <span>مطالعه کامل</span>
+        </Link>
+      ) : null}
+    </>
+  );
+};
+
 export default connect(
   (state) => ({
-    all: state.content.all,
+    list: state.publicApi.blogList,
   }),
-  {}
+  { getBlogList: publicApi.getBlogList }
 )(Blogs);

src/views/Blogs/index.scss

@@ -26,11 +26,59 @@
       width: 0px;
     }
   }
+  &-item {
+    width: calc(100% - 8px);
+    height: 200px;
+    max-width: 800px;
+    max-height: 300px;
+    padding: 10px 10px 10px;
+    direction: rtl;
+    text-align: right;
+    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
+    border-radius: 8px;
+    position: relative;
+    margin: 20px auto 0px;
+    transform: translateY(-10px);
+    text-decoration: none;
+    &__pic {
+      width: 300px;
+      height: 100%;
+      & img {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+      }
+    }
+    &__left {
+      margin-right: 20px;
+      padding-top: 20px;
+      justify-content: flex-start;
+      h1 {
+        padding-right: 2px;
+        font-size: 28px;
+        margin-bottom: 0px;
+        letter-spacing: -2px;
+        color: #4e4e4e;
+        font-family: numeralLight;
+        text-decoration: none;
+      }
+      span {
+        font-family: numeralLight;
+        position: absolute;
+        font-size: 15px;
+        bottom: 10px;
+        left: 10px;
+        margin-bottom: 0px;
+        border-radius: 10px;
+        color: #6cbe44;
+      }
+    }
+  }
 }
 
 .portrait-blogs {
   width: 100vw;
-  padding: 90px 10px 10px;
+  padding: 70px 10px 10px;
   max-width: 680px;
   margin: 0px auto;
   direction: rtl;
@@ -44,7 +92,7 @@
       margin-bottom: 20px;
       letter-spacing: -1px;
       margin-right: 10px;
-      color: $bright-cerulean;
+      // color: $bright-cerulean;
     }
   }
   &__scroll {
@@ -56,4 +104,41 @@
       width: 0px;
     }
   }
+  &-item {
+    font-family: numeralLight;
+    text-decoration: none;
+    width: calc(100% - 8px);
+    padding: 10px 10px 10px;
+    direction: rtl;
+    text-align: right;
+    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
+    border-radius: 8px;
+    position: relative;
+    margin: 20px 4px 0px;
+    transform: translateY(-10px);
+    height: 330px;
+    & img {
+      width: 100%;
+      height: 220px;
+      border-radius: 10px;
+    }
+    h1 {
+      padding-right: 2px;
+      font-size: 28px;
+      margin-bottom: 0px;
+      margin-top: 10px;
+      // color: $smalt;
+      text-decoration: none;
+      color: #4e4e4e;
+    }
+    span {
+      position: absolute;
+      font-size: 18px;
+      bottom: 5px;
+      left: 10px;
+      margin-bottom: 0px;
+      border-radius: 10px;
+      color: #6cbe44;
+    }
+  }
 }

src/views/QR/VideoBox/React-video-js-player/index.js

@@ -43,18 +43,7 @@ class VideoApp extends Component {
   render() {
     return (
       // <div style={{ width: "100%", height: "100%" }}>
-      <video
+      <video controls={true} src={this.state.video.src} type="video/mp4" />
-        controls={true}
-        src={this.state.video.src}
-        onReady={this.onPlayerReady.bind(this)}
-        onPlay={this.onVideoPlay.bind(this)}
-        onPause={this.onVideoPause.bind(this)}
-        onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
-        onSeeking={this.onVideoSeeking.bind(this)}
-        onSeeked={this.onVideoSeeked.bind(this)}
-        onEnd={this.onVideoEnd.bind(this)}
-        type="video/mp4"
-      />
       // </div>
     );
   }

src/views/QR/VoiceBox/Material-audio-player/index.js

@@ -3,11 +3,6 @@ import AudioPlayer from "material-ui-audio-player";
 
 const muiTheme = createMuiTheme({});
 
-const src = [
-  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
-  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
-];
-
 export default function MaterialAudioPlayer(props) {
   return (
     <ThemeProvider theme={muiTheme}>
@@ -21,7 +16,7 @@ export default function MaterialAudioPlayer(props) {
         order="standart"
         preload="auto"
         loop={false}
-        src={src}
+        src={"https://dnvn.ir/api/v1/file/" + props.data}
       />
     </ThemeProvider>
   );

src/views/QR/VoiceBox/index.js

@@ -1,10 +1,9 @@
 import React from "react";
-import MaterialAudioPlayer from './Material-audio-player/index';
+import MaterialAudioPlayer from "./Material-audio-player/index";
 import "./index.scss";
 
-
-
 export default function VoiceBox(props) {
+  const { data } = props;
   return (
     <>
       {window.innerWidth > 1000 ? (
@@ -14,9 +13,9 @@ export default function VoiceBox(props) {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {data.title}
           </h2>
-            <MaterialAudioPlayer />
+          <MaterialAudioPlayer data={data.fileIds} />
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
@@ -25,9 +24,7 @@ export default function VoiceBox(props) {
             <span></span>
             {props.data.title}
           </h2>
-          
+          <MaterialAudioPlayer data={data.fileIds} />
-            <MaterialAudioPlayer />
-          
         </div>
       ) : null}
     </>