Refetch blog (#120)

* 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]>
SpaceyaTech · Jan 25, 2024 · 3d81c63 · 3d81c63 · vercel · 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.
diff --git a/package.json b/package.json
@@ -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": {

diff --git a/src/APP/components/Footer2.jsx b/src/APP/components/Footer2.jsx
@@ -7,6 +7,8 @@ import {
   twitter,
   spotify,
   youtube,
+  instagram,
+  facebook,
 } from "../../assets/images/socials";
 
 function Footer2() {
@@ -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}
@@ -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>
 
@@ -103,6 +122,13 @@ function Footer2() {
                     Mentorship
                   </a>
                 </li>
+
+                <li>
+                  <a href="/gallery" className="hover:underline text-white">
+                    Gallery
+                  </a>
+                </li>
+
               </ul>
             </div>
 
@@ -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>

diff --git a/src/APP/index.js b/src/APP/index.js
@@ -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";
@@ -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,
@@ -44,4 +52,7 @@ export {
   Error403,
   Error404,
   Error500,
+  ProductDisplay,
+  GalleryPage,
+
 };
diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
@@ -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";
@@ -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 />
@@ -49,4 +61,3 @@ function Blog() {
 }
 
 export default Blog;
-
diff --git a/src/APP/pages/blog/sections/BlogWrapper.jsx b/src/APP/pages/blog/sections/BlogWrapper.jsx
@@ -38,7 +38,7 @@ const BlogWrapper = ({ blog }) => {
               </div>
             </div>
 
-            <BlogStats likes={blog.likes} />
+            <BlogStats likes={blog.likes} blogId={blog.id} />
           </div>
         </div>
 

diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx
@@ -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>
+        </>
+
       )}
     </>
   );

diff --git a/src/APP/pages/blog/sections/blogWrapper.css b/src/APP/pages/blog/sections/blogWrapper.css
@@ -15,6 +15,7 @@
   margin-bottom: 12px;
   font-weight: 400;
   text-align: left;
+  font-size: 15px;
 }
 
 .blog-content strong {

diff --git a/src/APP/pages/blogs/sections/Banner.jsx b/src/APP/pages/blogs/sections/Banner.jsx
@@ -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>

diff --git a/src/APP/pages/blogs/sections/BlogStats.jsx b/src/APP/pages/blogs/sections/BlogStats.jsx
@@ -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">
@@ -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">