fix: space user validation check

admin/lib/app-providers.tsx

@@ -16,7 +16,6 @@ function initializeStore(initialData = {}) {
   // If your page has Next.js data fetching methods that use a Mobx store, it will
   // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
   if (initialData) {
-    console.log("initialState", initialData);
     singletonRootStore.hydrate(initialData);
   }
   // For SSG and SSR always create a new store

space/app/loading.tsx

@@ -0,0 +1,20 @@
+"use client";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export default function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="h-screen w-full flex min-h-[600px] justify-center items-center">
+      <div className="flex items-center justify-center">
+        <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
+      </div>
+    </div>
+  );
+}

space/app/page.tsx

@@ -1,20 +1,27 @@
+"use client";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // components
 import { UserLoggedIn } from "@/components/accounts";
+import { LogoSpinner } from "@/components/common";
 import { AuthView } from "@/components/views";
-// services
-import { UserService } from "@/services/user.service";
+// hooks
+import { useUser } from "@/hooks/store";
 
-const userServices = new UserService();
+function HomePage() {
+  const { fetchCurrentUser, isAuthenticated, isLoading } = useUser();
 
-export default async function HomePage() {
-  const user = await userServices
-    .currentUser()
-    .then((user) => ({ ...user, isAuthenticated: true }))
-    .catch(() => ({ isAuthenticated: false }));
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), { errorRetryCount: 0 });
 
-  if (user.isAuthenticated) {
+  if (isLoading) {
+    return <LogoSpinner />;
+  }
+
+  if (isAuthenticated) {
     return <UserLoggedIn />;
   }
 
   return <AuthView />;
 }
+
+export default observer(HomePage);

space/components/accounts/user-logged-in.tsx

@@ -11,6 +11,7 @@ export const UserLoggedIn = () => {
   const { data: user } = useUser();
 
   if (!user) return null;
+
   return (
     <div className="flex h-screen w-screen flex-col">
       <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">

space/components/common/index.ts

@@ -1,2 +1,3 @@
 export * from "./latest-feature-block";
 export * from "./project-logo";
+export * from "./logo-spinner";

space/components/common/logo-spinner.tsx

@@ -0,0 +1,20 @@
+"use client";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export const LogoSpinner = () => {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="h-screen w-full flex min-h-[600px] justify-center items-center">
+      <div className="flex items-center justify-center">
+        <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
+      </div>
+    </div>
+  );
+};

space/components/issues/navbar/controls.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEffect, FC } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
+import useSWR from "swr";
 // ui
 import { Avatar, Button } from "@plane/ui";
 // components
@@ -21,7 +23,7 @@ export type NavbarControlsProps = {
   projectSettings: any;
 };
 
-export const NavbarControls: FC<NavbarControlsProps> = (props) => {
+export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
   const { workspaceSlug, projectId, projectSettings } = props;
   const { views } = projectSettings;
   // router
@@ -34,7 +36,11 @@ export const NavbarControls: FC<NavbarControlsProps> = (props) => {
   const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
   hydrate(projectSettings);
 
-  const { data: user } = useUser();
+  const { data: user, fetchCurrentUser } = useUser();
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), { errorRetryCount: 2 });
+
+  console.log("user", user);
 
   useEffect(() => {
     if (workspaceSlug && projectId && settings) {
@@ -126,4 +132,4 @@ export const NavbarControls: FC<NavbarControlsProps> = (props) => {
       )}
     </>
   );
-};
+});

space/components/issues/navbar/index.tsx

@@ -1,7 +1,5 @@
 "use client";
-
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
 import { Briefcase } from "lucide-react";
 // components
 import { ProjectLogo } from "@/components/common";
@@ -13,7 +11,7 @@ type IssueNavbarProps = {
   projectId: string;
 };
 
-const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
+const IssueNavbar: FC<IssueNavbarProps> = (props) => {
   const { projectSettings, workspaceSlug, projectId } = props;
   const { project_details } = projectSettings;
 
@@ -40,6 +38,6 @@ const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
       </div>
     </div>
   );
-});
+};
 
 export default IssueNavbar;

space/components/views/auth.tsx

@@ -4,12 +4,8 @@ import { observer } from "mobx-react-lite";
 import Image from "next/image";
 // ui
 import { useTheme } from "next-themes";
-import useSWR from "swr";
-import { Spinner } from "@plane/ui";
 // components
 import { AuthRoot } from "@/components/accounts";
-// hooks
-import { useUser } from "@/hooks/store";
 // images
 import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
 import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
@@ -18,48 +14,27 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text-new.p
 export const AuthView = observer(() => {
   // hooks
   const { resolvedTheme } = useTheme();
-  // store
-  const { fetchCurrentUser, isLoading } = useUser();
-
-  // fetching user information
-  const { isLoading: isSWRLoading } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
-    shouldRetryOnError: false,
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    revalidateOnReconnect: true,
-    errorRetryCount: 1,
-  });
 
   return (
-    <>
-      {isLoading || isSWRLoading ? (
-        <div className="relative flex h-screen w-screen items-center justify-center">
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          <div className="relative w-screen h-screen overflow-hidden">
-            <div className="absolute inset-0 z-0">
-              <Image
-                src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-                className="w-full h-full object-cover"
-                alt="Plane background pattern"
-              />
-            </div>
-            <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
-              <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
-                <div className="flex items-center gap-x-2 py-10">
-                  <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
-                  <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-                </div>
-              </div>
-              <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
-                <AuthRoot />
-              </div>
-            </div>
+    <div className="relative w-screen h-screen overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+          className="w-full h-full object-cover"
+          alt="Plane background pattern"
+        />
+      </div>
+      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
+          <div className="flex items-center gap-x-2 py-10">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
-        </>
-      )}
-    </>
+        </div>
+        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
+          <AuthRoot />
+        </div>
+      </div>
+    </div>
   );
 });

space/services/api.service.ts

@@ -4,13 +4,13 @@ import axios, { AxiosInstance } from "axios";
 // import { rootStore } from "@/lib/store-context";
 
 export abstract class APIService {
-  protected baseURL: string;
+  protected baseURL: string | undefined;
   private axiosInstance: AxiosInstance;
 
-  constructor(baseURL: string) {
+  constructor(baseURL: string | undefined) {
     this.baseURL = baseURL;
     this.axiosInstance = axios.create({
-      baseURL,
+      baseURL: baseURL || "",
       withCredentials: true,
     });
 

space/store/user.store.ts

@@ -37,7 +37,7 @@ export interface IUserStore {
 export class UserStore implements IUserStore {
   // observables
   isAuthenticated: boolean = false;
-  isLoading: boolean = false;
+  isLoading: boolean = true;
   error: TUserErrorStatus | undefined = undefined;
   data: IUser | undefined = undefined;
   // store observables