From 01b2a42830a2eb02f2fbdc42df4c2ee88547533c Mon Sep 17 00:00:00 2001
From: Elaine <eyw2008@gmail.com>
Date: Thu, 19 Dec 2019 10:34:59 -0500
Subject: [PATCH] adjusted json scripts & server start messages

---
 .gitignore                                    |   1 +
 .../Questions/AddModal/ImageUpload.jsx        |  78 ++++-----
 dist/styles.css                               | 156 ++++--------------
 package.json                                  |  12 +-
 server/index.js                               |   5 +-
 5 files changed, 79 insertions(+), 173 deletions(-)

diff --git a/.gitignore b/.gitignore
index 60fcd8c..592bcd7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,6 +71,7 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.prod
 .env.test
 
 # parcel-bundler cache (https://parceljs.org/)
diff --git a/client/components/Questions/AddModal/ImageUpload.jsx b/client/components/Questions/AddModal/ImageUpload.jsx
index bf5bf96..ec95c82 100644
--- a/client/components/Questions/AddModal/ImageUpload.jsx
+++ b/client/components/Questions/AddModal/ImageUpload.jsx
@@ -3,46 +3,48 @@ import React, { useState } from 'react';
 import ThumbnailGallery from '../ThumbnailGallery';
 
 const ImageUpload = ({ updatePhotos }) => {
-  const [imagePreviews, setImagePreviews] = useState([]);
-  const [error, setError] = useState('');
-  const uploadImage = event => {
-    const files = Array.from(event.target.files);
-    if (!files) {
-      setError('Please select at least 1 image.');
-    } else if (files.length > 5) {
-      setError('Please choose only 5 images!');
-    } else {
-      const formData = new FormData();
-      files.forEach((file, i) => {
-        formData.append(i, file);
-      });
-      axios
-        .post('/img', formData)
-        .then(res => {
-          updatePhotos(res.data);
-          setImagePreviews(res.data);
-          setError('');
-        })
-        .catch(() => setError('An error occurred. Please try again.'));
-    }
-  };
+    const [imagePreviews, setImagePreviews] = useState([]);
+    const [error, setError] = useState('');
+    const uploadImage = event => {
+        const files = Array.from(event.target.files);
+        if (!files) {
+            setError('Please select at least 1 image.');
+        } else if (files.length > 5) {
+            setError('Please choose only 5 images!');
+        } else {
+            const formData = new FormData();
+            files.forEach((file, i) => {
+                formData.append(i, file);
+            });
+            axios
+                .post('/img', formData)
+                .then(res => {
+                    updatePhotos(res.data);
+                    setImagePreviews(res.data);
+                    setError('');
+                })
+                .catch(() => setError('An error occurred. Please try again.'));
+        }
+    };
 
-  return (
-    <>
-      <label htmlFor="images">
-        Please upload up to 5 images of your product
+    return (
+        <>
+            <label htmlFor="images">
+                Please upload up to 5 images of your product
       </label>
-      <input
-        id="file"
-        name="file"
-        type="file"
-        onChange={uploadImage}
-        multiple
-      />
-      <ThumbnailGallery imageURLs={imagePreviews} />
-      {error !== '' ? <div className="form-error">{error}</div> : <></>}
-    </>
-  );
+            <input
+                id="file"
+                name="file"
+                type="file"
+                onChange={uploadImage}
+                multiple
+            />
+            <ThumbnailGallery imageURLs={imagePreviews} />
+
+
+            {error !== '' ? <div className="form-error">{error}</div> : <></>}
+        </>
+    );
 };
 
 export default ImageUpload;
