chore: UTC-324: [FE] Refactor the CurrentUser provider (#8616)

Co-authored-by: nass600 <nass600@users.noreply.github.com>

Author: nass600

poetry.lock

@@ -18,7 +18,6 @@ import { FF_UNSAVED_CHANGES, isFF } from "../utils/feature-flags";
 import { TourProvider } from "@humansignal/core";
 import { ToastProvider, ToastViewport } from "@humansignal/ui";
 import { JotaiProvider, JotaiStore } from "../utils/jotai-store";
-import { CurrentUserProvider } from "../providers/CurrentUser";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@humansignal/core/lib/utils/query-client";
 import { RootPage } from "./RootPage";
@@ -72,7 +71,6 @@ const App = ({ content }) => {
             <ConfigProvider key="config" />,
             <RoutesProvider key="rotes" />,
             <ProjectProvider key="project" />,
-            <CurrentUserProvider key="current-user" />,
             ff.isActive(ff.FF_PRODUCT_TOUR) && <TourProvider useAPI={useAPI} />,
           ].filter(Boolean)}
         >

web/apps/labelstudio/src/app/App.jsx

@@ -17,7 +17,7 @@ import { LSLogo } from "../../assets/images";
 import { Button, Userpic, ThemeToggle } from "@humansignal/ui";
 import { useConfig } from "../../providers/ConfigProvider";
 import { useContextComponent, useFixedLocation } from "../../providers/RoutesProvider";
-import { useCurrentUser } from "../../providers/CurrentUser";
+import { useAuth } from "@humansignal/core/providers/AuthProvider";
 import { cn } from "../../utils/bem";
 import { absoluteURL, isDefined } from "../../utils/helpers";
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs";
@@ -57,7 +57,7 @@ const RightContextMenu = ({ className, ...props }) => {
 export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSidebarToggle, onSidebarPin }) => {
   const menuDropdownRef = useRef();
   const useMenuRef = useRef();
-  const { user, fetch, isInProgress } = useCurrentUser();
+  const { user, isLoading } = useAuth();
   const location = useFixedLocation();
 
   const config = useConfig();
@@ -201,7 +201,7 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
             }
           >
             <div title={user?.email} className={menubarClass.elem("user")}>
-              <Userpic user={user} isInProgress={isInProgress} />
+              <Userpic user={user} isInProgress={isLoading} />
               {showNewsletterDot && <div className={menubarClass.elem("userpic-badge")} />}
             </div>
           </Dropdown.Trigger>

web/apps/labelstudio/src/components/Menubar/Menubar.jsx

@@ -2,7 +2,7 @@ import { createRef } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import { ApiProvider } from "../../providers/ApiProvider";
 import { ConfigProvider } from "../../providers/ConfigProvider";
-import { CurrentUserProvider } from "../../providers/CurrentUser";
+import { AuthProvider } from "@humansignal/core/providers/AuthProvider";
 import { MultiProvider } from "../../providers/MultiProvider";
 import { cn } from "../../utils/bem";
 import { Button } from "@humansignal/ui";
@@ -34,7 +34,7 @@ const standaloneModal = (props) => {
                 <ConfigProvider key="config" />,
                 <ToastProvider key="toast" />,
                 <ApiProvider key="api" />,
-                <CurrentUserProvider key="current-user" />,
+                <AuthProvider key="auth" />,
                 <QueryClientProvider client={queryClient} />,
               ]
         }

web/apps/labelstudio/src/components/Modal/Modal.jsx

@@ -1,13 +1,13 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Checkbox, Spinner } from "@humansignal/ui";
+import { useAuth } from "@humansignal/core/providers/AuthProvider";
 
 /**
  * FIXME: This is legacy imports. We're not supposed to use such statements
  * each one of these eventually has to be migrated to core/ui
  */
 import { useAPI } from "apps/labelstudio/src/providers/ApiProvider";
 import { useConfig } from "apps/labelstudio/src/providers/ConfigProvider";
