From 423c8163892d30b4dc4434416e0e5f1a93eb4235 Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Fri, 6 May 2022 12:30:10 +0200
Subject: [PATCH] Create CommunityDialog component

---
 frontend/src/components/BottomBar.js          |  70 +-------
 .../CommunityDialog/CommunityDialog.tsx       | 151 ++++++++++++++++++
 .../src/components/CommunityDialog/index.ts   |   1 +
 3 files changed, 160 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/components/CommunityDialog/CommunityDialog.tsx
 create mode 100644 frontend/src/components/CommunityDialog/index.ts

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index ab49528f..8209ab6d 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
-import { withTranslation, Trans} from "react-i18next";
+import { withTranslation } from "react-i18next";
 import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 import MediaQuery from 'react-responsive'
 import { Link as LinkRouter } from 'react-router-dom'
-import Flags from 'country-flag-icons/react/3x2'
 
 // Icons
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -16,7 +15,7 @@ import PriceChangeIcon from '@mui/icons-material/PriceChange';
 import BoltIcon from '@mui/icons-material/Bolt';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import EqualizerIcon from '@mui/icons-material/Equalizer';
-import SendIcon from '@mui/icons-material/Send';
+
 import PublicIcon from '@mui/icons-material/Public';
 import NumbersIcon from '@mui/icons-material/Numbers';
 import PasswordIcon from '@mui/icons-material/Password';
@@ -29,6 +28,8 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
+import CommunityDialog from './CommunityDialog';
+
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
 
@@ -65,7 +66,6 @@ class BottomBar extends Component {
     }
 
     componentDidMount() {
-        console.log("mount fernando");
         this.getInfo();
     }
 
@@ -181,62 +181,6 @@ class BottomBar extends Component {
         this.setState({openCommuniy: false});
     };
 
