page selections working

client/src/App.js

@@ -3,76 +3,87 @@ 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';
 
 
 
 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: <Hello /> })
+  }
+
+
+
+
   handleClick = e => {
-
+    if (e.key === "Signup"){
+      console.log("Signup clicked");
+      this.setState({ serve: <Signup /> })
+    }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: <Quiz quizNum={e.key} /> });
+
+    }
   };
 
-  onSearch(term){
-    console.log("Search on term" + term);
+  onSearch(term) {
+    console.log("Search on term " + term);
+    this.setState({ title: term });
   }
 
   render() {
     const { current } = this.state;
     return (
       <div>
 
-        <Header logo={Logo} title="Quiz Master" onSearchClick={this.onSearch} />
+
+
+        <Header logo={Logo} title={this.state.title} onSearchClick={this.onSearch} />
 
         <Menu className="menu" style={{ zIndex: '50' }} onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
-          <Menu.Item key="mail" icon={<MailOutlined />}>
-            Navigation One
+          <Menu.Item key="Signup" icon={<MailOutlined />}>
+            Signup
         </Menu.Item>
           <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
-            Navigation Two
+            Make a quiz
         </Menu.Item>
           <SubMenu icon={<SettingOutlined />} title="Choose a quiz">
-            <Menu.ItemGroup title="Item 1">
+            <Menu.ItemGroup title="Quizes">
               <Menu.Item key="1">Quiz 1</Menu.Item>
               <Menu.Item key="2">Quiz 2</Menu.Item>
-            </Menu.ItemGroup>
-            <Menu.ItemGroup title="Item 2">
-              <Menu.Item key="setting:3">Option 3</Menu.Item>
-              <Menu.Item key="setting:4">Option 4</Menu.Item>
+              <Menu.Item key="3">Quiz 3</Menu.Item>
             </Menu.ItemGroup>
           </SubMenu>
-          <Menu.Item key="alipay">
-            <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-              Navigation Four - Link
-          </a>
-          </Menu.Item>
+
         </Menu>
 
 
         <div>
-          <Quiz quizNum={this.state.quiz} />
+          {this.state.serve}
         </div>
 
 
@@ -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 (
-
-      <div style={{ background: '#EBEBEB', padding: '30px' }}>
-        <Header message="Welcome to QuizMaster" />
-        <Quiz quizNum='3' />
-      </div>
-    );
-  }
-}
 
 export default App;
 
 
-*/

client/src/components/Hello.js

@@ -23,7 +23,7 @@ class Hello extends React.Component {
 
         <h1 onMouseEnter={this.setColor}
             onMouseLeave={this.revertColor}
-            style={{ marginTop: 80, color: this.state.color }}>Hello {this.props.name}</h1>
+            style={{ color: this.state.color }}>Hello {this.props.name}</h1>
         )
 
     }

client/src/components/Signup.js

