Resolved merge conflict

Dockerfile

@@ -1,6 +1,12 @@
-FROM node:latest
+# Create a NODE image
+FROM node:alpine
+# Make a working directory
 WORKDIR /app
+# Move the package.json to the root folder
 COPY package*.json .
+# Get all our dependencies
 RUN npm install
+# Copy all the content to our working directory
 COPY . /app
-CMD [ "npm" , "start"]
+# Start our application
+CMD [ "npm" , "start"]

README.md

@@ -53,6 +53,24 @@ Add GIFs of the entire web app
 ```
 
 
+## Under the hood:
+
+- React
+- HTML
+- SCSS
+- [React - Bootstrap](https://react-bootstrap.github.io/)
+- [React - Helmet](https://www.npmjs.com/package/react-helmet): Document Head Management
+- [React - Leaflet.js](https://react-leaflet.js.org/): Interactive Maps
+- [React - Dropzone.js](https://react-dropzone.js.org/): Drag and drop file uploads
+- [Rough.js](https://roughjs.com/): Make sketchy, hand drawn figures
+- [Mousetrap](https://github.com/ccampbell/mousetrap): Handling Keyboard shortcuts
+- [ReactJS - Snackbar](https://www.npmjs.com/package/react-js-snackbar): Making snackbars to provide brief messages
+- [React Reveal](https://www.react-reveal.com/): Animations
+- [JSPDF](https://www.npmjs.com/package/jspdf): Generate PDFs
+- [React Scroll](https://www.npmjs.com/package/react-scroll): Smooth Scrolling between sections
+
+
+
 
 ## Wish to fix a bug or add a new feature?[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)🤝🏽🍀:
 

package.json

@@ -31,6 +31,7 @@
     "react-scroll": "^1.8.1",
     "react-useanimations": "^2.0.6",
     "reactstrap": "^8.5.1",
+    "roughjs": "^4.3.1",
     "sass": "^1.32.8",
     "web-vitals": "^0.2.4"
   },

src/pages/Editor/containers/editContext.js

@@ -51,9 +51,8 @@ const EditContextProvider = props => {
       setBodyValues({ ...bodyValues, [e.name]: e.value });
   };
 
-  const downloadAction = e => {
-    e !== undefined && e.preventDefault();
-    if (e !== undefined && e.target.name === "as PDF") {
+  const downloadAction = (name, type) => {
+    if (name && type === "PDF") {
       showToast();
     }
     const node = document.getElementById("outputPage");
@@ -73,11 +72,11 @@ const EditContextProvider = props => {
       .then(dataUrl => {
         const img = new Image();
         img.src = dataUrl;
-        console.log(e.target.name);
-        if (e !== undefined && e.target.name === "as PNG") {
-          downloadURI(dataUrl, "generatedDoc.png");
-        } else if (e !== undefined && e.target.name === "as PDF") {
-          downloadPdf(dataUrl);
+
+        if (type === "PNG") {
+          downloadURI(dataUrl, `${name}.png`);
+        } else if (type === "PDF") {
+          downloadPdf(dataUrl, name);
         }
       })
       .catch(error => {
@@ -102,15 +101,15 @@ const EditContextProvider = props => {
     //   setShowing(false);
     // }, 2000);
   };
-  const downloadPdf = async imgDataUri => {
+  const downloadPdf = async (imgDataUri, name) => {
     const doc = new jsPDF("p", "pt", "a4");
     const width = doc.internal.pageSize.width;
     const height = doc.internal.pageSize.height;
     doc.text(10, 20, "");
     doc.addImage(imgDataUri, "PNG", 0, 0, width, height);
 
     await new Promise((resolve, reject) => { // Wait for PDF download
-      doc.save(); //save PDF
+      doc.save(name + '.pdf'); //save PDF
       resolve(true);
     });
 
@@ -119,6 +118,8 @@ const EditContextProvider = props => {
     setShowing(false);
   };
 
+
+
   const importTxt = e => {
     e.preventDefault();
 

src/pages/Editor/sections/Settings/DownloadFileModal.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import { EditContext } from "../../containers/editContext";
+import styles from "./Settings.module.css";
+const DownloadFileModal = (props) => {
+    const { modal, setModal } = props;
+
+    const editContext = React.useContext(EditContext);
+    const [fileType, setFileType] = React.useState('PNG');
+    const [value, setValue] = React.useState('');
+    const [valueError, setValueError] = React.useState(null);
+
+    const handleDownloadFile = (e) => {
+        if (!value)
+            setValueError("please provide file name")
+        else {
+            editContext.downloadAction(value, fileType);
+            setModal(false)
+            setValue('');
+            setValueError(null);
+        }
+
+    }
+    const toggle = () => {
+        setModal(!modal);
+        setValue('');
+        setValueError(null);
+    }
+    const files = ['PNG', 'PDF'];
+    return (
+
+        <Modal style={{ marginTop: "200px" }} isOpen={modal} toggle={toggle} >
+
+            <ModalBody>
+                <input
+                    placeholder="What would you like to call the file?"
+                    className={styles.modalInput}
+                    type="text"
+                    id="name"
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)} />
+                <br />
+                {
+                    valueError ? (
+                        <p style={{ color: "red" }}>{valueError}</p>
+                    ) : null
+                }
+
+                <label className={styles.modalLabel} > Export as : </label>
+                <br />
+                {
+                    files.map((file) => {
+                        return (
+                            <button
+                                onClick={() => setFileType(file)}
+                                style={{ backgroundColor: fileType === file ? "#103f5f" : "#add8e6", color: fileType === file ? "white" : "black" }}
+                                className={styles.downloadLabelButton}
+                                key={Math.random()}>{file} {fileType === file ? '*' : null}</button>
+                        )
+                    })
+                }
+            </ModalBody>
+            <ModalFooter>
+                <Button className={styles.downloadButton} onClick={handleDownloadFile}>Download</Button>{' '}
+                <Button className={styles.closeModal} color="secondary" onClick={toggle}>X</Button>
+            </ModalFooter>
+        </Modal>
+
+
+    )
+
+}
+
+export default DownloadFileModal;

src/pages/Editor/sections/Settings/Settings.js

@@ -1,26 +1,33 @@
 import React, { useContext } from "react";
-
+import DownloadFileModal from "./DownloadFileModal";
 import { EditContext } from "../../containers/editContext";
 import styles from "./Settings.module.css";
 import Dropdown from "../../../../components/Dropdown/Dropdown";
 import NumberSlider from "../../components/Slider/NumberSlider";
+import { Button } from 'reactstrap';
 
 const Settings = () => {
   const editContext = useContext(EditContext);
+  const [modal, setModal] = React.useState(false);
 
+  // Dialogue open
+  const handleopenModal = () => {
+    setModal(true);
+  }
   return (
     <div className={styles.controlPanel}>
       <div className={styles.controls}>
         <div className={styles.group1}>
-          <Dropdown name="Change Color" type="color" items={["black","red","orange","green","blue","dodgerblue","deeppink","darkviolet"]}/>
+          <Dropdown name="Change Color" type="color" items={["black", "red", "orange", "green", "blue", "dodgerblue", "deeppink", "darkviolet"]} />
           <div className={styles.vSeparator}></div>
           <Dropdown
             name="Change Style"
             type="font"
-            items={["HomemadeApple","Caveat","Dawning","IndieFlower","NothingYouCouldDo","Liu","LeagueScript", "Enola","RayFont","RGhandwritten"]}
+            items={["HomemadeApple", "Caveat", "CedarvilleCursive", "Dawning", "IndieFlower", "NothingYouCouldDo", "Liu", "LeagueScript", "Enola", "RayFont", "RGhandwritten"]}
+
           />
           <div className={styles.vSeparator}></div>
-          <Dropdown name="Change Sheet" type="page" items={["Ruled1", "Ruled2", "OnlyMargin", "Blank1", "Blank2"]}/>
+          <Dropdown name="Change Sheet" type="page" items={["Ruled1", "Ruled2", "OnlyMargin", "Blank1", "Blank2"]} />
 
           <div className={styles.vSeparator}></div>
 
@@ -29,12 +36,8 @@ const Settings = () => {
           </label>
           <input id="import" style={{ display: "none" }} type="file" onChange={editContext.importTxt} ></input>
           <div className={styles.vSeparator}></div>
-
-          <Dropdown
-            name="Download"
-            type="download"
-            items={["as PDF", "as PNG"]}
-          />
+          {/* Download functionality */}
+          <Button color="none" onClick={handleopenModal} >Download File</Button>
           <div className={styles.vSeparator}></div>
         </div>
         <NumberSlider
@@ -104,6 +107,9 @@ const Settings = () => {
           initialValue={0}
         />
       </div>
+      <DownloadFileModal
+        modal={modal}
+        setModal={setModal} />
     </div>
   );
 };