fix(index): group state & effects, memoize functions

Author: ljosberinn

src/index.tsx

@@ -8,6 +8,7 @@ import React, {
   Dispatch,
   SetStateAction,
   ReactNode,
+  useCallback,
 } from 'react';
 
 import GoTrue, {
@@ -36,6 +37,12 @@ const defaultSettings = {
   },
 };
 
+const errors = {
+  noUserFound: 'No current user found - are you logged in?',
+};
+
+type MaybeUserPromise = Promise<User | undefined>;
+
 export type ReactNetlifyIdentityAPI = {
   user: User | undefined;
   /** not meant for normal use! you should mostly use one of the other exported methods to update the user instance */
@@ -46,19 +53,19 @@ export type ReactNetlifyIdentityAPI = {
     email: string,
     password: string,
     data: Object
-  ) => Promise<User | undefined>;
+  ) => MaybeUserPromise;
   loginUser: (
     email: string,
     password: string,
     remember?: boolean
-  ) => Promise<User | undefined>;
-  logoutUser: () => Promise<User | undefined>;
+  ) => MaybeUserPromise;
+  logoutUser: () => MaybeUserPromise;
   requestPasswordRecovery: (email: string) => Promise<void>;
   recoverAccount: (
     token: string,
     remember?: boolean | undefined
   ) => Promise<User>;
-  updateUser: (fields: { data: object }) => Promise<User | undefined>;
+  updateUser: (fields: { data: object }) => MaybeUserPromise;
   getFreshJWT: () => Promise<string>;
   authedFetch: {
     get: (endpoint: string, obj?: {}) => Promise<any>;
@@ -119,14 +126,20 @@ export function useNetlifyIdentity(
     [url]
   );
 
+  /******* STATE and EFFECTS */
+
   const [user, setUser] = useState<User | undefined>(
     goTrueInstance.currentUser() || undefined
   );
-  const _setUser = (_user: User | undefined) => {
-    setUser(_user);
-    onAuthChange(_user); // if someone's subscribed to auth changes, let 'em know
-    return _user; // so that we can continue chaining
-  };
+
+  const _setUser = useCallback(
+    (_user: User | undefined) => {
+      setUser(_user);
+      onAuthChange(_user); // if someone's subscribed to auth changes, let 'em know
+      return _user; // so that we can continue chaining
+    },
+    [onAuthChange]
+  );
 
   const [param, setParam] = useState<TokenParam>(defaultParam);
 
@@ -140,71 +153,109 @@ export function useNetlifyIdentity(
     }
   }, []);
 
+  const [settings, setSettings] = useState<Settings>(defaultSettings);
+
+  useEffect(() => {
+    goTrueInstance.settings
+      .bind(goTrueInstance)()
+      .then(x => setSettings(x));
+  }, []);
+
   /******* OPERATIONS */
   // make sure the Registration preferences under Identity settings in your Netlify dashboard are set to Open.
   // https://react-netlify-identity.netlify.com/login#access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NTY0ODY3MjEsInN1YiI6ImNiZjY5MTZlLTNlZGYtNGFkNS1iOTYzLTQ4ZTY2NDcyMDkxNyIsImVtYWlsIjoic2hhd250aGUxQGdtYWlsLmNvbSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImdpdGh1YiJ9LCJ1c2VyX21ldGFkYXRhIjp7ImF2YXRhcl91cmwiOiJodHRwczovL2F2YXRhcnMxLmdpdGh1YnVzZXJjb250ZW50LmNvbS91LzY3NjQ5NTc_dj00IiwiZnVsbF9uYW1lIjoic3d5eCJ9fQ.E8RrnuCcqq-mLi1_Q5WHJ-9THIdQ3ha1mePBKGhudM0&expires_in=3600&refresh_token=OyA_EdRc7WOIVhY7RiRw5w&token_type=bearer
   /******* external oauth */
 
