Single blog page

package.json

@@ -4,6 +4,7 @@
     "private": true,
     "dependencies": {
         "@material-ui/core": "^4.12.3",
+        "@react-icons/all-files": "^4.1.0",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",

public/index.html

@@ -29,7 +29,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
-
+   
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
 
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.js

@@ -16,6 +16,7 @@ import Blog from "./containers/Blog";
 import NotFound from "./containers/NotFound";
 import Footer from "./components/Footer";
 import Preloader from "./components/PreLoad";
+import SingleBlog from "./containers/SingleBlog";
 import Status from "./containers/Status";
 import UserProfilePage from "./containers/UserProfilePage";
 
@@ -105,6 +106,7 @@ function App() {
           <Route exact path="/Profile" component={UserProfilePage} />
           <Route exact path="/Blog" component={Blog} />
           <Route exact path="/status" component={Status} />
+          <Route exact path="/SingleBlog/:cat/:slug" component={SingleBlog} />
           <Route component={NotFound} />
         </Switch>
         <Footer />

src/components/BlogDetails/index.jsx

@@ -1,59 +1,55 @@
 import React from "react";
 import { Row, Col } from "react-bootstrap";
 import "./style.scss";
-// import Avatar from "@material-ui/core/Avatar";
 import Avatar from "react-avatar";
-
+import { Link } from "react-router-dom";
 import "./style.scss";
-// import Avatar from "@material-ui/core/Avatar";
+import { useTranslation } from "react-i18next";
 
 const BlogDetails = ({ post }) => {
+  const { t } = useTranslation();
   return (
     <div className="blog">
-      {/* <Link to={`singleBlog/${post.id}`} className="title"> */}
-      {/* <Container className=" justify-content-center  "> */}
-      <Row>
-        <Col sm={12} md={6} lg={5}>
-          <div className="post_show_case">
-            <img
-              src={post.jetpack_featured_media_url}
-              alt="featcherd"
-              className="blog_image"
-            />
-          </div>
-        </Col>
-        <Col sm={12} md={6} lg={5}>
-          <div className="post_info">
-            <h2
-              dangerouslySetInnerHTML={{ __html: post.category }}
-              className="category"
-            ></h2>
-            <h1
-              dangerouslySetInnerHTML={{ __html: post.title.rendered }}
-              className="HeaderText"
-            ></h1>
+      <Link to={`SingleBlog/${post.category}/${post.slug}`} className="title">
+        <Row>
+          <Col sm={12} md={6} lg={5}>
+            <div className="post_show_case">
+              <img
+                src={post.jetpack_featured_media_url}
+                alt="featcherd"
+                className="blog_image"
+              />
+            </div>
+          </Col>
+          <Col sm={12} md={6} lg={5}>
+            <div className="post_info">
+              <h2
+                dangerouslySetInnerHTML={{ __html: post.category }}
+                className="category"
+              ></h2>
+              <h1
+                dangerouslySetInnerHTML={{ __html: post.title.rendered }}
+                className="HeaderText"
+              ></h1>
 
-            <div className="auther_info">
-              {/* <Avatar className="Avatar" alt="Remy Sharp" /> */}
-              <Avatar name="Khadija" size="45" round={true} />
-              {/* <Avatar className="Avatar" alt="Remy Sharp" /> */}
-              <div className="auther_name_title">
-                <h6
-                  dangerouslySetInnerHTML={{
-                    __html: post.author === 210641422 && "Khadija",
-                  }}
-                  className="auther_name"
-                ></h6>
-                <span className="auther_job_title">
-                  Content Writing / IT Depatement
-                </span>
+              <div className="auther_info">
+                <Avatar name="Khadija" size="45" round={true} />
+                <div className="auther_name_title">
+                  <h6
+                    dangerouslySetInnerHTML={{
+                      __html: post.author === 210641422 && "Khadija",
+                    }}
+                    className="auther_name"
+                  ></h6>
+                  <span className="auther_job_title">
+                    {t("blogs.blogPageAutherDetails")}
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-        </Col>
-      </Row>
-      {/* </Container> */}
-      {/* </Link> */}
+          </Col>
+        </Row>
+      </Link>
     </div>
   );
 };

src/components/SingleBlogPage/index.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import { Container, Col, Row } from "react-bootstrap";
+import Avatar from "react-avatar";
+
+import "./style.scss";
+
+export default function SingleBlogPage({ postCat, postSlug }) {
+  const [post, setpost] = useState({});
+
+  useEffect(() => {
+    const fetchPostData = async () => {
+      try {
+        const posts = await fetch(
+          `https://public-api.wordpress.com/wp/v2/sites/choosewisely834444303.wordpress.com/posts?slug=${postSlug}`
+        );
+        const [data] = await posts.json();
+        setpost(data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchPostData();
+
+    setTimeout(() => {
+      const aNods = document.querySelectorAll(".more-link");
+      const array = Array.from(aNods);
+      array.forEach((element) => {
+        element.remove();
+      });
+    }, 900);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <div className="single_post">
+      <Container>
+        <Row>
+          <Col>
+            <div className="single_post_wrapper">
+              <p className="sighle_post_catgeory">{postCat}</p>
+              <h1
+                dangerouslySetInnerHTML={{ __html: post?.title?.rendered }}
+                className="single_blog_title"
+              ></h1>
+              <div className="post_image_header">
+                <img
+                  src={post.jetpack_featured_media_url}
+                  alt={`post_image`}
+                  className="post_image"
+                />
+              </div>
+              <p
+                dangerouslySetInnerHTML={{ __html: post?.content?.rendered }}
+                className="single_post_content"
+              ></p>
+              <div className="auther_single_post">
+                <Avatar name="Khadija" size="45" round={true} />
+                <div className="post_auther_details">
+                  <h6
+                    dangerouslySetInnerHTML={{
+                      __html: post.author === 210641422 && "Khadija",
+                    }}
+                    className="single_post_auther"
+                  ></h6>
+                  <p className="single_post_date">{post.date}</p>
+                </div>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
+}

src/components/SingleBlogPage/style.scss

@@ -0,0 +1,65 @@
+@import "./../../style/variables";
+
+.single_post {
+  min-height: 100vh;
+}
+.single_post_wrapper {
+  padding: 3rem 0;
+  .sighle_post_catgeory {
+    display: inline-block;
+    padding: 0.8rem 1.4rem;
+    font-weight: bold;
+    font-size: 0.875rem;
+    line-height: 1rem;
+    color: #fff;
+    background-color: #d1dbe3;
+    border-radius: 00.31rem;
+    margin-bottom: 2rem;
+  }
+
+  .single_blog_title {
+    font-style: normal;
+    font-weight: 300;
+    font-size: 2rem;
+    line-height: 2.875rem;
+    color: #386641;
+    word-wrap: break-word;
+    padding: 0.5rem 0;
+  }
+  .single_post_content {
+    font-size: 1.125rem;
+    margin-bottom: 3.75rem;
+    margin-top: 3.75rem;
+    color: #666;
+    text-align: justify;
+    text-justify: inter-word;
+  }
+  .single_post_date {
+    font-weight: 300;
+    font-size: 0.75rem;
+
+    color: #9dafbd;
+  }
+}
+.single_post_auther {
+  font-weight: bold;
+  font-size: 0.875rem;
+  color: #9dafbd;
+  margin: 0;
+}
+.post_image_header {
+  .post_image {
+    height: 100%;
+    width: 100% !important;
+    border-radius: 0.4rem;
+  }
+}
+
+.auther_single_post {
+  display: flex;
+  align-items: center;
+}
+
+.post_auther_details {
+  margin: 0 0 0 1rem;
+}

src/containers/SingleBlog/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import SingleBlogPage from "./../../components/SingleBlogPage";
+import { useParams } from "react-router-dom";
+
+export default function SingleBlog() {
+  let { cat, slug } = useParams();
+
+  return (
+    <div>
+      <SingleBlogPage postCat={cat} postSlug={slug} />
+    </div>
+  );
+}

src/locales/en/translation.json

@@ -23,6 +23,12 @@
       "card1Text": "Our mission is to ensure an adequate and relevant orientation to all the students wishing to reach an university in Turkey",
       "card2Title": "Meet us",
       "card2Text": "You can contact our team through the contact page"
+    },
+    "blog": {
+      "title": "Our Blog",
+      "subText": "Home is behind, the world ahead and there are many paths to tread through shadows to the edge.",
+      "seeAll": "See all",
+      "readMore": "read more!"
     }
   },
   "resourcesPage": {
@@ -76,7 +82,8 @@
   },
   "blogs": {
     "header": "Latest Blog Posts",
-    "title": "Home is behind, the world ahead and there are many paths to tread through shadows to the edge."
+    "title": "Home is behind, the world ahead and there are many paths to tread through shadows to the edge.",
+    "blogPageAutherDetails": "Content Writing / IT Depatement"
   },
   "constactUs": {
     "hero": {

src/locales/tr/translation.json

@@ -11,18 +11,18 @@
       "title": "ilk 10 üniversite",
       "subText": "İşte kampüs personeli ve eğitim kalitesine göre ilk on üniversite sıralaması evrensel ölçeklerle ölçülmektedir.."
     },
-    "blog": {
-      "title": "Blogumuz",
-      "subText": "Ev geride, dünya önde ve gölgelerin arasından uçlara kadar yürümek için pek çok yol var.",
-      "seeAll": "Tümünü Gör",
-      "readMore": "Devamını oku!"
-    },
     "whoAreWe": {
       "title": "Biz kimiz?",
       "card1Title": "Misyonumuz",
       "card1Text": "Misyonumuz, Türkiye'de bir üniversiteye ulaşmak isteyen tüm öğrencilere uygun bir oryantasyon sağlamaktır",
       "card2Title": "Bizimle tanışın",
       "card2Text": "Ekibimiz ile iletişim sayfasından iletişime geçebilirsiniz"
+    },
+    "blog": {
+      "title": "Blogumuz",
+      "subText": "Ev geride, dünya önde ve gölgelerin arasından uçlara kadar yürümek için pek çok yol var.",
+      "seeAll": "Tümünü Gör",
+      "readMore": "Devamını oku!"
     }
   },
   "resourcesPage": {
@@ -76,7 +76,8 @@
   },
   "blogs": {
     "header": "En son blog gönderileri",
-    "title": "Ev geride, dünya önde ve gölgelerin arasından uçlara kadar yürümek için pek çok yol var."
+    "title": "Ev geride, dünya önde ve gölgelerin arasından uçlara kadar yürümek için pek çok yol var.",
+    "blogPageAutherDetails": "İçerik Yazma / BT Departmanı"
   },
   "constactUs": {
     "hero": {