feature: articles loading and routing

Author: b-angelov

src/components/articles/Article.jsx

@@ -0,0 +1,60 @@
+import useAPI from "../../hooks/useAPI.js";
+import useOrderedStyles from "../../hooks/useOrderedStyles.js";
+import {useContext, useEffect, useState} from "react";
+import AuthContext from "../../contexts/AuthContext.js";
+import {useNavigate, useParams} from "react-router";
+import ArticleTile from "./ArticleTile.jsx";
+
+export default function Article(props) {
+    const {date, feast, saint, holiday, author, image, content, title} = props
+    const {id} = useParams()
+    const {loadArticles} = useAPI();
+    const {addStyle} = useOrderedStyles()
+    const {is_authenticated} = useContext(AuthContext)
+    const [article, setArticle] = useState({});
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        addStyle("/articles/article.css", "articles")
+    }, []);
+
+    useEffect(() => {
+        loadArticles(date, feast, saint, holiday, author, id).then(response =>{
+                setArticle(
+                    response?.data[0]
+                )
+            }
+        )
+    },[date, feast, saint, holiday, author]);
+
+    return (
+        <>
+            <section className="single-article">
+                <article>
+                    <figure>
+                        {!!article.image && (<img src={article.image} alt={article.title}/>)}
+                        {!article.image && (<img src={'/src/assets/images/articles/saint.webp'} alt="няма изображение"/>)}
+                    </figure>
+                    <main>
+                        <h2>{article.title}</h2>
+                        <p>{article.content}</p>
+                        <nav>
+                            <ul>
+                                {/*{% if article.is_own %}*/}
+                                {/*<li><a href="{% url "article-delete" article.pk %}">*/}
+                                {/*    */}
+                                {/*</a></li>*/}
+                                {/*{% endif %}*/}
+                                {/*{% if article.can_change or article.is_own %}*/}
+                                {/*<li><a href="{% url "article-edit" article.pk %}">*/}
+                                {/*    */}
+                                {/*</a></li>*/}
+                                {/*{% endif %}*/}
+                            </ul>
+                        </nav>
+                    </main>
+                </article>
+            </section>
+            </>
+            )
+            }

src/components/articles/ArticleTile.jsx

@@ -1,11 +1,12 @@
+import routes from "../../routes/routes.js";
 
 export default function ArticleTile(props) {
 
-    const {date, feast, saint, holiday, author, image, content, title} = props
+    const {id, date, feast, saint, holiday, author, image, content, title, navigate} = props
 
     return (
         <>
-            <article onClick="window.location.href='{{ article.article_url }}';">
+            <article onClick={() => navigate(routes["article-detail"].replace(":id", id))}>
                 <figure>
                     {!!image && (<img src={image} alt={title}/>)}
                     {!image && (<img src={'/src/assets/images/articles/saint.webp'} alt="няма изображение"/>)}

src/components/articles/Articles.jsx

@@ -25,7 +25,7 @@ export default function Articles(props) {
     useEffect(() => {
         loadArticles(date, feast, saint, holiday, author).then(response =>{
             setArticles(response.data.map(article => {
-                return <ArticleTile key={article.id} {...article}/>
+                return <ArticleTile key={article.id} {...article} navigate={navigate}/>
             }))
         }
         )

src/hooks/useAPI.js

@@ -30,9 +30,9 @@ function useAPI(){
         }
     }
 
-    async function loadArticles(date, feast, saint, holiday, author){
+    async function loadArticles(date, feast, saint, holiday, author, id){
         try{
-            return await api.get(`${apiAddress}api/articles/?date=${date||""}&feast=${feast||""}&saint=${saint||""}&holiday=${holiday||""}&author=${author||""}`)
+            return await api.get(`${apiAddress}api/articles/?id=${id||""}&date=${date||""}&feast=${feast||""}&saint=${saint||""}&holiday=${holiday||""}&author=${author||""}`)
         } catch(err){
             console.log(err)
             throw new Error("Failed to fetch articles")

src/routes/config.jsx

@@ -4,11 +4,13 @@ import Calendar from "../components/calendar/Calendar.jsx";
 import Login from "../components/accounts/Login.jsx";
 import Logout from "../components/accounts/Logout.jsx";
 import Articles from "../components/articles/Articles.jsx";
+import Article from "../components/articles/Article.jsx";
 
 export const routeConfig = [
     { path: routes.home, element: <Base/>, nested: [
             {path: routes["home"], element: <Articles/>, nested:[], auth_required: false},
-            {path: routes["articles-page"], element: <Articles/>, nested:[], auth_required: false},
+            {path: routes["all-articles"], element: <Articles/>, nested:[], auth_required: false},
+            {path: routes["article-detail"], element: <Article/>, nested:[], auth_required: false},
             {path: routes["login-page"], element: <Login/>, nested:[], auth_required: false},
             {path: routes["logout-page"], element: <Logout/>, nested:[], auth_required: true},
             {path: routes["calendar-page"], element: <Calendar/>, nested:[], auth_required: false},

src/routes/routes.js

@@ -4,7 +4,7 @@ const routes = {
     "calendar-page": "/calendar",
     "login-page": "/login",
     "logout-page": "/logout",
-    "articles-page": "/articles",
+    "all-articles": "/articles",
     "article-detail": "/articles/:id",
     "article-create": "/articles/create",
 }