note, if no data are available in database

src/components/Project/ProjectHome.js

@@ -11,6 +11,7 @@ import Breadcrumbs from '../Breadcrumbs';
 import BlocklyWindow from '../Blockly/BlocklyWindow';
 import Snackbar from '../Snackbar';
 
+import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import Divider from '@material-ui/core/Divider';
@@ -18,6 +19,17 @@ import Typography from '@material-ui/core/Typography';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
+const styles = (theme) => ({
+  link: {
+    color: theme.palette.primary.main,
+    textDecoration: 'none',
+    '&:hover': {
+      color: theme.palette.primary.main,
+      textDecoration: 'underline'
+    }
+  }
+});
+
 
 class ProjectHome extends Component {
 
@@ -68,6 +80,8 @@ class ProjectHome extends Component {
             <CircularProgress color="primary" />
           </Backdrop>
         :
+          <div>
+            {this.props.projects.length > 0 ?
               <Grid container spacing={2}>
                 {this.props.projects.map((project, i) => {
                   return (
@@ -87,7 +101,16 @@ class ProjectHome extends Component {
                     </Grid>
                   )
                 })}
-        </Grid>}
+              </Grid>
+            : <div>
+                <Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography>
+                {this.props.match.path.replace('/','') === 'project' ?
+                  <Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
+                : null}
+              </div>
+            }
+          </div>
+        }
         <Snackbar
           open={this.state.snackbar}
           message={this.state.message}
@@ -115,4 +138,4 @@ const mapStateToProps = state => ({
 });
 
 
-export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(ProjectHome);
+export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(ProjectHome));