Skip to content

Commit

Permalink
⚡ feat: add dynamic fetching for popular tutorials
Browse files Browse the repository at this point in the history 
Implement useEffect to fetch popular tutorials from API. Add proper
handling for rendering tutorial data with mappings for title, image,
like count, and view count.
  • Loading branch information
@Sorok-Dva
Sorok-Dva committed Aug 15, 2024
1 parent 70d0efa commit 41f593a
Showing 1 changed file with 82 additions and 128 deletions.
210 changes: 82 additions & 128 deletions src/components/News/TutorialsSidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,149 +1,103 @@
'use client'

import React from 'react'
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { type Tutorial } from 'pages/Tutorials'
import { slugify } from 'utils/slugify'


const TutorialsSidebar: React.FC = () => {
const [popularTutorials, setPopularTutorials] = useState<Tutorial[]>([])

useEffect(() => {
const fetchPopularTutorials = async () => {
try {
const response = await fetch('/api/tutorials/popular')
const data: Tutorial[] = await response.json()
setPopularTutorials(data)
} catch (error) {
console.error('Failed to fetch popular tutorials:', error)
}
}

fetchPopularTutorials()
}, [])

return (
<>
<div className="widget-area" id="secondary">
<div className="widget widget-posts-thumb">
<h3 className="widget-title">Popular Posts</h3>

<h3 className="widget-title">Tutos populaires</h3>
<div className="post-wrap">
<article className="item">
<Link to="/news/news-details" className="thumb">
<span
className="fullimage cover"
role="img"
style={{
backgroundImage: 'url(/images/blog-details/popular-posts-1.png)',
}}
></span>
</Link>

<div className="info">
<time>February 20, 2020</time>
<h4 className="title usmall">
<Link to="/news/news-details">
Making Peace With The Feast Or Famine Of Freelancing
</Link>
</h4>
</div>

<div className="clear"></div>
</article>

<article className="item">
<Link to="/news/news-details" className="thumb">
<span
className="fullimage cover"
role="img"
style={{
backgroundImage: 'url(/images/blog-details/popular-posts-2.png)',
}}
></span>
</Link>

<div className="info">
<time>February 21, 2020</time>
<h4 className="title usmall">
<Link to="/news/news-details">
I Used The Web For A Day On A 50 MB Budget
{popularTutorials.map((tutorial) => (
<article key={tutorial.id} className="item">
<Link to={`/tutorials/${tutorial.id}/${slugify(tutorial.title)}`} className="thumb">
<span
className="fullimage cover"
role="img"
style={{
backgroundImage: `url(${tutorial.image ?? '/images/default-thumbnail.png'})`,
}}
></span>
</Link>
<div className="info">
<time>{new Date(tutorial.createdAt).toLocaleDateString('fr-FR')}</time>
<h4 className="title usmall">
<Link to={`/tutorials/${tutorial.id}/${slugify(tutorial.title)}`}>
{tutorial.title}
</Link>
</h4>
<Link to="#">
<i className="flaticon-user"></i> { tutorial.user?.nickname ?? 'Unknown' }
</Link>
</h4>
</div>

<div className="clear"></div>
</article>

<article className="item">
<Link to="/news/news-details" className="thumb">
<span
className="fullimage cover"
role="img"
style={{
backgroundImage: 'url(/images/blog-details/popular-posts-3.png)',
}}
></span>
</Link>

<div className="info">
<time>February 22, 2020</time>
<h4 className="title usmall">
<Link to="/news/news-details">
How To Create A Responsive Popup Gallery?
<i className="fa fa-heart" style={{ marginLeft: '1rem'}}></i> { tutorial.upvote } Likes
<i className="fa fa-eye" style={{ marginLeft: '1rem'}}></i> { tutorial.views } vues
</div>
<div className="clear"></div>
</article>
)) }
</div>

<div className="widget widget_categories">
<h3 className="widget-title">Categories</h3>

<div className="post-wrap">
<ul>
<li>
<Link to="#">
Tutoriels <span>(10)</span>
</Link>
</h4>
</div>

<div className="clear"></div>
</article>

<article className="item">
<Link to="/news/news-details" className="thumb">
<span
className="fullimage cover"
role="img"
style={{
backgroundImage: 'url(/images/blog-details/popular-posts-4.png)',
}}
></span>
</Link>

<div className="info">
<time>February 23, 2020</time>
<h4 className="title usmall">
<Link to="/news/news-details">
Web development the best work in the future for the world
</li>
<li>
<Link to="#">
Conseils <span>(20)</span>
</Link>
</h4>
</div>

<div className="clear"></div>
</article>
</div>
</div>

<div className="widget widget_categories">
<h3 className="widget-title">Categories</h3>

<div className="post-wrap">
<ul>
<li>
<Link to="#">
Tutoriels <span>(10)</span>
</Link>
</li>
<li>
<Link to="#">
Conseils <span>(20)</span>
</Link>
</li>
<li>
<Link to="#">
</li>
<li>
<Link to="#">
Retour d'expérience <span>(10)</span>
</Link>
</li>
<li>
<Link to="#">
</Link>
</li>
<li>
<Link to="#">
Non catégorisé <span>(16)</span>
</Link>
</li>
</ul>
</Link>
</li>
</ul>
</div>
</div>
</div>

<div className="widget widget_tag_cloud">
<h3 className="widget-title">Tags</h3>
<div className="widget widget_tag_cloud">
<h3 className="widget-title">Tags</h3>

<div className="post-wrap">
<div className="tagcloud">
<Link to="#">Rêves Lucides (3)</Link>
<Link to="#">Interpretation (2)</Link>
<Link to="#">Débutant (2)</Link>
<Link to="#">Expérimenté (1)</Link>
<Link to="#">Non catégorisé (3)</Link>
<div className="post-wrap">
<div className="tagcloud">
<Link to="#">Rêves Lucides (3)</Link>
<Link to="#">Interpretation (2)</Link>
<Link to="#">Débutant (2)</Link>
<Link to="#">Expérimenté (1)</Link>
<Link to="#">Non catégorisé (3)</Link>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 41f593a

Please sign in to comment.