From 04e13d50fda99586e33915bcd33f1d6a9f3d9681 Mon Sep 17 00:00:00 2001 From: Fernando Porazzi Date: Wed, 18 May 2022 11:17:25 +0200 Subject: [PATCH] Migrate ProfileDialog to Dialogs folder Convert ProfileDialog component to Typescript and co-locate it inside the dialogs folder --- frontend/src/components/BottomBar.js | 209 ++--------- .../src/components/Dialogs/ProfileDialog.tsx | 328 ++++++++++++++++++ frontend/src/components/Dialogs/index.ts | 1 + 3 files changed, 352 insertions(+), 186 deletions(-) create mode 100644 frontend/src/components/Dialogs/ProfileDialog.tsx diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js index 80c33e97..4a6f0bd5 100644 --- a/frontend/src/components/BottomBar.js +++ b/frontend/src/components/BottomBar.js @@ -22,13 +22,16 @@ import PasswordIcon from '@mui/icons-material/Password'; import ContentCopy from "@mui/icons-material/ContentCopy"; import DnsIcon from '@mui/icons-material/Dns'; import WebIcon from '@mui/icons-material/Web'; -import BookIcon from '@mui/icons-material/Book'; import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt'; import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; import FavoriteIcon from '@mui/icons-material/Favorite'; import { AmbossIcon , BitcoinSignIcon} from "./Icons"; -import { CommunityDialog, ExchangeSummaryDialog } from './Dialogs'; +import { + CommunityDialog, + ExchangeSummaryDialog, + ProfileDialog, +} from './Dialogs'; import { getCookie } from "../utils/cookies"; import { pn } from "../utils/prettyNumbers"; @@ -201,7 +204,7 @@ class BottomBar extends Component { this.setState({openProfile: false}); }; - handleSubmitInvoiceClicked=()=>{ + handleSubmitInvoiceClicked=(rewardInvoice)=>{ this.setState({ badInvoice:false, showRewardsSpinner: true, @@ -211,7 +214,7 @@ class BottomBar extends Component { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ - 'invoice': this.state.rewardInvoice, + 'invoice': rewardInvoice, }), }; fetch('/api/reward/', requestOptions) @@ -230,186 +233,6 @@ class BottomBar extends Component { return url.split('/')[2] } - dialogProfile =() =>{ - const { t } = this.props; - return( - - - {t("Your Profile")} - - - - - - {this.props.nickname ? - - : ""} - - - - - - - - - - {this.state.active_order_id ? - - - - - - - - - : - - this.state.last_order_id ? - - - - - - - : - - - - - - } - - - - - - - {getCookie("robot_token") ? - - (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}> - - - , - }} - /> - : - t("Cannot remember")} - - - - - - - this.setState({showRewards: !this.state.showRewards})}/>} - label={t("Rewards and compensations")} - /> - - -
- - - - - - - navigator.clipboard.writeText('http://'+this.getHost()+'/ref/'+this.state.referral_code)}> - - - , - }} - /> - - - - - - - - {!this.state.openClaimRewards ? - - - - {this.state.earned_rewards+" Sats"} - - - - - - - : -
- - - { - this.setState({ rewardInvoice: e.target.value }); - }} - /> - - - - - -
- } - - - {this.state.showRewardsSpinner? -
- -
- :""} - - {this.state.withdrawn? -
- {t("There it goes, thank you!🥇")} -
- :""} - -
- - - - - ) - } - bottomBarDesktop =()=>{ const { t } = this.props; var hasRewards = this.state.earned_rewards > 0 ? true: false; @@ -418,7 +241,6 @@ bottomBarDesktop =()=>{ return( {this.StatsDialog()} - {this.dialogProfile()} @@ -582,7 +404,6 @@ bottomBarPhone =()=>{ return( {this.StatsDialog()} - {this.dialogProfile()} @@ -696,6 +517,22 @@ bottomBarPhone =()=>{ takerFee={this.state.taker_fee} /> + + {this.bottomBarDesktop()} diff --git a/frontend/src/components/Dialogs/ProfileDialog.tsx b/frontend/src/components/Dialogs/ProfileDialog.tsx new file mode 100644 index 00000000..c6f7b678 --- /dev/null +++ b/frontend/src/components/Dialogs/ProfileDialog.tsx @@ -0,0 +1,328 @@ +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Link as LinkRouter } from "react-router-dom"; + +import { + Avatar, + Badge, + Button, + CircularProgress, + Dialog, + DialogContent, + Divider, + FormControlLabel, + Grid, + IconButton, + List, + ListItemAvatar, + ListItemButton, + ListItemText, + ListItem, + ListItemIcon, + Switch, + TextField, + Tooltip, + Typography, +} from "@mui/material"; + +import BoltIcon from "@mui/icons-material/Bolt"; +import NumbersIcon from "@mui/icons-material/Numbers"; +import PasswordIcon from "@mui/icons-material/Password"; +import ContentCopy from "@mui/icons-material/ContentCopy"; +import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt"; +import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; + +import { getCookie } from "../../utils/cookies"; + +type Props = { + isOpen: boolean; + handleClickCloseProfile: () => void; + nickname: string; + activeOrderId: string | number; + lastOrderId: string | number; + referralCode: string; + handleSubmitInvoiceClicked: (invoice: string) => void; + host: string; + showRewardsSpinner: boolean; + withdrawn: boolean; + badInvoice: boolean | string; + earnedRewards: number; + setAppState: (state: any) => void; // TODO: move to a ContextProvider +} + +const ProfileDialog = ({ + isOpen, + handleClickCloseProfile, + nickname, + activeOrderId, + lastOrderId, + referralCode, + handleSubmitInvoiceClicked, + host, + showRewardsSpinner, + withdrawn, + badInvoice, + earnedRewards, + setAppState, +}: Props): JSX.Element => { + const { t } = useTranslation(); + + const [rewardInvoice, setRewardInvoice] = useState(""); + const [showRewards, setShowRewards] = useState(false); + const [openClaimRewards, setOpenClaimRewards] = useState(false); + + const copyTokenHandler = () => { + const robotToken = getCookie("robot_token"); + + if (robotToken) { + navigator.clipboard.writeText(robotToken); + setAppState({copiedToken:true}); + } + }; + + const copyReferralCodeHandler = () => { + navigator.clipboard.writeText(`http://${host}/ref/${referralCode}`); + }; + + return ( + + + {t("Your Profile")} + + + + + + + + {nickname ? ( +
+
+ + + {nickname} + + +
+
+ ) + : null} + + + + + + + + + + + {activeOrderId ? ( + + + + + + + + + ) : + lastOrderId ? ( + + + + + + + ) : ( + + + + + + + ) + } + + + + + + + + {getCookie("robot_token") ? ( + + + + + , + }} + /> + ) : + t("Cannot remember") + } + + + + + + + + setShowRewards(!showRewards)} + /> + } + /> + + + + {showRewards && ( + <> + + + + + + + + + + + , + }} + /> + + + + + + + + + {!openClaimRewards ? ( + + + + {`${earnedRewards} Sats`} + + + + + + + + ) : ( +
+ + + { + setRewardInvoice(e.target.value); + }} + /> + + + + + + +
+ )} + + + {showRewardsSpinner && ( +
+ +
+ )} + + {withdrawn && ( +
+ + {t("There it goes, thank you!🥇")} + +
+ )} + + )} + + + + ); +}; + +export default ProfileDialog; diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts index 96597467..3d6b0bdc 100644 --- a/frontend/src/components/Dialogs/index.ts +++ b/frontend/src/components/Dialogs/index.ts @@ -4,4 +4,5 @@ export { default as LearnDialog } from "./Learn"; export { default as NoRobotDialog } from "./NoRobot"; export { default as StoreTokenDialog } from "./StoreToken"; export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog"; +export { default as ProfileDialog } from "./ProfileDialog";