perf: optimize flows with verification card fix (#230)

* chore: security file remove and yarn.lock update

* refactor: ui of verify page for auth/unauth

* feat: add save user dispatcher at the navbar

src/app/(auth)/verify/page.tsx

@@ -1,5 +1,6 @@
 "use client";
-import React from "react";
+import { Suspense } from "react";
+import Loader from "@/app/loading";
 import VerificationComponent from "@/components/pages/auth/verification";
 import Footer from "@/components/core/footer";
 import Image from "next/image";
@@ -14,27 +15,29 @@ export default function VerifyPage({ searchParams }: VerifyProps) {
   if (userId === undefined && secret === undefined) {
     return (
       <>
-        <div className="h-screen w-full overflow-hidden">
-          <section className="h-fit w-full max-w-2xl mx-auto mt-40 rounded-3xl p-6 flex flex-col justify-center items-center gap-8 bg-white/20 backdrop-blur-md ">
-            <div className="flex flex-col gap-3 items-center">
-              <Image src={"/assets/logo.png"} alt="logo" height={60} width={60} />
-              <h3 className="text-center font-semibold text-xl">
-                Please check your inbox and{" "}
+        <section className="max-w-screen-md mx-auto h-screen flex justify-center items-center">
+          <div className="card">
+            <div className="flex flex-col gap-4 items-center ">
+              <Image src={"/assets/logo.png"} alt="logo" height={80} width={80} />
+              <h1 className="text-xl md:text-2xl mb-4 text-center font-bold text-secondary dark:text-white">
+                Please check your inbox/spam and{" "}
                 <span className="text-primary-light">verify your account</span>.
-              </h3>
+              </h1>
+              <ButtonLong href="https://mail.google.com/mail/" size="normal" newTab>
+                Open your email
+              </ButtonLong>
             </div>
-            <ButtonLong href="https://mail.google.com/mail/" size="small">
-              Open Mail
-            </ButtonLong>
-          </section>
-        </div>
+          </div>
+        </section>
         <Footer isFixed />
       </>
     );
   }
   return (
     <>
-      <VerificationComponent userId={String(userId)} secret={String(secret)} />
+      <Suspense fallback={<Loader />}>
+        <VerificationComponent userId={String(userId)} secret={String(secret)} />
+      </Suspense>
       <Footer isFixed />
     </>
   );

src/components/core/comment/index.tsx

@@ -1,9 +1,9 @@
-import { ThumbsUp, ThumbsDown, Repeat } from "react-feather"
-import Image from "next/image"
+import { ThumbsUp, ThumbsDown, Repeat } from "react-feather";
+import Image from "next/image";
 
 type propType = {
-  comment: string
-}
+  comment: string;
+};
 
 export default function Comment(props: propType) {
   return (
@@ -27,9 +27,7 @@ export default function Comment(props: propType) {
         <p className="text-md mb-4">{props.comment}</p>
       </a>
       <div className="flex justify-around">
-        <article
-          className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary"
-        >
+        <article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary">
           <ThumbsUp size={22} />
         </article>
 
@@ -38,11 +36,9 @@ export default function Comment(props: propType) {
         </article>
 
         <article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary">
-          <Repeat size={22} orientation={'vertical'} />
+          <Repeat size={22} orientation={"vertical"} />
         </article>
-
-
       </div>
     </div>
-  )
-}
+  );
+}

src/components/core/navbar/index.tsx

@@ -9,11 +9,11 @@ import ThemeButton from "@/components/core/themeButton";
 
 import { parseCookies } from "nookies";
 
-import { logoutUser } from "@/backend/auth.api";
+import { logoutUser, getCurrentUser } from "@/backend/auth.api";
 import { getAllPosts } from "@/backend/posts.api";
 import { getBookmarks } from "@/backend/bookmarks.api";
 
-import { logUserOut } from "@/redux/reducers/authReducer";
+import { logUserOut, saveUser } from "@/redux/reducers/authReducer";
 import { getPosts } from "@/redux/reducers/postsReducer";
 import { saveBookmarkToStore } from "@/redux/reducers/bookmarkReducer";
 
@@ -36,6 +36,13 @@ const Navbar = () => {
   };
 
   useEffect(() => {
+    getCurrentUser()
+      .then((currUser) => {
+        console.log(currUser);
+        dispatch(saveUser(currUser));
+      })
+      .catch((err) => console.log(err));
+
     const timeoutId = setTimeout(() => {
       getAllPosts()
         .then((posts) => {

src/components/core/posts/SinglePost.tsx

@@ -11,7 +11,7 @@ import { saveBookmarkToStore } from "@/redux/reducers/bookmarkReducer";
 import { toastify } from "@/helper/toastify";
 import { addComment } from "@/backend/posts.api";
 import { getUserDetails } from "@/backend/auth.api";
-import { useCallback, useEffect, useState,MouseEvent } from "react";
+import { useCallback, useEffect, useState, MouseEvent } from "react";
 import { UserBookMarkType, FormatOnType } from "@/types/index";
 import isCtrlEnter from "@/helper/isCtrlEnter";
 
@@ -148,35 +148,38 @@ export default function SinglePost({
     fetchUserDetails();
   }, [fetchUserDetails]);
 
-  const handleClick = (e:MouseEvent<HTMLDivElement | HTMLSpanElement>)=>{
+  const handleClick = (e: MouseEvent<HTMLDivElement | HTMLSpanElement>) => {
     const element = e.target as HTMLDivElement | HTMLSpanElement;
-    const spanElement = element.querySelector('span');
-    let currentSelectedElement:HTMLSpanElement | HTMLDivElement | null = null;
-    if(spanElement){
+    const spanElement = element.querySelector("span");
+    let currentSelectedElement: HTMLSpanElement | HTMLDivElement | null = null;
+    if (spanElement) {
       currentSelectedElement = spanElement;
-    }else{
+    } else {
       currentSelectedElement = element;
     }
-    if(currentSelectedElement && currentSelectedElement.textContent){
+    if (currentSelectedElement && currentSelectedElement.textContent) {
       const prevValue = currentSelectedElement.textContent;
-      navigator.clipboard.writeText(currentSelectedElement.textContent).then(()=>{
-        if(currentSelectedElement){
-          currentSelectedElement.textContent = 'Copied';
-          currentSelectedElement.classList.remove('bg-slate-950/[0.4]');
-          currentSelectedElement.classList.add('bg-black');
-          setTimeout(()=>{
-            if(currentSelectedElement){
-              currentSelectedElement.textContent = prevValue;
-              currentSelectedElement.classList.remove('bg-black');
-              currentSelectedElement.classList.add('bg-slate-950/[0.4]');
-            }
-        },1000);
-      }
-      }).catch(console.log)
+      navigator.clipboard
+        .writeText(currentSelectedElement.textContent)
+        .then(() => {
+          if (currentSelectedElement) {
+            currentSelectedElement.textContent = "Copied";
+            currentSelectedElement.classList.remove("bg-slate-950/[0.4]");
+            currentSelectedElement.classList.add("bg-black");
+            setTimeout(() => {
+              if (currentSelectedElement) {
+                currentSelectedElement.textContent = prevValue;
+                currentSelectedElement.classList.remove("bg-black");
+                currentSelectedElement.classList.add("bg-slate-950/[0.4]");
+              }
+            }, 1000);
+          }
+        })
+        .catch(console.log);
     }
-    
-  }
-  const colors = singlePost?.colors && typeof singlePost?.colors ==='string' && JSON.parse(singlePost.colors)
+  };
+  const colors =
+    singlePost?.colors && typeof singlePost?.colors === "string" && JSON.parse(singlePost.colors);
 
   return (
     <div
@@ -224,7 +227,7 @@ export default function SinglePost({
         ) : null}
       </Link>
 
-      {colors && Object.keys(colors).length>0? (
+      {colors && Object.keys(colors).length > 0 ? (
         <div className="my-2 flex flex-row justify-between items-center w-full">
           {/* {JSON.parse(singlePost.colors).map((color: string, index: number) => {
             return (
@@ -240,32 +243,51 @@ export default function SinglePost({
           })} */}
           <div className="w-full  h-[200px] bg-tranparent mx-auto flex mb-3.5 gap-1">
             <div
-            className="cursor-pointer w-full flex justify-center items-center group" 
-            style={{backgroundColor:typeof colors.color01 === 'string' && colors.color01 || ''}}
-            onClick={handleClick}
+              className="cursor-pointer w-full flex justify-center items-center group"
+              style={{
+                backgroundColor: (typeof colors.color01 === "string" && colors.color01) || "",
+              }}
+              onClick={handleClick}
             >
-              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110" onClick={handleClick}>{colors.color01}</span>
+              <span
+                className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110"
+                onClick={handleClick}
+              >
+                {colors.color01}
+              </span>
             </div>
             <div
-            className="cursor-pointer w-full flex justify-center items-center group " 
-            style={{backgroundColor:typeof colors.color02 === 'string' && colors.color02 || ''}}
-            onClick={handleClick}
+              className="cursor-pointer w-full flex justify-center items-center group "
+              style={{
+                backgroundColor: (typeof colors.color02 === "string" && colors.color02) || "",
+              }}
+              onClick={handleClick}
             >
-              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color02}</span>
+              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
+                {colors.color02}
+              </span>
             </div>
             <div
-            className="cursor-pointer w-full flex justify-center items-center group gap-2" 
-            style={{backgroundColor:typeof colors.color03 === 'string' && colors.color03 || ''}}
-            onClick={handleClick}
+              className="cursor-pointer w-full flex justify-center items-center group gap-2"
+              style={{
+                backgroundColor: (typeof colors.color03 === "string" && colors.color03) || "",
+              }}
+              onClick={handleClick}
             >
-              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color03}</span>
+              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
+                {colors.color03}
+              </span>
             </div>
             <div
-            className="cursor-pointer w-full flex justify-center items-center group" 
-            style={{backgroundColor:typeof colors.color04 === 'string' && colors.color04 || ''}}
-            onClick={handleClick}
+              className="cursor-pointer w-full flex justify-center items-center group"
+              style={{
+                backgroundColor: (typeof colors.color04 === "string" && colors.color04) || "",
+              }}
+              onClick={handleClick}
             >
-              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color04}</span>
+              <span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
+                {colors.color04}
+              </span>
             </div>
           </div>
         </div>

src/components/core/posts/index.tsx

@@ -8,7 +8,7 @@ import { addLikesToAPost } from "@/redux/reducers/postsReducer";
 
 import { PostInstanceType } from "@/types/index.d";
 
-import PostSkeleton from "../../pages/feed/loading"
+import PostSkeleton from "../../pages/feed/loading";
 
 // Api
 // import { getAllPosts, likeTweet } from "@/backend/posts.api";
@@ -55,7 +55,11 @@ export default function Posts() {
   }
 
   if (postState.loading) {
-    return <h1 className="text-white text-2xl text-center"><PostSkeleton /></h1>;
+    return (
+      <h1 className="text-white text-2xl text-center">
+        <PostSkeleton />
+      </h1>
+    );
   }
 
   if (postState.error) {

src/components/pages/auth/verification/index.tsx

@@ -6,6 +6,7 @@ import { toastify } from "@/helper/toastify";
 import { ButtonLong } from "@/components/core/buttons";
 import Loader from "@/app/loading";
 import { setCookie } from "nookies";
+import Image from "next/image";
 
 interface Verification {
   userId: string;
@@ -21,7 +22,7 @@ export default function VerificationComponent({ userId, secret }: Verification)
       .then((resp) => {
         if (resp.status) {
           setVerified(resp.status);
-          setCookie(null,'isVerified', 'true')
+          setCookie(null, "isVerified", "true");
         }
       })
       .catch((err) => {
@@ -33,17 +34,15 @@ export default function VerificationComponent({ userId, secret }: Verification)
 
   return (
     <>
-      <section className="max-w-screen-sm mx-auto h-screen flex justify-center items-center">
+      <section className="max-w-screen-md mx-auto h-screen flex justify-center items-center">
         <div className="card">
-          <h1 className="text-xl md:text-3xl mb-8 text-center font-bold text-secondary dark:text-white">
-            You are verified 👏
-          </h1>
-          {/* <p className="text-base md:text-xl text-center font-normal text-secondary-light dark:text-gray-50">
-            Register and be a part of the amazing community
-          </p> */}
-          <div className="text-center">
+          <div className="flex flex-col gap-4 items-center ">
+            <Image src={"/assets/logo.png"} alt="logo" height={80} width={80} />
+            <h1 className="text-xl md:text-2xl mb-4 text-center font-bold text-secondary dark:text-white">
+              Congratulation!! You are verified 👏
+            </h1>
             {isVerified ? (
-              <ButtonLong href="/feed" size="big">
+              <ButtonLong href="/feed" size="normal">
                 Click to join community
               </ButtonLong>
             ) : (

src/components/pages/feed/index.tsx

@@ -14,9 +14,9 @@ import { getCurrentUser } from "@/backend/auth.api";
 import { useRouter } from "next/navigation";
 
 const Feed = () => {
-  const router = useRouter()
+  const router = useRouter();
   const [user, setUser] = useState({
-    emailVerification: undefined
+    emailVerification: undefined,
   });
   const cookies = parseCookies();
   const userIdFromCookies: string = cookies["accountId"];
@@ -28,8 +28,8 @@ const Feed = () => {
       })
       .catch(console.log);
   }, []);
-  if(user.emailVerification === false){
-    router.push('/verify')
+  if (user.emailVerification === false) {
+    router.push("/verify");
   }
 
   return (