Skip to content

Commit

Permalink
Refetch blog (#120)
Browse files Browse the repository at this point in the history
* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* init pageNotFound

* import 404 image

* complete page not found page

* import formatDistanceToNow (#100)

* refactor service section

* change param to title_slug

* filter blogs by categories

* make blog categories scrollable

* span components on the landing page

* add download attribute internship document

* fix route

* fetch related blogs on blog page

* refetch on page change

* add error img

* add condition filtering to cat

* add loader to blog page

* build error500 mobile page

* build error500 web page

* remove img border

* error 400 page build

* error 400 page build

* error 403 page build

* reinsert 404 page

* remove 403 route

* removed unbuilt routes

* Filter out recurring current blog on related blogs fetched.

* Add error500 svg img

* Dev resolve conflict (#106)

* Update Dev (#96)

* -

* remove and refactor code

* import useQuery

* make navlinks active

* delete NavLink component

* set max-width on pages

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

* Update 05-01-24 (#99)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

---------

Co-authored-by: felixNyalenda <[email protected]>

* Update 05-01-24  Beta (#101)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* import formatDistanceToNow (#100)

---------

Co-authored-by: felixNyalenda <[email protected]>

---------

Co-authored-by: SpaceYaTech <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

* remove duplicate

* create error routes

* re-route to error-pages

* Add related blogs header

* conditionally render related blogs

* conditionally render related blogs

* resize subscription form on small screens

* style: fixed styles on landing page

* refactor: added temp API statements

* refactor: added single order endpoint

* rename related blogs header to related articles

* gallery init

* add dummy photos

* reformat event dates

* format date on the events page

* remove console logs

* add Loader

* remove parse

* Add blog liking functionality

* add hover effect

* Hotfix 0.1 broken events page (#113)

* Update date attribute name

* Uncomment blocked single events page

* use grid to render images

* add overflow to events container

* add wrap on Events cities filter for mobile

* add more photos

* change id number

* data syt photos

* refactor: add gallery footer link

* add fetch-blog

* set p tags font sizes

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>
Co-authored-by: Collins Kasyoki <[email protected]>
Co-authored-by: sonylomo <[email protected]>
  • Loading branch information
5 people authored Jan 25, 2024
1 parent 4e88bfe commit 3d81c63
Show file tree
Hide file tree
Showing 38 changed files with 1,285 additions and 462 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.2",
"react-hook-form": "^7.48.2",
"react-photo-album": "^2.3.0",
"react-query": "^3.39.3",
"react-router-dom": "^6.11.2",
"react-simple-wysiwyg": "^2.2.5",
"tailwind-scrollbar-hide": "^1.1.7",
"yet-another-react-lightbox": "^3.15.6",
"yup": "^1.3.2"
},
"devDependencies": {
Expand Down
102 changes: 65 additions & 37 deletions src/APP/components/Footer2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
twitter,
spotify,
youtube,
instagram,
facebook,
} from "../../assets/images/socials";

function Footer2() {
Expand All @@ -16,8 +18,8 @@ function Footer2() {
return (
<footer className="bg-[#252533] text-white ">
<div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
<div className="flex md:flex-row flex-col md:gap-16 gap-8 ">
<div className="flex-3 flex flex-col md:items-center items-start">
<div className="flex lg:flex-row flex-col md:gap-16 gap-8">
<div className="flex-3 flex flex-col sm:items-start items-center">
{/* logo */}
<img
src={logo}
Expand All @@ -26,38 +28,55 @@ function Footer2() {
/>

{/* socials */}
<div className="flex items-center md:gap-5 gap-3 py-4">
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitter} alt="twitter" className="w-7 h-7" />
</a>

<a
href="https://linkedin.com/company/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedin} alt="linkedin" className="w-7 h-7" />
</a>

<a
href="https://www.youtube.com/@spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={youtube} alt="youtube" className="w-7 h-7" />
</a>

<a
href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
target="_blank"
rel="noopener noreferrer"
>
<img src={spotify} alt="spotify" className="w-7 h-7" />
</a>
<div className="flex flex-col items-center">
<div className="flex items-center md:gap-5 gap-3 py-4">
<a
href="https://www.facebook.com/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={facebook} alt="facebook" className="w-7 h-7" />
</a>
<a
href="https://www.instagram.com/spaceyatech/"
target="_blank"
rel="noopener noreferrer"
>
<img src={instagram} alt="instagram" className="w-7 h-7" />
</a>
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitter} alt="twitter" className="w-7 h-7" />
</a>

<a
href="https://linkedin.com/company/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedin} alt="linkedin" className="w-7 h-7" />
</a>
</div>
<div className="flex items-center md:gap-5 gap-3">
<a
href="https://www.youtube.com/@spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={youtube} alt="youtube" className="w-7 h-7" />
</a>

<a
href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
target="_blank"
rel="noopener noreferrer"
>
<img src={spotify} alt="spotify" className="w-7 h-7" />
</a>
</div>
</div>
</div>

Expand Down Expand Up @@ -103,6 +122,13 @@ function Footer2() {
Mentorship
</a>
</li>

<li>
<a href="/gallery" className="hover:underline text-white">
Gallery
</a>
</li>

</ul>
</div>

Expand Down Expand Up @@ -134,15 +160,17 @@ function Footer2() {
special offers
</p>

<form className="flex pr-4">

<form className="flex items-center">
<input
type="email"
placeholder="Enter email address"
className="px-4 py-3 rounded-lg rounded-r-none flex-3 outline-none text-black font-medium"
className="w-auto px-2 md:px-4 py-3 rounded-lg rounded-r-none flex-3 outline-none text-black font-medium"
/>
<button
type="submit"
className="rounded-r-lg px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border border-transparent hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
className="rounded-r-lg px-2 md:px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border border-transparent hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"

>
Subscribe
</button>
Expand Down
15 changes: 13 additions & 2 deletions src/APP/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import LandingPage from "./pages/landingPage/LandingPage";
import Homepage from "./pages/shop/pages/Homepage";

import Homepage from "./pages/shop/Homepage";

import SingleItemPage from "./pages/shop/pages/SingleItemPage";
import Layout from "./pages/Layout";
import Products from "./pages/products2/Products";
import Resources from "./pages/resources/Resources";
import Checkout from "./pages/shop/pages/Checkout";

import Checkout from "./pages/shop/pages/OrderSummary";

import AboutUs from "./pages/aboutUs/AboutUs";
import CommunityPage from "./pages/community/CommunityPage";
import DonatePage from "./pages/donate/DonatePage";
Expand All @@ -21,6 +25,10 @@ import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";

import ProductDisplay from "./pages/shop/pages/ProductDisplay";
import GalleryPage from "./pages/gallery/GalleryPage";


export {
LandingPage,
Homepage,
Expand All @@ -44,4 +52,7 @@ export {
Error403,
Error404,
Error500,
ProductDisplay,
GalleryPage,

};
19 changes: 15 additions & 4 deletions src/APP/pages/blog/Blog.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from "react";
import { useParams } from "react-router-dom";

import React, { useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";


import BlogWrapper from "./sections/BlogWrapper";
import RelatedBlogs from "./sections/RelatedBlogs";
Expand All @@ -8,16 +10,26 @@ import useBlogData from "../../../hooks/Queries/blog/useBlogData";

function Blog() {
const { title_slug } = useParams();

const navigate = useNavigate();
const {
data: blogData,
refetch: refetchBlogData,

isLoading,
isError,
isSuccess,
} = useBlogData(title_slug);


useEffect(() => {
refetchBlogData();
}, [title_slug]);

return (
<div className="w-screen max-w-[1440px] mx-auto">
{isError && <p>Error fetching blog details!</p>}
{isError && navigate("/error-500")}

{isLoading && (
<div className="flex flex-col items-center justify-center gap-4 py-10">
<Loader />
Expand Down Expand Up @@ -49,4 +61,3 @@ function Blog() {
}

export default Blog;

2 changes: 1 addition & 1 deletion src/APP/pages/blog/sections/BlogWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const BlogWrapper = ({ blog }) => {
</div>
</div>

<BlogStats likes={blog.likes} />
<BlogStats likes={blog.likes} blogId={blog.id} />
</div>
</div>

Expand Down
41 changes: 25 additions & 16 deletions src/APP/pages/blog/sections/RelatedBlogs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,31 @@ function RelatedBlogs({ blogId, categoryId }) {
{isError && <p>Error loading blogs!</p>}
{isLoading && <p>Loading blogs...</p>}

{isSuccess && (
<div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
{Array.isArray(filteredRelatedBlogs) &&
filteredRelatedBlogs.length > 0 ? (
filteredRelatedBlogs.filter(function(blog){
if(blog.id === blogId ) {
return false;
}
return true;
}).map((blog) => (
<BlogCard key={blog.id} blog={blog} />
))
) : (
<p>No related blogs found!</p>
)}
</div>

{isSuccess && filteredRelatedBlogs.length > 0 && (
<>
<h2 className="text-2xl text-black font-semibold underline decoration-green-600 underline-offset-2">
{filteredRelatedBlogs.length > 1
? "Related Articles"
: "Related Article"}
</h2>
<div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
{Array.isArray(filteredRelatedBlogs) &&
filteredRelatedBlogs.length > 0 ? (
filteredRelatedBlogs
.filter(function (blog) {
if (blog.id === blogId) {
return false;
}
return true;
})
.map((blog) => <BlogCard key={blog.id} blog={blog} />)
) : (
<p className="text-lg italic">No related blogs found!</p>
)}
</div>
</>

)}
</>
);
Expand Down
1 change: 1 addition & 0 deletions src/APP/pages/blog/sections/blogWrapper.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
margin-bottom: 12px;
font-weight: 400;
text-align: left;
font-size: 15px;
}

.blog-content strong {
Expand Down
6 changes: 5 additions & 1 deletion src/APP/pages/blogs/sections/Banner.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ function Banner() {
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
<button type="submit" className="w-1/10 p-2">
<button
type="submit"
className="w-1/10 p-2"
onClick={(e) => e.preventDefault()}
>
<img src={search} alt="search" className="w-6 h-6" />
</button>
</form>
Expand Down
41 changes: 38 additions & 3 deletions src/APP/pages/blogs/sections/BlogStats.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,38 @@
import { useEffect, useState } from "react";
import { thumbsUp } from "../../../../assets/images/blogs-page";
import usePostLikeBlog from "../../../../hooks/Queries/blog/usePostLikeBlog";

const BlogStats = ({ blogId, likes }) => {
const [ updatedLikes, setUpdatedLikes ] = useState(likes);

const {
setBlogIDLikes: likeBlog,
error: errorLikeBlog,
clearError: clearErrorLikeBlog,
status: statusLikeBlog,
clearStatus: clearStatusLikeBlog
} = usePostLikeBlog();

const addLikeToBlog = (blogId) => {
statusLikeBlog === 'error' && clearErrorLikeBlog();
errorLikeBlog && clearErrorLikeBlog();

const blogDetails = {
'id': blogId
}

likeBlog({...blogDetails})
}

useEffect(() => {
if (statusLikeBlog === 'success') {
const newLikes = likes + 1;
setUpdatedLikes(newLikes);
}
clearStatusLikeBlog();
clearErrorLikeBlog();
}, [likes, statusLikeBlog])

const BlogStats = ({ likes }) => {
return (
<div className="flex flex-row items-center gap-2">
{/* <div className="flex flex-row items-center gap-1">
Expand All @@ -9,8 +41,11 @@ const BlogStats = ({ likes }) => {
</div> */}

<div className="flex flex-row items-center gap-1">
<img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover" />
<span className="text-base text-[#00664E] leading-5 m-0">{likes}</span>
<img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover cursor-pointer"
onClick={() => {
blogId ? addLikeToBlog(blogId) : ''
}} />
<span className="text-base text-[#00664E] leading-5 m-0">{updatedLikes}</span>
</div>

{/* <div className="flex flex-row items-center gap-1">
Expand Down
Loading

1 comment on commit 3d81c63

@vercel
Copy link

@vercel vercel bot commented on 3d81c63 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.