From e1197f2b8f7582bf4116992584775778e5c6adc6 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 15 May 2024 16:28:38 +0530
Subject: [PATCH] chore: handled multiple children rendering in the space
 layout (#4459)

---
 space/app/error.tsx                           | 30 +++++++++----------
 space/app/layout.tsx                          |  2 --
 space/app/not-found.tsx                       | 19 ++++++------
 .../instance/instance-failure-view.tsx        | 11 +++----
 space/store/user.store.ts                     |  5 ++--
 5 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/space/app/error.tsx b/space/app/error.tsx
index 5b7c6ecfb..2d6f22e90 100644
--- a/space/app/error.tsx
+++ b/space/app/error.tsx
@@ -17,22 +17,20 @@ export default function InstanceError() {
   };
 
   return (
-    <div>
-      <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
-        <div className="w-auto max-w-2xl relative space-y-8 py-10">
-          <div className="relative flex flex-col justify-center items-center space-y-4">
-            <Image src={instanceImage} alt="Plane Logo" />
-            <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-            <p className="font-medium text-base text-center">
-              We were unable to fetch the details of the instance. <br />
-              Fret not, it might just be a connectivity issue.
-            </p>
-          </div>
-          <div className="flex justify-center">
-            <Button size="md" onClick={handleRetry}>
-              Retry
-            </Button>
-          </div>
+    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={instanceImage} alt="Plane instance failure image" />
+          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
+          <p className="font-medium text-base text-center">
+            We were unable to fetch the details of the instance. <br />
+            Fret not, it might just be a connectivity issue.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <Button size="md" onClick={handleRetry}>
+            Retry
+          </Button>
         </div>
       </div>
     </div>
diff --git a/space/app/layout.tsx b/space/app/layout.tsx
index cc9a94b15..c2abf44bc 100644
--- a/space/app/layout.tsx
+++ b/space/app/layout.tsx
@@ -46,8 +46,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           ) : (
             <>{instanceDetails.instance.is_setup_done ? <>{children}</> : <InstanceNotReady />}</>
           )}
-
-          {children}
         </AppProvider>
       </body>
     </html>
diff --git a/space/app/not-found.tsx b/space/app/not-found.tsx
index 2dd51630f..468f89a97 100644
--- a/space/app/not-found.tsx
+++ b/space/app/not-found.tsx
@@ -1,22 +1,21 @@
 "use client";
+
 import Image from "next/image";
 // assets
 import UserLoggedInImage from "public/user-logged-in.svg";
 
 export default function InstanceNotFound() {
   return (
-    <div>
-      <div className="flex h-screen w-screen flex-col">
-        <div className="grid h-full w-full place-items-center p-6">
-          <div className="text-center">
-            <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
-              <div className="h-32 w-32">
-                <Image src={UserLoggedInImage} alt="User already logged in" />
-              </div>
+    <div className="flex h-screen w-screen flex-col">
+      <div className="grid h-full w-full place-items-center p-6">
+        <div className="text-center">
+          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+            <div className="h-32 w-32">
+              <Image src={UserLoggedInImage} alt="User already logged in" />
             </div>
-            <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
-            <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
           </div>
+          <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
+          <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
         </div>
       </div>
     </div>
diff --git a/space/components/instance/instance-failure-view.tsx b/space/components/instance/instance-failure-view.tsx
index 1173a6894..50f677c10 100644
--- a/space/components/instance/instance-failure-view.tsx
+++ b/space/components/instance/instance-failure-view.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
@@ -7,11 +8,7 @@ import { Button } from "@plane/ui";
 import InstanceFailureDarkImage from "public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "public/instance/instance-failure.svg";
 
-type InstanceFailureViewProps = {
-  // mutate: () => void;
-};
-
-export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
+export const InstanceFailureView: FC = () => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -21,10 +18,10 @@ export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
+          <Image src={instanceImage} alt="Plane instance failure image" />
           <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />
diff --git a/space/store/user.store.ts b/space/store/user.store.ts
index 2f228b629..ee376e09f 100644
--- a/space/store/user.store.ts
+++ b/space/store/user.store.ts
@@ -5,9 +5,10 @@ import { IUser } from "@plane/types";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
-// stores
-import { RootStore } from "@/store/root.store";
+// store types
 import { ProfileStore, IProfileStore } from "@/store/profile.store";
+import { RootStore } from "@/store/root.store";
+// types
 import { ActorDetail } from "@/types/issue";
 
 type TUserErrorStatus = {