@@ -133,82 +133,79 @@ class RegistrationForm extends React.Component {
         );
 
         return (
-            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
-
-
-                <Form.Item label="E-mail" hasFeedback validateStatus={this.state.responseStatus} help={this.state.errorMessage}>
-                    {getFieldDecorator('username', {
-                        rules: [
-                            {
-                                type: 'email',
-                                message: 'The input is not a valid E-mail',
-                            },
-                            {
-                                required: true,
-                                message: 'Please input your E-mail',
-                            },
-                        ],
-                    })(<Input addonBefore={prefixEmail} onChange={this.handleEmail} />)}
-                </Form.Item>
-
-
-
-                <Form.Item label="Password" hasFeedback>
-                    {getFieldDecorator('password', {
-                        rules: [
-                            {
-                                required: true,
-                                message: 'Please input your password',
-                            },
-                            {
-                                min: 6,
-                                message: 'password should be at least 6 characters long',
-                            },
-                            {
-                                validator: this.validateToNextPassword,
-                            },
-                        ],
-                    })(<Input.Password />)}
-                </Form.Item>
-
-
-                <Form.Item label="Confirm Password" hasFeedback>
-                    {getFieldDecorator('passwordConfirmation', {
-                        rules: [
-                            {
-                                required: true,
-                                message: 'Please confirm your password!',
-                            },
-                            {
-                                validator: this.compareToFirstPassword,
-                            },
-                        ],
-                    })(<Input.Password onBlur={this.handleConfirmBlur} />)}
-                </Form.Item>
-
-                <Form.Item {...tailFormItemLayout}>
-                    {getFieldDecorator('agreement', {
-                        valuePropName: 'checked',
-                    })(
-                        <Checkbox>
-                            I have read the agreement
+            <div style={{paddingTop: 200, paddingRight: 40}}>
+                <Form {...formItemLayout} onSubmit={this.handleSubmit} style={{}} >
+                    <Form.Item label="E-mail" hasFeedback validateStatus={this.state.responseStatus} help={this.state.errorMessage}>
+                        {getFieldDecorator('username', {
+                            rules: [
+                                {
+                                    type: 'email',
+                                    message: 'The input is not a valid E-mail',
+                                },
+                                {
+                                    required: true,
+                                    message: 'Please input your E-mail',
+                                },
+                            ],
+                        })(<Input addonBefore={prefixEmail} onChange={this.handleEmail} />)}
+                    </Form.Item>
+                    <Form.Item label="Password" hasFeedback>
+                        {getFieldDecorator('password', {
+                            rules: [
+                                {
+                                    required: true,
+                                    message: 'Please input your password',
+                                },
+                                {
+                                    min: 6,
+                                    message: 'password should be at least 6 characters long',
+                                },
+                                {
+                                    validator: this.validateToNextPassword,
+                                },
+                            ],
+                        })(<Input.Password />)}
+                    </Form.Item>
+
+
+                    <Form.Item label="Confirm Password" hasFeedback>
+                        {getFieldDecorator('passwordConfirmation', {
+                            rules: [
+                                {
+                                    required: true,
+                                    message: 'Please confirm your password!',
+                                },
+                                {
+                                    validator: this.compareToFirstPassword,
+                                },
+                            ],
+                        })(<Input.Password onBlur={this.handleConfirmBlur} />)}
+                    </Form.Item>
+
+                    <Form.Item {...tailFormItemLayout}>
+                        {getFieldDecorator('agreement', {
+                            valuePropName: 'checked',
+                        })(
+                            <Checkbox style={{marginLeft: 40}}>
+                                I have read the agreement
                         </Checkbox>,
-                    )}
-                </Form.Item>
+                        )}
+                    </Form.Item>
 
 
-                <Form.Item {...tailFormItemLayout}>
-                    <Button type="primary" htmlType="submit">
-                        Register
+                    <Form.Item {...tailFormItemLayout}>
+                        <Button type="primary" htmlType="submit" style={{marginLeft: 40}}>
+                            Register
                     </Button>
-                </Form.Item>
+                    </Form.Item>
 
-                <Form.Item>
-                    {this.state.showSuccess ? <Alert message='account created successfully' type="success" /> : null}
-                    {this.state.showError ? <Alert message={this.state.errorMessage} type="error" /> : null}
-                </Form.Item>
+                    <Form.Item>
+                        {this.state.showSuccess ? <Alert message='account created successfully' type="success" /> : null}
+                        {this.state.showError ? <Alert message={this.state.errorMessage} type="error" /> : null}
+                    </Form.Item>
 
-            </Form>
+                </Form>
+            </div>
         );
     }
 }

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() {

client/src/components/quiz/Quiz.js

@@ -3,25 +3,29 @@ import './Quiz.css';
 import Question from '../question/Question.js';
 import QuizHead from './QuizHead.js';
 
-
+//import equal from 'fast-deep-equal'
 
 
 
 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 (