-import { useCurrentUser } from "apps/labelstudio/src/providers/CurrentUser";
 import { ff } from "@humansignal/core";
 
 type NotificationCheckboxProps = {
@@ -34,7 +34,7 @@ export const EmailPreferences = () => {
   const isEnterpriseEmailNotificationsEnabled =
     ff.isActive(ff.FF_ENTERPRISE_EMAIL_NOTIFICATIONS) && window.APP_SETTINGS?.billing?.enterprise;
   const config = useConfig();
-  const { user, setQueryData } = useCurrentUser();
+  const { user, refetch } = useAuth();
   const api = useAPI();
   const [isAllowNewsLetter, setIsAllowNewsLetter] = useState(config.user.allow_newsletters);
   const [emailNotificationSettings, setEmailNotificationSettings] = useState(
@@ -60,14 +60,11 @@ export const EmailPreferences = () => {
         setEmailNotificationSettings(response.lse_fields.email_notification_settings);
         // @ts-ignore
         emailNotificationSettingsRef.current = response.lse_fields.email_notification_settings;
-        setQueryData?.({
-          // @ts-ignore
-          lse_fields: { email_notification_settings: response.lse_fields.email_notification_settings },
-        });
+        refetch();
       }
       setIsLoading(false);
     },
-    [user?.id, setQueryData],
+    [user],
   );
 
   const message = useMemo(() => {

web/apps/labelstudio/src/providers/CurrentUser.d.ts

@@ -4,14 +4,14 @@ import { useQuery } from "@tanstack/react-query";
 import { API } from "apps/labelstudio/src/providers/ApiProvider";
 import { useMemo } from "react";
 import type { WrappedResponse } from "@humansignal/core/lib/api-proxy/types";
-import { useCurrentUserAtom } from "@humansignal/core/lib/hooks/useCurrentUser";
+import { useAuth } from "@humansignal/core/providers/AuthProvider";
 
 function formatDate(date?: string) {
   return format(new Date(date ?? ""), "dd MMM yyyy, KK:mm a");
 }
 
 export const MembershipInfo = () => {
-  const { user } = useCurrentUserAtom();
+  const { user } = useAuth();
   const dateJoined = useMemo(() => {
     if (!user?.date_joined) return null;
     return formatDate(user?.date_joined);

web/apps/labelstudio/src/providers/CurrentUser.jsx

@@ -53,7 +53,7 @@ export const PersonalAccessToken = () => {
         <div>
           <Label text="Access Token" className={styles.label} />
           <div className="flex gap-2 w-full justify-between">
-            <Input name="token" className={styles.input} readOnly value={token} />
+            <Input name="token" className={styles.input} readOnly value={token ?? ""} />
             <Button
               leading={<IconFileCopy />}
               onClick={() => copyToken()}
@@ -77,7 +77,7 @@ export const PersonalAccessToken = () => {
               readOnly
               className={styles.textarea}
               rawClassName={styles.textarea}
-              value={curl}
+              value={curl ?? ""}
             />
             <Button
               leading={<IconFileCopy />}

web/libs/app-common/src/pages/AccountSettings/sections/EmailPreferences.tsx

@@ -4,7 +4,7 @@ import { Button, InputFile, ToastType, useToast, Userpic } from "@humansignal/ui
 // @todo we should not use anything from `apps` in `libs`
 import { API } from "apps/labelstudio/src/providers/ApiProvider";
 import styles from "../AccountSettings.module.scss";
-import { useCurrentUserAtom } from "@humansignal/core/lib/hooks/useCurrentUser";
+import { useAuth } from "@humansignal/core/providers/AuthProvider";
 import { atomWithMutation } from "jotai-tanstack-query";
 import { useAtomValue } from "jotai";
 
@@ -41,12 +41,12 @@ const updateUserAvatarAtom = atomWithMutation(() => ({
 
 export const PersonalInfo = () => {
   const toast = useToast();
-  const { user, fetch: refetchUser, isInProgress: userInProgress, updateAsync: updateUser } = useCurrentUserAtom();
+  const { user, refetch: refetchUser, isLoading: userInProgress, update: updateUser } = useAuth();
   const updateUserAvatar = useAtomValue(updateUserAvatarAtom);
   const [isInProgress, setIsInProgress] = useState(false);
-  const [fname, setFname] = useState(user?.first_name);
-  const [lname, setLname] = useState(user?.last_name);
-  const [phone, setPhone] = useState(user?.phone);
+  const [fname, setFname] = useState(user?.first_name ?? "");
+  const [lname, setLname] = useState(user?.last_name ?? "");
+  const [phone, setPhone] = useState(user?.phone ?? "");
   const avatarRef = useRef<HTMLInputElement>();
   const fileChangeHandler: FormEventHandler<HTMLInputElement> = useCallback(
     async (e) => {
@@ -61,7 +61,7 @@ export const PersonalInfo = () => {
       });
 
       if (!response.$meta.ok) {
-        toast.show({ message: response?.response?.detail ?? "Error updating avatar", type: ToastType.error });
+        toast?.show({ message: response?.response?.detail ?? "Error updating avatar", type: ToastType.error });
       } else {
         refetchUser();
       }
@@ -86,7 +86,7 @@ export const PersonalInfo = () => {
 
       refetchUser();
       if (!response?.$meta.ok) {
-        toast.show({ message: response?.response?.detail ?? "Error updating user", type: ToastType.error });
+        toast?.show({ message: response?.response?.detail ?? "Error updating user", type: ToastType.error });
       }
     },
     [user?.id],
@@ -97,9 +97,9 @@ export const PersonalInfo = () => {
   }, [userInProgress]);
 
   useEffect(() => {
-    setFname(user?.first_name);
-    setLname(user?.last_name);
-    setPhone(user?.phone);
+    setFname(user?.first_name ?? "");
+    setLname(user?.last_name ?? "");
+    setPhone(user?.phone ?? "");
   }, [user]);
 
   return (
@@ -142,7 +142,7 @@ export const PersonalInfo = () => {
           </div>
           <div className={styles.flexRow}>
             <div className={styles.flex1}>
-              <Input label="E-mail" type="email" readOnly={true} value={user?.email} />
+              <Input label="E-mail" type="email" readOnly={true} value={user?.email ?? ""} />
             </div>
             <div className={styles.flex1}>
               <Input
@@ -155,7 +155,7 @@ export const PersonalInfo = () => {
             </div>
           </div>
           <div className={clsx(styles.flexRow, styles.flexEnd)}>
-            <Button look="primary" style={{ width: 125 }} waiting={isInProgress}>
+            <Button style={{ width: 125 }} waiting={isInProgress}>
               Save
             </Button>
           </div>