diff --git a/Hotel-booking-App/img/hotel-app.gif b/Hotel-booking-App/demo-img/hotel-app.gif
similarity index 100%
rename from Hotel-booking-App/img/hotel-app.gif
rename to Hotel-booking-App/demo-img/hotel-app.gif
diff --git a/Hotel-booking-App/index.html b/Hotel-booking-App/index.html
new file mode 100644
index 0000000..6db6435
--- /dev/null
+++ b/Hotel-booking-App/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+ Essential JS 2 for React - Hotel room booking application
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Hotel-booking-App/package.json b/Hotel-booking-App/package.json
index ca1a270..f96fe5f 100644
--- a/Hotel-booking-App/package.json
+++ b/Hotel-booking-App/package.json
@@ -1,15 +1,34 @@
{
- "name": "react-app",
- "version": "0.1.0",
- "private": true,
- "homepage": ".",
+ "name": "@syncfusion/ej2-react-hotel-room-reserve",
+ "version": "1.0.0",
+ "description": "Essential JS 2 - Hotel room booking application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "scripts": {
+ "start": "webpack-dev-server --open --mode development",
+ "build": "webpack --mode production",
+ "ci-publish": "gulp publish-sample"
+ },
+ "devDependencies": {
+ "@types/node": "^20.4.1",
+ "@types/react": "^18.2.14",
+ "@types/react-dom": "^18.2.6",
+ "@types/react-router-dom": "^5.3.3",
+ "css-loader": "^6.8.1",
+ "html-webpack-plugin": "^5.5.3",
+ "mini-css-extract-plugin": "^2.7.6",
+ "terser-webpack-plugin": "^5.3.9",
+ "ts-loader": "^9.4.4",
+ "typescript": "^5.1.6",
+ "webpack": "^5.88.1",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-server": "^4.15.1",
+ "copy-webpack-plugin": "^12.0.2"
+ },
"dependencies": {
- "@babel/plugin-transform-runtime": "^7.23.4",
- "@babel/preset-env": "^7.23.3",
- "@babel/preset-react": "^7.23.3",
- "@babel/preset-typescript": "^7.23.3",
- "@headlessui/react": "^1.7.15",
- "@heroicons/react": "^2.0.18",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.14.1",
"@syncfusion/ej2-react-grids": "*",
"@syncfusion/ej2-react-calendars": "*",
"@syncfusion/ej2-react-buttons": "*",
@@ -17,64 +36,6 @@
"@syncfusion/ej2-react-inputs": "*",
"@syncfusion/ej2-react-dropdowns": "*",
"@syncfusion/ej2-react-navigations": "*",
- "@syncfusion/ej2-react-maps": "*",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^13.4.0",
- "@testing-library/user-event": "^13.5.0",
- "@types/jest": "^27.5.2",
- "@types/node": "^16.18.23",
- "@types/numeral": "^2.0.2",
- "@types/react": "^18.0.37",
- "@types/react-dom": "^18.0.11",
- "axios": "^1.4.0",
- "babel-plugin-inline-react-svg": "^2.0.2",
- "babel-plugin-transform-decorators": "^6.24.1",
- "buffer": "^6.0.3",
- "formik": "^2.4.2",
- "moment": "^2.29.4",
- "numeral": "^2.0.6",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "react-inject-env": "^2.1.0",
- "react-number-format": "^5.3.1",
- "react-router-dom": "^6.11.1",
- "react-scripts": "5.0.1",
- "typescript": "^4.9.5",
- "web-vitals": "^2.1.4",
- "yup": "^1.2.0"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
- "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
- "prepare": "husky install"
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- },
- "devDependencies": {
- "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
- "autoprefixer": "^10.4.14",
- "husky": "^8.0.3",
- "postcss": "^8.4.22",
- "prettier": "2.8.8",
- "tailwindcss": "^3.3.1"
+ "@syncfusion/ej2-react-maps": "*"
}
}
diff --git a/Hotel-booking-App/public/favicon.ico b/Hotel-booking-App/public/favicon.ico
deleted file mode 100644
index bcd5dfd..0000000
Binary files a/Hotel-booking-App/public/favicon.ico and /dev/null differ
diff --git a/Hotel-booking-App/public/index.html b/Hotel-booking-App/public/index.html
deleted file mode 100644
index f471986..0000000
--- a/Hotel-booking-App/public/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/Hotel-booking-App/public/logo192.png b/Hotel-booking-App/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/Hotel-booking-App/public/logo192.png and /dev/null differ
diff --git a/Hotel-booking-App/public/logo512.png b/Hotel-booking-App/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/Hotel-booking-App/public/logo512.png and /dev/null differ
diff --git a/Hotel-booking-App/public/manifest.json b/Hotel-booking-App/public/manifest.json
deleted file mode 100644
index 080d6c7..0000000
--- a/Hotel-booking-App/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "short_name": "React App",
- "name": "Create React App Sample",
- "icons": [
- {
- "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
- },
- {
- "src": "logo192.png",
- "type": "image/png",
- "sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
- }
- ],
- "start_url": ".",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/Hotel-booking-App/public/robots.txt b/Hotel-booking-App/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/Hotel-booking-App/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/Hotel-booking-App/src/common/index.tsx b/Hotel-booking-App/src/common/index.tsx
new file mode 100644
index 0000000..e4b6bed
--- /dev/null
+++ b/Hotel-booking-App/src/common/index.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { createRoot } from 'react-dom/client';
+import HotelBook from "../components/HotelBook/HotelBook";
+import "../../styles/index.css";
+
+const root = createRoot(document.getElementById("content-area") as HTMLElement);
+root.render(
+
+);
diff --git a/Hotel-booking-App/src/HotelBookApp.css b/Hotel-booking-App/src/components/HotelBook/HotelBook.css
similarity index 81%
rename from Hotel-booking-App/src/HotelBookApp.css
rename to Hotel-booking-App/src/components/HotelBook/HotelBook.css
index bbc5cfe..a358d86 100644
--- a/Hotel-booking-App/src/HotelBookApp.css
+++ b/Hotel-booking-App/src/components/HotelBook/HotelBook.css
@@ -187,7 +187,7 @@
.e-semi-bold-header-text {
font-weight: 700;
color: #ec4899;
- font-size: 24px;
+ font-size: 22px;
font-family: "Josefin Sans", serif;
}
@@ -223,7 +223,7 @@
.e-rowtemplate-border-applier {
box-shadow: none;
- border: 1px solid #a5b4fc !important;
+ border-top: 1px solid #a5b4fc !important;
}
.e-room-not-available-cover {
@@ -254,10 +254,6 @@
width: 17px;
}
-.e-grid .e-dialog-map {
- max-height: none !important;
-}
-
.e-info-container {
padding: 5px;
margin-top: 15px;
@@ -296,6 +292,11 @@
.e-map-text-spacer {
margin-left: 10px;
+ margin-top: 1px;
+}
+
+.e-margin-top-10 {
+ margin-top: 10px;
}
.e-map-text-styler {
@@ -382,7 +383,11 @@
}
.e-book-details-button {
- padding-right: 13px;
+ padding-right: 65px;
+}
+
+.e-padding-right {
+ padding-right: 50px;
}
.emptyRecordTemplate {
@@ -400,7 +405,7 @@
}
.e-carousel-image-holder-height {
- height: 280px;
+ height: 380px;
}
.e-back-button-carousel-container {
@@ -443,7 +448,7 @@
.e-carouselcomponent-container,
.e-carousel-img-container img {
- height: 240px;
+ height: 340px;
width: 520px;
}
@@ -454,6 +459,7 @@
.e-details-info-container {
display: flex;
+ flex-direction: row-reverse;
background-color: #ffffff;
margin-top: 30px;
}
@@ -493,6 +499,15 @@
.e-print-info-separator {
margin-top: 10px;
+ padding-bottom: 10px;
+ font-weight: 600;
+ color: #14b8a6;
+ font-family: "Josefin Sans", serif;
+ font-size: 20px;
+}
+
+.e-print-info-separator.e-print-info-separator-margin-top {
+ margin-top: 20px;
}
.e-chip-list {
@@ -512,18 +527,64 @@
color: #15803d !important;
}
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
-@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
+#hotelamenities,
+#roomamenities {
+ border: 0px;
+}
+
+.e-dialog.e-dialog-print-info .e-dlg-header {
+ text-align: center !important;
+ width: auto !important;
+}
+
+.e-dialog .e-footer-content .e-btn {
+ margin-right: 10px;
+}
+
+.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-map {
+ max-width: 800px !important;
+ max-height: 530px !important;
+}
+
+.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info {
+ max-width: 950px !important;
+ max-height: 500px !important;
+}
+
+.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info .e-dlg-header-content {
+ padding-top: 16px;
+}
+
+.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info .e-footer-content {
+ padding-bottom: 16px;
+}
+
+.e-treeview .e-level-1>.e-text-content .e-list-text {
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.e-slidercomponent-container {
+ width: 95%;
+ margin-left: 6px;
+}
+
+.e-upload {
+ width: 96%;
+}
+
+@import '../../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import "../../../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";
+@import "../../../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
+@import "../../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
+@import '../../../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
@media only screen and (max-width: 1120px) {
@@ -634,7 +695,7 @@
.e-carouselcomponent-container,
.e-carousel-img-container img {
- height: 240px;
+ height: 340px;
width: 420px;
}
}
@@ -656,7 +717,7 @@
.e-carouselcomponent-container,
.e-carousel-img-container img {
- height: 240px;
+ height: 340px;
width: 320px;
}
}
\ No newline at end of file
diff --git a/Hotel-booking-App/src/HotelBookApp.js b/Hotel-booking-App/src/components/HotelBook/HotelBook.tsx
similarity index 74%
rename from Hotel-booking-App/src/HotelBookApp.js
rename to Hotel-booking-App/src/components/HotelBook/HotelBook.tsx
index 79cadd6..ad9c920 100644
--- a/Hotel-booking-App/src/HotelBookApp.js
+++ b/Hotel-booking-App/src/components/HotelBook/HotelBook.tsx
@@ -4,72 +4,75 @@ import {
ColumnsDirective,
ColumnDirective,
Inject,
- Page, Print
+ Page, Print,
+ DataResult,
+ Column,
+ PrintEventArgs
} from '@syncfusion/ej2-react-grids';
import { closest, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
+import { DateRangePickerComponent, RangeEventArgs, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import { ButtonComponent, ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
-import { NumericTextBoxComponent, TextBoxComponent, RatingComponent, SliderComponent, UploaderComponent, MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { NumericTextBoxComponent, TextBoxComponent, RatingComponent, SliderComponent, UploaderComponent, MaskedTextBoxComponent, SliderChangeEventArgs, FormValidatorModel } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-react-inputs';
-import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
-import { TreeViewComponent, CarouselComponent } from '@syncfusion/ej2-react-navigations';
+import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
+import { TreeViewComponent, CarouselComponent, SlideChangingEventArgs, FieldsSettingsModel } from '@syncfusion/ej2-react-navigations';
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, MapsTooltip, DataLabel } from '@syncfusion/ej2-react-maps';
import * as USA from './usa.json';
import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
-import { data } from './DataCreation';
-import './HotelBookApp.css';
+import { CheckInOut, data, Hotel, Location } from './HotelData';
+import './HotelBook.css';
-function HotelBookApp() {
+function HotelBook() {
// Hotel grid which render the hotel list using grid component
- let hotelGrid;
- let filterDataPredicate;
- const hotelData = React.useRef(data);
- const [showHotels, setShowHotels] = React.useState(true);
- const [hotelGridData, setHotelGridData] = React.useState([]);
+ let hotelGrid: GridComponent;
+ let filterDataPredicate: Predicate;
+ const hotelData: React.MutableRefObject = React.useRef(data);
+ const [showHotels, setShowHotels]: [boolean, React.Dispatch>] = React.useState(true);
+ const [hotelGridData, setHotelGridData]: [Hotel[], React.Dispatch>] = React.useState([]);
// Menu ref property for opening and closing the menu when clicking menu button
- let menu = React.useRef(null);
+ let menu: React.MutableRefObject = React.useRef(null);
// Check in and check out information for rendering the hotel list according to user specified date
- let checkInOutDate = React.useRef(null);
- let defaultCheckInDate = new Date();
+ let checkInOutDate: React.MutableRefObject = React.useRef(null);
+ let defaultCheckInDate: Date = new Date();
defaultCheckInDate = new Date(
defaultCheckInDate.getFullYear(),
defaultCheckInDate.getMonth(),
defaultCheckInDate.getDate()
);
- const defaultCheckOutDate = new Date(defaultCheckInDate);
+ const defaultCheckOutDate: Date = new Date(defaultCheckInDate);
defaultCheckOutDate.setDate(defaultCheckInDate.getDate() + 2);
- const checkInDate = React.useRef(defaultCheckInDate);
- const checkOutDate = React.useRef(defaultCheckOutDate);
+ const checkInDate: React.MutableRefObject = React.useRef(defaultCheckInDate);
+ const checkOutDate: React.MutableRefObject = React.useRef(defaultCheckOutDate);
// Price range information for rendering the hotel list according to user expecting price
- let priceRange = React.useRef(null);
- let minPriceText = React.useRef(null);
- let maxPriceText = React.useRef(null);
- const defaultMinPrice = 50;
- const defaultMaxPrice = 1000;
+ let priceRange: React.MutableRefObject = React.useRef(null);
+ let minPriceText: React.MutableRefObject = React.useRef(null);
+ let maxPriceText: React.MutableRefObject = React.useRef(null);
+ const defaultMinPrice: number = 50;
+ const defaultMaxPrice: number = 1000;
// Map information for hotel location
- let map = React.useRef(null);
- const [showMapDialog, setShowMapDialog] = React.useState(false);
- const [mapDataSource, setMapDataSource] = React.useState([]);
+ let map: React.MutableRefObject = React.useRef(null);
+ const [showMapDialog, setShowMapDialog]: [boolean, React.Dispatch>] = React.useState(false);
+ const [mapDataSource, setMapDataSource]: [Location[], React.Dispatch>] = React.useState([]);
// Sorting the hotels according to user specific choice
- let sortOptionContainer = React.useRef(null);
- const sortOption = [
+ let sortOptionContainer: React.MutableRefObject = React.useRef(null);
+ const sortOption: KeyData[] = [
{ key: 1, value: 'Top rating' },
{ key: 2, value: 'Price (low to high)' },
{ key: 3, value: 'Price (high to low)' },
];
- let sortOptionValue = React.useRef(1);
+ let sortOptionValue: React.MutableRefObject = React.useRef(1);
// Hotel amenities infromation for rendering the hotel list according to user requirement that present in the hotel
- let hotelAmenities = React.useRef(null);
- let hotelAmenitiesData = [
+ let hotelAmenities: React.MutableRefObject = React.useRef(null);
+ let hotelAmenitiesData: KeyData[] = [
{ id: 1001, name: 'Amenities', hasChild: true, expanded: true, fieldValue: 'HotelFacility' },
{ id: 1002, pid: 1001, name: 'Parking' },
{ id: 1003, pid: 1001, name: 'Pet allowed' },
@@ -77,11 +80,11 @@ function HotelBookApp() {
{ id: 1005, pid: 1001, name: 'Restaurant' },
{ id: 1006, pid: 1001, name: 'Spa' },
];
- const hotelAmenitiesField = { dataSource: hotelAmenitiesData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
+ const hotelAmenitiesField: FieldsSettingsModel = { dataSource: hotelAmenitiesData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
// Room amenities infromation for rendering the hotel list according to user requirement that present in the room
- let roomAmenities = React.useRef(null);
- let roomAmenitiesData = [
+ let roomAmenities: React.MutableRefObject = React.useRef(null);
+ let roomAmenitiesData: KeyData[] = [
{ id: 2001, name: 'Room Amenities', hasChild: true, expanded: true, fieldValue: 'RoomFacility' },
{ id: 2002, pid: 2001, name: 'Television' },
{ id: 2003, pid: 2001, name: 'Projector' },
@@ -92,39 +95,39 @@ function HotelBookApp() {
{ id: 2008, pid: 2001, name: 'Shower' },
];
- const roomAmenitiesField = { dataSource: roomAmenitiesData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
+ const roomAmenitiesField: FieldsSettingsModel = { dataSource: roomAmenitiesData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
// Hotel images for user booking room
- let backgroundBlurImage = React.useRef(null);
- const [hotelImages, setHotelImages] = React.useState([]);
+ let backgroundBlurImage: React.MutableRefObject = React.useRef(null);
+ const [hotelImages, setHotelImages]: [Record[], React.Dispatch[]>>] = React.useState([]);
// Obtaining user information via input field with validator while booking room in hotel
- const [selectedRoom, setSelectedRoom] = React.useState({});
- let formValidator = React.useRef(null);
- let firstName = React.useRef(null);
- let lastName = React.useRef(null);
- let email = React.useRef(null);
- let phno = React.useRef(null);
- let address = React.useRef(null);
- let city = React.useRef(null);
- let code = React.useRef(null);
- let country = React.useRef(null);
- let person = React.useRef(null);
- let extraBed = React.useRef(null);
+ const [selectedRoom, setSelectedRoom]: [Hotel, React.Dispatch>] = React.useState({} as Hotel);
+ let formValidator: React.MutableRefObject = React.useRef(null);
+ let firstName: React.MutableRefObject = React.useRef(null);
+ let lastName: React.MutableRefObject = React.useRef(null);
+ let email: React.MutableRefObject = React.useRef(null);
+ let phno: React.MutableRefObject = React.useRef(null);
+ let address: React.MutableRefObject = React.useRef(null);
+ let city: React.MutableRefObject = React.useRef(null);
+ let code: React.MutableRefObject = React.useRef(null);
+ let country: React.MutableRefObject = React.useRef(null);
+ let person: React.MutableRefObject = React.useRef(null);
+ let extraBed: React.MutableRefObject = React.useRef(null);
let lineThroughPriceText = React.useRef(null);
let taxedPriceText = React.useRef(null);
let priceStatementText = React.useRef(null);
- let priceCollectionData = React.useRef({});
+ let priceCollectionData: React.MutableRefObject = React.useRef({} as PriceDetails);
// Printing the booked room infromation
- let printInfo = React.useRef({});
- let personalInfoGrid = React.useRef(null);
- let hotelInfoGrid = React.useRef(null);
- const [showPrintInfo, setShowPrintInfo] = React.useState(false);
+ let printInfo: React.MutableRefObject = React.useRef({} as BookingDetails);
+ let personalInfoGrid: React.MutableRefObject = React.useRef(null);
+ let hotelInfoGrid: React.MutableRefObject = React.useRef(null);
+ const [showPrintInfo, setShowPrintInfo]: [boolean, React.Dispatch>] = React.useState(false);
// This method calls for checking the selected sorting option for generating hotel list
- const checkSortOptions = (query) => {
- const value = sortOptionContainer.current.value;
+ const checkSortOptions = (query: Query): void => {
+ const value: number = sortOptionContainer.current.value as number;
switch (value) {
case 1:
query.sortBy('Rating', 'descending');
@@ -139,22 +142,22 @@ function HotelBookApp() {
}
// This method calls for checking the selected hotel and room amenities options for generating hotel list
- const checkAmenities = (ref) => {
- const checkedNodes = ref.checkedNodes;
+ const checkAmenities = (ref: TreeViewComponent): void => {
+ const checkedNodes: string[] = ref.checkedNodes;
for (let i = 0; i < checkedNodes.length; i++) {
- const childInfo = ref.treeData.find((data) => {
+ const childInfo: KeyData = (ref.fields.dataSource as { [key: string]: Object; }[]).find((data) => {
return data.id.toString() === checkedNodes[i] && data.pid;
});
if (childInfo) {
- const parentInfo = ref.treeData.find(data => data.id === childInfo.pid);
- filterDataPredicate = filterDataPredicate.and(parentInfo.fieldValue, 'contains', childInfo.name);
+ const parentInfo: KeyData = (ref.fields.dataSource as { [key: string]: Object; }[]).find(data => data.id === childInfo.pid);
+ filterDataPredicate = filterDataPredicate.and(parentInfo.fieldValue as string, 'contains', childInfo.name as string);
}
}
}
// This method calls for checking both user expecting price and amenities for generating hotel list
- const checkPriceRangeAndAmenities = (query) => {
- const value = priceRange.current.value;
+ const checkPriceRangeAndAmenities = (query: Query): void => {
+ const value: number[] = priceRange.current.value as number[];
filterDataPredicate = new Predicate('Price', 'greaterthanorequal', value[0]);
filterDataPredicate = filterDataPredicate.and('Price', 'lessthanorequal', value[1]);
checkAmenities(hotelAmenities.current);
@@ -163,32 +166,32 @@ function HotelBookApp() {
}
// This method will generate and assign data for hotel grid
- const generateHotelData = () => {
+ const generateHotelData = (): void => {
// Generating query here
- let query = new Query();
+ let query: Query = new Query();
checkPriceRangeAndAmenities(query);
checkSortOptions(query);
// Generating data according to query
new DataManager(hotelData.current).executeQuery(query).then((e) => {
// Assigning data to hotel grid
- setHotelGridData(e.result);
+ setHotelGridData((e as unknown as DataResult).result as Hotel[]);
});
}
// This method calls for generating hotel list when hotel grid is created
- const hotelGridCreated = () => {
+ const hotelGridCreated = (): void => {
generateHotelData();
}
// This method calls for generating hotel list when sort options is changed
- const sortOptionsChange = (args) => {
- sortOptionValue.current = args.value;
+ const sortOptionsChange = (args: ChangeEventArgs): void => {
+ sortOptionValue.current = args.value as number;
generateHotelData();
}
// This method calls for generating hotel list when check in and check out date is changed
- const checkInOutDateChange = (args) => {
+ const checkInOutDateChange = (args: RangeEventArgs): void => {
if (args.startDate && args.endDate) {
checkInDate.current = args.startDate;
checkOutDate.current = args.endDate;
@@ -197,23 +200,24 @@ function HotelBookApp() {
}
// This method calls for generating hotel list when price range is changed
- const priceRangeChanged = (args) => {
- minPriceText.current.innerText = args.value[0];
- maxPriceText.current.innerText = args.value[1];
+ const priceRangeChanged = (args: SliderChangeEventArgs): void => {
+ const value: number[] = args.value as number[];
+ minPriceText.current.innerText = value[0].toString();
+ maxPriceText.current.innerText = value[1].toString();
generateHotelData();
}
// This method calls for generating hotel list when amenities is changed
- const amenitiesNodeChecked = (args) => {
+ const amenitiesNodeChecked = (): void => {
generateHotelData();
}
// This method calls for showing hotel location in map
- const showMap = (args) => {
- const rowIndex = closest(args.target, 'tr').rowIndex;
- const rowObject = hotelGrid.currentViewData[rowIndex];
+ const showMap = (args: React.MouseEvent): void => {
+ const rowIndex: number = (closest(args.target as Element, 'tr') as HTMLTableRowElement).rowIndex;
+ const rowObject: Hotel = hotelGrid.currentViewData[rowIndex] as Hotel;
setMapDataSource([rowObject.Location]);
- const mapInst = map.current;
+ const mapInst: MapsComponent = map.current;
setTimeout(() => {
mapInst.refresh();
}, 10);
@@ -221,18 +225,18 @@ function HotelBookApp() {
}
// This method calls for closing the map
- const closeMap = () => {
+ const closeMap = (): void => {
setShowMapDialog(false);
}
// This method calls for validating the input field in a custom way
- const customValidation = (args) => {
- const argsLength = args.element.ej2_instances[0].value.length;
+ const customValidation = (args: { [key: string]: string }): boolean => {
+ const argsLength: number = ((args.element as unknown as { ej2_instances: object[]; }).ej2_instances[0] as MaskedTextBoxComponent).value.length;
return argsLength >= 10;
};
// This method calls for validating the first and last name input field in a custom way
- const nameValidation = (args) => {
+ const nameValidation = (args: { [key: string]: string }): boolean => {
// Regex to allow only letters and spaces
if (/^[A-Za-z\s]*$/.test(args.value)) {
return true;
@@ -241,14 +245,14 @@ function HotelBookApp() {
};
// This method calls for validating the proof input field in a custom way
- const proofValidation = (args) => {
- return args.element.ej2_instances[0].filesData.length ? true : false;
+ const proofValidation = (args: { [key: string]: string }): boolean => {
+ return ((args.element as unknown as { ej2_instances: object[]; }).ej2_instances[0] as UploaderComponent).filesData.length ? true : false;
};
// This method calls for rendering the room price with discount and tax
- const renderRoomPrice = (selectedRoom) => {
- const price = selectedRoom.Price + (extraBed.current.value * selectedRoom.ExtraBedCost);
- const priceCollection = calculatePrice(price, selectedRoom.DiscountPercentage, selectedRoom.TaxPercentage);
+ const renderRoomPrice = (selectedRoom: Hotel): void => {
+ const price: number = selectedRoom.Price + (extraBed.current.value * selectedRoom.ExtraBedCost);
+ const priceCollection: PriceDetails = calculatePrice(price, selectedRoom.DiscountPercentage, selectedRoom.TaxPercentage);
priceCollectionData.current = priceCollection;
lineThroughPriceText.current.innerText = '$' + price.toFixed(2);
taxedPriceText.current.innerText = '$' + priceCollection.TaxedPrice;
@@ -256,9 +260,9 @@ function HotelBookApp() {
}
// This method calls for navigate the user to booking page and rendering the input field with form validator
- const goToRoomBookingPage = (args) => {
- const rowIndex = closest(args.target, 'tr').rowIndex;
- const rowObject = hotelGrid.currentViewData[rowIndex];
+ const goToRoomBookingPage = (args: React.MouseEvent): void => {
+ const rowIndex: number = (closest(args.target as Element, 'tr') as HTMLTableRowElement).rowIndex;
+ const rowObject: Hotel = hotelGrid.currentViewData[rowIndex] as Hotel;
setSelectedRoom(rowObject);
setHotelImages([
{ ID: 1, Name: rowObject.HotelImgID, imageName: rowObject.HotelImgID },
@@ -266,7 +270,7 @@ function HotelBookApp() {
]);
setShowHotels(false);
setTimeout(() => {
- const options = {
+ const options: FormValidatorModel = {
rules: {
firstname: {
required: [nameValidation, '* Please enter your first name (only letters accept)'],
@@ -309,24 +313,24 @@ function HotelBookApp() {
}
// This method calls for revisting the hotel list page
- const backToHotels = () => {
+ const backToHotels = (): void => {
checkInDate.current = defaultCheckInDate;
checkOutDate.current = defaultCheckOutDate;
setShowHotels(true);
}
- const getDate = (date) => {
+ const getDate = (date: Date): Date => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
// This method calls for checking the room whether it is available or not for the user choosed check in and check out date
- const checkRoomAvailable = (checkInOut) => {
- let isRoomAvailable = true;
- const startDate = getDate(checkInDate.current);
- const endDate = getDate(checkOutDate.current);
+ const checkRoomAvailable = (checkInOut: CheckInOut[]): boolean => {
+ let isRoomAvailable: boolean = true;
+ const startDate: Date = getDate(checkInDate.current);
+ const endDate: Date = getDate(checkOutDate.current);
for (let i = 0; i < checkInOut.length; i++) {
- const checkIn = getDate(checkInOut[i].CheckIn);
- const checkOut = getDate(checkInOut[i].CheckOut);
+ const checkIn: Date = getDate(checkInOut[i].CheckIn);
+ const checkOut: Date = getDate(checkInOut[i].CheckOut);
if ((checkIn <= startDate && startDate <= checkOut) || (checkIn <= endDate && endDate <= checkOut)) {
isRoomAvailable = false;
break;
@@ -336,26 +340,25 @@ function HotelBookApp() {
}
// This method calculate and return the price with discount and tax
- const calculatePrice = (price, discount, tax) => {
- const discountAmount = price * (discount * 0.01);
- const discountedPrice = price - discountAmount;
- const taxAmount = discountedPrice * (tax * 0.01);
- const taxedPrice = discountedPrice + taxAmount;
+ const calculatePrice = (price: number, discount: number, tax: number): PriceDetails => {
+ const discountAmount: number = price * (discount * 0.01);
+ const discountedPrice: number = price - discountAmount;
+ const taxAmount: number = discountedPrice * (tax * 0.01);
+ const taxedPrice: number = discountedPrice + taxAmount;
return { OriginalCost: price.toFixed(2), DiscountAmount: discountAmount.toFixed(2), DiscountedPrice: discountedPrice.toFixed(2), TaxAmount: taxAmount.toFixed(2), TaxedPrice: taxedPrice.toFixed(2) };
}
// This method calls for rendering hotel grid row in a custom way using rowTemplate feature
- const renderHotelGridRow = (props) => {
- const src = '/images/' + props.RoomImgID + '.jpg';
- const hotelFacilityList = props.HotelFacility.split(', ');
- const roomFacilityList = props.RoomFacility.split(', ');
- const extrasList = props.Extras.split(', ');
- const isRoomAvailable = checkRoomAvailable(props.CheckInOut);
- const priceCollection = calculatePrice(props.Price, props.DiscountPercentage, props.TaxPercentage);
+ const renderHotelGridRow = (props: Hotel): React.JSX.Element => {
+ const src: string = './images/' + props.RoomImgID + '.jpg';
+ const hotelFacilityList: string[] = props.HotelFacility.split(', ');
+ const roomFacilityList: string[] = props.RoomFacility.split(', ');
+ const extrasList: string[] = props.Extras.split(', ');
+ const isRoomAvailable: boolean = checkRoomAvailable(props.CheckInOut);
+ const priceCollection: PriceDetails = calculatePrice(props.Price, props.DiscountPercentage, props.TaxPercentage);
return (
- {!isRoomAvailable && }
@@ -367,16 +370,16 @@ function HotelBookApp() {
{props.HotelName}
-
- {props.Address}
-
+
+
+ {props.Address}
Rating:
-
+
@@ -453,7 +456,7 @@ function HotelBookApp() {
-
+
{!isRoomAvailable ? "Room's not available" : "Book Room"}
@@ -463,10 +466,10 @@ function HotelBookApp() {
};
// This method calls for rendering the empty record template in the hotel grid when there is no hotel is available according to user specification
- const renderHotelGridEmptyRecordRow = () => {
+ const renderHotelGridEmptyRecordRow = (): React.JSX.Element => {
return (
-
+
There is no hotel available to display at the moment.
@@ -475,22 +478,22 @@ function HotelBookApp() {
}
// This method calls for rendering the hotel grid header in custom way using headerTemplate feature
- const renderHotelGridHeader = (args) => {
+ const renderHotelGridHeader = (args: Column): React.JSX.Element => {
return (
- person.current = c} width='75%' placeholder={'No of person (capacity: ' + selectedRoom.Capacity + ')'} floatLabelType='Always' value={1} min={1} max={selectedRoom.Capacity} />
+ person.current = c} width='95%' placeholder={'No of person (capacity: ' + selectedRoom.Capacity + ')'} floatLabelType='Always' value={1} min={1} max={selectedRoom.Capacity} />
- extraBed.current = e} width='75%' placeholder={'No of extra bed (capacity: ' + selectedRoom.ExtraBed + ' and per bed cost: $' + selectedRoom.ExtraBedCost + ')'} floatLabelType='Always' value={0} min={0} max={selectedRoom.ExtraBed} change={extraBedChange} />
+ extraBed.current = e} width='95%' placeholder={'No of extra bed (capacity: ' + selectedRoom.ExtraBed + ' and per bed cost: $' + selectedRoom.ExtraBedCost + ')'} floatLabelType='Always' value={0} min={0} max={selectedRoom.ExtraBed} change={extraBedChange} />
);
}
-export default HotelBookApp;
+export default HotelBook;
+
+interface PriceDetails {
+ OriginalCost: string;
+ DiscountAmount: string;
+ DiscountedPrice: string;
+ TaxAmount: string;
+ TaxedPrice: string;
+}
+
+interface BookingDetails {
+ FirstName: string;
+ LastName: string;
+ Email: string;
+ Phno: string;
+ Address: string;
+ City: string;
+ Code: string;
+ Country: string;
+ Person: number;
+ ExtraBed: number;
+ HotelData: Hotel;
+ PriceCollection: PriceDetails;
+ FinalPrice: number;
+ ReceiptID: number;
+ BookedDate: Date;
+ CheckIn: Date;
+ CheckOut: Date;
+}
+
+interface KeyData {
+ [key: string]: Object;
+}
diff --git a/Hotel-booking-App/src/DataCreation.js b/Hotel-booking-App/src/components/HotelBook/HotelData.ts
similarity index 80%
rename from Hotel-booking-App/src/DataCreation.js
rename to Hotel-booking-App/src/components/HotelBook/HotelData.ts
index c0699d9..592d7f6 100644
--- a/Hotel-booking-App/src/DataCreation.js
+++ b/Hotel-booking-App/src/components/HotelBook/HotelData.ts
@@ -1,35 +1,33 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-
-const startDate1 = new Date();
-const endDate1 = new Date(startDate1);
+const startDate1: Date = new Date();
+const endDate1: Date = new Date(startDate1);
endDate1.setDate(startDate1.getDate() + 2);
-const startDate2 = new Date(endDate1);
+const startDate2: Date = new Date(endDate1);
startDate2.setDate(endDate1.getDate() + 1);
-const endDate2 = new Date(startDate2);
+const endDate2: Date = new Date(startDate2);
endDate2.setDate(startDate2.getDate() + 2);
-const startDate3 = new Date(endDate2);
+const startDate3: Date = new Date(endDate2);
startDate3.setDate(endDate2.getDate() + 5);
-const endDate3 = new Date(startDate3);
+const endDate3: Date = new Date(startDate3);
endDate3.setDate(startDate3.getDate() + 5);
-const startDate4 = new Date(endDate3);
+const startDate4: Date = new Date(endDate3);
startDate4.setDate(endDate3.getDate() + 5);
-const endDate4 = new Date(startDate4);
+const endDate4: Date = new Date(startDate4);
endDate4.setDate(startDate4.getDate() + 5);
-const startDate5 = new Date(endDate4);
+const startDate5: Date = new Date(endDate4);
startDate5.setDate(endDate4.getDate() + 2);
-const endDate5 = new Date(startDate5);
+const endDate5: Date = new Date(startDate5);
endDate5.setDate(startDate5.getDate() + 2);
-var hotelData = [
+const hotelData: Hotel[] = [
{
HotelID: 102278,
HotelName: 'Benor Hotel',
Address: "59 rue de l'Abbaye",
- Description: 'We are the king of the hotel in the vast beautiful world.',
+ Description: 'We are a top hotel, providing comfort and luxury. Our warm hospitality makes every stay special. Enjoy a memorable experience with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 20,
@@ -52,7 +50,7 @@ var hotelData = [
HotelID: 102278,
HotelName: 'Benor Hotel',
Address: "59 rue de l'Abbaye",
- Description: 'We are the king of the hotel in the vast beautiful world.',
+ Description: 'We are a top hotel, providing comfort and luxury. Our warm hospitality makes every stay special. Enjoy a memorable experience with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 20,
@@ -75,7 +73,7 @@ var hotelData = [
HotelID: 102278,
HotelName: 'Benor Hotel',
Address: "59 rue de l'Abbaye",
- Description: 'We are the king of the hotel in the vast beautiful world.',
+ Description: 'We are a top hotel, providing comfort and luxury. Our warm hospitality makes every stay special. Enjoy a memorable experience with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 20,
@@ -98,7 +96,7 @@ var hotelData = [
HotelID: 117823,
HotelName: 'Zabator Hotel',
Address: "Luisenstr. 48",
- Description: 'Pleasent hotel for pleasent people.',
+ Description: 'A pleasant hotel for pleasant people. We offer comfort, warmth, and great service. Stay with us for a relaxing experience.',
HotelImgID: 'hotel_2',
Rating: 4,
ReviewCount: 30,
@@ -121,7 +119,7 @@ var hotelData = [
HotelID: 117823,
HotelName: 'Zabator Hotel',
Address: "Luisenstr. 48",
- Description: 'Pleasent hotel for pleasent people.',
+ Description: 'A pleasant hotel for pleasant people. We offer comfort, warmth, and great service. Stay with us for a relaxing experience.',
HotelImgID: 'hotel_2',
Rating: 4,
ReviewCount: 30,
@@ -144,7 +142,7 @@ var hotelData = [
HotelID: 117823,
HotelName: 'Zabator Hotel',
Address: "Luisenstr. 48",
- Description: 'Pleasent hotel for pleasent people.',
+ Description: 'A pleasant hotel for pleasant people. We offer comfort, warmth, and great service. Stay with us for a relaxing experience.',
HotelImgID: 'hotel_2',
Rating: 4,
ReviewCount: 30,
@@ -167,7 +165,7 @@ var hotelData = [
HotelID: 322211,
HotelName: 'Ben Swikator',
Address: "Rua do Paço, 67",
- Description: 'Want to explore wave silent see in marvelous hotel.',
+ Description: 'Want to explore the peaceful waves and a marvelous hotel? Experience serenity and luxury with us. Enjoy a stay like no other.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 18,
@@ -190,7 +188,7 @@ var hotelData = [
HotelID: 322211,
HotelName: 'Ben Swikator',
Address: "Rua do Paço, 67",
- Description: 'Want to explore wave silent see in marvelous hotel.',
+ Description: 'Want to explore the peaceful waves and a marvelous hotel? Experience serenity and luxury with us. Enjoy a stay like no other.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 18,
@@ -213,7 +211,7 @@ var hotelData = [
HotelID: 322211,
HotelName: 'Ben Swikator',
Address: "Rua do Paço, 67",
- Description: 'Want to explore wave silent see in marvelous hotel.',
+ Description: 'Want to explore the peaceful waves and a marvelous hotel? Experience serenity and luxury with us. Enjoy a stay like no other.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 18,
@@ -236,7 +234,7 @@ var hotelData = [
HotelID: 112278,
HotelName: 'Zentor Hotel',
Address: "2, rue du Commerce",
- Description: 'We are the queen of the hotel.',
+ Description: 'We are the queen of hospitality, offering elegance and comfort. Our hotel provides a royal experience for every guest. Stay with us and feel the luxury.',
HotelImgID: 'hotel_4',
Rating: 4,
ReviewCount: 35,
@@ -259,7 +257,7 @@ var hotelData = [
HotelID: 112278,
HotelName: 'Zentor Hotel',
Address: "2, rue du Commerce",
- Description: 'We are the queen of the hotel.',
+ Description: 'We are the queen of hospitality, offering elegance and comfort. Our hotel provides a royal experience for every guest. Stay with us and feel the luxury.',
HotelImgID: 'hotel_4',
Rating: 4,
ReviewCount: 35,
@@ -282,7 +280,7 @@ var hotelData = [
HotelID: 112278,
HotelName: 'Zentor Hotel',
Address: "2, rue du Commerce",
- Description: 'We are the queen of the hotel.',
+ Description: 'We are the queen of hospitality, offering elegance and comfort. Our hotel provides a royal experience for every guest. Stay with us and feel the luxury.',
HotelImgID: 'hotel_4',
Rating: 4,
ReviewCount: 35,
@@ -305,7 +303,7 @@ var hotelData = [
HotelID: 127823,
HotelName: 'Bakator Hotel',
Address: "Boulevard Tirou, 255",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_5',
Rating: 2,
ReviewCount: 15,
@@ -328,7 +326,7 @@ var hotelData = [
HotelID: 127823,
HotelName: 'Bakator Hotel',
Address: "Boulevard Tirou, 255",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_5',
Rating: 2,
ReviewCount: 15,
@@ -351,7 +349,7 @@ var hotelData = [
HotelID: 127823,
HotelName: 'Bakator Hotel',
Address: "Boulevard Tirou, 255",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_5',
Rating: 2,
ReviewCount: 15,
@@ -374,7 +372,7 @@ var hotelData = [
HotelID: 332211,
HotelName: 'Zen Swikator',
Address: "Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_6',
Rating: 5,
ReviewCount: 22,
@@ -397,7 +395,7 @@ var hotelData = [
HotelID: 332211,
HotelName: 'Zen Swikator',
Address: "Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_6',
Rating: 5,
ReviewCount: 22,
@@ -420,7 +418,7 @@ var hotelData = [
HotelID: 332211,
HotelName: 'Zen Swikator',
Address: "Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_6',
Rating: 5,
ReviewCount: 22,
@@ -443,7 +441,7 @@ var hotelData = [
HotelID: 342211,
HotelName: 'Cen Zwikator',
Address: "Hauptstr. 31",
- Description: 'Want to explore a marvelous hotel.',
+ Description: 'Want to explore a marvelous hotel? Experience luxury, comfort, and exceptional service. Stay with us for an unforgettable journey.',
HotelImgID: 'hotel_7',
Rating: 5,
ReviewCount: 25,
@@ -466,7 +464,7 @@ var hotelData = [
HotelID: 342211,
HotelName: 'Cen Zwikator',
Address: "Hauptstr. 31",
- Description: 'Want to explore a marvelous hotel.',
+ Description: 'Want to explore a marvelous hotel? Experience luxury, comfort, and exceptional service. Stay with us for an unforgettable journey.',
HotelImgID: 'hotel_7',
Rating: 5,
ReviewCount: 25,
@@ -489,7 +487,7 @@ var hotelData = [
HotelID: 342211,
HotelName: 'Cen Zwikator',
Address: "Hauptstr. 31",
- Description: 'Want to explore a marvelous hotel.',
+ Description: 'Want to explore a marvelous hotel? Experience luxury, comfort, and exceptional service. Stay with us for an unforgettable journey.',
HotelImgID: 'hotel_7',
Rating: 5,
ReviewCount: 25,
@@ -512,7 +510,7 @@ var hotelData = [
HotelID: 132278,
HotelName: 'Bekaor Hotel',
Address: "68 rue de l'Abbaye",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_8',
Rating: 3,
ReviewCount: 30,
@@ -535,7 +533,7 @@ var hotelData = [
HotelID: 132278,
HotelName: 'Bekaor Hotel',
Address: "68 rue de l'Abbaye",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_8',
Rating: 3,
ReviewCount: 30,
@@ -558,7 +556,7 @@ var hotelData = [
HotelID: 132278,
HotelName: 'Bekaor Hotel',
Address: "68 rue de l'Abbaye",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_8',
Rating: 3,
ReviewCount: 30,
@@ -581,7 +579,7 @@ var hotelData = [
HotelID: 137823,
HotelName: 'Zanator Hotel',
Address: "Luisenstr. 56",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_9',
Rating: 5,
ReviewCount: 50,
@@ -604,7 +602,7 @@ var hotelData = [
HotelID: 137823,
HotelName: 'Zanator Hotel',
Address: "Luisenstr. 56",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_9',
Rating: 5,
ReviewCount: 50,
@@ -627,7 +625,7 @@ var hotelData = [
HotelID: 137823,
HotelName: 'Zanator Hotel',
Address: "Luisenstr. 56",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_9',
Rating: 5,
ReviewCount: 50,
@@ -650,7 +648,7 @@ var hotelData = [
HotelID: 343211,
HotelName: 'Bentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_10',
Rating: 2,
ReviewCount: 50,
@@ -673,7 +671,7 @@ var hotelData = [
HotelID: 343211,
HotelName: 'Bentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_10',
Rating: 2,
ReviewCount: 50,
@@ -696,7 +694,7 @@ var hotelData = [
HotelID: 343211,
HotelName: 'Bentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_10',
Rating: 2,
ReviewCount: 50,
@@ -719,7 +717,7 @@ var hotelData = [
HotelID: 142278,
HotelName: 'ZZntor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_11',
Rating: 4,
ReviewCount: 35,
@@ -742,7 +740,7 @@ var hotelData = [
HotelID: 142278,
HotelName: 'ZZntor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_11',
Rating: 4,
ReviewCount: 35,
@@ -765,7 +763,7 @@ var hotelData = [
HotelID: 142278,
HotelName: 'ZZntor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_11',
Rating: 4,
ReviewCount: 35,
@@ -788,7 +786,7 @@ var hotelData = [
HotelID: 129823,
HotelName: 'Oakator Hotel',
Address: "255, RU Boulevard Tirou",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 50,
@@ -811,7 +809,7 @@ var hotelData = [
HotelID: 129823,
HotelName: 'Oakator Hotel',
Address: "255, RU Boulevard Tirou",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 50,
@@ -834,7 +832,7 @@ var hotelData = [
HotelID: 129823,
HotelName: 'Oakator Hotel',
Address: "255, RU Boulevard Tirou",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_1',
Rating: 5,
ReviewCount: 50,
@@ -857,7 +855,7 @@ var hotelData = [
HotelID: 332221,
HotelName: 'ZenZen Swikator',
Address: "66, Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_2',
Rating: 3,
ReviewCount: 22,
@@ -880,7 +878,7 @@ var hotelData = [
HotelID: 332221,
HotelName: 'ZenZen Swikator',
Address: "66, Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_2',
Rating: 3,
ReviewCount: 22,
@@ -903,7 +901,7 @@ var hotelData = [
HotelID: 332221,
HotelName: 'ZenZen Swikator',
Address: "66, Rua do Paço, GG",
- Description: 'Want to explore stunning silent see in a marvelous hotel.',
+ Description: 'Want to explore a stunning, silent sea in a marvelous hotel? Experience tranquility and luxury with us. Enjoy a peaceful and unforgettable stay.',
HotelImgID: 'hotel_2',
Rating: 3,
ReviewCount: 22,
@@ -926,7 +924,7 @@ var hotelData = [
HotelID: 342311,
HotelName: 'CenCake Owikator',
Address: "Hauptstr. 31 Mt GG",
- Description: 'Want to explore a marvelous hotel in marvelous Ocean.',
+ Description: 'Want to explore a marvelous hotel by the marvelous ocean? Experience luxury, tranquility, and breathtaking views. Enjoy an unforgettable stay with us.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 30,
@@ -949,7 +947,7 @@ var hotelData = [
HotelID: 342311,
HotelName: 'CenCake Owikator',
Address: "Hauptstr. 31 Mt GG",
- Description: 'Want to explore a marvelous hotel in marvelous Ocean.',
+ Description: 'Want to explore a marvelous hotel by the marvelous ocean? Experience luxury, tranquility, and breathtaking views. Enjoy an unforgettable stay with us.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 30,
@@ -972,7 +970,7 @@ var hotelData = [
HotelID: 342311,
HotelName: 'CenCake Owikator',
Address: "Hauptstr. 31 Mt GG",
- Description: 'Want to explore a marvelous hotel in marvelous Ocean.',
+ Description: 'Want to explore a marvelous hotel by the marvelous ocean? Experience luxury, tranquility, and breathtaking views. Enjoy an unforgettable stay with us.',
HotelImgID: 'hotel_3',
Rating: 3,
ReviewCount: 30,
@@ -995,7 +993,7 @@ var hotelData = [
HotelID: 192278,
HotelName: 'Zekaorza Hotel',
Address: "68 rue de l'Abbaye GG",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_4',
Rating: 1,
ReviewCount: 30,
@@ -1018,7 +1016,7 @@ var hotelData = [
HotelID: 192278,
HotelName: 'Zekaorza Hotel',
Address: "68 rue de l'Abbaye GG",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_4',
Rating: 1,
ReviewCount: 30,
@@ -1041,7 +1039,7 @@ var hotelData = [
HotelID: 192278,
HotelName: 'Zekaorza Hotel',
Address: "68 rue de l'Abbaye GG",
- Description: 'We have different theme hotel.',
+ Description: 'We have a variety of themed hotels, each offering a unique experience. Enjoy a stay that matches your style and preferences. Discover comfort with a creative touch.',
HotelImgID: 'hotel_4',
Rating: 1,
ReviewCount: 30,
@@ -1064,7 +1062,7 @@ var hotelData = [
HotelID: 197823,
HotelName: 'Zabatorza Hotel',
Address: "Luisenstr. 56 GG",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_5',
Rating: 3,
ReviewCount: 10,
@@ -1087,7 +1085,7 @@ var hotelData = [
HotelID: 197823,
HotelName: 'Zabatorza Hotel',
Address: "Luisenstr. 56 GG",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_5',
Rating: 3,
ReviewCount: 10,
@@ -1110,7 +1108,7 @@ var hotelData = [
HotelID: 197823,
HotelName: 'Zabatorza Hotel',
Address: "Luisenstr. 56 GG",
- Description: 'Pleasent hotel for polite people.',
+ Description: 'A pleasant hotel for polite people. We offer comfort, warmth, and excellent service. Enjoy a relaxing and memorable stay with us.',
HotelImgID: 'hotel_5',
Rating: 3,
ReviewCount: 10,
@@ -1133,7 +1131,7 @@ var hotelData = [
HotelID: 393211,
HotelName: 'Saentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_6',
Rating: 3,
ReviewCount: 10,
@@ -1156,7 +1154,7 @@ var hotelData = [
HotelID: 393211,
HotelName: 'Saentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_6',
Rating: 3,
ReviewCount: 10,
@@ -1179,7 +1177,7 @@ var hotelData = [
HotelID: 393211,
HotelName: 'Saentoo Swikator',
Address: "66,RuRua do Paço",
- Description: 'Want to explore shift silent water wave in ocean.',
+ Description: 'Want to experience the gentle, shifting waves of the silent ocean? Embrace tranquility and beauty as you explore the serene waters. Let the oceans calmness refresh your soul.',
HotelImgID: 'hotel_6',
Rating: 3,
ReviewCount: 10,
@@ -1202,7 +1200,7 @@ var hotelData = [
HotelID: 199278,
HotelName: 'Zoontor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_7',
Rating: 1,
ReviewCount: 35,
@@ -1225,7 +1223,7 @@ var hotelData = [
HotelID: 199278,
HotelName: 'Zoontor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_7',
Rating: 1,
ReviewCount: 35,
@@ -1248,7 +1246,7 @@ var hotelData = [
HotelID: 199278,
HotelName: 'Zoontor Hotel',
Address: "333, rue du Commerce",
- Description: 'We are the winner hotel.',
+ Description: 'We are an award-winning hotel, offering exceptional service and luxury. Experience the best in hospitality with us. Your perfect stay starts here.',
HotelImgID: 'hotel_7',
Rating: 1,
ReviewCount: 35,
@@ -1271,7 +1269,7 @@ var hotelData = [
HotelID: 199923,
HotelName: 'Sasktor Hotel',
Address: "255, RU Boulevard Tirou GG",
- Description: 'Pleasent hotel for sweet people.',
+ Description: 'A pleasant hotel for sweet people. We offer warmth, comfort, and great service. Enjoy a delightful stay with us.',
HotelImgID: 'hotel_8',
Rating: 2,
ReviewCount: 50,
@@ -1293,4 +1291,39 @@ var hotelData = [
];
-exports.data = hotelData;
\ No newline at end of file
+export const data: Hotel[] = hotelData;
+
+export interface Location {
+ latitude: number;
+ longitude: number;
+ TooltipContent: string;
+}
+
+export interface CheckInOut {
+ CheckIn: Date;
+ CheckOut: Date;
+}
+
+export interface Hotel {
+ HotelID: number;
+ HotelName: string;
+ Address: string;
+ Description: string;
+ HotelImgID: string;
+ Rating: number;
+ ReviewCount: number;
+ Location: Location;
+ HotelFacility: string;
+ RoomID: number;
+ RoomImgID: string;
+ RoomName: string;
+ Capacity: number;
+ ExtraBed: number;
+ ExtraBedCost: number;
+ DiscountPercentage: number;
+ TaxPercentage: number;
+ Extras: string;
+ RoomFacility: string;
+ Price: number;
+ CheckInOut: CheckInOut[];
+}
\ No newline at end of file
diff --git a/Hotel-booking-App/src/usa.json b/Hotel-booking-App/src/components/HotelBook/usa.json
similarity index 100%
rename from Hotel-booking-App/src/usa.json
rename to Hotel-booking-App/src/components/HotelBook/usa.json
diff --git a/Hotel-booking-App/src/index.css b/Hotel-booking-App/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/Hotel-booking-App/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/Hotel-booking-App/src/index.js b/Hotel-booking-App/src/index.js
deleted file mode 100644
index efe9103..0000000
--- a/Hotel-booking-App/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import HotelBookApp from './HotelBookApp';
-import * as serviceWorker from './serviceWorker';
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-const rootElement = document.getElementById("App");
-const root = createRoot(rootElement);
-
-root.render(
-
-
-
-);
-
-serviceWorker.unregister();
diff --git a/Hotel-booking-App/src/logo.svg b/Hotel-booking-App/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/Hotel-booking-App/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/Hotel-booking-App/src/sample-base.js b/Hotel-booking-App/src/sample-base.js
deleted file mode 100644
index 706ad12..0000000
--- a/Hotel-booking-App/src/sample-base.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
- import { enableRipple } from '@syncfusion/ej2-base';
-enableRipple(true);
-
- export class SampleBase extends React.PureComponent {
- rendereComplete() {
- /**custom render complete function */
- }
- componentDidMount() {
- setTimeout(() => {
- this.rendereComplete();
- });
- }
- }
-
\ No newline at end of file
diff --git a/Hotel-booking-App/src/serviceWorker.js b/Hotel-booking-App/src/serviceWorker.js
deleted file mode 100644
index b04b771..0000000
--- a/Hotel-booking-App/src/serviceWorker.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.0/8 are considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
- )
-);
-
-export function register(config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return;
- }
-
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit https://bit.ly/CRA-PWA'
- );
- });
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
- }
- });
- }
-}
-
-function registerValidSW(swUrl, config) {
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.');
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
- }
- }
- };
- };
- })
- .catch(error => {
- console.error('Error during service worker registration:', error);
- });
-}
-
-function checkValidServiceWorker(swUrl, config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl, {
- headers: { 'Service-Worker': 'script' },
- })
- .then(response => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister().then(() => {
- window.location.reload();
- });
- });
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
- }
- })
- .catch(() => {
- console.log(
- 'No internet connection found. App is running in offline mode.'
- );
- });
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready
- .then(registration => {
- registration.unregister();
- })
- .catch(error => {
- console.error(error.message);
- });
- }
-}
diff --git a/Hotel-booking-App/src/setupTests.js b/Hotel-booking-App/src/setupTests.js
deleted file mode 100644
index 74b1a27..0000000
--- a/Hotel-booking-App/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
diff --git a/Hotel-booking-App/styles/index.css b/Hotel-booking-App/styles/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/Hotel-booking-App/tsconfig.json b/Hotel-booking-App/tsconfig.json
new file mode 100644
index 0000000..a60771d
--- /dev/null
+++ b/Hotel-booking-App/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "outDir": "./dist/",
+ "noImplicitAny": true,
+ "module": "commonjs",
+ "target": "es5",
+ "jsx": "react",
+ "resolveJsonModule": true,
+ }
+}
\ No newline at end of file
diff --git a/Hotel-booking-App/webpack.config.js b/Hotel-booking-App/webpack.config.js
new file mode 100644
index 0000000..41d6c9a
--- /dev/null
+++ b/Hotel-booking-App/webpack.config.js
@@ -0,0 +1,60 @@
+var glob = require("glob");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+ entry: {
+ index: glob.sync("./src/**/**/*.tsx")
+ },
+ target: "web",
+ module: {
+ rules: [
+ {
+ test: /\.tsx$/,
+ exclude: /node_modules/,
+ use: "ts-loader",
+ },
+ {
+ test: /\.css$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ "css-loader"
+ ],
+ },
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ use: "ts-loader",
+ },
+ ],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "index.html"
+ }),
+ new MiniCssExtractPlugin({
+ filename: "index.css",
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ { from: "public/images", to: "images" },
+ ],
+ }),
+ ],
+ resolve: {
+ extensions: ['.tsx', '.ts', '.js'],
+ },
+ output: {
+ filename: "[name].js",
+ path: path.resolve(__dirname, "dist"),
+ },
+ optimization: {
+ minimize: true,
+ minimizer: [new TerserPlugin({
+ extractComments: false,
+ })],
+ },
+};
\ No newline at end of file
+ 
+ 
);
}
// Memoized the hotel grid to prevent unnecessary rerenders
- const memoizedHotelGrid = React.useMemo(() => {
+ const memoizedHotelGrid: React.JSX.Element = React.useMemo((): React.JSX.Element => {
return (
![{props.imageName}]({"/images/")
![{props.imageName]({"./images/")