-    CommunityDialog =() =>{
-        const { t } = this.props;
-
-        return(
-        <Dialog
-        open={this.state.openCommuniy}
-        onClose={this.handleClickCloseCommunity}
-        aria-labelledby="community-dialog-title"
-        aria-describedby="community-description"
-        >
-        <DialogContent>
-            <Typography component="h5" variant="h5">{t("Community")}</Typography>
-            <Typography component="body2" variant="body2">
-                <p>{t("Support is only offered via public channels. Join our Telegram community if you have questions or want to hang out with other cool robots. Please, use our Github Issues if you find a bug or want to see new features!")}</p>
-            </Typography>
-            <List>
-                <Divider/>
-
-                <ListItemButton component="a" target="_blank" href="https://t.me/robosats">
-                    <ListItemIcon><SendIcon/></ListItemIcon>
-                    <ListItemText primary={t("Join the RoboSats group")}
-                    secondary={t("Telegram (English / Main)")}/>
-                </ListItemButton>
-                <Divider/>
-
-                <ListItem>
-                    <ListItemIcon><SendIcon/></ListItemIcon>
-                    <ListItemText secondary={t("RoboSats Telegram Communities")}>
-                        <Tooltip title={t("Join RoboSats Spanish speaking community!")}>
-                            <IconButton component="a" target="_blank" href="https://t.me/robosats_es"><Flags.ES width={30} height={30} style={{filter: 'drop-shadow(2px 2px 2px #444444)'}}/></IconButton>
-                        </Tooltip>
-                        <Tooltip title={t("Join RoboSats Russian speaking community!")}>
-                            <IconButton component="a" target="_blank" href="https://t.me/robosats_ru"><Flags.RU width={30} height={30} style={{filter: 'drop-shadow(2px 2px 2px #444444)'}}/></IconButton>
-                        </Tooltip>
-                        <Tooltip title={t("Join RoboSats Chinese speaking community!")}>
-                            <IconButton component="a" target="_blank" href="https://t.me/robosats_cn"><Flags.CN width={30} height={30} style={{filter: 'drop-shadow(2px 2px 2px #444444)'}}/></IconButton>
-                        </Tooltip>
-                        <Tooltip title={t("Join RoboSats English speaking community!")}>
-                            <IconButton component="a" target="_blank" href="https://t.me/robosats"><Flags.US width={30} height={30} style={{filter: 'drop-shadow(2px 2px 2px #444444)'}}/></IconButton>
-                        </Tooltip>
-                    </ListItemText>
-                </ListItem>
-                <Divider/>
-
-                <ListItemButton component="a" target="_blank" href="https://github.com/Reckless-Satoshi/robosats/issues">
-                    <ListItemIcon><GitHubIcon/></ListItemIcon>
-                    <ListItemText primary={t("Tell us about a new feature or a bug")}
-                    secondary={t("Github Issues - The Robotic Satoshis Open Source Project")}/>
-                </ListItemButton>
-
-            </List>
-            </DialogContent>
-        </Dialog>
-    )
-    }
-
     handleClickOpenProfile = () => {
         this.getInfo();
         this.setState({openProfile: true, profileShown: true});
@@ -448,7 +392,6 @@ bottomBarDesktop =()=>{
     return(
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
-                {this.CommunityDialog()}
                 {this.dialogProfile()}
                 {this.exchangeSummaryDialog()}
                 <Grid container xs={12}>
@@ -709,7 +652,6 @@ bottomBarPhone =()=>{
     return(
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
-                {this.CommunityDialog()}
                 {this.exchangeSummaryDialog()}
                 {this.dialogProfile()}
                 <Grid container xs={12}>
@@ -806,6 +748,10 @@ bottomBarPhone =()=>{
     render() {
         return (
             <div>
+                <CommunityDialog
+                    isOpen={this.state.openCommuniy}
+                    handleClickCloseCommunity={this.handleClickCloseCommunity}
+                />
                 <MediaQuery minWidth={1200}>
                     {this.bottomBarDesktop()}
                 </MediaQuery>
diff --git a/frontend/src/components/CommunityDialog/CommunityDialog.tsx b/frontend/src/components/CommunityDialog/CommunityDialog.tsx
new file mode 100644
index 00000000..53f59073
--- /dev/null
+++ b/frontend/src/components/CommunityDialog/CommunityDialog.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  Divider,
+  IconButton,
+  List,
+  ListItemText,
+  ListItem,
+  ListItemIcon,
+  ListItemButton,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import SendIcon from '@mui/icons-material/Send';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import Flags from 'country-flag-icons/react/3x2'
+
+type Props = {
+  isOpen: boolean;
+  handleClickCloseCommunity: () => void;
+}
+
+const CommunityDialog = ({
+  isOpen,
+  handleClickCloseCommunity,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const flagProps = {
+    width: 30,
+    height: 30,
+    style: {
+      filter: "drop-shadow(2px 2px 2px #444444)",
+    },
+  };
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClickCloseCommunity}
+      aria-labelledby="community-dialog-title"
+      aria-describedby="community-description"
+    >
+      <DialogContent>
+        <Typography component="h5" variant="h5">
+          {t("Community")}
+        </Typography>
+
+        <Typography component="div" variant="body2">
+          <p>{t("Support is only offered via public channels. Join our Telegram community if you have questions or want to hang out with other cool robots. Please, use our Github Issues if you find a bug or want to see new features!")}</p>
+        </Typography>
+
+        <List>
+          <Divider/>
+
+          <ListItemButton
+            component="a"
+            target="_blank"
+            href="https://t.me/robosats"
+            rel="noreferrer"
+          >
+            <ListItemIcon>
+              <SendIcon/>
+            </ListItemIcon>
+
+            <ListItemText
+              primary={t("Join the RoboSats group")}
+              secondary={t("Telegram (English / Main)")}
+            />
+          </ListItemButton>
+
+          <Divider/>
+
+          <ListItem>
+            <ListItemIcon>
+              <SendIcon/>
+            </ListItemIcon>
+
+            <ListItemText secondary={t("RoboSats Telegram Communities")}>
+              <Tooltip title={t("Join RoboSats Spanish speaking community!") || ""}>
+                <IconButton
+                  component="a"
+                  target="_blank"
+                  href="https://t.me/robosats_es"
+                  rel="noreferrer"
+                >
+                  <Flags.ES {...flagProps} />
+                </IconButton>
+              </Tooltip>
+
+              <Tooltip title={t("Join RoboSats Russian speaking community!") || ""}>
+                <IconButton
+                  component="a"
+                  target="_blank"
+                  href="https://t.me/robosats_ru"
+                  rel="noreferrer"
+                >
+                  <Flags.RU {...flagProps} />
+                </IconButton>
+              </Tooltip>
+
+              <Tooltip title={t("Join RoboSats Chinese speaking community!") || ""}>
+                <IconButton
+                  component="a"
+                  target="_blank"
+                  href="https://t.me/robosats_cn"
+                  rel="noreferrer"
+                >
+                  <Flags.CN {...flagProps} />
+                </IconButton>
+              </Tooltip>
+
+              <Tooltip title={t("Join RoboSats English speaking community!") || ""}>
+                <IconButton
+                  component="a"
+                  target="_blank"
+                  href="https://t.me/robosats"
+                  rel="noreferrer"
+                >
+                  <Flags.US {...flagProps} />
+                </IconButton>
+              </Tooltip>
+            </ListItemText>
+          </ListItem>
+
+          <Divider/>
+
+          <ListItemButton
+            component="a"
+            target="_blank"
+            href="https://github.com/Reckless-Satoshi/robosats/issues"
+            rel="noreferrer"
+          >
+            <ListItemIcon>
+              <GitHubIcon/>
+            </ListItemIcon>
+
+            <ListItemText
+              primary={t("Tell us about a new feature or a bug")}
+              secondary={t("Github Issues - The Robotic Satoshis Open Source Project")}
+            />
+          </ListItemButton>
+        </List>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CommunityDialog;
diff --git a/frontend/src/components/CommunityDialog/index.ts b/frontend/src/components/CommunityDialog/index.ts
new file mode 100644
index 00000000..804be987
--- /dev/null
+++ b/frontend/src/components/CommunityDialog/index.ts
@@ -0,0 +1 @@
+export { default } from "./CommunityDialog";