Cleanup and refactor AuthStore (#6086)

app/scenes/Settings/Details.tsx

@@ -28,7 +28,7 @@ import ImageInput from "./components/ImageInput";
 import SettingRow from "./components/SettingRow";
 
 function Details() {
-  const { auth, dialogs, ui } = useStores();
+  const { dialogs, ui } = useStores();
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const theme = useTheme();
@@ -65,7 +65,7 @@ function Details() {
       }
 
       try {
-        await auth.updateTeam({
+        await team.save({
           name,
           subdomain,
           defaultCollectionId,
@@ -80,16 +80,7 @@ function Details() {
         toast.error(err.message);
       }
     },
-    [
-      auth,
-      name,
-      subdomain,
-      defaultCollectionId,
-      team.preferences,
-      publicBranding,
-      customTheme,
-      t,
-    ]
+    [team, name, subdomain, defaultCollectionId, publicBranding, customTheme, t]
   );
 
   const handleNameChange = React.useCallback(
@@ -107,9 +98,7 @@ function Details() {
   );
 
   const handleAvatarUpload = async (avatarUrl: string) => {
-    await auth.updateTeam({
-      avatarUrl,
-    });
+    await team.save({ avatarUrl });
     toast.success(t("Logo updated"));
   };
 
@@ -288,8 +277,8 @@ function Details() {
             />
           </SettingRow>
 
-          <Button type="submit" disabled={auth.isSaving || !isValid}>
-            {auth.isSaving ? `${t("Saving")}…` : t("Save")}
+          <Button type="submit" disabled={team.isSaving || !isValid}>
+            {team.isSaving ? `${t("Saving")}…` : t("Save")}
           </Button>
 
           {can.delete && (

app/scenes/Settings/Features.tsx

@@ -9,23 +9,20 @@ import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
 import SettingRow from "./components/SettingRow";
 
 function Features() {
-  const { auth } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
 
   const handlePreferenceChange =
     (inverted = false) =>
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const preferences = {
-        ...team.preferences,
-        [ev.target.name]: inverted ? !ev.target.checked : ev.target.checked,
-      };
-
-      await auth.updateTeam({ preferences });
+      team.setPreference(
+        ev.target.name as TeamPreference,
+        inverted ? !ev.target.checked : ev.target.checked
+      );
+      await team.save();
       toast.success(t("Settings saved"));
     };
 

app/scenes/Settings/Preferences.tsx

@@ -19,24 +19,23 @@ import SettingRow from "./components/SettingRow";
 
 function Preferences() {
   const { t } = useTranslation();
-  const { dialogs, auth } = useStores();
+  const { dialogs } = useStores();
   const user = useCurrentUser();
   const team = useCurrentTeam();
 
   const handlePreferenceChange =
     (inverted = false) =>
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const preferences = {
-        ...user.preferences,
-        [ev.target.name]: inverted ? !ev.target.checked : ev.target.checked,
-      };
-
-      await auth.updateUser({ preferences });
+      user.setPreference(
+        ev.target.name as UserPreference,
+        inverted ? !ev.target.checked : ev.target.checked
+      );
+      await user.save();
       toast.success(t("Preferences saved"));
     };
 
   const handleLanguageChange = async (language: string) => {
-    await auth.updateUser({ language });
+    await user.save({ language });
     toast.success(t("Preferences saved"));
   };
 

app/scenes/Settings/Profile.tsx

@@ -9,12 +9,10 @@ import Input from "~/components/Input";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
 import ImageInput from "./components/ImageInput";
 import SettingRow from "./components/SettingRow";
 
 const Profile = () => {
-  const { auth } = useStores();
   const user = useCurrentUser();
   const form = React.useRef<HTMLFormElement>(null);
   const [name, setName] = React.useState<string>(user.name || "");
@@ -24,9 +22,7 @@ const Profile = () => {
     ev.preventDefault();
 
     try {
-      await auth.updateUser({
-        name,
-      });
+      await user.save({ name });
       toast.success(t("Profile saved"));
     } catch (err) {
       toast.error(err.message);
@@ -38,9 +34,7 @@ const Profile = () => {
   };
 
   const handleAvatarUpload = async (avatarUrl: string) => {
-    await auth.updateUser({
-      avatarUrl,
-    });
+    await user.save({ avatarUrl });
     toast.success(t("Profile picture updated"));
   };
 
@@ -49,7 +43,7 @@ const Profile = () => {
   };
 
   const isValid = form.current?.checkValidity();
-  const { isSaving } = auth;
+  const { isSaving } = user;
 
   return (
     <Scene title={t("Profile")} icon={<ProfileIcon />}>

app/scenes/Settings/Security.tsx

@@ -24,7 +24,7 @@ import DomainManagement from "./components/DomainManagement";
 import SettingRow from "./components/SettingRow";
 
 function Security() {
-  const { auth, authenticationProviders, dialogs } = useStores();
+  const { authenticationProviders, dialogs } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const theme = useTheme();
@@ -61,13 +61,13 @@ function Security() {
     async (newData) => {
       try {
         setData(newData);
-        await auth.updateTeam(newData);
+        await team.save(newData);
         showSuccessMessage();
       } catch (err) {
         toast.error(err.message);
       }
     },
-    [auth, showSuccessMessage]
+    [team, showSuccessMessage]
   );
 
   const handleChange = React.useCallback(

app/scenes/Settings/components/DomainManagement.tsx

@@ -11,7 +11,6 @@ import Input from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
 import SettingRow from "./SettingRow";
 
 type Props = {
@@ -19,7 +18,6 @@ type Props = {
 };
 
 function DomainManagement({ onSuccess }: Props) {
-  const { auth } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
 
@@ -35,16 +33,14 @@ function DomainManagement({ onSuccess }: Props) {
 
   const handleSaveDomains = React.useCallback(async () => {
     try {
-      await auth.updateTeam({
-        allowedDomains,
-      });
+      await team.save({ allowedDomains });
       onSuccess();
       setExistingDomainsTouched(false);
       updateLastKnownDomainCount(allowedDomains.length);
     } catch (err) {
       toast.error(err.message);
     }
-  }, [auth, allowedDomains, onSuccess]);
+  }, [team, allowedDomains, onSuccess]);
 
   const handleRemoveDomain = async (index: number) => {
     const newDomains = allowedDomains.filter((_, i) => index !== i);
@@ -132,7 +128,7 @@ function DomainManagement({ onSuccess }: Props) {
             <Button
               type="button"
               onClick={handleSaveDomains}
-              disabled={auth.isSaving}
+              disabled={team.isSaving}
             >
               <Trans>Save changes</Trans>
             </Button>