diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index 967549e9..fbbe3b9d 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/src/components/modals/feedback/Feedback.jsx
@@ -2,24 +2,93 @@ import React from 'react';
import './feedback.scss';
-export default function FeedbackModal(props) {
- return (
-
-
{props.language.modals.feedback.title}
- ×
- {props.language.modals.feedback.question_one}
-
- 0 10
-
- {props.language.modals.feedback.question_two}
-
-
-
- {props.language.modals.feedback.question_three}
-
- 0 10
-
- {props.language.modals.feedback.submit}
-
- );
+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 (
+
+
{feedback.title}
+
×
+ <>
+
+ <>
+
{feedback.question_one}
+
+
0
+
this.setState({ questionone: e.target.value })}/>
+
10 ({this.state.questionone})
+ >
+
+ <>
+
{feedback.question_two}
+
+
{this.state.questiontwoerror}
+ >
+ <>
+
{feedback.question_three}
+
+
0
+
this.setState({ questionthree: e.target.value })}/>
+
10 ({this.state.questionthree})
+ >
+
+ <>
+
{feedback.question_four}
+
+
{this.state.questionfourerror}
+ >
+ {this.state.formsubmit}
+
this.submitForm()}>{feedback.submit}
+ >
+
+ );
+ }
}
diff --git a/src/components/modals/feedback/feedback.scss b/src/components/modals/feedback/feedback.scss
index c222ce1f..c6eb3acf 100644
--- a/src/components/modals/feedback/feedback.scss
+++ b/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;
+ }
}
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 8b3ae131..647b11c7 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/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
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index cc26572b..cb8f75b5 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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 {
)}
{this.language.photographers}
{this.state.loading}
-
- {this.state.photographers.map((item) =>
- <>{item}, >
- )}
-
+ {this.state.photographers}
>
);
}
diff --git a/src/modules/constants.js b/src/modules/constants.js
index c47a182d..c84e6492 100644
--- a/src/modules/constants.js
+++ b/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';
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 9d49233f..28f66363 100644
--- a/src/translations/en_GB.json
+++ b/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"
}
},