added the feature to go back to the previous page when showblog is false

itskeshavdubey · Jul 31, 2022 · 4791ff9 · 4791ff9
1 parent 09c0881
commit 4791ff9
Showing 1 changed file with 66 additions and 64 deletions.
diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -1,20 +1,21 @@
-import { useRef, useState, useEffect } from "react";
-import { getAllPosts } from "../../utils/api";
-import { ISOToDate } from "../../utils";
-import Header from "../../components/Header";
-import Router, { useRouter } from "next/router";
 import Head from "next/head";
-import { useIsomorphicLayoutEffect } from "../../utils";
+import Router, { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
 import { stagger } from "../../animations";
 import Button from "../../components/Button";
-
+import Header from "../../components/Header";
+import data from "../../data/portfolio.json";
+import { ISOToDate, useIsomorphicLayoutEffect } from "../../utils";
+import { getAllPosts } from "../../utils/api";
 const Blog = ({ posts }) => {
+  const showBlog = useRef(data.showBlog);
   const text = useRef();
   const router = useRouter();
   const [mounted, setMounted] = useState(false);
 
   useIsomorphicLayoutEffect(() => {
-    stagger([text.current], { y: 30 }, { y: 0 });
+    if (showBlog.current) stagger([text.current], { y: 30 }, { y: 0 });
+    else router.back();
   }, []);
 
   useEffect(() => {
@@ -53,65 +54,66 @@ const Blog = ({ posts }) => {
       alert("This thing only works in development mode.");
     }
   };
-
   return (
-    <>
-      <Head>
-        <title>Blog</title>
-      </Head>
-      <div className="container mx-auto mb-10">
-        <Header isBlog={true}></Header>
-        <div className="mt-10">
-          <h1
-            ref={text}
-            className="mx-auto mob:p-2 text-bold text-6xl laptop:text-8xl w-full"
-          >
-            Blog.
-          </h1>
-          <div className="mt-10 grid grid-cols-1 mob:grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 justify-between gap-10">
-            {posts &&
-              posts.map((post) => (
-                <div
-                  className="cursor-pointer relative"
-                  key={post.slug}
-                  onClick={() => Router.push(`/blog/${post.slug}`)}
-                >
-                  <img
-                    className="w-full h-60 rounded-lg shadow-lg object-cover"
-                    src={post.image}
-                    alt={post.title}
-                  ></img>
-                  <h2 className="mt-5 text-4xl">{post.title}</h2>
-                  <p className="mt-2 opacity-50 text-lg">{post.preview}</p>
-                  <span className="text-sm mt-5 opacity-25">
-                    {ISOToDate(post.date)}
-                  </span>
-                  {process.env.NODE_ENV === "development" && mounted && (
-                    <div className="absolute top-0 right-0">
-                      <Button
-                        onClick={(e) => {
-                          deleteBlog(post.slug);
-                          e.stopPropagation();
-                        }}
-                        type={"primary"}
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              ))}
+    showBlog.current && (
+      <>
+        <Head>
+          <title>Blog</title>
+        </Head>
+        <div className="container mx-auto mb-10">
+          <Header isBlog={true}></Header>
+          <div className="mt-10">
+            <h1
+              ref={text}
+              className="mx-auto mob:p-2 text-bold text-6xl laptop:text-8xl w-full"
+            >
+              Blog.
+            </h1>
+            <div className="mt-10 grid grid-cols-1 mob:grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 justify-between gap-10">
+              {posts &&
+                posts.map((post) => (
+                  <div
+                    className="cursor-pointer relative"
+                    key={post.slug}
+                    onClick={() => Router.push(`/blog/${post.slug}`)}
+                  >
+                    <img
+                      className="w-full h-60 rounded-lg shadow-lg object-cover"
+                      src={post.image}
+                      alt={post.title}
+                    ></img>
+                    <h2 className="mt-5 text-4xl">{post.title}</h2>
+                    <p className="mt-2 opacity-50 text-lg">{post.preview}</p>
+                    <span className="text-sm mt-5 opacity-25">
+                      {ISOToDate(post.date)}
+                    </span>
+                    {process.env.NODE_ENV === "development" && mounted && (
+                      <div className="absolute top-0 right-0">
+                        <Button
+                          onClick={(e) => {
+                            deleteBlog(post.slug);
+                            e.stopPropagation();
+                          }}
+                          type={"primary"}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                ))}
+            </div>
           </div>
         </div>
-      </div>
-      {process.env.NODE_ENV === "development" && mounted && (
-        <div className="fixed bottom-6 right-6">
-          <Button onClick={createBlog} type={"primary"}>
-            Add New Post +{" "}
-          </Button>
-        </div>
-      )}
-    </>
+        {process.env.NODE_ENV === "development" && mounted && (
+          <div className="fixed bottom-6 right-6">
+            <Button onClick={createBlog} type={"primary"}>
+              Add New Post +{" "}
+            </Button>
+          </div>
+        )}
+      </>
+    )
   );
 };