feat: init

apps/web/core/lib/wrappers/authentication-wrapper.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams, usePathname } from "next/navigation";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// helpers
+import { EPageTypes } from "@/helpers/authentication.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserProfile, useUserSettings } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type TPageType = EPageTypes;
+
+type TAuthenticationWrapper = {
+  children: ReactNode;
+  pageType?: TPageType;
+};
+
+const isValidURL = (url: string): boolean => {
+  const disallowedSchemes = /^(https?|ftp):\/\//i;
+  return !disallowedSchemes.test(url);
+};
+
+export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props) => {
+  const pathname = usePathname();
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
+  const nextPath = searchParams.get("next_path");
+  // props
+  const { children, pageType = EPageTypes.AUTHENTICATED } = props;
+  // hooks
+  const { isLoading: isUserLoading, data: currentUser, fetchCurrentUser } = useUser();
+  const { data: currentUserProfile } = useUserProfile();
+  const { data: currentUserSettings } = useUserSettings();
+  const { loader: workspacesLoader, workspaces } = useWorkspace();
+
+  const { isLoading: isUserSWRLoading } = useSWR("USER_INFORMATION", async () => await fetchCurrentUser(), {
+    revalidateOnFocus: false,
+    shouldRetryOnError: false,
+  });
+
+  const isUserOnboard =
+    currentUserProfile?.is_onboarded ||
+    (currentUserProfile?.onboarding_step?.profile_complete &&
+      currentUserProfile?.onboarding_step?.workspace_create &&
+      currentUserProfile?.onboarding_step?.workspace_invite &&
+      currentUserProfile?.onboarding_step?.workspace_join) ||
+    false;
+
+  const getWorkspaceRedirectionUrl = (): string => {
+    let redirectionRoute = "/create-workspace";
+
+    // validating the nextPath from the router query
+    if (nextPath && isValidURL(nextPath.toString())) {
+      redirectionRoute = nextPath.toString();
+      return redirectionRoute;
+    }
+
+    // validate the last and fallback workspace_slug
+    const currentWorkspaceSlug =
+      currentUserSettings?.workspace?.last_workspace_slug || currentUserSettings?.workspace?.fallback_workspace_slug;
+
+    // validate the current workspace_slug is available in the user's workspace list
+    const isCurrentWorkspaceValid = Object.values(workspaces || {}).findIndex(
+      (workspace) => workspace.slug === currentWorkspaceSlug
+    );
+
+    if (isCurrentWorkspaceValid >= 0) redirectionRoute = `/${currentWorkspaceSlug}`;
+
+    return redirectionRoute;
+  };
+
+  if ((isUserSWRLoading || isUserLoading || workspacesLoader) && !currentUser?.id)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (pageType === EPageTypes.PUBLIC) return <>{children}</>;
+
+  if (pageType === EPageTypes.NON_AUTHENTICATED) {
+    if (!currentUser?.id) return <>{children}</>;
+    else {
+      if (currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.push(currentRedirectRoute);
+        return <></>;
+      } else {
+        router.push("/onboarding");
+        return <></>;
+      }
+    }
+  }
+
+  if (pageType === EPageTypes.ONBOARDING) {
+    if (!currentUser?.id) {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    } else {
+      if (currentUser && currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.replace(currentRedirectRoute);
+        return <></>;
+      } else return <>{children}</>;
+    }
+  }
+
+  if (pageType === EPageTypes.SET_PASSWORD) {
+    if (!currentUser?.id) {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    } else {
+      if (currentUser && !currentUser?.is_password_autoset && currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.push(currentRedirectRoute);
+        return <></>;
+      } else return <>{children}</>;
+    }
+  }
+
+  if (pageType === EPageTypes.AUTHENTICATED) {
+    if (currentUser?.id) {
+      if (currentUserProfile && currentUserProfile?.id && isUserOnboard) return <>{children}</>;
+      else {
+        router.push(`/onboarding`);
+        return <></>;
+      }
+    } else {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    }
+  }
+
+  return <>{children}</>;
+});

apps/web/core/lib/wrappers/instance-wrapper.tsx

@@ -0,0 +1,42 @@
+import type { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { InstanceNotReady, MaintenanceView } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+type TInstanceWrapper = {
+  children: ReactNode;
+};
+
+export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
+
+  const { isLoading: isInstanceSWRLoading, error: instanceSWRError } = useSWR(
+    "INSTANCE_INFORMATION",
+    async () => await fetchInstanceInfo(),
+    { revalidateOnFocus: false }
+  );
+
+  // loading state
+  if ((isLoading || isInstanceSWRLoading) && !instance)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (instanceSWRError) return <MaintenanceView />;
+
+  // something went wrong while in the request
+  if (error && error?.status === "error") return <>{children}</>;
+
+  // instance is not ready and setup is not done
+  if (instance?.is_setup_done === false) return <InstanceNotReady />;
+
+  return <>{children}</>;
+});

apps/web/core/lib/wrappers/store-wrapper.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode, FC } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import type { TLanguage } from "@plane/i18n";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { applyTheme, unsetCustomCssVariables } from "@plane/utils";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useRouterParams } from "@/hooks/store/use-router-params";
+import { useUserProfile } from "@/hooks/store/user";
+
+type TStoreWrapper = {
+  children: ReactNode;
+};
+
+const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
+  const { children } = props;
+  // theme
+  const { setTheme } = useTheme();
+  // router
+  const params = useParams();
+  // store hooks
+  const { setQuery } = useRouterParams();
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { data: userProfile } = useUserProfile();
+  const { changeLanguage } = useTranslation();
+
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (localValue && sidebarCollapsed === undefined) toggleSidebar(localBoolValue);
+  }, [sidebarCollapsed, setTheme, toggleSidebar]);
+
+  /**
+   * Setting up the theme of the user by fetching it from local storage
+   */
+  useEffect(() => {
+    if (!userProfile?.theme?.theme) return;
+    const currentTheme = userProfile?.theme?.theme || "system";
+    const currentThemePalette = userProfile?.theme?.palette;
+    if (currentTheme) {
+      setTheme(currentTheme);
+      if (currentTheme === "custom" && currentThemePalette) {
+        applyTheme(
+          currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          false
+        );
+      } else unsetCustomCssVariables();
+    }
+  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme]);
+
+  useEffect(() => {
+    if (!userProfile?.language) return;
+    changeLanguage(userProfile?.language as TLanguage);
+  }, [userProfile?.language, changeLanguage]);
+
+  useEffect(() => {
+    if (!params) return;
+    setQuery(params);
+  }, [params, setQuery]);
+
+  return <>{children}</>;
+});
+
+export default StoreWrapper;