Skip to content

Commit 45e8d0e

Browse files
b-angelovb-angelov
committed
feature: added articles functionality
1 parent a898b41 commit 45e8d0e

File tree

8 files changed

+135
-32
lines changed

8 files changed

+135
-32
lines changed

‎src/components/articles/ArticleTile.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
export default function ArticleTile(props) {
3+
4+
const {date, feast, saint, holiday, author, image, content, title} = props
5+
6+
return (
7+
<>
8+
<article onClick="window.location.href='{{ article.article_url }}';">
9+
<figure>
10+
{!!image && (<img src={image} alt={title}/>)}
11+
{!image && (<img src={'/src/assets/images/articles/saint.webp'} alt="няма изображение"/>)}
12+
13+
</figure>
14+
<main>
15+
<h2>{title}</h2>
16+
<p>{content.slice(0,75) + "..."}</p>
17+
<nav>
18+
<ul>
19+
{/*{% if article.is_own %}*/}
20+
{/*<li><a href="{% url " article-delete" article.pk %}">*/}
21+
{/* */}
22+
{/*</a></li>*/}
23+
{/*{% endif %}*/}
24+
{/*{% if article.can_change or article.is_own %}*/}
25+
{/*<li><a href="{% url " article-edit" article.pk %}">*/}
26+
{/* */}
27+
{/*</a></li>*/}
28+
{/*{% endif %}*/}
29+
</ul>
30+
</nav>
31+
32+
</main>
33+
34+
</article>
35+
</>
36+
)
37+
}

‎src/components/articles/Articles.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import useAPI from "../../hooks/useAPI.js";
2+
import {useContext, useEffect, useState} from "react";
3+
import useOrderedStyles from "../../hooks/useOrderedStyles.js";
4+
import ArticleTile from "./ArticleTile.jsx";
5+
import useAuth from "../../hooks/useAuth.js";
6+
import AuthContext from "../../contexts/AuthContext.js";
7+
import routes from "../../routes/routes.js";
8+
import {useNavigate} from "react-router";
9+
10+
export default function Articles(props) {
11+
const {
12+
date, feast, saint, holiday, author
13+
} = props;
14+
15+
const {loadArticles} = useAPI();
16+
const {addStyle} = useOrderedStyles()
17+
const {is_authenticated} = useContext(AuthContext)
18+
const [articles, setArticles] = useState([]);
19+
const navigate = useNavigate();
20+
21+
useEffect(() => {
22+
addStyle("/articles/articles.css", "articles")
23+
}, []);
24+
25+
useEffect(() => {
26+
loadArticles(date, feast, saint, holiday, author).then(response =>{
27+
setArticles(response.data.map(article => {
28+
return <ArticleTile key={article.id} {...article}/>
29+
}))
30+
}
31+
)
32+
},[date, feast, saint, holiday, author]);
33+
34+
const final = []
35+
let add;
36+
37+
if (is_authenticated) {
38+
add = (
39+
<>
40+
<article className="new-article-tile" onClick={() => navigate(routes["article-create"])}>
41+
<figure>
42+
<img src={'/src/assets/images/articles/saint.webp'} alt={"няма намерени картички"}/>
43+
</figure>
44+
<main>
45+
<h2 style={{textTransform: "capitalize"}}>добави картичка</h2>
46+
<p className="new-article-sign"> + </p>
47+
</main>
48+
</article>
49+
</>
50+
)
51+
}
52+
53+
final.push( articles ? (
54+
<>
55+
<p style={{"textTransform": "capitalize"}}>Преглед на картички от статиите</p>
56+
<section className="article-list">
57+
{articles}
58+
{add}
59+
</section>
60+
</>
61+
) : (
62+
<>
63+
<article>
64+
<figure>
65+
<img src={'/src/assets/images/articles/saint.webp'} alt={"няма намерени картички"}/>
66+
</figure>
67+
<main>
68+
<h2 style={{textTransform: "capitalize"}}>Няма картички за този ден</h2>
69+
<p>Все още няма добавени картички за този ден</p>
70+
</main>
71+
</article>
72+
</>
73+
))
74+
75+
return final
76+
}

