Migrate old components to new template (tsx to js too)

SmartHotel360.PublicWeb/ClientApp/src/App.js

@@ -8,7 +8,8 @@ import FetchData from './components/FetchData';
 export default () => (
   <Layout>
     <Route exact path='/' component={Home} />
-    <Route path='/counter' component={Counter} />
-    <Route path='/fetchdata/:startDateIndex?' component={FetchData} />
+    <Route exact path='/SearchRooms' component={SearchRooms} />
+    <Route exact path='/Pets' component={Pets} />
+    <Route path='/RoomDetail/:hotelId' component={RoomDetail} />
   </Layout>
 );

SmartHotel360.PublicWeb/ClientApp/src/components/Auth.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as UserStore from '../store/User';
+import Loading from './Loading';
+
+class Auth extends Component {
+    renderLogin() {
+        if (!this.props.name && !this.props.isLoading) {
+            return (<li>
+                <span className='sh-auth-link' onClick={() => { this.props.login() }}>Login</span>
+            </li>);
+        }
+    }
+
+    renderLoading() {
+        if (this.props.isLoading) {
+            return (<li>
+                <Loading isBright={true} />
+            </li>);
+        }
+    }
+
+    renderLogout() {
+        if (this.props.name && !this.props.isLoading) {
+            return (<li className='sh-auth-group'>
+                <section className='sh-auth-profile'>
+                    <div className='sh-auth-name'>
+                        {this.props.name}
+                    </div>
+                    <span className='sh-auth-link' onClick={() => { this.props.logout() }}>Logout</span>
+                </section>
+                <img className='sh-auth-picture' src={this.props.gravatar} title={this.props.name} />
+            </li>);
+        }
+    }
+
+    render() {
+        return <div className='sh-auth'>
+
+            {this.renderLogin()}
+            {this.renderLoading()}
+            {this.renderLogout()}
+
+        </div>;
+    }
+
+    componentDidMount() {
+        this.props.init();
+    }
+};
+
+export default connect(
+    state => state.user,
+    dispatch => bindActionCreators(UserStore.actionCreators, dispatch)
+)(Auth);

SmartHotel360.PublicWeb/ClientApp/src/components/Checkbox.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+export default class Checkbox extends Component<CheckboxProps {
+    render() {
+        return <div >
+            <label className='sh-checkbox'>
+                <input className='sh-checkbox-input is-hidden' type='checkbox' />
+                <span className='sh-checkbox-name'>{this.props.name}</span>
+                <span className='sh-checkbox-label icon-sh-tick'></span>
+            </label>
+        </div>
+    }
+}

SmartHotel360.PublicWeb/ClientApp/src/components/ConferenceRoomsFeatures.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Swipeable from 'react-swipeable';
+import * as ConferenceRoomsFeaturesStore from '../store/ConferenceRoomsFeatures';
+
+
+class ConferenceRoomsFeatures extends Component {
+    componentDidMount() {
+        this.props.request();
+    }
+
+    setBackgroundImage(image) {
+        return {
+            backgroundImage: `url(${image})`,
+        }
+    }
+
+    onLoad = () => {
+        console.log(this.props);
+    }
+
+    onSwipedLeft = () => {
+        this.props.translateLeft();
+    }
+
+    onSwipedRight = () => {
+        this.props.translateRight();
+    }
+
+    renderRoomInCarousel(feature, key) {
+        return (<li key={key} className={'sh-rooms_feature-wrapper ' + (feature.title ? '' : 'is-invisible')}>
+            <div className='sh-rooms_feature-image' style={this.setBackgroundImage(feature.imageUrl)}></div>
+            <div className='sh-rooms_feature-box'>
+                <span className='sh-rooms_feature-title'>
+                    {feature.title}
+                </span>
+                <span className='sh-rooms_feature-text'>
+                    {feature.description}
+                </span>
+            </div>
+        </li>);
+    }
+
+    render() {
+        return <div className='sh-rooms_feature'>
+
+            <span className='sh-rooms_feature-arrow icon-sh-chevron' onClick={this.onSwipedRight}></span>
+            <span className='sh-rooms_feature-arrow sh-rooms_feature-arrow--right icon-sh-chevron' onClick={this.onSwipedLeft}></span>
+
+            <Swipeable
+                trackMouse
+                onSwipedLeft={this.onSwipedLeft}
+                onSwipedRight={this.onSwipedRight}>
+                <div className='sh-rooms_feature-carousel'>
+                    <ul className='sh-rooms_feature-slider' style={this.props.translation.styles}>
+                        {this.props.list.map((feature, key) =>
+                            this.renderRoomInCarousel(feature, key)
+                        )}
+                    </ul>
+                </div>
+            </Swipeable>
+
+            <button className='sh-rooms_feature-button btn'>Find a conference room</button>
+        </div>;
+    }
+}
+
+export default connect(
+    state => state.conferenceRoomsFeatures,
+    dispatch => bindActionCreators(ConferenceRoomsFeaturesStore.actionCreators, dispatch)
+)(ConferenceRoomsFeatures);

