Create Additional Modals, But Hide Them For Now

README.md

@@ -22,3 +22,4 @@
 ### File Structure
 
 - I REALLY don't recommend any file layout / naming conventions from this frontend repo. It's still evolving and changing as I think through patterns. There are some parts I'm super embarrassed by.
+- I'm much more of a backend engineer, so I'm pretty embarrassed by the quality of some of my code here ... Don't judge me too hard.

src/components/Common/Dividers.js

@@ -0,0 +1,10 @@
+import React, { Fragment } from "react";
+import Divider from "@material-ui/core/Divider";
+
+export const DividerSection = (
+  <Fragment>
+    <br />
+    <Divider />
+    <br />
+  </Fragment>
+);

src/components/Common/Modals.js

@@ -0,0 +1,34 @@
+import { makeStyles } from "@material-ui/core";
+
+export function getModalStyle() {
+  const top = 50;
+  const left = 50;
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`
+  };
+}
+
+export const useModalStyles = makeStyles(theme => ({
+  paper: {
+    position: "absolute",
+    width: 600,
+    backgroundColor: theme.palette.background.paper,
+    border: "2px solid #000",
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 4),
+    outline: "none"
+  },
+  button: {
+    marginTop: "1rem",
+    // don't judge me TOO HARD for using float
+    // but you should still judge me a little.
+    float: "right"
+  },
+  textField: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  }
+}));

src/components/MainComponent/Main.js

@@ -23,6 +23,10 @@ import moment from "moment";
 import { LinearIndeterminate } from "components/Loading";
 import { SettingsModal } from "components/SettingsModalComponent/SettingsModal";
 import { WebSocketURL } from "components/MainComponent/constants";
+import Button from "@material-ui/core/Button/Button";
+import Grid from "@material-ui/core/Grid/Grid";
+import { PublishModal } from "components/PublishModalComponent/PublishModal";
+import { TutorialModal } from "components/TutorialModalComponent/TutorialModal";
 
 export class _MainComponent extends React.Component {
   constructor(props) {
@@ -46,7 +50,10 @@ export class _MainComponent extends React.Component {
       temperature: 0.7,
       top_k: 10,
       length: 40,
-      batch_size: 4
+      batch_size: 4,
+      settingsModalOpen: false,
+      publishModalOpen: false,
+      tutorialModalOpen: false
     };
   }
 
@@ -101,7 +108,7 @@ export class _MainComponent extends React.Component {
   };
 
   ////////////////////
-  // websocket handles
+  // websocket handling
   ////////////////////
   handleWebSocketData = data => {
     const messageSerialized = JSON.parse(data);
@@ -313,47 +320,105 @@ export class _MainComponent extends React.Component {
   };
 
   //////
-  // settings helpers
+  // settings & modal helpers
   //////
   setSettings = setting => value => {
     this.setState({ [setting]: value });
   };
 
   applySettings = () => {
     // This whole function is to make the user feel powerful
-    // it force a websocket call with the updated parameters
+    // it forces a websocket call with the updated setting choices
+    // kind of unnecessary lol
     this.sendTextToWebSocket();
-    this.setModal();
+    this.setModal("settingsModalOpen");
   };
 
-  setModal = () => {
-    this.setState({ modalOpen: !this.state.modalOpen });
+  setModal = modalStateName => () => {
+    const currentModalState = this.state[modalStateName];
+    this.setState({ [modalStateName]: !currentModalState });
   };
 
-  renderModal = () => {
-    if (!this.state.modalOpen) {
+  renderSettingsModal = () => {
+    if (!this.state.settingsModalOpen) {
       return null;
     }
 
     return (
       <SettingsModal
-        modalOpen={this.state.modalOpen}
-        setModal={this.setModal}
+        modalOpen={this.state.settingsModalOpen}
+        setModal={this.setModal("settingsModalOpen")}
         settings={this.state}
         setSettings={this.setSettings}
         applySettings={this.applySettings}
       />
     );
   };
 
+  renderPublishModal = () => {
+    if (!this.state.publishModalOpen) {
+      return null;
+    }
+
+    return (
+      <PublishModal
+        modalOpen={this.state.publishModalOpen}
+        setModal={this.setModal("publishModalOpen")}
+        settings={this.state}
+        setSettings={this.setSettings}
+      />
+    );
+  };
+
+  renderTutorialModal = () => {
+    if (!this.state.tutorialModalOpen) {
+      return null;
+    }
+
+    return (
+      <TutorialModal
+        modalOpen={this.state.tutorialModalOpen}
+        setModal={this.setModal("tutorialModalOpen")}
+        settings={this.state}
+        setSettings={this.setSettings}
+      />
+    );
+  };
+
+  renderModals = () => {
+    return (
+      <Fragment>
+        {this.renderSettingsModal()}
+        {/*{this.renderPublishModal()}*/}
+        {/*{this.renderTutorialModal()}*/}
+      </Fragment>
+    );
+  };
+
+  renderPublishButton = () => {
+    const classes = this.props;
+
+    return (
+      <Grid container direction="row" justify="flex-end" alignItems="center">
+        <Button
+          variant="contained"
+          color="secondary"
+          className={classes.button}
+          onClick={this.setModal("publishModalOpen")}
+        >
+          Publish
+        </Button>
+      </Grid>
+    );
+  };
+
   render() {
     const { classes } = this.props;
 
     return (
       <Fragment>
-        <TopbarComponent setModal={this.setModal} />
-        {this.renderModal()}
-
+        <TopbarComponent setModal={this.setModal("settingsModalOpen")} />
+        {this.renderModals()}
         <div className={classes.root} onKeyDown={this.onKeyPressed}>
           <GridLayout classes={classes}>
             <Paper className={classes.paper}>
@@ -370,6 +435,7 @@ export class _MainComponent extends React.Component {
                     autoFocus={true}
                     ref={this.textEditorRef}
                   />
+                  {/*{this.renderPublishButton()}*/}
                   {DividerSection}
                 </Typography>
                 {this.state.textPrompts.length > 0 ? (
@@ -385,9 +451,9 @@ export class _MainComponent extends React.Component {
                   <LinearIndeterminate />
                 )}
               </div>
-              {/*<LearnMoreButton classes={classes} />*/}
             </Paper>
             <br />
+
             <MainFooter classes={classes} />
           </GridLayout>
         </div>

src/components/MainComponent/utilities.js

@@ -14,13 +14,13 @@ import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import MouseIcon from "@material-ui/icons/Mouse";
 import Paper from "@material-ui/core/Paper/Paper";
 
-// these are cached for a day to have a much faster loading time
+// these are cached for a day to have a much faster loading time for the user
 const PROMPTS_TO_USE = [
-  //"The software innovations in the 20th century ",
-  "Climate change has "
-  //"The breakthrough in ",
-  //"Cancer research has revolutionized ",
-  //"Recent developments in "
+  "The software innovations in the 20th century ",
+  "Climate change has ",
+  "The breakthrough in ",
+  "Cancer research has revolutionized ",
+  "Recent developments in "
 ];
 
 export const initialValue = Value.fromJSON({

src/components/PublishModalComponent/PublishModal.js

@@ -0,0 +1,74 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import { getModalStyle, useModalStyles } from "components/Common/Modals";
+import TextField from "@material-ui/core/TextField/TextField";
+
+export const PublishModal = ({
+  modalOpen,
+  setModal,
+  settings,
+  setSettings,
+  applySettings
+}) => {
+  const classes = useModalStyles();
+
+  const [modalStyle] = React.useState(getModalStyle);
+  const handleSettingsChange = setting => (event, value) => {
+    setSettings(setting)(value);
+  };
+
+  return (
+    <Modal
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+      open={modalOpen}
+      onClose={setModal}
+    >
+      <div style={modalStyle} className={classes.paper}>
+        <br />
+        <Typography variant={"h4"} align={"center"} gutterBottom>
+          Publish Changes
+        </Typography>
+        <Typography variant={"body1"}>
+          Present your composition to the world.
+        </Typography>
+        <form className={classes.container} noValidate autoComplete="off">
+          <TextField
+            id="outlined-full-width"
+            label="Title"
+            className={classes.textField}
+            value={""}
+            //value={"Title"}
+            helperText="Shown at the beginning of your article."
+            //onChange={handleChange('name')}
+            fullWidth
+            margin="normal"
+            variant="outlined"
+          />
+          <TextField
+            id="outlined-full-width"
+            label="Email"
+            className={classes.textField}
+            //value={values.name}
+            value={""}
+            helperText="If you want to show your email next to your article. Optional."
+            //onChange={handleChange('name')}
+            fullWidth
+            margin="normal"
+            variant="outlined"
+          />
+        </form>
+        <Button
+          variant="contained"
+          color="secondary"
+          className={classes.button}
+          onClick={applySettings}
+        >
+          Publish!
+        </Button>
+      </div>
+    </Modal>
+  );
+};