diff --git a/dist/styles.css b/dist/styles.css
index bfdd0af..b7369dc 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -10,87 +10,7 @@
 |/   \__/(_______/\_______)(_______/   )_(   \_______)
                                                        */
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video,
-input,
-button,
-span {
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button, span {
   margin: 0;
   padding: 0;
   border: 0;
@@ -100,17 +20,7 @@ span {
   font-family: 'Open Sans', sans-serif;
 }
 
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block;
 }
 
@@ -119,20 +29,15 @@ body {
   font-size: 1rem;
 }
 
-ol,
-ul {
+ol, ul {
   list-style: none;
 }
 
-blockquote,
-q {
+blockquote, q {
   quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none;
 }
@@ -159,8 +64,7 @@ a:focus {
   text-decoration: none;
 }
 
-a:hover,
-a:active {
+a:hover, a:active {
   text-decoration: none;
 }
 
@@ -269,10 +173,17 @@ strong {
 
 .thumbnail {
   margin-right: 10px;
-  height: 15em;
+  height: 3em;
   width: auto;
 }
 
+.upload-previews {
+  max-width: 50vw;
+  max-height: 10vh;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
 /*
  _______  _______  _______  _______  _______ 
 (  ____ \(  ___  )(  ____ )(       )(  ____ \
@@ -295,11 +206,7 @@ label {
   display: flex;
 }
 
-input[type='email'],
-input[type='text'],
-input[type='number'],
-textarea,
-select {
+input[type='email'], input[type='text'], input[type='number'], textarea, select {
   border: var(--color) 1px solid;
   padding: 0.5em;
 }
@@ -404,8 +311,7 @@ select {
   margin: 5px 10px 10px 10px;
 }
 
-#left-description,
-#right-description {
+#left-description, #right-description {
   text-align: left;
 }
 
@@ -624,8 +530,7 @@ select {
   position: relative;
 }
 
-#expanded-left,
-#expanded-right {
+#expanded-left, #expanded-right {
   position: absolute;
   top: 50%;
 }
@@ -801,19 +706,19 @@ select {
   margin: 10px 0px 0px 0px;
 }
 
-.answers > span > #first {
+.answers>span>#first {
   margin: 1em 0px;
 }
 
-.answers > span > #more {
+.answers>span>#more {
   margin: 2em 0px 0.7em 15px;
 }
 
-.answers > span > #answerer {
+.answers>span>#answerer {
   margin-left: 15px;
 }
 
-.answers > #load-more {
+.answers>#load-more {
   margin-top: 1.2em;
   margin-left: 15px;
   font-size: 0.8em;
@@ -827,8 +732,7 @@ select {
   height: 50px;
 }
 
-#add-question-form > input,
-#add-question-form > textarea {
+#add-question-form>input, #add-question-form>textarea {
   width: 400px;
 }
 
@@ -853,14 +757,11 @@ img.uploadIcon {
                                                                
  */
 
-#size-rating-container,
-#comfort-rating-container,
-#star-stats-container {
+#size-rating-container, #comfort-rating-container, #star-stats-container {
   margin: 10px 5px 5px 10px;
 }
 
-#review-list-container,
-#review-stats-container {
+#review-list-container, #review-stats-container {
   margin: 10px 5px 5px 10px;
 }
 
@@ -1091,8 +992,7 @@ img.uploadIcon {
   color: red;
 }
 
-#add-review-form > input,
-#add-review-form > textarea {
+#add-review-form>input, #add-review-form>textarea {
   width: 400px;
 }
 
@@ -1102,7 +1002,7 @@ img.uploadIcon {
   align-items: center;
 }
 
-#sort-menu > select {
+#sort-menu>select {
   margin-left: 1%;
   border: none;
   background-color: white;
@@ -1111,11 +1011,11 @@ img.uploadIcon {
   border-radius: 0;
 }
 
-#sort-menu > select:focus {
+#sort-menu>select:focus {
   outline: none;
 }
 
 .underline-clickable {
   text-decoration: underline;
   cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 0958244..b5ac08f 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,12 @@
     "verbose": true
   },
   "scripts": {
-    "test": "jest",
-    "test_coverage": "jest --coverage",
-    "test_start": "node server/index.js && jest",
-    "start": "nodemon server/index.js",
+    "build": "webpack --mode=production",
+    "test": "node server/index.js && jest",
+    "start": "node server",
     "build-dev": "webpack -d --watch",
-    "build-prod": "webpack --mode=production"
+    "test-coverage": "jest --coverage",
+    "start-dev": "nodemon server/index.js"
   },
   "repository": {
     "type": "git",
@@ -76,4 +76,4 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   }
-}
+}
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 5c0bed5..efe9c9f 100644
--- a/server/index.js
+++ b/server/index.js
@@ -31,6 +31,9 @@ server.post('/img', (req, res) => {
     .catch(err => res.status(500).send(err));
 });
 
+const startMessage = process.env.ENVIRONMENT === "production" ?
+  `Server started on Port ${port}! ${root}/products/1` :
+  `Server started! ${root}:${port}/products/1`
 server.listen(port, () =>
-  console.log(`Server started! ${root}:${port}/products/1`)
+  console.log(startMessage)
 );