‎src/components/calendar/Calendar.jsx‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -41,34 +41,6 @@ export default function Calendar(){
4141
<p>Седмица {Math.floor(date.getDate() / 7)+1}</p>
4242
<ul>
4343
{calendarItems}
44-
{/*<li><time dateTime="2022-02-01">1</time>Dark Chocolate Day</li>*/}
45-
{/*<li><time dateTime="2022-02-02">2</time>Groundhog Day</li>*/}
46-
{/*<li><time dateTime="2022-02-03">3</time>Carrot Cake Day</li>*/}
47-
{/*<li><time dateTime="2022-02-04">4</time>Wear Red Day</li>*/}
48-
{/*<li><time dateTime="2022-02-05">5</time>Weatherperson's Day</li>*/}
49-
{/*<li><time dateTime="2022-02-06">6</time>Chopsticks Day</li>*/}
50-
{/*<li><time dateTime="2022-02-07">7</time>Periodic Table Day</li>*/}
51-
{/*<li><time dateTime="2022-02-08">8</time>Kite Flying Day</li>*/}
52-
{/*<li><time dateTime="2022-02-09">9</time>Pizza Day</li>*/}
53-
{/*<li><time dateTime="2022-02-10">10</time>Umbrella Day</li>*/}
54-
{/*<li><time dateTime="2022-02-11">11</time>Inventor's Day</li>*/}
55-
{/*<li><time dateTime="2022-02-12">12</time>Global Movie Day</li>*/}
56-
{/*<li><time dateTime="2022-02-13">13</time>Tortellini Day</li>*/}
57-
{/*<li><time dateTime="2022-02-14">14</time>Valentine's Day</li>*/}
58-
{/*<li><time dateTime="2022-02-15">15</time>Gumdrop Day</li>*/}
59-
{/*<li><time dateTime="2022-02-16">16</time>Do a Grouch a Favor Day</li>*/}
60-
{/*<li><time dateTime="2022-02-17">17</time>Cabbage Day</li>*/}
61-
{/*<li><time dateTime="2022-02-18">18</time>Battery Day</li>*/}
62-
{/*<li className="today"><time dateTime="2022-02-19">19</time>Chocolate Mint Day</li>*/}
63-
{/*<li><time dateTime="2022-02-20">20</time>Love Your Pet Day</li>*/}
64-
{/*<li><time dateTime="2022-02-21">21</time>President's Day</li>*/}
65-
{/*<li><time dateTime="2022-02-22">22</time>Cook a Sweet Potato Day</li>*/}
66-
{/*<li><time dateTime="2022-02-23">23</time>Tile Day</li>*/}
67-
{/*<li><time dateTime="2022-02-24">24</time>Toast Day</li>*/}
68-
{/*<li><time dateTime="2022-02-25">25</time>Clam Chowder Day</li>*/}
69-
{/*<li><time dateTime="2022-02-26">26</time>Pistachio Day</li>*/}
70-
{/*<li><time dateTime="2022-02-27">27</time>Polar Bear Day</li>*/}
71-
{/*<li><time dateTime="2022-02-28">28</time>Tooth Fairy Day</li>*/}
7244
</ul>
7345
{/*!--partial--*/}
7446
</article>

‎src/components/common/Base.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import {Outlet} from "react-router-dom";
88
import useAuth from "../../hooks/useAuth.js";
99
import {useEffect, useState} from "react";
1010
import useReload from "../../hooks/useReload.js";
11+
import routes from "../../routes/routes.js";
1112
import useAPI from "../../hooks/useAPI.js";
13+
import {Link} from "react-router";
1214

1315

1416
export default function Base(){
@@ -39,11 +41,11 @@ export default function Base(){
3941
<div id="website">
4042
<div id="header-main-wrapper">
4143
<div id="header">
42-
<a href="#">
44+
<Link to={routes["home"]}>
4345
<div id="logo">
4446

4547
</div>
46-
</a>
48+
</Link>
4749
<div className="user-name">
4850
{/*<!--{% if user.is_authenticated %}
4951
<span>{% translate 'you are logged in as: '|capfirst %}{{

‎src/hooks/useAPI.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,16 @@ function useAPI(){
3030
}
3131
}
3232

33-
return {apiMethods, apiLoaded, loadNavFiles, loadApiFiles}
33+
async function loadArticles(date, feast, saint, holiday, author){
34+
try{
35+
return await api.get(`${apiAddress}api/articles/?date=${date||""}&feast=${feast||""}&saint=${saint||""}&holiday=${holiday||""}&author=${author||""}`)
36+
} catch(err){
37+
console.log(err)
38+
throw new Error("Failed to fetch articles")
39+
}
40+
}
41+
42+
return {apiMethods, apiLoaded, loadNavFiles, loadApiFiles, loadArticles}
3443

3544
}
3645

‎src/providers/authProvider.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const AuthProvider = ({ children }) => {
3434
token,
3535
setToken,
3636
api,
37-
apiLoaded
37+
apiLoaded,
38+
is_authenticated: !!token,
3839
}),
3940
[token, api, apiLoaded]
4041
);

‎src/routes/config.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import Base from "../components/common/Base.jsx";
33
import Calendar from "../components/calendar/Calendar.jsx";
44
import Login from "../components/accounts/Login.jsx";
55
import Logout from "../components/accounts/Logout.jsx";
6+
import Articles from "../components/articles/Articles.jsx";
67

78
export const routeConfig = [
89
{ path: routes.home, element: <Base/>, nested: [
10+
{path: routes["home"], element: <Articles/>, nested:[], auth_required: false},
11+
{path: routes["articles-page"], element: <Articles/>, nested:[], auth_required: false},
912
{path: routes["login-page"], element: <Login/>, nested:[], auth_required: false},
1013
{path: routes["logout-page"], element: <Logout/>, nested:[], auth_required: true},
1114
{path: routes["calendar-page"], element: <Calendar/>, nested:[], auth_required: false},

‎src/routes/routes.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ const routes = {
44
"calendar-page": "/calendar",
55
"login-page": "/login",
66
"logout-page": "/logout",
7+
"articles-page": "/articles",
8+
"article-detail": "/articles/:id",
9+
"article-create": "/articles/create",
710
}
811

912
export default routes

0 commit comments

Comments
 (0)