refactor: use-user-auth hook (#3215)

* refactor: use-user-auth hook

* fix: user store currentUserLoader

web/components/exporter/export-modal.tsx

@@ -17,7 +17,7 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: IUser | undefined;
+  user: IUser | null;
   provider: string | string[];
   mutateServices: () => void;
 };

web/components/exporter/guide.tsx

@@ -20,19 +20,24 @@ import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
 // constants
 import { EXPORTERS_LIST } from "constants/workspace";
+import { observer } from "mobx-react-lite";
+import { useUser } from "hooks/store";
 
 // services
 const integrationService = new IntegrationService();
 
-const IntegrationGuide = () => {
+const IntegrationGuide = observer(() => {
+  // states
   const [refreshing, setRefreshing] = useState(false);
   const per_page = 10;
   const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
-
+  // router
   const router = useRouter();
   const { workspaceSlug, provider } = router.query;
-
-  const { user } = useUserAuth();
+  // store hooks
+  const { currentUser, currentUserLoader, currentUserError } = useUser();
+  // custom hooks
+  const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
 
   const { data: exporterServices } = useSWR(
     workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
@@ -153,14 +158,14 @@ const IntegrationGuide = () => {
             isOpen
             handleClose={() => handleCsvClose()}
             data={null}
-            user={user}
+            user={currentUser}
             provider={provider}
             mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))}
           />
         )}
       </div>
     </>
   );
-};
+});
 
 export default IntegrationGuide;

web/components/integration/delete-import-modal.tsx

@@ -23,7 +23,7 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: IUser | undefined;
+  user: IUser | null;
 };
 
 // services

web/components/integration/github/root.tsx

