diff --git a/client/src/App.js b/client/src/App.js
index 8bfc8bf..ed657c4 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,9 +3,9 @@ import './App.css';
import Header from './components/header/Header';
import Quiz from './components/quiz/Quiz';
-
+import Signup from './components/Signup';
import Logo from './quizLogo.svg';
-
+import Hello from './components/Hello';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
@@ -13,30 +13,46 @@ import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/ico
const { SubMenu } = Menu;
-class App extends React.Component {
+class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
+ this.onSearch = this.onSearch.bind(this);
this.state = {
current: 'mail',
- quiz: '2'
+ title: "Quiz Master",
+ serve: ""
};
-
-}
+ }
+
+ componentDidMount() {
+ this.setState({ serve: })
+ }
+
+
+
+
handleClick = e => {
-
+ if (e.key === "Signup"){
+ console.log("Signup clicked");
+ this.setState({ serve: })
+ }else{
+
console.log('click ', e.key);
- //this.setState({ current: e.key });
- this.setState({ quiz: e.key })
-
+ this.setState({ current: e.key });
+ this.setState({ quiz: e.key,
+ serve: });
+
+ }
};
- onSearch(term){
- console.log("Search on term" + term);
+ onSearch(term) {
+ console.log("Search on term " + term);
+ this.setState({ title: term });
}
render() {
@@ -44,35 +60,30 @@ class App extends React.Component {
return (
-
+
+
+
-
+ {this.state.serve}
@@ -84,33 +95,7 @@ class App extends React.Component {
}
}
-export default App;
-
-
-
-
-/*
-
-class App extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- welcome: "Josh"
- }
- }
- render() {
- return (
-
-
-
-
-
- );
- }
-}
export default App;
-*/
diff --git a/client/src/components/Hello.js b/client/src/components/Hello.js
index dd52422..c017000 100644
--- a/client/src/components/Hello.js
+++ b/client/src/components/Hello.js
@@ -23,7 +23,7 @@ class Hello extends React.Component {
Hello {this.props.name}
+ style={{ color: this.state.color }}>Hello {this.props.name}
)
}
diff --git a/client/src/components/Signup.js b/client/src/components/Signup.js
index 31d3d6e..b22eeeb 100644
--- a/client/src/components/Signup.js
+++ b/client/src/components/Signup.js
@@ -133,82 +133,79 @@ class RegistrationForm extends React.Component {
);
return (
-
- {getFieldDecorator('username', {
- rules: [
- {
- type: 'email',
- message: 'The input is not a valid E-mail',
- },
- {
- required: true,
- message: 'Please input your E-mail',
- },
- ],
- })()}
-
-
-
-
-
- {getFieldDecorator('password', {
- rules: [
- {
- required: true,
- message: 'Please input your password',
- },
- {
- min: 6,
- message: 'password should be at least 6 characters long',
- },
- {
- validator: this.validateToNextPassword,
- },
- ],
- })()}
-
-
-
-
- {getFieldDecorator('passwordConfirmation', {
- rules: [
- {
- required: true,
- message: 'Please confirm your password!',
- },
- {
- validator: this.compareToFirstPassword,
- },
- ],
- })()}
-
-
-
- {getFieldDecorator('agreement', {
- valuePropName: 'checked',
- })(
-
- I have read the agreement
+
+
+ {getFieldDecorator('username', {
+ rules: [
+ {
+ type: 'email',
+ message: 'The input is not a valid E-mail',
+ },
+ {
+ required: true,
+ message: 'Please input your E-mail',
+ },
+ ],
+ })()}
+
+
+ {getFieldDecorator('password', {
+ rules: [
+ {
+ required: true,
+ message: 'Please input your password',
+ },
+ {
+ min: 6,
+ message: 'password should be at least 6 characters long',
+ },
+ {
+ validator: this.validateToNextPassword,
+ },
+ ],
+ })()}
+
+
+
+
+ {getFieldDecorator('passwordConfirmation', {
+ rules: [
+ {
+ required: true,
+ message: 'Please confirm your password!',
+ },
+ {
+ validator: this.compareToFirstPassword,
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator('agreement', {
+ valuePropName: 'checked',
+ })(
+
+ I have read the agreement
,
- )}
-
+ )}
+
-
-
-
- {this.state.showSuccess ? : null}
- {this.state.showError ? : null}
-
+
+ {this.state.showSuccess ? : null}
+ {this.state.showError ? : null}
+
-
+
+
);
}
}
diff --git a/client/src/components/header/Header.js b/client/src/components/header/Header.js
index 211c9c9..48fe209 100644
--- a/client/src/components/header/Header.js
+++ b/client/src/components/header/Header.js
@@ -11,7 +11,7 @@ class Header extends Component {
constructor(props) {
super(props);
this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
- //this.handleTextChange = this.handleTextChange.bind(this);
+ this.handleTextChange = this.handleTextChange.bind(this);
this.state = {
searchTerm: ""
@@ -22,9 +22,11 @@ class Header extends Component {
handleSearchSubmit(event){
event.preventDefault();
this.props.onSearchClick(this.state.searchTerm);
+ this.setState({ searchTerm: ""})
}
handleTextChange(event){
- this.setState({searchTerm: event.target.value})
+ console.log(event.target);
+ this.setState({searchTerm: event.target.value});
}
render() {
diff --git a/client/src/components/quiz/Quiz.js b/client/src/components/quiz/Quiz.js
index 715d908..40215fd 100644
--- a/client/src/components/quiz/Quiz.js
+++ b/client/src/components/quiz/Quiz.js
@@ -3,7 +3,7 @@ import './Quiz.css';
import Question from '../question/Question.js';
import QuizHead from './QuizHead.js';
-
+//import equal from 'fast-deep-equal'
@@ -11,17 +11,21 @@ class Quiz extends React.Component {
constructor(props) {
super(props);
+ this.updateQuiz = this.updateQuiz.bind(this);
this.state = {
questions: [],
title: 'Quiz',
instructions: "Answer them",
- timeAllowed: "no"
+ timeAllowed: "no",
+ quizNum: this.props.quizNum
}
}
-
- componentDidMount() {
- fetch("http://localhost:3000/api/v1.0/quiz/questions_by_id/" + this.props.quizNum)
+updateQuiz(){
+ this.setState({
+ questions: []
+ })
+ fetch("http://localhost:3000/api/v1.0/quiz/questions_by_id/" + this.state.quizNum)
.then(res => res.json())
.then(
(result) => {
@@ -40,7 +44,7 @@ class Quiz extends React.Component {
)
- fetch("http://localhost:3000/api/v1.0/quiz/quiz_by_id/" + this.props.quizNum)
+ fetch("http://localhost:3000/api/v1.0/quiz/quiz_by_id/" + this.state.quizNum)
.then(res => res.json())
.then(
(result) => {
@@ -59,8 +63,21 @@ class Quiz extends React.Component {
});
}
)
+}
+ componentDidMount() {
+ this.updateQuiz();
}
+ componentDidUpdate(prevProps) {
+
+ if(prevProps.quizNum !== this.props.quizNum){
+ this.setState({
+ quizNum: this.props.quizNum
+ });
+ this.updateQuiz();
+ }
+ }
+
render() {
return (