Multiple Changes

* Added Support for multiple Email Services(Yopmail, Dispostable).[Remeic#32]
* Added Button For Direct Mailbox access.[Remeic#33]
* Isolated Config from components.
* Introduced Goober for styling[Some help with Remeic#31]
* Refactored Code into Smaller Components.

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "goober": "^2.0.6",
     "node-polyglot": "^2.3.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-scripts": "1.1.5",
+    "react-select": "^3.1.0",
     "react-toastify": "^5.4.0"
   },
   "scripts": {

src/App.js

@@ -1,17 +1,25 @@
 import React, { Component } from "react";
-import "./App.css";
-import Mail from "./Mail";
+import { ToastContainer } from "react-toastify";
+import { styled } from "goober";
+import Title from './components/Title';
+import MailGenerator from "./containers/MailGenerator";
+import AttributionMessage from "./components/AttributionMessage";
+import {TITLE_TEXT} from './config/generalConfig'
+
+const StyledApp = styled("div")`
+    text-align: center; 
+    padding-top: 5%;
+`;
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <h1 className="title">Genesia</h1>
-        <Mail />
-        <h4 className="thanks">
-          Thanks to <a href="http://mailnesia.com/">Mailnesia</a>
-        </h4>
-      </div>
+      <StyledApp>
+        <Title titleText={TITLE_TEXT}/>
+        <MailGenerator />
+        <AttributionMessage />
+        <ToastContainer autoClose={4000} />
+      </StyledApp>
     );
   }
 }

src/components/AttributionMessage/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  MAIL_SERVICES_HOMEPAGES,
+  MAIL_SERVICE_NAMES,
+  ALL_MAIL_SERVICES,
+} from "../../config";
+import { styled } from "goober";
+
+const StyledMailServiceAttribution = styled("a")`
+  margin-right: 10px;
+  color: inherit;
+  text-decoration: underline;
+`;
+
+const MailServiceAttribution = ({ link, name }) => (
+  <StyledMailServiceAttribution target="_blank" href={link}>
+    {name}
+  </StyledMailServiceAttribution>
+);
+
+const StyledAttributionMessage = styled("h4")`
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  color: white;
+`;
+
+export default function AttributionMessage() {
+  return (
+    <StyledAttributionMessage>
+      Thanks to{" "}
+      {ALL_MAIL_SERVICES.map((serviceKey) => (
+        <MailServiceAttribution
+          key={serviceKey}
+          link={MAIL_SERVICES_HOMEPAGES[serviceKey]}
+          name={MAIL_SERVICE_NAMES[serviceKey]}
+        />
+      ))}
+    </StyledAttributionMessage>
+  );
+}

src/components/MailActions/index.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { getMessage } from "../../utils/transaltionUtils";
+import { styled } from "goober";
+
+const StyledAction = styled("button")`
+  display: inline-block;
+  position: relative;
+  line-height: 32px;
+  border-radius: 2px;
+  font-size: 0.9em;
+  background-color: #fff;
+  color: #646464;
+  padding: 0.3rem 1.3rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 5%;
+`;
+
+
+const Action = (props) => {
+  const { actionCallback, messageId, emoji, emojiLabel } = props;
+  return (
+    <StyledAction onClick={actionCallback}>
+      {getMessage(messageId)}{" "}
+      <span role="img" aria-label={emojiLabel}>
+        {emoji}
+      </span>
+    </StyledAction>
+  );
+};
+
+const StyledMailActions = styled("div")((props) => ({
+  width: "80%",
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-around",
+  padding: "0% 5% 0% 5%",
+  "@media(min-width: 992px)": {
+    flexDirection: "row",
+    padding: "0",
+  },
+}));
+
+const MailActions = (props) => {
+  const {
+    copyMailIdToClipboard,
+    generateMailName,
+    openMailBoxInNewTab,
+  } = props;
+
+  const ACTION_BUTTONS_CONFIG = [
+    {
+      actionCallback: copyMailIdToClipboard,
+      messageId: "copy",
+      emoji: "📄",
+      emojiLabel: "sheet",
+    },
+    {
+      actionCallback: generateMailName,
+      messageId: "generate",
+      emoji: "⚡️",
+      emojiLabel: "zap",
+    },
+    {
+      actionCallback: openMailBoxInNewTab,
+      messageId: "gotomailbox",
+      emoji: "🚀",
+      emojiLabel: "rocket",
+    },
+  ];
+
+  return (
+    <StyledMailActions>
+      {ACTION_BUTTONS_CONFIG.map((config) => (
+        <Action
+          key={config.messageId}
+          actionCallback={config.actionCallback}
+          messageId={config.messageId}
+          emoji={config.emoji}
+          emojiLabel={config.emojiLabel}
+        />
+      ))}
+    </StyledMailActions>
+  );
+};
+
+export default MailActions;

src/components/MailBoxNameInput/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { styled } from "goober";
+
+const StyledMailboxNameInput = styled("input")`
+  background: none;
+  border: 2px solid white;
+  line-height: 2;
+  border-radius: 4px;
+  color: white;
+  text-align: center;
+  width: 40%;
+  flex-grow: 4
+`;
+
+export default function MailboxNameInput(props) {
+  const { mailBoxName, changeMailBoxName } = props;
+  return (
+    <StyledMailboxNameInput
+      type="name"
+      id="name"
+      value={mailBoxName}
+      onChange={changeMailBoxName}
+      readOnly
+    />
+  );
+}

src/components/MailDisplay/index.js

@@ -0,0 +1,47 @@
+
+import React from "react";
+import { styled } from "goober";
+import MailboxNameInput from "../MailBoxNameInput";
+import MailServiceSelector from "../MailServiceSelector";
+
+const StyledMailDisplay = styled("div")((props) => ({
+  color: "white",
+  fontWeight: "bold",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  fontSize: "1em",
+  "@media(min-width: 992px)": {
+    flexDirection: "row",
+    fontSize: "1.5em",
+    justifyContent: "space-between",
+    alignItems: "stretch",
+    paddingBottom: "5%" 
+  },
+}));
+
+
+export default function MailDisplay(props) {
+  const {
+    mailBoxName,
+    mailServiceDomain,
+    changeMailService,
+    changeMailBoxName,
+  } = props;
+
+  return (
+    <StyledMailDisplay>
+      <MailboxNameInput
+        key="mailboxNameInput"
+        mailBoxName={mailBoxName}
+        changeMailBoxName={changeMailBoxName}
+      />
+      <h2 style={{flexGrow: "1" }}>@</h2>
+      <MailServiceSelector
+        key="mailServiceSelector"
+        mailServiceDomain={mailServiceDomain}
+        changeMailService={changeMailService}
+      />
+    </StyledMailDisplay>
+  );
+}