1110

pending completion

Build # 1110

Build Type

push

travis-ci

Committed by

web-flow

Commit Message

Merge pull request #55 from andela/fx-accommodation-view-170254211

#170254211 accommodation view fix

Run Details

545 of 642 branches covered (84.89%)

Branch coverage included in aggregate %.

14 of 14 new or added lines in 4 files covered. (100.0%)

1413 of 1514 relevant lines covered (93.33%)

13.11 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.05

/src/components/accommodation/AnAccommodationPage.js

/* eslint-disable import/no-named-as-default */
/* eslint-disable react/prop-types */
/* eslint-disable react/destructuring-assignment */
/* esdivnt-disable react/destructuring-assignment */
/* esdivnt-disable react/forbid-prop-types */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import RoomList from './RoomList';
import {
  getAccommodation,
  LikeUnLikeAccommodation
} from '../../redux/actions/accommodatinsAction';
import HomeNav from '../home-nav/HomeNav';
import Footer from '../footer';
import '../../styles/accommodations.scss';
import MapContainer from '../shared/map/MapContainer';
import yellowStar from '../../assets/star-yellow.png';
import whiteStar from '../../assets/star-white.png';
import Rating from 'react-rating';
import { rate } from '../../redux/actions/rateAction';
import { getRate } from '../../redux/actions/getRateAction';
import Feedback from '../feedback/Feedback';
import like from '../../assets/like.svg';
import like_outline from '../../assets/like_outline.svg';
import SideBar from '../side-bar';

