fix: loader issue solved

Author: mayank-dev07

src/app/(pages)/layout.tsx

@@ -25,7 +25,7 @@ const Layout = ({ children }: Props) => {
     <>
       <div className="flex w-full h-full relative">
         <div className="absolute top-0 left-0 w-[80px] hover:w-[200px] min-h-screen z-50 transition-width duration-500 ease-in-out hidden md:flex flex-col items-start gap-8 overflow-hidden bg-black">
-          <Sidebar />
+          <Sidebar verified={verifiedEmail} />
         </div>
 
         <div className="flex-1 w-full ml-0 md:ml-[80px]">

src/components/LandingPage/index.tsx

@@ -2,12 +2,12 @@
 import React, { useEffect } from "react";
 import Text from "./Text";
 import { store } from "@/app/Redux/store";
-import { decrement, increment } from "@/app/Redux/Features/loader/loaderSlice";
+import { decrement } from "@/app/Redux/Features/loader/loaderSlice";
 import dynamic from "next/dynamic";
 import { useSelector } from "react-redux";
 
 export default function LandingPage() {
-  const counter = useSelector((state: any) => state.counter);
+  const session = useSelector((state: any) => state.user);
   const SparklesCore = dynamic(
     () => import("../ui/sparkles").then((mod) => mod.SparklesCore),
     {
@@ -18,13 +18,8 @@ export default function LandingPage() {
     }
   );
   useEffect(() => {
-    if (counter.value > 0) {
-      store.dispatch(decrement());
-      return () => {
-        store.dispatch(increment());
-      };
-    }
-  }, []);
+    store.dispatch(decrement());
+  }, [session]);
   return (
     <main className="min-h-screen w-full flex flex-col items-center justify-center overflow-hidden gap-12 md:gap-8 mt-16 md:mt-0 py-24">
       <div className="container">

src/components/Login/Login.tsx

@@ -29,13 +29,19 @@ import { store } from "@/app/Redux/store";
 import { Skeleton } from "../ui/skeleton";
 import Cookies from "js-cookie";
 import { resetProfile } from "@/app/Redux/Features/profile/profileSlice";
+import { cn } from "@/lib/utils";
 
 const Login = () => {
   const { data: session, status } = useSession() as any;
   const router = useRouter();
   const pathname = usePathname();
   const dispatch = useDispatch();
   const user = useSelector((state: any) => state.user);
+  const sessionToVerifyEmail = useSelector((state: any) => state.user);
+
+  useEffect(() => {
+    console.log("session", sessionToVerifyEmail.isVerifiedEmail);
+  });
 
   interface SessionUser {
     name?: string | null;
@@ -207,7 +213,12 @@ const Login = () => {
               {/* Changed DropdownMenuLabel to DropdownMenuItem which is the correct way to create dropdown menu */}
               <DropdownMenuItem
                 asChild
-                className="cursor-pointer flex md:hidden"
+                className={cn(
+                  "cursor-pointer",
+                  sessionToVerifyEmail.isVerifiedEmail
+                    ? "flex md:hidden"
+                    : "hidden"
+                )}
               >
                 <Link prefetch href="/dashboard" className="w-full">
                   <div className="flex items-center gap-4 justify-between w-full">
@@ -219,7 +230,12 @@ const Login = () => {
 
               <DropdownMenuItem
                 asChild
-                className="cursor-pointer flex md:hidden"
+                className={cn(
+                  "cursor-pointer",
+                  sessionToVerifyEmail.isVerifiedEmail
+                    ? "flex md:hidden"
+                    : "hidden"
+                )}
               >
                 <Link prefetch href="/repoinitialize">
                   <div className="flex items-center gap-4 justify-between w-full">
@@ -231,7 +247,12 @@ const Login = () => {
 
               <DropdownMenuItem
                 asChild
-                className="cursor-pointer flex md:hidden"
+                className={cn(
+                  "cursor-pointer",
+                  sessionToVerifyEmail.isVerifiedEmail
+                    ? "flex md:hidden"
+                    : "hidden"
+                )}
               >
                 <Link prefetch href="/connect">
                   <div className="flex items-center gap-4 justify-between w-full">
@@ -243,7 +264,12 @@ const Login = () => {
 
               <DropdownMenuItem
                 asChild
-                className="cursor-pointer flex md:hidden"
+                className={cn(
+                  "cursor-pointer",
+                  sessionToVerifyEmail.isVerifiedEmail
+                    ? "flex md:hidden"
+                    : "hidden"
+                )}
               >
                 <Link prefetch href="/leaderboard">
                   <div className="flex items-center gap-4 justify-between w-full">
@@ -255,7 +281,10 @@ const Login = () => {
 
               <DropdownMenuItem
                 asChild
-                className="cursor-pointer flex flex-col"
+                className={cn(
+                  "cursor-pointer flex-col",
+                  sessionToVerifyEmail.isVerifiedEmail ? "flex " : "hidden"
+                )}
               >
                 <Link prefetch href={`/p/${user?.login}`}>
                   <div className="relative flex md:hidden">

src/components/Sidebar/index.tsx

@@ -2,7 +2,7 @@
 import { IconChartHistogram } from "@tabler/icons-react";
 import { Blocks, CopyPlus, HomeIcon, User } from "lucide-react";
 import Link from "next/link";
-import React from "react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import {
   Tooltip,
@@ -11,19 +11,31 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
 
-type Props = {};
+type Props = {
+  verified: boolean;
+};
 
-const Sidebar = (props: Props) => {
+const Sidebar = ({ verified }: Props) => {
   const user = useSelector((state: any) => state.user);
   const pathname = usePathname();
 
   const isActive = (linkPath: string) => pathname.includes(linkPath);
 
+  useEffect(() => {
+    console.log("session", verified);
+  }, [verified]);
+
   return (
     <>
       <div className="w-full flex justify-between">
-        <div className="w-full pt-24 pb-4 min-h-screen z-50 overflow-hidden flex flex-col items-start gap-8 px-5 transition-all duration-500 ease-in-out group hover:w-[200px] relative">
+        <div
+          className={cn(
+            "w-full pt-24 pb-4 min-h-screen overflow-hidden flex flex-col items-start gap-8 px-5 transition-all duration-500 ease-in-out group hover:w-[200px] relative",
+            verified ? "z-50" : "z-0 hidden"
+          )}
+        >
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger>