feat: style images loaded from ipfs

ethnh · Nov 23, 2021 · 5bfc298 · 5bfc298
1 parent c2e7090
commit 5bfc298
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,10 +7,12 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "classnames": "^2.3.1",
     "dotenv": "^10.0.0",
     "ipfs-api": "^26.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-paginate": "^8.0.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2",
     "web3": "^1.6.0"

diff --git a/client/src/components/HotelItem.js b/client/src/components/HotelItem.js
@@ -4,14 +4,22 @@ export default class HotelItem extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            rooms:[]
         }
     }
 
+    async componentWillMount(){
+
+    }
+
+    async fetcchRooms(){
+
+    }
+
     render(){
         return (
             <div className="container">
-                    <p>This div is for a single hotel Item</p>
+
             </div>
         )
     }

diff --git a/client/src/components/HotelList.js b/client/src/components/HotelList.js
@@ -29,14 +29,14 @@ export default class  HotelList extends Component {
                                     <div className="card-title">{ hotel.name }</div>
                                 </div>
                                 <div className="card-body">
-                                    <img src={`https://ipfs.infura.io/ipfs/${hotel.imageHash}`} alte="hotel image" style={{ width: '100%', height: '200px'}}></img>
+                                    <img src={`https://ipfs.infura.io/ipfs/${hotel.imageHash}`} alt="hotel image" style={{ width: '100%', height: '200px'}} className="mb-3 img-thumbnail"></img>
                                     <p>Location: {hotel.locationAddress}</p>
                                     <p>Descrition: {hotel.description}</p>
                                     <p>Number Of Rooms: {hotel.totalRooms}</p>
                                     <p>Published By: {hotel.user}</p>
                                     <p>Hotel Type: {hotel.hotelCategory == 0 ? "Chain Hotel":""}</p>
                                     <p>Image Hash: {hotel.imageHash}</p>
-                                    <button className="btn btn-success"> View </button>
+                                    <button className="btn btn-success"> View Rooms </button>
                                 </div>
                             </div>
                         </div>

diff --git a/client/src/components/NewHotel.js b/client/src/components/NewHotel.js
@@ -66,7 +66,7 @@ export default class NewHotel extends Component {
             ).send({
                 from: account,
                 value: await web3.utils.toWei(fee.toString(),"ether"),
-                gas: 6721975,
+                gas: 6721975
         }).then(( result) =>{
             console.log("Image Hash after file upload",this.state.ipfsImageHash);
             console.log(result);