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 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){
-        super(pros)
+  constructor(pros) {
+    super(pros)
 
-        this.state = {
-            postList:[]
-        }
+    this.state = {
+      postList: [],
+      count: 0,
     }
+  }
 
-    componentWillMount() {
-        axios.get(constant()+'/post')
-            .then(res => {
-              this.setState({postList: res.data});
-            }).catch(err => {
-                console.log(err);
-            });
-      }
+  componentWillMount() {
+    axios.get(constant() + '/post')
+      .then(res => {
+        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() {
 
+    const { postList } = this.state;
 
-    render(){
-        const { postList } = this.state;
-        return(
-            <div className="container">
-            <div className="panel panel-default">
-              <div className="panel-heading">
-                <h3 className="panel-title">
-                  Login
-                </h3>
-              </div>
-              <div className="panel-body">             
-                    {this.viewCardList()}
-                <br/>
-              </div>
+    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">
+            <h3 className="panel-title">
+              Login
+              </h3>
+          </div>
+          <div className="panel-body">
+            <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;
-}
\ No newline at end of file
+  width: 20rem;
+}
+
+.postImageSize {
+  width: 23rem;
+  height: 200px;
+}
+
+ul#CardView-Align li {
+  display:inline;
+}
+
+
+
+