Fix smooth avatar loading. Run prettier

This commit is contained in:
Reckless_Satoshi 2022-09-10 11:02:30 -07:00
parent c62a6369b0
commit cb6475a3f4
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
6 changed files with 55 additions and 45 deletions

View File

@ -69,12 +69,14 @@ export default class App extends Component {
onClose={() => this.setState({ openLearn: false })} onClose={() => this.setState({ openLearn: false })}
/> />
<IconButton <IconButton
color='inherit'
sx={{ position: 'fixed', right: '34px' }} sx={{ position: 'fixed', right: '34px' }}
onClick={() => this.setState({ openLearn: true })} onClick={() => this.setState({ openLearn: true })}
> >
<SchoolIcon /> <SchoolIcon />
</IconButton> </IconButton>
<IconButton <IconButton
color='inherit'
sx={{ position: 'fixed', right: '0px' }} sx={{ position: 'fixed', right: '0px' }}
onClick={() => this.setState({ dark: !this.state.dark })} onClick={() => this.setState({ dark: !this.state.dark })}
> >

View File

@ -173,8 +173,11 @@ class BottomBar extends Component {
bottomBarDesktop = () => { bottomBarDesktop = () => {
const { t } = this.props; const { t } = this.props;
const hasRewards = this.props.earnedRewards > 0; const hasRewards = this.props.earnedRewards > 0;
const hasOrder = const hasOrder = !!(
!!((this.props.activeOrderId > 0) & !this.state.profileShown & this.props.avatarLoaded); (this.props.activeOrderId > 0) &
!this.state.profileShown &
this.props.avatarLoaded
);
const fontSize = this.props.theme.typography.fontSize; const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14 const fontSizeFactor = fontSize / 14; // default fontSize is 14
const typographyProps = { const typographyProps = {
@ -482,8 +485,11 @@ class BottomBar extends Component {
bottomBarPhone = () => { bottomBarPhone = () => {
const { t } = this.props; const { t } = this.props;
const hasRewards = this.props.earnedRewards > 0; const hasRewards = this.props.earnedRewards > 0;
const hasOrder = const hasOrder = !!(
!!((this.state.active_order_id > 0) & !this.state.profileShown & this.props.avatarLoaded); (this.state.active_order_id > 0) &
!this.state.profileShown &
this.props.avatarLoaded
);
return ( return (
<Paper elevation={6} style={{ height: 40 }}> <Paper elevation={6} style={{ height: 40 }}>
<Grid container> <Grid container>

View File

@ -445,9 +445,11 @@ class MakerPage extends Component {
disabled={this.state.enableAmountRange} disabled={this.state.enableAmountRange}
variant={this.state.enableAmountRange ? 'filled' : 'outlined'} variant={this.state.enableAmountRange ? 'filled' : 'outlined'}
error={ error={
!!((this.state.amount < this.getMinAmount() || !!(
this.state.amount > this.getMaxAmount()) & (this.state.amount < this.getMinAmount() ||
(this.state.amount != '')) this.state.amount > this.getMaxAmount()) &
(this.state.amount != '')
)
} }
helperText={ helperText={
(this.state.amount < this.getMinAmount()) & (this.state.amount != '') (this.state.amount < this.getMinAmount()) & (this.state.amount != '')
@ -615,8 +617,8 @@ class MakerPage extends Component {
handleChangePublicDuration = (date) => { handleChangePublicDuration = (date) => {
const d = new Date(date); const d = new Date(date);
const hours = d.getHours(); const hours = d.getHours();
const minutes = d.getMinutes(); const minutes = d.getMinutes();
const total_secs = hours * 60 * 60 + minutes * 60; const total_secs = hours * 60 * 60 + minutes * 60;
@ -628,8 +630,8 @@ class MakerPage extends Component {
handleChangeEscrowDuration = (date) => { handleChangeEscrowDuration = (date) => {
const d = new Date(date); const d = new Date(date);
const hours = d.getHours(); const hours = d.getHours();
const minutes = d.getMinutes(); const minutes = d.getMinutes();
const total_secs = hours * 60 * 60 + minutes * 60; const total_secs = hours * 60 * 60 + minutes * 60;

View File

@ -202,7 +202,7 @@ class UserGenPage extends Component {
align='center' align='center'
sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }} sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }}
> >
{!this.state.loadingRobot && this.state.avatarUrl ? ( {this.props.avatarLoaded && this.state.avatarUrl ? (
<div> <div>
<Grid item xs={12} align='center'> <Grid item xs={12} align='center'>
<Typography component='h5' variant='h5'> <Typography component='h5' variant='h5'>

View File

@ -1,6 +1,6 @@
export const median = (arr: number[]) => { export const median = (arr: number[]) => {
const mid = Math.floor(arr.length / 2); const mid = Math.floor(arr.length / 2);
const nums = [...arr].sort((a, b) => a - b); const nums = [...arr].sort((a, b) => a - b);
return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
}; };

View File

@ -1,45 +1,45 @@
import { pn, amountToString } from "./prettyNumbers"; import { pn, amountToString } from './prettyNumbers';
describe("prettyNumbers", () => { describe('prettyNumbers', () => {
test("pn()", () => { test('pn()', () => {
[ [
{input: null, output: undefined}, { input: null, output: undefined },
{input: undefined, output: undefined}, { input: undefined, output: undefined },
{input: 0, output: "0"}, { input: 0, output: '0' },
{input: 1, output: "1"}, { input: 1, output: '1' },
{input: 2, output: "2"}, { input: 2, output: '2' },
{input: 10, output: "10"}, { input: 10, output: '10' },
{input: 11, output: "11"}, { input: 11, output: '11' },
{input: 11.0, output: "11"}, { input: 11.0, output: '11' },
{input: 12.0, output: "12"}, { input: 12.0, output: '12' },
{input: 100.50, output: "100.5"}, { input: 100.5, output: '100.5' },
{input: 224.56, output: "224.56"}, { input: 224.56, output: '224.56' },
{input: 1567, output: "1,567"}, { input: 1567, output: '1,567' },
{input: 15678, output: "15,678"}, { input: 15678, output: '15,678' },
{input: 2984.99, output: "2,984.99"}, { input: 2984.99, output: '2,984.99' },
{input: 100000.00, output: "100,000"}, { input: 100000.0, output: '100,000' },
].forEach((it) => { ].forEach((it) => {
const response = pn(it.input); const response = pn(it.input);
expect(response).toBe(it.output); expect(response).toBe(it.output);
}); });
}); });
}) });
describe("amountToString", () => { describe('amountToString', () => {
test("pn()", () => { test('pn()', () => {
[ [
{input: null, output: "NaN"}, { input: null, output: 'NaN' },
{input: undefined, output: "NaN"}, { input: undefined, output: 'NaN' },
{input: ["", false, 50, 150] , output: "0"}, { input: ['', false, 50, 150], output: '0' },
{input: ["100.00", false, 50, 150] , output: "100"}, { input: ['100.00', false, 50, 150], output: '100' },
{input: ["100.00", true, undefined, undefined] , output: "NaN-NaN"}, { input: ['100.00', true, undefined, undefined], output: 'NaN-NaN' },
{input: ["100.00", true, undefined, 150] , output: "NaN-150"}, { input: ['100.00', true, undefined, 150], output: 'NaN-150' },
{input: ["100.00", true, 50, undefined] , output: "50-NaN"}, { input: ['100.00', true, 50, undefined], output: '50-NaN' },
{input: ["100.00", true, 50, 150] , output: "50-150"}, { input: ['100.00', true, 50, 150], output: '50-150' },
].forEach((it) => { ].forEach((it) => {
const params: any[] = it.input || [] const params: any[] = it.input || [];
const response = amountToString(params[0],params[1],params[2],params[3]); const response = amountToString(params[0], params[1], params[2], params[3]);
expect(response).toBe(it.output); expect(response).toBe(it.output);
}); });
}); });
}) });