From 07a16cbb98516a4e82d9cb79b29f44daa660f5fa Mon Sep 17 00:00:00 2001 From: StevesBro <63659507+StevesBro@users.noreply.github.com> Date: Thu, 30 Jul 2020 16:58:39 -0400 Subject: [PATCH] Reduce number of times backend grabs avatar (#553) --- src/backend/localStorage.tsx | 8 ++++++++ src/components/AppBar/UserMenu.tsx | 20 +++++++++----------- src/components/Login/LoginActions.tsx | 16 ++++++++++++---- src/components/UserSettings/AvatarUpload.tsx | 15 +++++++++------ src/components/UserSettings/UserSettings.tsx | 11 +++++------ 5 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/backend/localStorage.tsx b/src/backend/localStorage.tsx index 9b94a1bcad..9a01c327e9 100644 --- a/src/backend/localStorage.tsx +++ b/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") || ""; +} diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx index d47bf483ce..60cf771fd1 100644 --- a/src/components/AppBar/UserMenu.tsx +++ b/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 && ( { - setProjectId(""); + LocalStorage.setProjectId(""); history.push("/site-settings"); }} > diff --git a/src/components/Login/LoginActions.tsx b/src/components/Login/LoginActions.tsx index ef725e016c..7f243bad07 100644 --- a/src/components/Login/LoginActions.tsx +++ b/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, 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) => { diff --git a/src/components/UserSettings/AvatarUpload.tsx b/src/components/UserSettings/AvatarUpload.tsx index a154b81ae0..9a15842af1 100644 --- a/src/components/UserSettings/AvatarUpload.tsx +++ b/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) { + async function upload(e: React.FormEvent) { 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); diff --git a/src/components/UserSettings/UserSettings.tsx b/src/components/UserSettings/UserSettings.tsx index 3f0b579a82..93e4cb64f6 100644 --- a/src/components/UserSettings/UserSettings.tsx +++ b/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 */