an-example

Skip to content
Search or jump to…

Pull requests
Issues
Marketplace
Explore
 
@nCally 
0
00nCally/trinityrealtors Private
 Code Issues 0 Pull requests 0 Projects 0 Security Insights Settings
trinityrealtors/pages/components/rent/rent.js
@nCally nCally like fnc working; will add subscription
c08d723 on Apr 8
89 lines (78 sloc)  3.28 KB
 

import Link from 'next/link';
import gql from 'graphql-tag';
import {Query} from 'react-apollo';
import Loading from '../layout/loading';
import ErrorComponent from '../layout/error';

const LoadingList = [<Loading />, <Loading />, <Loading />]
const ErrorList = ["", <ErrorComponent />, ""]

const search = gql`
    {
        rent_buy(category: "rent"){
            _id
            price
            bath
            bed
            btype
            address
            date
            url
        }
    }
`;

const Rent = () => (
    <div className="prop-container">
        <Query query={search}>
            {
                ({loading, error, data}) => {
                    if(loading) return LoadingList.map(load => <div>{load}</div>);
                    if(error) return ErrorList.map(comp => <div>{comp}</div>);

                    
                    return data.rent_buy.reverse().map(house => {
                        return(
                            <Link href={`/listing?id=${house._id}`} key={house._id} >
                                <div style={{cursor:"pointer"}} className="prop-hover">
                                    <div>
                                        <img style={{width:"100%",margin:"auto"}} src={house.url[0]} alt={`Trinity realtors - ${house.btype}`}></img>
                                    </div>
                                    <div className="info" style={{color:"#333"}}>
                                        <div style={{display: "flex",fontWeight:"bold"}}>
                                            <div style={{marginTop:"5px", marginRight:"10px"}}><span>{house.bed}</span> <span style={{fontWeight: "lighter"}}>bed</span></div>
                                            <div style={{marginTop:"5px", marginRight:"10px"}}><span>{house.bath}</span> <span style={{fontWeight: "lighter"}}>bath</span></div>
                                            <div style={{marginTop:"5px", marginRight:"10px"}}><span>{house.btype}</span></div>
                                        </div>
                                        <p style={{margin:0,fontSize:"14px",fontWeight:300}}>{house.address}</p>
                                        <h4 style={{fontSize:"17px",fontWeight:"bold",margin:"5px 0"}}>&#8358; {(house.price).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</h4>
                                    </div>
                                    
                                </div>
                            </Link>
                        )
                    })

                }
            }
        </Query>

        <style jsx>{`
            .prop-container{
                display:grid;
                grid-template-columns:1fr 1fr 1fr;
                grid-gap:20px;
                padding:50px 20px
            }
            .prop-hover{
                padding: 7px;
                border-style: solid;
                border-width:1px;
                border-color: #ccc;
                border-radius: 10px;
            }
            .prop-hover:hover{
                border-color: #279b37;
            }
            @media (max-width: 768px){
                .prop-container{
                    grid-template-columns: 1fr;
                    grid-row-gap: 35px;
                }
            }
        `}</style>
    </div>
)

export default Rent;
© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About