From d589dc276ba5b8c5878ed0d745b47bec22bc78d0 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Tue, 1 Feb 2022 11:43:33 -0800
Subject: [PATCH] Improve avatars responsiveness

---
 frontend/src/components/BookPage.js    | 23 +++++++++++++++++++++--
 frontend/src/components/BottomBar.js   | 14 ++++++++++----
 frontend/src/components/HomePage.js    |  1 +
 frontend/src/components/UserGenPage.js |  8 ++++++--
 frontend/static/css/index.css          | 17 ++++++++++++++++-
 setup.md                               |  2 +-
 6 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index 99382a3a..771b9f4e 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -3,6 +3,7 @@ import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Sel
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
 import MediaQuery from 'react-responsive'
+import Image from 'material-ui-image'
 
 import getFlags from './getFlags'
 
@@ -93,7 +94,15 @@ export default class BookPage extends Component {
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
                 <ListItemAvatar>
-                  <Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
+                  <div style={{ width: 48, height: 48 }}>
+                    <Image className='bookAvatar' 
+                        disableError='true'
+                        disableSpinner='true'
+                        color='null'
+                        alt={params.row.robosat}
+                        src={params.row.avatar}
+                    />
+                  </div>
                 </ListItemAvatar>
                 <ListItemText primary={params.row.robosat}/>
               </ListItemButton>
@@ -147,7 +156,17 @@ export default class BookPage extends Component {
           { field: 'robosat', headerName: 'Robot', width: 80, 
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
-                <Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
+                <ListItemAvatar>
+                  <div style={{ width: 48, height: 48 }}>
+                    <Image className='bookAvatar' 
+                        disableError='true'
+                        disableSpinner='true'
+                        color='null'
+                        alt={params.row.robosat}
+                        src={params.row.avatar}
+                    />
+                  </div>
+                </ListItemAvatar>
               </ListItemButton>
             );
           } },
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 7ec0487d..463d13c2 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -55,7 +55,7 @@ export default class BottomBar extends Component {
         fetch('/api/info/')
           .then((response) => response.json())
           .then((data) => this.setState(data) &
-          this.props.setAppState({nickname:data.nickname}));
+          this.props.setAppState({nickname:data.nickname, loading:false}));
       }
 
     handleClickOpenStatsForNerds = () => {
@@ -202,7 +202,7 @@ export default class BottomBar extends Component {
                     <ListItemAvatar>
                     <Avatar className='profileAvatar' 
                         sx={{ width: 65, height:65 }}
-                        alt={this.props.nickname} 
+                        alt={this.props.nickname}
                         src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
                         />
                     </ListItemAvatar>
@@ -469,14 +469,20 @@ bottomBarPhone =()=>{
                 <Grid container xs={12}>
 
                     <Grid item xs={1.6}>
-                    <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, top: -13, }} >
+                    <div style={{display: this.props.avatarLoaded ? '':'none'}}>
+                    <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
                         <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
-                            <Avatar className='flippedSmallAvatar' 
+                            <Avatar className='phoneFlippedSmallAvatar'
+                            sx={{ width: 65, height:65 }} 
                             alt={this.props.nickname} 
+                            imgProps={{
+                                onLoad:() => this.props.setAppState({avatarLoaded: true}),
+                            }} 
                             src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
                             />
                         </Badge>
                     </IconButton>
+                    </div>
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 59d84bb6..23b35202 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -13,6 +13,7 @@ export default class HomePage extends Component {
       this.state = {
         nickname: null,
         token: null,
+        avatarLoaded: false,
       }
     }
   
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index c263a5b5..28676e5b 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -33,6 +33,7 @@ export default class UserGenPage extends Component {
       loadingRobot: true,
       tokenHasChanged: false,
     };
+    this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
     this.getGeneratedUser(this.state.token);
   }
 
@@ -64,11 +65,13 @@ export default class UserGenPage extends Component {
         // Add nick and token to App state (token only if not a bad request)
         (data.bad_request ? this.props.setAppState({
           nickname: data.nickname,
+          avatarLoaded: false,
         })
         :
         this.props.setAppState({
           nickname: data.nickname,
           token: this.state.token,
+          avatarLoaded: false,
       }));
       });
   }
@@ -98,9 +101,10 @@ export default class UserGenPage extends Component {
   }
 
   handleClickSubmitToken=()=>{
-    this.delGeneratedUser()
+    this.delGeneratedUser();
     this.getGeneratedUser(this.state.token);
-    this.setState({loadingRobot: true, tokenHasChanged: false})
+    this.setState({loadingRobot: true, tokenHasChanged: false});
+    this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
   }
 
   handleClickOpenInfo = () => {
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 53be5963..82a9164c 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -43,7 +43,6 @@ body {
 }
 
 .newAvatar {
-  background-color:white; 
   border-radius: 50%; 
   border: 2px solid #555; 
   filter: drop-shadow(1px 1px 1px #000000);
@@ -66,4 +65,20 @@ body {
   transform: scaleX(-1);
   border: 0.3px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.phoneFlippedSmallAvatar {
+  transform: translate(-20, -20);
+  bottom: 50;
+  right: 50;
+  transform: scaleX(-1);
+  border: 0.8px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.bookAvatar {
+  border-radius: 50%; 
+  transform: scaleX(-1);
+  border: 0.3px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
 }
\ No newline at end of file
diff --git a/setup.md b/setup.md
index 8bdb232e..e3fa3d7a 100644
--- a/setup.md
+++ b/setup.md
@@ -131,7 +131,7 @@ npm install react-qr-reader
 ```
 Note we are using mostly MaterialUI V5 (@mui/material) but Image loading from V4 (@material-ui/core) extentions (so both V4 and V5 are needed)
 
-### Launch the React render
+### Launch
 from frontend/ directory
 `npm run dev`