fix(settings): don't update remote with initial data

tutorbookapp · Mar 10, 2021 · 0c4439a · 0c4439a
1 parent f11b2e3
commit 0c4439a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/components/settings/general.tsx b/components/settings/general.tsx
@@ -1,4 +1,4 @@
-import { useCallback, FormEvent } from 'react';
+import { FormEvent, useCallback } from 'react';
 import { TextField } from '@rmwc/textfield';
 import useTranslation from 'next-translate/useTranslation';
 
@@ -7,8 +7,8 @@ import PhotoInput from 'components/photo-input';
 import { Org } from 'lib/model/org';
 import useSocialProps from 'lib/hooks/social-props';
 
-import { useSettings } from './context';
 import styles from './settings.module.scss';
+import { useSettings } from './context';
 
 export default function General(): JSX.Element {
   const { t } = useTranslation();

diff --git a/components/settings/index.tsx b/components/settings/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useMemo } from 'react';
 import { Snackbar, SnackbarAction } from '@rmwc/snackbar';
 import Link from 'next/link';
 import axios from 'axios';
@@ -20,8 +20,6 @@ export interface SettingsProps {
   children: ReactNode;
 }
 
-const emptyOrg = new Org();
-
 export default function Settings({
   orgId,
   active,
@@ -42,6 +40,10 @@ export default function Settings({
     return Org.fromJSON(data);
   }, []);
 
+  const initialData = useMemo(
+    () => orgs.find((o) => o.id === orgId) || new Org(),
+    [orgId, orgs]
+  );
   const {
     data: org,
     setData: setOrg,
@@ -50,12 +52,9 @@ export default function Settings({
     error,
     retry,
     timeout,
-  } = useContinuous(emptyOrg, updateRemote, updateLocal);
+  } = useContinuous(initialData, updateRemote, updateLocal);
 
-  useEffect(() => {
-    const idx = orgs.findIndex((o: Org) => o.id === orgId);
-    if (idx >= 0) setOrg(orgs[idx]);
-  }, [orgs, orgId, setOrg]);
+  const settingsContextValue = useMemo(() => ({ org, setOrg }), [org, setOrg]);
 
   return (
     <>
@@ -99,7 +98,7 @@ export default function Settings({
           </div>
         </div>
         <div className={styles.right}>
-          <SettingsContext.Provider value={{ org, setOrg }}>
+          <SettingsContext.Provider value={settingsContextValue}>
             {children}
           </SettingsContext.Provider>
         </div>

diff --git a/components/settings/signup.tsx b/components/settings/signup.tsx
@@ -1,12 +1,12 @@
-import { useCallback, FormEvent } from 'react';
+import { FormEvent, useCallback } from 'react';
 import { TextField } from '@rmwc/textfield';
 import useTranslation from 'next-translate/useTranslation';
 
 import { Aspect } from 'lib/model/aspect';
 import { Org } from 'lib/model/org';
 
-import { useSettings } from './context';
 import styles from './settings.module.scss';
+import { useSettings } from './context';
 
 export default function Signup(): JSX.Element {
   const { t, lang: locale } = useTranslation();

diff --git a/lib/hooks/social-props.ts b/lib/hooks/social-props.ts
@@ -1,5 +1,5 @@
-import { useCallback, FormEvent } from 'react';
-import { TextFieldProps, TextFieldHTMLProps } from '@rmwc/textfield';
+import { FormEvent, useCallback } from 'react';
+import { TextFieldHTMLProps, TextFieldProps } from '@rmwc/textfield';
 import useTranslation from 'next-translate/useTranslation';
 
 import { Account, SocialInterface, SocialTypeAlias } from 'lib/model/account';