Resolved merge conflicts with navigation bar

src/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import LoginPage from './components/LoginPage'
-import NewTopicForm from './components/NewTopicForm'
-import ButtonAppBar from './components/common/ButtonAppBar'
+import TopicFormPage from './components/TopicFormPage'
+import NavigationBar from './components/common/NavigationBar'
 import './App.css'
 
 class App extends Component {
@@ -10,11 +10,11 @@ class App extends Component {
     return (
       <Router>
         <div id="app-wrapper">
-          <ButtonAppBar />
+          <NavigationBar />
           <div id="app-content">
             <Switch>
               <Route exact path='/' render={() => <LoginPage />} />
-              <Route path='/create/topic' render={() => <NewTopicForm />} />
+              <Route path='/create/topic' render={() => <TopicFormPage />} />
             </Switch>
           </div>
         </div>

src/components/TopicFormPage.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import topicFormPageActions from '../reducers/actions/topicFormPageActions'
 import TextField from '@material-ui/core/TextField'
 import Button from '@material-ui/core/Button'
 import Checkbox from '@material-ui/core/Checkbox'
@@ -7,10 +9,11 @@ import FormControl from '@material-ui/core/FormControl'
 import FormGroup from '@material-ui/core/FormGroup'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 
-const NewTopicForm = () => {
+const TopicFormPage = (props) => {
   const submitForm = (event) => {
     event.preventDefault()
     console.log('submitting proposal')
+    console.log('content: ', props.content)
   }
 
   return (
@@ -20,16 +23,30 @@ const NewTopicForm = () => {
 
       <form onSubmit={submitForm}>
         <div>
-          <TextField fullWidth label="aihe / title" margin="normal" />
+          <TextField
+            fullWidth
+            label="aihe / title"
+            margin="normal"
+            value={props.title}
+            onChange={(e) => props.updateTitle(e.target.value)}
+          />
         </div>
         <div>
-          <TextField fullWidth label="asiakas / customer" margin="normal" />
+          <TextField
+            fullWidth
+            label="asiakas / customer"
+            margin="normal"
+            value={props.customerName}
+            onChange={(e) => props.updateCustomerName(e.target.value)}
+          />
         </div>
         <div>
           <TextField
             fullWidth
             label="yhteyshenkilön email / contact email"
             margin="normal"
+            value={props.email}
+            onChange={(e) => props.updateEmail(e.target.value)}
           />
         </div>
         <div>
@@ -39,6 +56,8 @@ const NewTopicForm = () => {
             multiline
             rows="5"
             margin="normal"
+            value={props.description}
+            onChange={(e) => props.updateDescription(e.target.value)}
           />
         </div>
         <div>
@@ -48,6 +67,8 @@ const NewTopicForm = () => {
             multiline
             rows="5"
             margin="normal"
+            value={props.environment}
+            onChange={(e) => props.updateEnvironment(e.target.value)}
           />
         </div>
         <div>
@@ -57,6 +78,8 @@ const NewTopicForm = () => {
             multiline
             rows="5"
             margin="normal"
+            value={props.specialRequests}
+            onChange={(e) => props.updateSpecialRequests(e.target.value)}
           />
         </div>
         <div>
@@ -66,6 +89,8 @@ const NewTopicForm = () => {
             multiline
             rows="5"
             margin="normal"
+            value={props.additionalInfo}
+            onChange={(e) => props.updateAdditionalInfo(e.target.value)}
           />
         </div>
         <Temporary />
@@ -90,4 +115,26 @@ const Temporary = () => (
   </div>
 )
 
-export default NewTopicForm
+const mapStateToProps = (state) => {
+  return {
+    content: state.topicFormPage,
+    title: state.topicFormPage.title,
+    customerName: state.topicFormPage.customerName,
+    email: state.topicFormPage.email,
+    description: state.topicFormPage.description,
+    environment: state.topicFormPage.environment,
+    specialRequests: state.topicFormPage.specialRequests,
+    additionalInfo: state.topicFormPage.additionalInfo
+  }
+}
+
+const mapDispatchToProps = {
+  ...topicFormPageActions
+}
+
+const ConnectedTopicFormPage = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TopicFormPage)
+
+export default ConnectedTopicFormPage

src/components/common/NavigationBar.css

@@ -0,0 +1,7 @@
+.navigation-bar-container {
+  flex-grow: 1
+}
+
+.grow {
+  flex-grow: 1
+}

src/components/common/NavigationBar.js

@@ -1,30 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
+import './NavigationBar.css'
 
-const styles = {
-  root: {
-    flexGrow: 1,
-  },
-  grow: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-}
 
-function ButtonAppBar(props) {
-  const { classes } = props
+function NavigationBar() {
   return (
-    <div className={classes.root}>
+    <div className='navigation-bar-container'>
       <AppBar position="static">
         <Toolbar>
-          <Typography variant="h6" color="inherit" className={classes.grow}>
+          <Typography variant="h6" color="inherit" className='grow'>
             Ohjelmistotuotantoprojekti / Software engineering project
           </Typography>
         </Toolbar>
@@ -33,8 +20,8 @@ function ButtonAppBar(props) {
   )
 }
 
-ButtonAppBar.propTypes = {
+NavigationBar.propTypes = {
   classes: PropTypes.object.isRequired,
 }
 
-export default withStyles(styles)(ButtonAppBar)
+export default NavigationBar

src/reducers/actions/topicFormPageActions.js

@@ -0,0 +1,65 @@
+const updateTitle = (title) => {
+  return {
+    type: 'UPDATE_TITLE',
+    data: title
+  }
+}
+
+const updateCustomerName = (customerName) => {
+  return {
+    type: 'UPDATE_CUSTOMER_NAME',
+    data: customerName
+  }
+}
+
+const updateEmail = (email) => {
+  return {
+    type: 'UPDATE_EMAIL',
+    data: email
+  }
+}
+
+const updateDescription = (description) => {
+  return {
+    type: 'UPDATE_DESCRIPTION',
+    data: description
+  }
+}
+
+const updateEnvironment = (environment) => {
+  return {
+    type: 'UPDATE_ENVIRONMENT',
+    data: environment
+  }
+}
+
+const updateSpecialRequests = (specialRequests) => {
+  return {
+    type: 'UPDATE_SPECIAL_REQUESTS',
+    data: specialRequests
+  }
+}
+
+const updateAdditionalInfo = (additionalInfo) => {
+  return {
+    type: 'UPDATE_ADDITIONAL_INFO',
+    data: additionalInfo
+  }
+}
+
+const clearForm = () => {
+  return {
+    type: 'CLEAR_FORM'
+  }
+}
+
+export default {
+  updateTitle,
+  updateCustomerName,
+  updateEmail,
+  updateDescription,
+  updateEnvironment,
+  updateSpecialRequests,
+  updateAdditionalInfo,
+  clearForm
+}

src/reducers/store.js

@@ -4,11 +4,13 @@ import thunk from 'redux-thunk'
 // Import all reducers here
 import testReducer from './testReducer'
 import loginPageReducer from './loginPageReducer'
+import topicFormPageReducer from './topicFormPageReducer'
 
 // Combine imported reducers
 const reducer = combineReducers({
   test: testReducer,
-  loginPage: loginPageReducer
+  loginPage: loginPageReducer,
+  topicFormPage: topicFormPageReducer
 })
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

src/reducers/topicFormPageReducer.js

@@ -0,0 +1,63 @@
+const initialState = {
+  title: '',
+  customerName: '',
+  email: '',
+  description: '',
+  environment: '',
+  specialRequests: '',
+  additionalInfo: ''
+}
+
+const topicFormPageReducer = (state = initialState, action) => {
+  switch (action.type) {
+  case 'UPDATE_TITLE':
+    return {
+      ...state,
+      title: action.data
+    }
+  case 'UPDATE_CUSTOMER_NAME':
+    return {
+      ...state,
+      customerName: action.data
+    }
+  case 'UPDATE_EMAIL':
+    return {
+      ...state,
+      email: action.data
+    }
+  case 'UPDATE_DESCRIPTION':
+    return {
+      ...state,
+      description: action.data
+    }
+  case 'UPDATE_ENVIRONMENT':
+    return {
+      ...state,
+      environment: action.data
+    }
+  case 'UPDATE_SPECIAL_REQUESTS':
+    return {
+      ...state,
+      specialRequests: action.data
+    }
+  case 'UPDATE_ADDITIONAL_INFO':
+    return {
+      ...state,
+      additionalInfo: action.data
+    }
+  case 'CLEAR_FORM':
+    return {
+      title: '',
+      customerName: '',
+      email: '',
+      description: '',
+      environment: '',
+      specialRequests: '',
+      additionalInfo: ''
+    }
+  default:
+  }
+  return state
+}
+
+export default topicFormPageReducer