Frontend - requestSecret Mutation and createAccount Mutation

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "prettier.printWidth": 100,
+  "prettier.printWidth": 70,
   "prettier.javascriptEnable": ["javascript", "javascriptreact"],
   "prettier.bracketSpacing": true,
   "python.terminal.activateEnvironment": false

src/Components/App.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { gql } from "apollo-boost";
 import styled, { ThemeProvider } from "styled-components";
+import { useQuery } from "react-apollo-hooks";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import GlobalStyles from "../Styles/GlobalStyles";
 import Theme from "../Styles/Theme";
 import AppRouter from "./Router";
-import { useQuery } from "react-apollo-hooks";
 import Footer from "./Footer";
 
 const QUERY = gql`
@@ -30,6 +32,7 @@ export default () => {
         <GlobalStyles />
         <AppRouter isLoggedIn={isLoggedIn} />
         <Footer />
+        <ToastContainer position={toast.POSITION.BOTTOM_LEFT} />
       </Wrapper>
     </ThemeProvider>
   );

src/Components/Input.js

@@ -12,10 +12,28 @@ const Container = styled.input`
   padding: 0px 15px;
 `;
 
-const Input = ({ placeholder }) => <Container placeholder={placeholder} />;
+const Input = ({
+  placeholder,
+  required = true,
+  value,
+  onChange,
+  type
+}) => (
+  <Container
+    placeholder={placeholder}
+    required={required}
+    value={value}
+    onChange={onChange}
+    type={type}
+  />
+);
 
 Input.propTypes = {
-  placeholder: PropTypes.string.isRequired
+  placeholder: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  type: PropTypes.string
 };
 
 export default Input;

src/Hooks/useInput.js

@@ -0,0 +1,13 @@
+import { useState } from "react";
+export default defaultValue => {
+  const [value, setValue] = useState(defaultValue);
+
+  const onChange = e => {
+    const {
+      target: { value }
+    } = e;
+    setValue(value);
+  };
+
+  return { value, onChange };
+};

src/Routes/Auth/AuthContainer.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import AuthPresenter from "./AuthPresenter";
+import useInput from "../../Hooks/useInput";
+import { useMutation } from "react-apollo-hooks";
+import { LOG_IN, CREATE_ACCOUNT } from "./AuthQueries";
+import { toast } from "react-toastify";
+
+export default () => {
+  const [action, setAction] = useState("logIn");
+  const username = useInput("");
+  const firstName = useInput("");
+  const lastName = useInput("");
+  const email = useInput("");
+  const [requestSecret] = useMutation(LOG_IN, {
+    variables: { email: email.value },
+    update: (_, { data }) => {
+      const { requestSecret } = data;
+      if (!requestSecret) {
+        toast.error("You don't have an account. Please Sign up!");
+        setTimeout(() => setAction("signUp"), 3000);
+      }
+    }
+  });
+  const [createAccount] = useMutation(CREATE_ACCOUNT, {
+    variables: {
+      email: email.value,
+      username: username.value,
+      firstName: firstName.value,
+      lastName: lastName.value
+    }
+  });
+  const onLogin = e => {
+    e.preventDefault();
+    if (email.value !== "") {
+      requestSecret();
+    }
+  };
+
+  return (
+    <AuthPresenter
+      setAction={setAction}
+      action={action}
+      username={username}
+      firstName={firstName}
+      lastName={lastName}
+      email={email}
+      onLogin={onLogin}
+    />
+  );
+};

src/Routes/Auth/AuthPresenter.js

@@ -0,0 +1,86 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import Input from "../../Components/Input";
+import Button from "../../Components/Button";
+
+const Wrapper = styled.div`
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const Box = styled.div`
+  ${props => props.theme.whiteBox}
+  border-radius: 0px;
+  width: 100%;
+  max-width: 350px;
+`;
+
+const StateChanger = styled(Box)`
+    text-align: center;
+    padding 20px 0px;
+`;
+
+const Form = styled(Box)`
+  padding: 40px;
+  padding-bottom: 30px;
+  margin-bottom: 15px;
+  form {
+    width: 100%;
+    input {
+      width: 100%;
+      &:not(:last-child) {
+        margin-bottom: 7px;
+      }
+    }
+    button {
+      margin-top: 10px;
+    }
+  }
+`;
+
+export default ({
+  action,
+  setAction,
+  firstName,
+  lastName,
+  username,
+  email,
+  onLogin
+}) => (
+  <Wrapper>
+    <Form>
+      {action === "logIn" ? (
+        <form onSubmit={onLogin}>
+          <Input placeholder={"Email"} {...email} type="email" />
+          <Button text={"Log in"} />
+        </form>
+      ) : (
+        <form onSubmit={onLogin}>
+          <Input placeholder={"First name"} {...firstName} />
+          <Input placeholder={"Last name"} {...lastName} />
+          <Input placeholder={"Email"} {...email} type="email" />
+          <Input placeholder={"Username"} {...username} />
+          <Button text={"Sign up"} />
+        </form>
+      )}
+    </Form>
+
+    <StateChanger>
+      {action === "logIn" ? (
+        <>
+          Don't have an account?{" "}
+          <Link onClick={() => setAction("signUp")}>Sign up</Link>
+        </>
+      ) : (
+        <>
+          Have an account?{" "}
+          <Link onClick={() => setAction("logIn")}>Log in</Link>
+        </>
+      )}
+    </StateChanger>
+  </Wrapper>
+);

src/Routes/Auth/AuthQueries.js

@@ -0,0 +1,25 @@
+import { gql } from "apollo-boost";
+
+export const LOG_IN = gql`
+  mutation requestSecret($email: String!) {
+    requestSecret(email: $email)
+  }
+`;
+
+export const CREATE_ACCOUNT = gql`
+  mutation createAccount(
+    $username: String!
+    $email: String!
+    $firstName: String
+    $lastName: String
+    $bio: String
+  ) {
+    createAccount(
+      username: $username
+      email: $email
+      firstName: $firstName
+      lastName: $lastName
+      bio: $bio
+    )
+  }
+`;

src/Routes/Auth/index.js

@@ -0,0 +1,2 @@
+import AuthContainer from "./AuthContainer";
+export default AuthContainer;