feat: working feedback modal, fix photographers list on about page

src/components/modals/feedback/Feedback.jsx

@@ -2,24 +2,93 @@ import React from 'react';
 
 import './feedback.scss';
 
-export default function FeedbackModal(props) {
-  return (
-    <div className='feedback'>
-      <h1>{props.language.modals.feedback.title}</h1>
-      <span className='closeModal' onClick={props.modalClose}>&times;</span>
-      <label>{props.language.modals.feedback.question_one}</label>
-      <br/><br/>
-      <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
-      <br/><br/>
-      <label>{props.language.modals.feedback.question_two}</label>
-      <br/><br/>
-      <input type='text'/>
-      <br/><br/>
-      <label>{props.language.modals.feedback.question_three}</label>
-      <br/><br/>
-      <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
-      <br/><br/><br/>
-      <button>{props.language.modals.feedback.submit}</button>
-    </div>
-  );
+export default class FeedbackModal extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      questionone: 5,
+      questionthree: 5,
+      questiontwoerror: '',
+      questionfourerror: '',
+      formsubmit: ''
+    };
+  }
+
+  async submitForm () {
+    let questiontwoerror, questionfourerror;
+
+    if (document.getElementById('questiontwo').value.length <= 0) {
+      questiontwoerror = 'Question box must be filled';
+    }
+
+    if (document.getElementById('questionfour').value.length <= 0) {
+      questionfourerror = 'Question box must be filled';
+    }
+
+    if (questiontwoerror || questionfourerror) {
+      this.setState({
+        questiontwoerror: questiontwoerror,
+        questionfourerror: questionfourerror
+      });
+    } else {
+      this.setState({
+        questiontwoerror: '',
+        questionfourerror: ''
+      });
+
+      await fetch(window.constants.FEEDBACK_FORM, {
+        'method': 'POST'
+      });
+
+      this.setState({
+        formsubmit: 'Sent successfully!'
+      });
+
+      setTimeout(() => {
+        this.props.modalClose();
+      }, 3000);
+    }
+  }
+
+  render() {
+    const { feedback } = window.language.modals;
+
+    return (
+      <div className='feedback'>
+        <h1>{feedback.title}</h1>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <>
+          <input type='hidden' name='version' value={window.constants.VERSION} />
+          <>
+            <label>{feedback.question_one}</label>
+            <br/><br/>
+            <label className='values'>0</label>
+            <input className='range' type='range' min='0' max='10' name='question1' value={this.state.questionone} onChange={(e) => this.setState({ questionone: e.target.value })}/>
+            <label className='values'>10 ({this.state.questionone})</label>
+          </>
+          <br/><br/>
+          <>
+            <label>{feedback.question_two}</label>
+            <textarea name='question2' id='questiontwo'/>
+            <p className='feedbackerror'>{this.state.questiontwoerror}</p>
+          </>
+          <>
+            <label>{feedback.question_three}</label>
+            <br/><br/>
+            <label className='values'>0</label>
+            <input className='range' type='range' min='0' max='10' name='question3' value={this.state.questionthree} onChange={(e) => this.setState({ questionthree: e.target.value })}/>
+            <label className='values'>10 ({this.state.questionthree})</label>
+          </>
+          <br/><br/>
+          <>
+            <label>{feedback.question_four}</label>
+            <textarea name='question4' id='questionfour'/>
+            <p className='feedbackerror'>{this.state.questionfourerror}</p>
+          </>
+          {this.state.formsubmit}
+          <button onClick={() => this.submitForm()}>{feedback.submit}</button>
+        </>
+      </div>
+    );
+  }
 }

src/components/modals/feedback/feedback.scss

@@ -25,7 +25,7 @@
   }
 
   button {
-    width: 100%;
+    width: 50%;
     border-radius: 48px;
     outline: none;
     border: none;
@@ -51,4 +51,13 @@
   label.values {
     font-weight: 700;
   }
+
+  textarea {
+    width: 80%;
+    background-color: var(--sidebar);
+  }
+
+  .feedbackerror {
+    color: red;
+  }
 }

src/components/modals/main/settings/Text.jsx

@@ -11,7 +11,7 @@ export default class Text extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  handleChange(e) {
+  handleChange = (e) => {
     const { value } = e.target;
   
     // Alex wanted font to work with montserrat and Montserrat, so I made it work

src/components/modals/main/settings/sections/About.jsx

@@ -45,7 +45,7 @@ export default class About extends React.PureComponent {
       sponsors: sponsors,
       update: updateMsg,
       other_contributors: other_contributors,
-      photographers: photographers.sort(),
+      photographers: photographers.sort().join(', '), 
       loading: null
     });
   }
@@ -94,11 +94,7 @@ export default class About extends React.PureComponent {
         )}
         <h3>{this.language.photographers}</h3>
         {this.state.loading}
-        <p>
-          {this.state.photographers.map((item) => 
-            <>{item}, </>
-          )}
-        </p>
+        <p>{this.state.photographers}</p>
       </>
     );
   }

src/modules/constants.js

@@ -3,7 +3,8 @@ export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'http://127.0.0.1:8080';
 export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
-export const GITHUB_URL = 'https://api.github.com'
+export const GITHUB_URL = 'https://api.github.com';
+export const FEEDBACK_FORM = 'https://api.formcake.com/api/form/349b56cb-7e2b-4004-b32b-e8964d217dd1/submission';
 export const OFFLINE_IMAGES = 20;
-export const BETA_VERSION = true;
+export const BETA_VERSION = false
 export const VERSION = '5.0'; 

src/translations/en_GB.json

@@ -259,6 +259,7 @@
       "question_one": "How would you rate your experience of this Mue build?",
       "question_two": "What bugs did you encounter in your use of Mue?",
       "question_three": "How likely would you be to recommend this version of Mue to a friend or colleague?",
+      "question_four": "What do you want adding to the next Mue build?",
       "submit": "Submit"
     }
   },