SOROKA-111: fix articles page

src/api/articles.ts

@@ -0,0 +1,14 @@
+import API from "./config";
+
+export const ArticlesAPI = {
+  async getAllArticles() {
+    // const { data } = await API.get("http://localhost:8000/wp-json/wp/v2/posts?_embed=author,wp:featuredmedia");
+    const { data } = await API.get("https://cms.wunder-kammer.ru/posts?_embed=author,wp:featuredmedia");
+    return data;
+  },
+  async getArticleBySlug(slug: string | undefined) {
+    const { data } = await API.get("https://cms.wunder-kammer.ru/posts?slug=${slug}&_embed=author,");
+    // const { data } = await API.get(`http://localhost:8000/wp-json/wp/v2/posts?slug=${slug}&_embed=author,`);
+    return data;
+  }
+};

src/api/cards.ts

@@ -49,7 +49,7 @@ export const CardsAPI = {
     return data.results;
   },
   async getCardsList(params?: { offset: number; limit: number }) {
-    const { data } = await API.get<CardsResponse>("cards/noAuth", { params });
+    const { data } = await API.get<CardsResponse>("cards", { params });
     return data.results;
   },
   async getCardsByOrganizationId(orgId: number, params?: { offset: number; limit: number }) {

src/api/config.ts

@@ -3,7 +3,10 @@ import axios from "axios";
 const REACT_APP_API_URL = process.env.REACT_APP_API_URL;
 
 const instance = axios.create({
-  baseURL: REACT_APP_API_URL
+  baseURL: REACT_APP_API_URL,
+  headers: {
+    "domain-token": "localhost"
+  }
 });
 
 export default instance;

src/pages/Articles.tsx

@@ -1,10 +1,19 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { ArticlesAPI } from "../api/articles";
 import BigLogoImage from "../components/BigLogoImage";
-import { ARTICLES } from "../utils/articlesMock";
 
 const Articles = () => {
   const [imageUrl, setImageUrl] = useState<string>("");
+  const [articles, setArticles] = useState([]);
+  const [isAriclesLoaded, setIsArticlesLoaded] = useState(false);
+
+  useEffect(() => {
+    ArticlesAPI.getAllArticles().then((res) => {
+      setArticles(res);
+      setIsArticlesLoaded(true);
+    });
+  }, []);
 
   return (
     <main className="layout_main flex row mobile--column content--space-between mobile-content--start items--start">
@@ -21,19 +30,21 @@ const Articles = () => {
       <div className="main_section right flex column content--start items--start">
         <h1 className="section_title blue">Статьи</h1>
         <div className="section_content articles_container">
-          {ARTICLES.map((article) => (
-            <div className="articles_block">
-              <Link
-                className="articles_link"
-                to={`/single-article/${article.slug}`}
-                onMouseEnter={() => setImageUrl(article.preview)}
-                onMouseLeave={() => setImageUrl("")}
-              >
-                <div className="articles_title">{article.title}</div>
-                <div className="articles_author">Автор: {article.author}</div>
-              </Link>
-            </div>
-          ))}
+          {isAriclesLoaded
+            ? articles.map((article: any) => (
+                <div key={article.id} className="articles_block">
+                  <Link
+                    className="articles_link"
+                    to={`/single-article/${article.slug}`}
+                    onMouseEnter={() => setImageUrl(article._embedded["wp:featuredmedia"][0].source_url)}
+                    onMouseLeave={() => setImageUrl("")}
+                  >
+                    <div className="articles_title">{article.title.rendered}</div>
+                    <div className="articles_author">Автор: {article._embedded.author[0].name}</div>
+                  </Link>
+                </div>
+              ))
+            : "Загрузка статей..."}
         </div>
       </div>
     </main>

src/pages/SingleArticle.tsx

@@ -1,30 +1,48 @@
 import PageLayout from "../components/PageLayout";
 import { useParams } from "react-router-dom";
-import { ARTICLES } from "../utils/articlesMock";
+import { ArticlesAPI } from "../api/articles";
+import { useEffect, useState } from "react";
 
 const SingleArticle = () => {
   const { id } = useParams();
-  const article = ARTICLES.find((article) => article.slug === id);
-  return article ? (
+  const [articleData, setArticleData] = useState<any>(null);
+  const [isArticleLoaded, setIsArticlesLoaded] = useState(false);
+
+  useEffect(() => {
+    ArticlesAPI.getArticleBySlug(id).then((res) => {
+      setArticleData(res.length > 0 ? res[0] : null);
+      setIsArticlesLoaded(true);
+    });
+  }, [id]);
+
+  return id ? (
     <PageLayout
       breadcrumbs={[
         { label: "Кабинет", link: "/cabinet" },
         { label: "Статьи", link: "/articles", active: true }
       ]}
     >
-      <article className="article_container">
-        <h1 className="article_title">{article.title}</h1>
+      {isArticleLoaded ? (
+        articleData ? (
+          <article className="article_container">
+            <h1 className="article_title">{articleData.title.rendered}</h1>
 
-        <div className="article_author flex row content--start items--start">
-          <div className="article_author_point">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-              <circle r="50%" cx="50%" cy="50%" fill="#0000ff" stroke="#0000ff" strokeWidth="0"></circle>
-            </svg>
-          </div>
-          <div className="article_author_name">Автор: {article.author}</div>
-        </div>
-        {article.content}
-      </article>
+            <div className="article_author flex row content--start items--start">
+              <div className="article_author_point">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                  <circle r="50%" cx="50%" cy="50%" fill="#0000ff" stroke="#0000ff" strokeWidth="0"></circle>
+                </svg>
+              </div>
+              <div className="article_author_name">Автор: {articleData._embedded.author[0].name}</div>
+            </div>
+            <div dangerouslySetInnerHTML={{ __html: articleData.content.rendered }}></div>
+          </article>
+        ) : (
+          <p>Статья не найдена</p>
+        )
+      ) : (
+        <p>Загрузка статьи...</p>
+      )}
     </PageLayout>
   ) : (
     <div>Error 404</div>

src/styles/pagelayout.css

@@ -30,4 +30,5 @@
     width: 100%;
     max-width: 900px;
     align-self: center;
+    padding-top: 2rem
 }

src/styles/style.css

@@ -965,12 +965,16 @@ body{
 .main_section{
     flex: 0 0 50%;
     min-height: 100vh;
+    align-self: stretch;
+    max-width: 50%;
 }
 @media screen and (max-width: 980px) {
     .main_section{
         flex: 0 0 auto;
         width: 100%;
         min-height: unset;
+        max-width: 100%;
+
     }
 }
 
@@ -1344,10 +1348,15 @@ h1.section_title{
 .section_image_wrapper{
     font-size: var(--font-size-62);
     padding-top: 2.7em;
+    position: sticky;
+    top: 0;
 }
 
 .section_image_wrapper img{
-    width: 67%;
+    max-height: 720px;
+    max-width: 100%;
+    width: 100%;
+    object-fit: contain;
 }
 
 .section_content.articles_container{
@@ -1635,4 +1644,15 @@ p.team_person{
 
 .ynmap__wrap {
     height: 650px;
+}
+
+@media (max-width: 800px) {
+    .wp-block-image {
+        margin: 0.5rem;
+    }
+}
+
+.wp-block-image img {
+    width: 100%;
+    height: auto;
 }