News updated

src/App.jsx

@@ -25,23 +25,30 @@ import Multimedia from './pages/Multimedia';
 
 const App = () => {
   const [lang, setLang] = useState('ru');
+  const [postId, setPostId] = useState();
 
   return (
     <div className="App">
       <Ticker />
       <Header lang={lang} setLang={setLang} />
       <Routes>
-        <Route index element={<Home lang={lang} />} />
+        <Route index element={<Home lang={lang} setPostId={setPostId} />} />
         <Route path="/gtsbt" element={<Gtsbt />} />
         <Route path="/norm" element={<Normative lang={lang} />} />
-        <Route path="/news" element={<NewsPage lang={lang} />} />
+        <Route
+          path="/news"
+          element={<NewsPage lang={lang} setPostId={setPostId} postId={postId} />}
+        />
         <Route path="/multimedia" element={<Multimedia lang={lang} />} />
         <Route path="/contacts" element={<Contacts lang={lang} />} />
         <Route path="/trade" element={<Trade lang={lang} />} />
         <Route path="/fin" element={<Finance lang={lang} />} />
         <Route path="/register" element={<Register lang={lang} />} />
         <Route path="/tarif" element={<Tarif lang={lang} />} />
-        <Route path="/post" element={<NewsPostPage lang={lang} />} />
+        <Route
+          path="/post"
+          element={<NewsPostPage lang={lang} postId={postId} setPostId={setPostId} />}
+        />
       </Routes>
       <Footer />
     </div>

src/components/LatestNew.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const LatestNew = ({ title, date }) => {
+const LatestNew = ({ title, date, setPostId, id }) => {
   return (
-    <Link to={'/'} className="latest-new">
+    <Link to={'/post'} className="latest-new" onClick={() => setPostId(id)}>
       <h3 className="latest-new-date">{date}</h3>
       <h2 className="latest-new-title">{title}</h2>
     </Link>

src/components/NewsPost.jsx

@@ -2,7 +2,7 @@
 import { Link } from 'react-router-dom';
 import arrow from '../assets/icons/arrow.svg';
 
-const NewsPost = ({ title, shortDes, description, date, image }) => {
+const NewsPost = ({ title, shortDes, date, image, setPostId, id }) => {
   return (
     <div className="news-post">
       <div className="news-post-img">
@@ -13,7 +13,7 @@ const NewsPost = ({ title, shortDes, description, date, image }) => {
         <h2 className="news-post-title">{title}</h2>
         <p className="news-post-text">{shortDes}</p>
       </div>
-      <Link className="news-post-link" to={'/post'}>
+      <Link className="news-post-link" to={'/post'} onClick={() => setPostId(id)}>
         <img src={arrow} alt="arrow" />
         <h3>Читать полностью </h3>
       </Link>

src/pages/Home.jsx

@@ -13,7 +13,7 @@ import arrow from '../assets/icons/arrow.svg';
 import { Api } from '../helpers/api';
 import { dateReverse } from '../helpers/functions';
 
-const Home = ({ lang }) => {
+const Home = ({ lang, setPostId }) => {
   // Sets
   const [newsData, setNewsData] = useState();
   const [videoData, setVideoData] = useState();
@@ -112,6 +112,8 @@ const Home = ({ lang }) => {
                             shortDes={news.short_description}
                             date={dateReverse(news.date)}
                             image={news.image}
+                            id={news.id}
+                            setPostId={setPostId}
                           />
                         );
                       } else {

src/pages/NewsPage.jsx

@@ -7,7 +7,7 @@ import { dateReverse } from '../helpers/functions';
 import SectionTitle from '../components/SectionTitle';
 import NewsPost from '../components/NewsPost';
 
-const NewsPage = ({ lang }) => {
+const NewsPage = ({ lang, setPostId }) => {
   const [postsData, setPostsData] = useState();
 
   useEffect(() => {
@@ -40,6 +40,8 @@ const NewsPage = ({ lang }) => {
                       description={news.description}
                       date={dateReverse(news.date)}
                       image={news.image}
+                      id={news.id}
+                      setPostId={setPostId}
                     />
                   );
                 })

src/pages/NewsPostPage.jsx

@@ -6,51 +6,42 @@ import { dateReverse } from '../helpers/functions';
 import postPageImg from '../assets/images/post-img.png';
 import LatestNew from '../components/LatestNew';
 
-const NewsPostPage = () => {
+const NewsPostPage = ({ postId, lang, setPostId }) => {
   const [newsPageData, setNewsPageData] = useState();
 
   useEffect(() => {
     const NewsPageApi = new Api('http://tmex.gov.tm:8765/api/news', newsPageData, setNewsPageData);
-    NewsPageApi.get({ 'X-localization': 'en' });
+    NewsPageApi.get({ 'X-localization': lang });
+    console.log(postId);
   }, []);
 
+  useEffect(() => {
+    const NewsPageApi = new Api('http://tmex.gov.tm:8765/api/news', newsPageData, setNewsPageData);
+    NewsPageApi.get({ 'X-localization': lang });
+  }, [lang]);
+
   return (
     <div className="container">
       <div className="post-page-wrapper">
         <main>
-          <div className="post-page-main-wrapper">
-            <div className="post-page-header">
-              <h1 className="post-page-title">
-                Türkiýeden we Owganystandan gelen telekeçiler 4,5 müň tonnadan gowrak STG satyn
-                aldylar
-              </h1>
-              <h2 className="post-page-main-date">18.08.2022</h2>
-            </div>
-            <div className="post-page-img">
-              <img src={postPageImg} alt="img" />
-            </div>
-            <div className="post-page-text">
-              <p className="post-page-text-item">
-                Государственная товарно-сырьевая биржа Туркменистана была создана Указом Президента
-                Туркменистана от 29 июля 1994 года и является важнейшим экономическим институтом
-                страны. Биржа выполняет функцию главного органа государственного регулирования
-                экспортно-импортных операций. Отлаженный механизм функционирования позволяет ей
-                успешно интегрироваться в международную экономическую систему.
-              </p>
-              <p className="post-page-text-item">
-                Спектр деятельности ГТСБТ чрезвычайно широк – она является универсальной биржей,
-                принимая и реализуя через торги различные товарно-материальные ценности (за
-                исключением объектов интеллектуальной собственности), произведения искусства и
-                недвижимость.
-              </p>
-              <p className="post-page-text-item">
-                Спектр деятельности ГТСБТ чрезвычайно широк – она является универсальной биржей,
-                принимая и реализуя через торги различные товарно-материальные ценности (за
-                исключением объектов интеллектуальной собственности), произведения искусства и
-                недвижимость.
-              </p>
-            </div>
-          </div>
+          {newsPageData
+            ? newsPageData.data.map((news) => {
+                return news.id === postId ? (
+                  <div className="post-page-main-wrapper" key={news.id}>
+                    <div className="post-page-header">
+                      <h1 className="post-page-title">{news.title}</h1>
+                      <h2 className="post-page-main-date">{news.data}</h2>
+                    </div>
+                    <div className="post-page-img">
+                      <img src={news.image} alt="img" />
+                    </div>
+                    <div className="post-page-text">
+                      <p className="post-page-text-item">{news.description}</p>
+                    </div>
+                  </div>
+                ) : null;
+              })
+            : null}
         </main>
         <aside>
           <div className="post-page-latest-wrapper">
@@ -60,7 +51,10 @@ const NewsPostPage = () => {
                 ? newsPageData.data.map((news, index) => {
                     return index <= 6 ? (
                       <LatestNew
+                        key={news.id}
                         title={news.title}
+                        setPostId={setPostId}
+                        id={news.id}
                         date={dateReverse(news.date)
                           .split(' ')[0]
                           .replace('-', '.')
@@ -69,10 +63,6 @@ const NewsPostPage = () => {
                     ) : null;
                   })
                 : null}
-              {/* <LatestNew />
-              <LatestNew />
-              <LatestNew />
-              <LatestNew /> */}
             </div>
           </div>
         </aside>