@@ -87,7 +87,7 @@ type Props = {
 const integrationService = new IntegrationService();
 const githubIntegrationService = new GithubIntegrationService();
 
-export const GithubImporterRoot: React.FC<Props> = () => {
+export const GithubImporterRoot: React.FC = () => {
   const [currentStep, setCurrentStep] = useState<IIntegrationData>({
     state: "import-configure",
   });

web/components/integration/guide.tsx

@@ -3,7 +3,9 @@ import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
 // hooks
+import { useUser } from "hooks/store";
 import useUserAuth from "hooks/use-user-auth";
 // services
 import { IntegrationService } from "services/integrations";
@@ -23,15 +25,18 @@ import { IMPORTERS_LIST } from "constants/workspace";
 // services
 const integrationService = new IntegrationService();
 
-const IntegrationGuide = () => {
+const IntegrationGuide = observer(() => {
+  // states
   const [refreshing, setRefreshing] = useState(false);
   const [deleteImportModal, setDeleteImportModal] = useState(false);
   const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
-
+  // router
   const router = useRouter();
   const { workspaceSlug, provider } = router.query;
-
-  const { user } = useUserAuth();
+  // store hooks
+  const { currentUser, currentUserLoader } = useUser();
+  // custom hooks
+  const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
 
   const { data: importerServices } = useSWR(
     workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
@@ -49,7 +54,7 @@ const IntegrationGuide = () => {
         isOpen={deleteImportModal}
         handleClose={() => setDeleteImportModal(false)}
         data={importToDelete}
-        user={user}
+        user={currentUser}
       />
       <div className="h-full">
         {(!provider || provider === "csv") && (
@@ -144,11 +149,11 @@ const IntegrationGuide = () => {
           </>
         )}
 
-        {provider && provider === "github" && <GithubImporterRoot user={user} />}
-        {provider && provider === "jira" && <JiraImporterRoot user={user} />}
+        {provider && provider === "github" && <GithubImporterRoot />}
+        {provider && provider === "jira" && <JiraImporterRoot />}
       </div>
     </>
   );
-};
+});
 
 export default IntegrationGuide;

web/components/integration/jira/root.tsx

@@ -60,7 +60,7 @@ type Props = {
 // services
 const jiraImporterService = new JiraImporterService();
 
-export const JiraImporterRoot: React.FC<Props> = () => {
+export const JiraImporterRoot: React.FC = () => {
   const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
     state: "import-configure",
   });

web/components/issues/sidebar.tsx

@@ -85,6 +85,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   } = useMobxStore();
   const {
     currentUser,
+    loader,
     membership: { currentProjectRole },
   } = useUser();
   const { projectStates } = useProjectState();
@@ -94,6 +95,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId, inboxIssueId } = router.query;
 
   const { loading, handleSubscribe, handleUnsubscribe, subscribed } = useUserIssueNotificationSubscription(
+    currentUser,
+    loader,
     workspaceSlug,
     projectId,
     issueId

web/hooks/use-issue-notification-subscription.tsx

@@ -4,15 +4,19 @@ import useSWR from "swr";
 import useUserAuth from "hooks/use-user-auth";
 // services
 import { NotificationService } from "services/notification.service";
+// types
+import { IUser } from "types/users";
 
 const userNotificationServices = new NotificationService();
 
 const useUserIssueNotificationSubscription = (
+  user: IUser | null,
+  userLoader: boolean,
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
   issueId?: string | string[] | null
 ) => {
-  const { user } = useUserAuth();
+  const {} = useUserAuth({ user: user, isLoading: userLoader });
 
   const { data, error, mutate } = useSWR(
     workspaceSlug && projectId && issueId ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}` : null,

web/hooks/use-user-auth.tsx

@@ -1,38 +1,31 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 // services
 import { WorkspaceService } from "services/workspace.service";
-// hooks
-import { useUser } from "hooks/store";
+// types
+import { IUser } from "types";
 
 const workspaceService = new WorkspaceService();
-
-const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "admin") => {
+type Props = {
+  routeAuth?: "sign-in" | "onboarding" | "admin" | null;
+  user: IUser | null;
+  isLoading: boolean;
+};
+const useUserAuth = (props: Props) => {
+  const { routeAuth, user, isLoading } = props;
   // states
   const [isRouteAccess, setIsRouteAccess] = useState(true);
   // router
   const router = useRouter();
   const { next_url } = router.query;
-  const { fetchCurrentUser } = useUser();
-  // form info
-  const {
-    data: user,
-    isLoading,
-    error,
-    mutate,
-  } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
-    refreshInterval: 0,
-    shouldRetryOnError: false,
-  });
 
   useEffect(() => {
     const handleWorkSpaceRedirection = async () => {
       workspaceService.userWorkspaces().then(async (userWorkspaces) => {
         if (!user) return;
 
         const firstWorkspace = Object.values(userWorkspaces ?? {})?.[0];
-        const lastActiveWorkspace = userWorkspaces[user?.last_workspace_id];
+        const lastActiveWorkspace = userWorkspaces.find((workspsace) => workspsace.id === user?.last_workspace_id);
 
         if (lastActiveWorkspace) {
           router.push(`/${lastActiveWorkspace.slug}`);
@@ -102,8 +95,6 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
 
   return {
     isLoading: isRouteAccess,
-    user: error ? undefined : user,
-    mutateUser: mutate,
     // assignedIssuesLength: user?.assigned_issues ?? 0,
     // workspaceInvitesLength: user?.workspace_invites ?? 0,
   };

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -5,7 +5,7 @@ import { Tab } from "@headlessui/react";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { usePage } from "hooks/store";
+import { usePage, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // layouts
@@ -39,14 +39,16 @@ const SharedPagesList = dynamic<any>(() => import("components/pages").then((a) =
 });
 
 const ProjectPagesPage: NextPageWithLayout = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // states
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
   // store
   const { fetchProjectPages, fetchArchivedProjectPages } = usePage();
+  const { currentUser, currentUserLoader } = useUser();
   // hooks
-  const {} = useUserAuth();
+  const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
   // local storage
   const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
   // fetching pages from API

web/pages/accounts/sign-up.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, ReactElement } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 // next-themes
 import { useTheme } from "next-themes";
 // services
 import { AuthService } from "services/auth.service";
 // hooks
+import { useUser } from "hooks/store";
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // layouts
@@ -26,14 +28,17 @@ type EmailPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-const SignUpPage: NextPageWithLayout = () => {
+const SignUpPage: NextPageWithLayout = observer(() => {
+  // router
   const router = useRouter();
-
+  // toast alert
   const { setToastAlert } = useToast();
-
+  // next-themes
   const { setTheme } = useTheme();
-
-  const { mutateUser } = useUserAuth("sign-in");
+  // store hooks
+  const { currentUser, fetchCurrentUser, currentUserLoader } = useUser();
+  // custom hooks
+  const {} = useUserAuth({ routeAuth: "sign-in", user: currentUser, isLoading: currentUserLoader });
 
   const handleSignUp = async (formData: EmailPasswordFormValues) => {
     const payload = {
@@ -50,7 +55,7 @@ const SignUpPage: NextPageWithLayout = () => {
           message: "Account created successfully.",
         });
 
-        if (response) await mutateUser();
+        if (response) await fetchCurrentUser();
         router.push("/onboarding");
       })
       .catch((err) =>
@@ -84,7 +89,7 @@ const SignUpPage: NextPageWithLayout = () => {
       </div>
     </>
   );
-};
+});
 
 SignUpPage.getLayout = function getLayout(page: ReactElement) {
   return <DefaultLayout>{page}</DefaultLayout>;

web/pages/onboarding/index.tsx

@@ -39,16 +39,16 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   const {
     eventTracker: { postHogEventTracker },
   } = useApplication();
-  const { currentUser, updateCurrentUser, updateUserOnBoard } = useUser();
+  const { currentUser, currentUserLoader, updateCurrentUser, updateUserOnBoard } = useUser();
   const { workspaces, fetchWorkspaces } = useWorkspace();
+  // custom hooks
+  const {} = useUserAuth({ routeAuth: "onboarding", user: currentUser, isLoading: currentUserLoader });
 
   const user = currentUser ?? undefined;
   const workspacesList = Object.values(workspaces ?? {});
 
   const { setTheme } = useTheme();
 
-  const {} = useUserAuth("onboarding");
-
   const { control, setValue } = useForm<{ full_name: string }>({
     defaultValues: {
       full_name: "",