Reduce number of times backend grabs avatar (#553)

src/backend/localStorage.tsx

@@ -15,3 +15,11 @@ export function setProjectId(id: string) {
 export function getProjectId(): string {
   return localStorage.getItem("projectId") || "";
 }
+
+export function setAvatar(src: string) {
+  localStorage.setItem("avatar", src);
+}
+
+export function getAvatar(): string {
+  return localStorage.getItem("avatar") || "";
+}

src/components/AppBar/UserMenu.tsx

@@ -1,10 +1,8 @@
 import { Avatar, Button, Menu, MenuItem } from "@material-ui/core";
 import { ExitToApp, Person, SettingsApplications } from "@material-ui/icons";
-import React from "react";
+import React, { useEffect } from "react";
 import { Translate } from "react-localize-redux";
-
-import { avatarSrc } from "../../backend";
-import { getCurrentUser, setProjectId } from "../../backend/localStorage";
+import * as LocalStorage from "../../backend/localStorage";
 import history from "../../history";
 import theme from "../../types/theme";
 
@@ -25,13 +23,13 @@ export default function UserMenu() {
     setAnchorElement(null);
   }
 
-  async function getAvatar() {
-    const user = getCurrentUser()!;
-    const a = await avatarSrc(user);
-    setAvatar(a);
+  function getAvatar() {
+    const userAvatar = LocalStorage.getAvatar();
+    setAvatar(userAvatar!);
   }
-
-  getAvatar();
+  useEffect(() => {
+    getAvatar();
+  });
 
   // Determine if the user is an Admin user.
   const userString = localStorage.getItem("user");
@@ -71,7 +69,7 @@ export default function UserMenu() {
         {isAdmin && (
           <MenuItem
             onClick={() => {
-              setProjectId("");
+              LocalStorage.setProjectId("");
               history.push("/site-settings");
             }}
           >

src/components/Login/LoginActions.tsx

@@ -3,6 +3,7 @@ import history from "../../history";
 import { ThunkAction } from "redux-thunk";
 import { AnyAction } from "redux";
 import * as backend from "../../backend";
+import { getCurrentUser, setAvatar } from "../../backend/localStorage";
 import { User } from "../../types/user";
 import { StoreAction, reset } from "../../rootActions";
 
@@ -59,13 +60,20 @@ export interface UserAction {
 //thunk action creator
 export function asyncLogin(user: string, password: string) {
   return async (dispatch: Dispatch<UserAction>, getState: any) => {
-    dispatch(loginAttempt(user));
-    //attempt to login with server
     await backend
       .authenticateUser(user, password)
-      .then((res: string) => {
-        localStorage.setItem("user", res); //Store tokens
+      .then(async (res: string) => {
+        await localStorage.setItem("user", res); //Store tokens'
         dispatch(loginSuccess(user));
+        var currentUser = getCurrentUser();
+        if (currentUser) {
+          try {
+            var avatar = await backend.avatarSrc(currentUser!);
+            setAvatar(avatar);
+          } catch (e) {
+            setAvatar("");
+          }
+        }
         history.push("/");
       })
       .catch((err) => {

src/components/UserSettings/AvatarUpload.tsx

@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { Grid, Typography } from "@material-ui/core";
 import { Translate } from "react-localize-redux";
 
-import { uploadAvatar } from "../../backend";
+import { uploadAvatar, avatarSrc } from "../../backend";
 import FileInputButton from "../Buttons/FileInputButton";
 import LoadingDoneButton from "../Buttons/LoadingDoneButton";
-import { getCurrentUser } from "../../backend/localStorage";
+import * as LocalStorage from "../../backend/localStorage";
 
 /**
  * Allows the current user to select an image and upload as their avatar
@@ -24,21 +24,24 @@ export default function AvatarUpload(props: { doneCallback?: () => void }) {
     }
   }
 
-  function upload(e: React.FormEvent<EventTarget>) {
+  async function upload(e: React.FormEvent<EventTarget>) {
     e.preventDefault();
     const avatar = file;
 
-    const user = getCurrentUser()!;
+    const user = LocalStorage.getCurrentUser()!;
     if (avatar) {
       setLoading(true);
-      uploadAvatar(user, avatar)
+      await uploadAvatar(user, avatar)
         .then(() => onDone())
         .catch(() => setLoading(false));
     }
   }
 
-  function onDone() {
+  async function onDone() {
     setDone(true);
+    const user = LocalStorage.getCurrentUser()!;
+    const avatar = await avatarSrc(user);
+    LocalStorage.setAvatar(avatar);
     setTimeout(() => {
       if (props.doneCallback) props.doneCallback();
     }, 500);

src/components/UserSettings/UserSettings.tsx

@@ -22,9 +22,9 @@ import { CameraAlt, Email, Person, Phone } from "@material-ui/icons";
 import { User } from "../../types/user";
 import AvatarUpload from "./AvatarUpload";
 import AppBarComponent from "../AppBar/AppBarComponent";
-import { avatarSrc, getUser, updateUser } from "../../backend";
+import { getUser, updateUser } from "../../backend";
 import theme from "../../types/theme";
-import { getCurrentUser } from "../../backend/localStorage";
+import * as LocalStorage from "../../backend/localStorage";
 import { CurrentTab } from "../../types/currentTab";
 
 function AvatarDialog(props: { open: boolean; onClose?: () => void }) {
@@ -95,7 +95,7 @@ class UserSettings extends React.Component<
 > {
   constructor(props: LocalizeContextProps) {
     super(props);
-    const user = getCurrentUser()!;
+    const user = LocalStorage.getCurrentUser()!;
     this.state = {
       user,
       name: user.name,
@@ -107,9 +107,8 @@ class UserSettings extends React.Component<
   }
 
   async getAvatar() {
-    const user = getCurrentUser()!;
-    const a = await avatarSrc(user);
-    this.setState({ avatar: a });
+    var avat = await LocalStorage.getAvatar();
+    this.setState({ avatar: avat });
   }
 
   /** Updates the state to match the value in a textbox */