Dialog for Functionality under Development

client/src/App.js

@@ -22,6 +22,7 @@ import User from './components/User'
 import Browse from './components/Browse'
 import Search from './components/Search'
 import About from './components/About'
+import Modules from './components/Modules'
 import Contact from './components/Contact'
 import Logout from './components/Logout'
 import Post from './components/Post'
@@ -92,6 +93,7 @@ class App extends Component {
                 <Route path='/browse' component={Browse} />
                 <Route path='/search' component={Search} />
                 <Route path='/about' component={About} />
+                <Route path='/modules' component={Modules} />
                 <Route path='/contact' component={Contact} />
                 <Route path='/logout' component={Logout} />
                 <Route path='/:post_id' component={Post} />

client/src/components/About.js

@@ -1,14 +1,48 @@
-import React from 'react'
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
-const About = () => {
-  return (
-    <div>
+class About extends React.Component {
+  state = {
+    open: true,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
       <div>
-        <h4>About</h4>
-        <p>This Module was developed by the AATeam. Contributions are welcomed.</p>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary" autoFocus>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
-    </div>
-  )
+    );
+  }
 }
 
-export default About
+export default About;

client/src/components/Contact.js

@@ -1,58 +1,48 @@
-import React from 'react'
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
-const Contact = () => {
-  return (
-    <div>
-    <section className="section container scrollspy" id="contact">
-      <div className="row">
-        <div className="col s12 l5">
-          <h2 className="indigo-text text-darken-4">Get in Touch</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
-          <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
-          <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
-        </div>
-        <div className="col s12 l5 offset-l2">
-          <form>
-            <div className="input-field">
-              <i className="material-icons prefix">email</i>
-              <input type="email" id="email"/>
-              <label htmlFor="email">Your Email</label>
-            </div>
-            <div className="input-field">
-              <i className="material-icons prefix">message</i>
-              <textarea id="message" className="materialize-textarea" cols="20" rows="20"></textarea>
-              <label htmlFor="message">Your Message</label>
-            </div>
-            <div className="input-field">
-              <i className="material-icons prefix">date_range</i>
-              <input type="text" id="date" className="datepicker"/>
-              <label htmlFor="date">Choose a date you need me for...</label>
-            </div>
-            <div className="input-field">
-              <p>Services required:</p>
-              <p>
-                <label>
-                  <input type="checkbox"/>
-                  <span>Photography</span>
-                </label>
-              </p>
-              <p>
-                <label>
-                  <input type="checkbox"/>
-                  <span>Photo Editing</span>
-                </label>
-              </p>
-            </div>
-            <div className="input-field center">
-              <button className="btn">Submit</button>
-            </div>
-          </form>
-        </div>
+class Contact extends React.Component {
+  state = {
+    open: true,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary" autoFocus>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
-    </section>
-    </div>
-  )
+    );
+  }
 }
 
-export default Contact
+export default Contact;

client/src/components/Footer.js

@@ -70,7 +70,7 @@ class Footer extends Component {
         </Grid>
         <Grid item>
           <Button color='primary' className={classes.button}>
-            <a href='http://modules.advancedalgos.net'>Modules</a>
+            <NavLink to='/modules'>Modules</NavLink>
           </Button>
         </Grid>
       </Grid>

client/src/components/Modules.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+class Modules extends React.Component {
+  state = {
+    open: true,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary" autoFocus>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default Modules;

client/src/components/NavBar.js

@@ -22,6 +22,7 @@ import LoggedInUser from './LoggedInUser'
 // Images
 import AALogo from '../img/aa-logo-dark-8.png'
 
+const ModulesLink = props => <Link to='/modules' {...props} />
 const AboutLink = props => <Link to='/about' {...props} />
 const ContactLink = props => <Link to='/contact' {...props} />
 const SearchLink = props => <Link to='/search' {...props} />
@@ -90,7 +91,7 @@ class NavBar extends Component {
             <IconButton className={classes.menuButton} color='inherit' title='Search Users' component={SearchLink}><SearchIcon /></IconButton>
             <IconButton className={classes.menuButton} color='inherit' title='Contact Form' component={ContactLink}><ContactIcon /></IconButton>
             <IconButton className={classes.menuButton} color='inherit' title='About this Module' component={AboutLink}><AboutIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Go to another Module' component={AboutLink}><ModulesIcon /></IconButton>
+            <IconButton className={classes.menuButton} color='inherit' title='Go to another Module' component={ModulesLink}><ModulesIcon /></IconButton>
 
             <LoggedInUser authId={this.state.authId} />
           </Toolbar>

client/src/components/Search.js

@@ -1,19 +1,48 @@
-import React, { Component } from 'react'
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
-class Search extends Component {
+class Search extends React.Component {
   state = {
-    posts: []
-  }
+    open: true,
+  };
 
-  render(){
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
     return (
       <div>
-        <div>
-
-        </div>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary" autoFocus>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
-    )
+    );
   }
 }
 
-export default Search
+export default Search;

client/src/components/UserImages.js

@@ -1,14 +1,48 @@
-import React from 'react'
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
-const UserImages = () => {
-  return (
-    <div>
+class UserImages extends React.Component {
+  state = {
+    open: true,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
       <div>
-        <h4>Images Manager</h4>
-        <p>This functionality has not been developed yet. Please visit this section later.</p>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary" autoFocus>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
-    </div>
-  )
+    );
+  }
 }
 
-export default UserImages
+export default UserImages;