SmartHotel360.PublicWeb/ClientApp/src/components/Filter.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import * as $ from 'jquery';
+import { connect } from 'react-redux';
+import { RouteComponentProps } from 'react-router-dom';
+import { ApplicationState } from '../store';
+import * as RoomsStore from '../store/Rooms';
+
+class Filter extends Component {
+    $header;
+    $dropdown;
+    $filter;
+    node;
+
+    constructor() {
+        super();
+
+        this.handleClick = this.handleClick.bind(this);
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+
+        this.state = {
+            modalVisible: false
+        };
+    }
+
+    handleClick() {
+        if (!this.state.modalVisible) {
+            document.addEventListener('click', this.handleOutsideClick, false);
+        } else {
+            document.removeEventListener('click', this.handleOutsideClick, false);
+        }
+
+        this.setState(prevState => ({
+            popupVisible: !prevState.modalVisible,
+        }));
+    }
+
+    handleOutsideClick(e) {
+        if (this.node.contains(e.target)) {
+            return;
+        }
+
+        this.close();
+    }
+
+    setStyles = () => {
+        return {
+            left: this.props.left,
+            right: this.props.right
+        }
+    }
+
+    toggle = () => {
+        if (this.props.disabled) {
+            return;
+        }
+        this.handleClick();
+        this.$header.toggleClass('active');
+        this.$dropdown.toggleClass('active');
+        this.$filter.toggleClass('active');
+    }
+
+    onClickCancel = () => {
+        this.close();
+    }
+
+    onClickApply = () => {
+        this.props.requestFiltered();
+        this.close();
+    }
+
+    close = () => {
+        this.$header.removeClass('active');
+        this.$dropdown.removeClass('active');
+        this.$filter.removeClass('active');
+    }
+
+    render() {
+        return <div ref='filter' className='sh-filter'>
+            <div ref={node => { this.node = node; }}>
+            <label className='sh-filter-header sh-filter-arrow' ref='header' onClick={this.toggle}>
+                <span className='sh-filter-title'>{this.props.title}</span>
+                <i className='sh-filter-icon icon-sh-chevron'></i>
+            </label>
+            <section className='sh-filter-dropdown' ref='dropdown' style={this.setStyles()}>
+                <div>
+                    {this.props.children}
+                </div>
+                <ul className='sh-filter-actions'>
+                    <li className='sh-filter-button sh-filter-button--cancel' onClick={this.onClickCancel}>Cancel</li>
+                    <li className='sh-filter-button sh-filter-button--apply' onClick={this.onClickApply}>Apply</li>
+                </ul>
+            </section>
+            </div>
+        </div>;
+    }
+
+    componentDidMount() {
+        this.$header = $(this.refs.header);
+        this.$dropdown = $(this.refs.dropdown);
+        this.$filter = $(this.refs.filter);
+    }
+}
+
+export default connect(
+    state => state.rooms,
+    dispatch => bindActionCreators(RoomsStore.actionCreators, dispatch)
+)(Filter);

SmartHotel360.PublicWeb/ClientApp/src/components/FilterAvailability.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import Switch from './Switch';
+
+export default class FilterAvailability extends Component {
+    render() {
+        return <div className='sh-filter'>
+            <Switch label='Only available' checked={true} />
+        </div>;
+    }
+}

SmartHotel360.PublicWeb/ClientApp/src/components/FilterCancelation.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export default class FilterCancelation extends Component {
+    render() {
+        return <div className='sh-filter_cancelation'>
+
+        </div>;
+    }
+}

SmartHotel360.PublicWeb/ClientApp/src/components/FilterNeighborhood.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export default class FilterNeighborhood extends Component {
+    render() {
+        return <div className='sh-filter_neighborhood'>
+
+        </div>;
+    }
+}