-  const loginProvider = (provider: Provider) => {
-    const url = goTrueInstance.loginExternalUrl(provider);
-    window.location.href = url;
-  };
-  const acceptInviteExternalUrl = (provider: Provider, token: string) =>
-    goTrueInstance.acceptInviteExternalUrl(provider, token);
-  const _settings = goTrueInstance.settings.bind(goTrueInstance);
-  const [settings, setSettings] = useState<Settings>(defaultSettings);
-  useEffect(() => {
-    _settings().then(x => setSettings(x));
-  }, []);
+  const loginProvider = useCallback(
+    (provider: Provider) => {
+      const url = goTrueInstance.loginExternalUrl(provider);
+      window.location.href = url;
+    },
+    [goTrueInstance]
+  );
+
+  const acceptInviteExternalUrl = useCallback(
+    (provider: Provider, token: string) =>
+      goTrueInstance.acceptInviteExternalUrl(provider, token),
+    [goTrueInstance]
+  );
 
   /******* email auth */
-  const signupUser = (email: string, password: string, data: Object) =>
-    goTrueInstance.signup(email, password, data).then(_setUser); // TODO: make setUser optional?
-  const loginUser = (
-    email: string,
-    password: string,
-    remember: boolean = true
-  ) => goTrueInstance.login(email, password, remember).then(_setUser);
-  const requestPasswordRecovery = (email: string) =>
-    goTrueInstance.requestPasswordRecovery(email);
-  const recoverAccount = (token: string, remember?: boolean | undefined) =>
-    goTrueInstance.recover(token, remember);
-  const updateUser = (fields: { data: object }) => {
-    if (user == null) {
-      throw new Error('No current user found - are you logged in?');
-    } else {
+  const signupUser = useCallback(
+    (email: string, password: string, data: Object) =>
+      // TODO: make setUser optional?
+      goTrueInstance.signup(email, password, data).then(_setUser),
+    [goTrueInstance]
+  );
+
+  const loginUser = useCallback(
+    (email: string, password: string, remember: boolean = true) =>
+      goTrueInstance.login(email, password, remember).then(_setUser),
+    [goTrueInstance, _setUser]
+  );
+
+  const requestPasswordRecovery = useCallback(
+    (email: string) => goTrueInstance.requestPasswordRecovery(email),
+    [goTrueInstance]
+  );
+
+  const recoverAccount = useCallback(
+    (token: string, remember?: boolean | undefined) =>
+      goTrueInstance.recover(token, remember),
+    [goTrueInstance]
+  );
+
+  const updateUser = useCallback(
+    (fields: { data: object }) => {
+      if (!user) {
+        throw new Error(errors.noUserFound);
+      }
+
       return user!
         .update(fields) // e.g. { data: { email: "example@example.com", password: "password" } }
         .then(_setUser);
+    },
+    [user]
+  );
+
+  const getFreshJWT = useCallback(() => {
+    if (!user) {
+      throw new Error(errors.noUserFound);
     }
-  };
-  const getFreshJWT = () => {
-    if (!user) throw new Error('No current user found - are you logged in?');
+
     return user.jwt();
-  };
-  const logoutUser = () => {
-    if (!user) throw new Error('No current user found - are you logged in?');
+  }, [user]);
+
+  const logoutUser = useCallback(() => {
+    if (!user) {
+      throw new Error(errors.noUserFound);
+    }
+
     return user.logout().then(() => _setUser(undefined));
-  };
+  }, [user]);
 
   const genericAuthedFetch = (method: string) => (
     endpoint: string,
-    obj = {}
+    options: RequestInit = {}
   ) => {
-    if (!user || !user.token || !user.token.access_token)
+    if (!user?.token?.access_token) {
       throw new Error('no user token found');
+    }
+
     const defaultObj = {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
         Authorization: 'Bearer ' + user.token.access_token,
       },
     };
-    const finalObj = Object.assign(defaultObj, { method }, obj);
+    const finalObj = Object.assign(defaultObj, { method }, options);
+
     return fetch(endpoint, finalObj).then(res =>
       finalObj.headers['Content-Type'] === 'application/json' ? res.json() : res
     );
   };
+
   const authedFetch = {
     get: genericAuthedFetch('GET'),
     post: genericAuthedFetch('POST'),