diff --git a/src/Routes.js b/src/Routes.js index 326460b..9e76fac 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -50,7 +50,7 @@ function Routes() { {/**/} - + {/**/} diff --git a/src/components/Blog/Blog.js b/src/components/Blog/Blog.js index 91cce67..58f0886 100644 --- a/src/components/Blog/Blog.js +++ b/src/components/Blog/Blog.js @@ -1,67 +1,30 @@ -import React from 'react'; -import singlePost from '../../assets/images/single-post/1.jpg'; -import author from '../../assets/images/single-post/author.png'; -import cmnt1 from '../../assets/images/single-post/c1.png'; -import cmnt2 from '../../assets/images/single-post/c2.png'; -import cmnt3 from '../../assets/images/single-post/c3.png'; +import React from "react"; +import singlePost from "../../assets/images/single-post/1.jpg"; -function Blog() { - return ( - <> -
-
- -
-

Logotype Masterclass with Jessica Hische

-

- Lost the plot morish bleeder absolutely bladdered my lady chinwag that bleeding - Eaton blag, cheeky bugger burke matie boy brown bread say pukka off his nut - sloshed mufty, squiffy show off show off pick your nose and blow off brolly bite - your arm off bloke bubble and squeak hotpot happy days. Old spiffing cras bugger - blimey chancer me old mucker vagabond you mug, amongst absolutely bladdered - spend a penny ruddy wellies he lost his bottle hanky panky up the kyver bender, - give us a bell my good sir car boot pear shaped young delinquent victoria sponge - tomfoolery. Lavatory knackered pukka chip shop a blinding shot cor blimey guvnor - bodge blower, barmy faff about cheeky nice one at public school. Have it down - the pub posh matie boy wind up hunky-dory, he lost his bottle the full monty - bugger all mate cheeky bugger cras chancer, absolutely bladdered amongst - tomfoolery pukka. Knackered -

-

- James Bond old happy days the wireless cracking goal bloke me old mucker, arse - over tit blower mush the bee's knees chip shop the BBC, say lemon squeezy - blatant what a load of rubbish bog-standard nancy boy. Mush spiffing good time - brown bread cheeky bite your arm off chip shop bugger all mate, my lady down the - pub is faff about pukka. -

-
-

- I don't want no agro brilliant are you taking the piss skive off super boot - chancer don't get shirty. -

- Indigo Violet -
-

- That faff about the full monty blower bubble and squeak cheeky old matie boy - burke, the bee's knees what a load of rubbish golly gosh mufty is Elizabeth - squiffy, lurgy chimney pot Jeffrey Richard naff Queen's English cheesed off. Old - bonnet cheesed off lurgy me old mucker a blinding shot bits and bobs lavatory - barney, say no biggie jolly good mush chancer pukka what a load of rubbish, - Harry don't get shirty with me arse over tit he lost his bottle spiffing good - time bubble and squeak say. I bog Harry a load of old tosh quaint brown bread - get stuffed mate bobby, lemon squeezy boot bum bag chimney pot codswallop - amongst, lavatory twit bits and bobs pardon you daft ummm I'm telling. Blatant - matie boy say bugger all mate butty gormless, you mug pukka happy days bobby. - Down the pub what a load of rubbish geeza faff about chancer bits and bobs daft - lavatory boot victoria sponge spend a penny grub ummm I'm telling, absolutely - bladdered A bit of how's your father arse over tit do one chimney pot tomfoolery - porkies owt to do with me spiffing good time zonked. -

+function Blog({ blogItem, imgUrl }) { + const blogImg = + blogItem?.meta_value != null + ? `${imgUrl}/${blogItem?.meta_value}` + : singlePost; -
- - - ); + return ( + <> +
+
+ +
+

{blogItem?.post_title}

+
+
+ {/*
+

+ I don't want no agro brilliant are you taking the piss skive off super + boot chancer don't get shirty. +

+ Indigo Violet +
*/} + + ); } export default Blog; diff --git a/src/components/Blog/BlogDetail.js b/src/components/Blog/BlogDetail.js index 19240a3..db82abe 100644 --- a/src/components/Blog/BlogDetail.js +++ b/src/components/Blog/BlogDetail.js @@ -1,45 +1,83 @@ -import React from 'react'; -import useToggle from '../../Hooks/useToggle'; -import BackToTop from '../BackToTop'; -import FooterHomeOne from '../HomeOne/FooterHomeOne'; -import Drawer from '../Mobile/Drawer'; -import Blog from './Blog'; -import BlogSideBar from './BlogSideBar'; -import HeaderNews from './HeaderNews'; -import HeroNews from './HeroNews'; -import StickyHeaderNav from '../StickyHeader/StickyHeaderNav'; +import React, { useEffect, useMemo, useState } from "react"; +import { useParams } from "react-router-dom"; +import useToggle from "../../Hooks/useToggle"; +import BackToTop from "../BackToTop"; +import FooterHomeOne from "../HomeOne/FooterHomeOne"; +import Drawer from "../Mobile/Drawer"; +import Blog from "./Blog"; +import BlogData from "../../Services/BlogData"; +import BlogSideBar from "./BlogSideBar"; +import HeaderNews from "./HeaderNews"; +import HeroNews from "./HeroNews"; +import StickyHeaderNav from "../StickyHeader/StickyHeaderNav"; +/** + * Renders the blog detail page. + */ function BlogDetail() { - const [drawer, drawerAction] = useToggle(false); - return ( - <> - - {/* */} - - -
-
-
-
- -
-
- -
-
-
-
- - - - ); + const [drawer, drawerAction] = useToggle(false); + const [blogs, setBlogs] = useState([]); + const { id } = useParams(); + + useEffect(() => { + const fetchBlogs = async () => { + try { + const res = await BlogData(); + setBlogs(res.data); + } catch (err) { + console.log("Error loading blogdata", err); + } + }; + + fetchBlogs(); + }, []); + + const blogItem = useMemo(() => { + return blogs.blogdata?.find((item) => +item.id === +id); + }, [blogs, id]); + + return ( + <> + {/* Renders the drawer component */} + + + {/* Renders the header component */} + + + {/* Renders the hero section */} + + + {/* Renders the blog content and sidebar */} +
+
+
+
+ +
+
+ +
+
+
+
+ + {/* Renders the footer */} + + + {/* Renders the back-to-top button */} + + + ); } export default BlogDetail; diff --git a/src/components/Blog/BlogSideBar.js b/src/components/Blog/BlogSideBar.js index f50420a..dfc4c4c 100644 --- a/src/components/Blog/BlogSideBar.js +++ b/src/components/Blog/BlogSideBar.js @@ -1,102 +1,88 @@ -import React from 'react'; -import BlogImg1 from '../../assets/images/blog/p1.jpg'; -import BlogImg2 from '../../assets/images/blog/p2.jpg'; -import BlogImg3 from '../../assets/images/blog/p3.jpg'; -import BlogImg4 from '../../assets/images/blog/p4.jpg'; +import React from "react"; +import { Link } from "react-router-dom"; +import BlogImg1 from "../../assets/images/blog/p1.jpg"; -function BlogSideBar() { - return ( -
+/** + * Renders a sidebar for a blog. + * @param {Object} blogs - An object containing the data for the blog posts. + * @returns {JSX.Element} - JSX code that renders the blog sidebar. + */ +function BlogSideBar({ blogs }) { + /** + * Renders other blog posts. + * This is an Array of JSX elements representing the other blog posts. + */ + const renderOtherBlogPosts = () => { + return blogs?.blogdata?.slice(0, 4).map((post) => { + const blogDate = new Date(post.post_date).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + }); - - - {/**/} + const blogImg = + post.meta_value != null + ? `${blogs?.image_url}/${post.meta_value}` + : BlogImg1; + + return ( +
+ + blog-img + +
+ {post?.post_title} +
+ {blogDate}
- ); + ); + }); + }; + + return ( +
+ + + {/**/} +
+ ); } export default BlogSideBar; diff --git a/src/components/HomeOne/BlogHomeOne.js b/src/components/HomeOne/BlogHomeOne.js index 4e6a5db..b36f7ef 100644 --- a/src/components/HomeOne/BlogHomeOne.js +++ b/src/components/HomeOne/BlogHomeOne.js @@ -1,26 +1,20 @@ import React, { useState } from 'react'; -import blogOne from '../../assets/images/blog-1.jpg'; -import blogTwo from '../../assets/images/blog-2.jpg'; -import blogThree from '../../assets/images/blog-3.jpg'; import Blogs from '../News/Blogs'; - function BlogHomeOne() { return ( - <> -
-
-
-
-
-

Our latest blog posts

-
+
+
+
+
+
+

Our latest blog posts

-
-
- + +
+
); } diff --git a/src/components/News/Blogs.js b/src/components/News/Blogs.js index 21e23d6..8895df9 100644 --- a/src/components/News/Blogs.js +++ b/src/components/News/Blogs.js @@ -1,96 +1,81 @@ -import React, { useEffect, useState } from 'react'; -import blogOne from '../../assets/images/blog/1.jpg'; -import BlogData from '../../Services/BlogData'; +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import blogOne from "../../assets/images/blog/1.jpg"; +import BlogData from "../../Services/BlogData"; -function Blogs({pathname}) { - const [blogs, setBlogs] = useState([]) +/** + * Fetches blog data from an API and renders the blogs on the page. + * Displays a maximum of six blogs on the home page and all blogs on other pages. + */ +function Blogs({ pathname }) { + const [blogs, setBlogs] = useState([]); - useEffect(()=>{ - BlogData().then(res => { - setBlogs(res.data) - }).catch(err => { - console.log('Error loading blogdata', err) - }) - },[]) + useEffect(() => { + const fetchBlogs = async () => { + try { + const res = await BlogData(); + setBlogs(res.data); + } catch (err) { + console.log("Error loading blogdata", err); + } + }; - return ( - <> -
- { pathname == '/' ? // ON HOME PAGE LIMIT TO SIX(6) BLOGS - blogs?.blogdata?.map((i, index)=> { - var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; - var postDt = new Date(i.post_date).toLocaleDateString("en-US", options); - var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne; - if(index < 6){ - return ( -
-
-
- {i.post_title} -
-
-
-
    -
  • {postDt}
    • -
-
-

- - {i.post_title} - -

- - Learn More - -
-
-
- ) - } - }) - : // ON OTHER PAGES SHOW ALL BLOG - blogs?.blogdata?.map((i, index)=> { - var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; - var postDt = new Date(i.post_date).toLocaleDateString("en-US", options); - var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne; - return ( -
-
-
- {i.post_title} -
-
-
-
    -
  • {postDt}
    • -
-
-

- - {i.post_title} - -

- - Learn More - -
-
-
- ) - }) - } + fetchBlogs(); + }, []); + + const renderBlogs = () => { + return blogs?.blogdata?.map((blog, index) => { + const options = { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", + }; + const postDt = new Date(blog.post_date).toLocaleDateString( + "en-US", + options + ); + const blgImg = + blog.meta_value != null + ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}` + : blogOne; + + return ( +
+
+
+ {blog.post_title}
+
+
+
    +
  • {postDt}
    • +
+
+

+ {blog.post_title} +

+ + Learn More + +
+
+
+ ); + }); + }; - - ); + return ( + <> +
+ {pathname === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()} +
+ + ); } -export default Blogs; +export default Blogs; \ No newline at end of file