#110 Refactor useCurrentAgent, set only once

Author: joepio

data-browser/src/routes/SettingsAgent.tsx

@@ -74,16 +74,23 @@ const SettingsAgent: React.FunctionComponent = () => {
     }
   }
 
+  function setAgentIfChanged(oldAgent: Agent, newAgent: Agent) {
+    if (JSON.stringify(oldAgent) !== JSON.stringify(newAgent)) {
+      setAgent(newAgent);
+    }
+  }
+
   /** Called when the secret or the subject is updated manually */
   async function handleUpdateSubjectAndKey() {
     renewSecret();
     setError(null);
 
     try {
-      const agent = new Agent(privateKey, subject);
-      await agent.getPublicKey();
-      await agent.checkPublicKey();
-      setAgent(agent);
+      const newAgent = new Agent(privateKey, subject);
+      await newAgent.getPublicKey();
+      await newAgent.checkPublicKey();
+
+      setAgentIfChanged(agent, newAgent);
     } catch (e) {
       const err = new Error('Invalid Agent' + e);
       setError(err);
@@ -105,11 +112,11 @@ const SettingsAgent: React.FunctionComponent = () => {
     setError(null);
 
     try {
-      const agent = Agent.fromSecret(updateSecret);
-      await agent.checkPublicKey();
-      setAgent(agent);
-      setPrivateKey(agent.privateKey);
-      setSubject(agent.subject);
+      const newAgent = Agent.fromSecret(updateSecret);
+      await newAgent.checkPublicKey();
+      setAgentIfChanged(agent, newAgent);
+      setPrivateKey(newAgent.privateKey);
+      setSubject(newAgent.subject);
     } catch (e) {
       const err = new Error('Invalid secret. ' + e);
       setError(err);

data-browser/src/views/EndpointPage.tsx

@@ -58,7 +58,6 @@ function EndpointPage({ resource }: EndpointProps): JSX.Element {
               key={param}
               propertyURL={param}
               resource={virtualResource}
-            // autoFocus={i == 0}
             />
           );
         })}

lib/src/store.ts

@@ -278,11 +278,12 @@ export class Store {
   setAgent(agent: Agent): void {
     this.agent = agent;
     // TODO: maybe iterate over all loaded resources, check if they have an Unauthorized error, and retry these.
-    this.resources.forEach(r => {
-      if (r.isUnauthorized()) {
-        this.fetchResource(r.getSubject());
-      }
-    });
+    agent &&
+      this.resources.forEach(r => {
+        if (r.isUnauthorized()) {
+          this.fetchResource(r.getSubject());
+        }
+      });
   }
 
   /** Sets the Base URL, without the trailing slash. */

react/src/useCurrentAgent.ts

@@ -16,33 +16,24 @@ export const useCurrentAgent = (): [Agent | null, (agent?: Agent) => void] => {
     AGENT_LOCAL_STORAGE_KEY,
     null,
   );
+  const store = useStore();
   // In memory representation of the full Agent
-  const [agent, setAgent] = useState<Agent>(null);
+  const [stateAgent, setStateAgent] = useState<Agent>(store.getAgent());
   // Also update the Agent inside the store
-  const store = useStore();
 
-  // Set the initial agent, is set using Store
-  useEffect(() => {
-    if (agent == undefined) {
-      setAgent(store.getAgent());
-    }
-  }, []);
-
-  // When the localStorage JSON agent is updated, also update the in-memory agent
+  // When the localStorage JSON agent is updated, also update the in-memory agent and the Store
   useEffect(() => {
     if (agentJSON == null) {
-      setAgent(null);
+      setStateAgent(null);
+      store.setAgent(null);
       return;
     }
-    setAgent(Agent.fromJSON(agentJSON));
+    const newAgent = Agent.fromJSON(agentJSON);
+    setStateAgent(newAgent);
+    store.setAgent(newAgent);
   }, [agentJSON]);
 
-  // ... and when the in memory agent is updated, update the store agent
-  useEffect(() => {
-    store.setAgent(agent);
-  }, [agent]);
-
-  return [agent, setAgentJSON];
+  return [stateAgent, setAgentJSON];
 };
 
 /** Gets the Agent from local storage, if any. Useful when initializing app */