export class AnAccommodationPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likeAction: false
    };
  }
  async componentDidMount() {
    const { accId } = this.props;
    await this.props.getAccommodation(accId);
    await this.props.getRate(accId);
  }

  handleRate = rate => {
    this.props.rate({ rate, id: this.props.accId });
  };

  async componentWillReceiveProps() {
    const { likeAction } = this.state;
    if (likeAction) {
      const { accId } = this.props;
      await this.props.getAccommodation(accId);
      this.setState({ likeAction: false });
    }
  }

  likeAnAccommodation = async id => {
    this.setState({ likeAction: true });
    await this.props.LikeUnLikeAccommodation(id);
  };

  render() {
    const { accommodation } = this.props;
    const noImg = 'https://img.icons8.com/officel/200/000000/image-file.png';
    return (
      <>
        <HomeNav />
        <SideBar />

        <>
          <div className="gallery">
            {!accommodation.images ? (
              <h2>Loading...</h2>
            ) : (
              <div className="gallery__items">
                <img
                  src={accommodation.images[0] || noImg}
                  className="gallery__photo--large"
                  alt="accommodation"
                />
                <div className="gallery__sub">
                  <div className="composition composition__photo">
                    <img
                      src={accommodation.images[2] || noImg}
                      alt="photo 3"
                      className="composition__photo composition__photo--p1"
                    />
                    <img
                      src={accommodation.images[1] || noImg}
                      alt="photo 2"
                      className="composition__photo composition__photo--p2"
                    />
                    <img
                      src={accommodation.images[0] || noImg}
                      alt="photo 1"
                      className="composition__photo composition__photo--p3"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>

          <div className="overview">
            <h1 className="overview__heading">
              {accommodation.accommodation_name}
            </h1>
            <div className="overview__stars">
              <Rating
                placeholderRating={this.props.averageRatings}
                emptySymbol={<img src={whiteStar} className="icon" />}
                placeholderSymbol={<img src={yellowStar} className="icon" />}
                fullSymbol={<img src={yellowStar} className="icon" />}
                onClick={rate => this.handleRate(rate)}
              />
            </div>

            <div className="overview__location">
              <span>{`${
                this.props.averageRatings ? this.props.averageRatings : 'No '
              } Average Rating`}</span>
              {/* <div className="overview__icon-location"> */}
              <img className="yellow-star-icon" src={yellowStar} alt="" />
              {/* </div> */}
              <span className="btn-inline">Nairobi, Kenya</span>
            </div>

            <div className="overview__rating">
              <div className="overview__rating-average">{`${accommodation.likes ||
                0} likes`}</div>
              <div
                className="overview__rating-count clickable"
                onClick={() => this.likeAnAccommodation(accommodation.id)}
              >
                <img
                  src={accommodation.liked ? like : like_outline}
                  width={24}
                  height={24}
                />
              </div>
            </div>
          </div>

          <div className="acc__details">
            <div className="acc__details__rooms">
              {!accommodation.Rooms ? (
                <h2>Loading...</h2>
              ) : (
                <RoomList rooms={accommodation.Rooms} />
              )}
            </div>
            <div className="acc__details__feedback">
              <Feedback accommodationId={accommodation.id} />
            </div>
            <div className="acc__details__map">
              <MapContainer lat={-1.2884} lng={36.8233} name="Hotel Name" />
            </div>
          </div>
        </>
        <Footer />
      </>
    );
  }
}

AnAccommodationPage.propTypes = {
  accommodation: PropTypes.object.isRequired,
  getAccommodation: PropTypes.func.isRequired
};

export const mapStateToProps = (state, ownProps) => ({
  accId: ownProps.match.params.acc_id,
  accommodation: state.accommodations.accommodation,
  averageRatings: state.accommodations.averageRatings,
  likestate: state.accommodations.accommodationsLikes
});

const mapDispatchToProps = {
  getAccommodation,
  rate,
  getRate,
  LikeUnLikeAccommodation
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AnAccommodationPage);

1	/* eslint-disable import/no-named-as-default */
2	/* eslint-disable react/prop-types */
3	/* eslint-disable react/destructuring-assignment */
4	/* esdivnt-disable react/destructuring-assignment */
5	/* esdivnt-disable react/forbid-prop-types */
6	import React, { Component } from 'react';
7	import { connect } from 'react-redux';
8	import PropTypes from 'prop-types';
9	import RoomList from './RoomList';
10	import {
11	getAccommodation,
12	LikeUnLikeAccommodation
13	} from '../../redux/actions/accommodatinsAction';
14	import HomeNav from '../home-nav/HomeNav';
15	import Footer from '../footer';
16	import '../../styles/accommodations.scss';
17	import MapContainer from '../shared/map/MapContainer';
18	import yellowStar from '../../assets/star-yellow.png';
19	import whiteStar from '../../assets/star-white.png';
20	import Rating from 'react-rating';
21	import { rate } from '../../redux/actions/rateAction';
22	import { getRate } from '../../redux/actions/getRateAction';
23	import Feedback from '../feedback/Feedback';
24	import like from '../../assets/like.svg';
25	import like_outline from '../../assets/like_outline.svg';
26	import SideBar from '../side-bar';
27
28	export class AnAccommodationPage extends Component {
29	constructor(props) {
30	super(props);	4✔
31	this.state = {	4✔
32	likeAction: false
33	};
34	}
35	async componentDidMount() {
36	const { accId } = this.props;	4✔
37	await this.props.getAccommodation(accId);	4✔
38	await this.props.getRate(accId);	4✔
39	}
40
41	handleRate = rate => {	4✔
42	this.props.rate({ rate, id: this.props.accId });	×
43	};
44
45	async componentWillReceiveProps() {
46	const { likeAction } = this.state;	3✔
47	if (likeAction) {	3!
48	const { accId } = this.props;	3✔
49	await this.props.getAccommodation(accId);	3✔
50	this.setState({ likeAction: false });	3✔
51	}
52	}
53
54	likeAnAccommodation = async id => {	4✔
55	this.setState({ likeAction: true });	1✔
56	await this.props.LikeUnLikeAccommodation(id);	1✔
57	};
58
59	render() {
60	const { accommodation } = this.props;	14✔
61	const noImg = 'https://img.icons8.com/officel/200/000000/image-file.png';	14✔
62	return (	14✔
63	<>
64	<HomeNav />
65	<SideBar />
66
67	<>
68	<div className="gallery">
69	{!accommodation.images ? (	14✔
70	<h2>Loading...</h2>
71	) : (
72	<div className="gallery__items">
73	<img
74	src={accommodation.images[0] \|\| noImg}	6!
75	className="gallery__photo--large"
76	alt="accommodation"
77	/>
78	<div className="gallery__sub">
79	<div className="composition composition__photo">
80	<img
81	src={accommodation.images[2] \|\| noImg}	12✔
82	alt="photo 3"
83	className="composition__photo composition__photo--p1"
84	/>
85	<img
86	src={accommodation.images[1] \|\| noImg}	12✔
87	alt="photo 2"
88	className="composition__photo composition__photo--p2"
89	/>
90	<img
91	src={accommodation.images[0] \|\| noImg}	6!
92	alt="photo 1"
93	className="composition__photo composition__photo--p3"
94	/>
95	</div>
96	</div>
97	</div>
98	)}
99	</div>
100
101	<div className="overview">
102	<h1 className="overview__heading">
103	{accommodation.accommodation_name}
104	</h1>
105	<div className="overview__stars">
106	<Rating
107	placeholderRating={this.props.averageRatings}
108	emptySymbol={<img src={whiteStar} className="icon" />}
109	placeholderSymbol={<img src={yellowStar} className="icon" />}
110	fullSymbol={<img src={yellowStar} className="icon" />}
111	onClick={rate => this.handleRate(rate)}	×
112	/>
113	</div>
114
115	<div className="overview__location">
116	<span>{`${
117	this.props.averageRatings ? this.props.averageRatings : 'No '	14!
118	} Average Rating`}</span>
119	{/* <div className="overview__icon-location"> */}
120	<img className="yellow-star-icon" src={yellowStar} alt="" />
121	{/* </div> */}
122	<span className="btn-inline">Nairobi, Kenya</span>
123	</div>
124
125	<div className="overview__rating">
126	<div className="overview__rating-average">{`${accommodation.likes \|\|	28✔
127	0} likes`}</div>
128	<div
129	className="overview__rating-count clickable"
130	onClick={() => this.likeAnAccommodation(accommodation.id)}	1✔
131	>
132	<img
133	src={accommodation.liked ? like : like_outline}	14✔
134	width={24}
135	height={24}
136	/>
137	</div>
138	</div>
139	</div>
140
141	<div className="acc__details">
142	<div className="acc__details__rooms">
143	{!accommodation.Rooms ? (	14✔
144	<h2>Loading...</h2>
145	) : (
146	<RoomList rooms={accommodation.Rooms} />
147	)}
148	</div>
149	<div className="acc__details__feedback">
150	<Feedback accommodationId={accommodation.id} />
151	</div>
152	<div className="acc__details__map">
153	<MapContainer lat={-1.2884} lng={36.8233} name="Hotel Name" />
154	</div>
155	</div>
156	</>
157	<Footer />
158	</>
159	);
160	}
161	}
162
163	AnAccommodationPage.propTypes = {	2✔
164	accommodation: PropTypes.object.isRequired,
165	getAccommodation: PropTypes.func.isRequired
166	};
167
168	export const mapStateToProps = (state, ownProps) => ({	2✔
169	accId: ownProps.match.params.acc_id,
170	accommodation: state.accommodations.accommodation,
171	averageRatings: state.accommodations.averageRatings,
172	likestate: state.accommodations.accommodationsLikes
173	});
174
175	const mapDispatchToProps = {	2✔
176	getAccommodation,
177	rate,
178	getRate,
179	LikeUnLikeAccommodation
180	};
181
182	export default connect(
183	mapStateToProps,
184	mapDispatchToProps
185	)(AnAccommodationPage);

andela / technites-bn-frontend / 1110

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous