View post updated

Front-end/React_Frontend/package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.9.10",
     "axios": "^0.18.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.4.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0",
     "react-bootstrap-table": "^4.3.1",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",

Front-end/React_Frontend/src/components/Student.js

 import React, { Component } from 'react'
 import axios from 'axios'
 import constant from '../service/constant';
-
-const CardPostNav = props =>(
-    <div>
-        <div className="card postCard">
-            <img className="card-img-top" src="..." alt="Card image cap"/>
-            <div className="card-body">
-                <h5 className="card-title">Card title</h5>
-                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                <a href="#" className="btn btn-primary">Go somewhere</a>
-            </div>
-        </div>
-        <br/>
-    </div>
-  );
+import Card from 'react-bootstrap/Card'
+import { makeStyles } from '@material-ui/core/styles';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
 
 class Student extends Component {
 
-    constructor(pros){
+  constructor(pros) {
     super(pros)
 
     this.state = {
-            postList:[]
+      postList: [],
+      count: 0,
     }
   }
 
   componentWillMount() {
-        axios.get(constant()+'/post')
+    axios.get(constant() + '/post')
       .then(res => {
-              this.setState({postList: res.data});
+        this.setState({ postList: res.data });
       }).catch(err => {
         console.log(err);
       });
   }
 
-    viewCardList = () => {
-        return this.state.postList.map(function(value,index){ 
-            return <CardPostNav postObj={value} index={index} />;
-            })
-      }
-
+  render() {
 
-    render(){
     const { postList } = this.state;
-        return(
+
+    const classes = makeStyles((theme) => ({
+      root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-around',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background.paper,
+      },
+      gridList: {
+        width: 500,
+        height: 450,
+      },
+    }));
+
+    return (
       <div className="container">
         <div className="panel panel-default">
           <div className="panel-heading">
@@ -53,15 +53,30 @@ class Student extends Component {
               </h3>
           </div>
           <div className="panel-body">
-                    {this.viewCardList()}
-                <br/>
+            <div className={classes.root}>
+              <GridList cellHeight={500} className={classes.gridList} cols={3}>
+                {postList.map((item) => (
+                  <GridListTile key={item.img} cols={item.cols || 1}>
+                    <Card>
+                      <Card.Img className="postImageSize" variant="top" src={item.image} />
+                      <Card.Body>
+                        <Card.Title>{item.title}</Card.Title>
+                        <Card.Text>{item.content} </Card.Text>
+                      </Card.Body>
+                      <Card.Footer>
+                        <a href="#" class="btn btn-primary">Go somewhere</a>
+                      </Card.Footer>
+                    </Card>
+                  </GridListTile>
+                ))}
+              </GridList>
+            </div>
           </div>
         </div>
       </div>
+
     )
   }
 }
 
 export default Student;
-
-

Front-end/React_Frontend/src/index.css

@@ -116,5 +116,18 @@ a:link {
 }
 
 .postCard{
-  width: 18rem;
+  width: 20rem;
 }
+
+.postImageSize {
+  width: 23rem;
+  height: 200px;
+}
+
+ul#CardView-Align li {
+  display:inline;
+}
+
+
+
+