Filling listings components with data from api

Author: albertodev7

client/src/Graphql/Listing/index.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+import { Listing } from 'src/graphql.schema'
+
+export const listingQuery = gql`
+    query ListingQuery($id: ID!) {
+        listing(id: $id) {
+            id
+            name
+            category
+            description
+            price
+            beds
+            guests
+            lat
+            lng
+            amenities
+        }
+    }
+`
+
+interface WithListing {
+    listing: Listing | null
+    loading: boolean
+}
+
+interface Props {
+    id: string
+    children: (values: WithListing) => React.ReactNode | null
+}
+
+export class ListingQuery extends React.PureComponent<Props> {
+    public render() {
+        const { id } = this.props
+
+        return (
+            <Query query={listingQuery} variables={{ id }}>
+                {({ data, loading }) => {
+                    let listing: Listing | null = null
+
+                    if (data && data.listing) {
+                        listing = data.listing
+                    }
+
+                    return this.props.children({
+                        listing,
+                        loading
+                    })
+                }}
+            </Query>
+        )
+    }
+}

client/src/Pages/Listing/Components/Details/Details.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+
+import { Br } from 'src/Components/Br'
+import {
+    Container,
+    Title,
+    Row,
+    User,
+    Username,
+    UserAvatar,
+    Text,
+    RoomDetails,
+    GroupIcon,
+    RoomDetailsText,
+    BedIcon,
+    DoorIcon,
+    BathIcon,
+    Description,
+    TitleWrap
+} from './style'
+
+interface Props {
+    name: string
+    category: string
+    description: string
+    price: number
+    beds: number
+    guests: number
+    lat: number
+    lng: number
+    amenities: string[]
+}
+
+export const DetailsUI: React.SFC<Props> = ({
+    name,
+    category,
+    description,
+    price,
+    beds,
+    guests,
+    lat,
+    lng,
+    amenities
+}) => (
+    <Container>
+        <Row>
+            <TitleWrap>
+                <Title>{name}</Title>
+
+                <Text>Gdynia</Text>
+            </TitleWrap>
+            <User>
+                <UserAvatar src="https://a0.muscache.com/im/pictures/ead1a702-12fc-4a19-81c6-0fd97ec7d08b.jpg?aki_policy=profile_x_medium" />
+
+                <Username>Marlena</Username>
+            </User>
+        </Row>
+
+        <RoomDetails>
+            <GroupIcon />
+            <RoomDetailsText>{guests} goście</RoomDetailsText>
+
+            <DoorIcon />
+            <RoomDetailsText>1 sypialnia</RoomDetailsText>
+
+            <BedIcon />
+            <RoomDetailsText>{beds} lozko</RoomDetailsText>
+
+            <BathIcon />
+            <RoomDetailsText>1 lazienka</RoomDetailsText>
+        </RoomDetails>
+
+        <Description>{description}</Description>
+
+        <Br />
+    </Container>
+)

client/src/Pages/Listing/Components/Details/index.tsx

@@ -1,59 +1,24 @@
 import * as React from 'react'
 
-import { Br } from 'src/Components/Br'
-import {
-    Container,
-    Title,
-    Row,
-    User,
-    Username,
-    UserAvatar,
-    Text,
-    RoomDetails,
-    GroupIcon,
-    RoomDetailsText,
-    BedIcon,
-    DoorIcon,
-    BathIcon,
-    Description
-} from './style'
-
-export const Details: React.SFC<{}> = () => (
-    <Container>
-        <Row>
-            <div>
-                <Title>Studio w Centrum przy Dworcu Gdynia</Title>
-
-                <Text>Gdynia</Text>
-            </div>
-            <User>
-                <UserAvatar src="https://a0.muscache.com/im/pictures/ead1a702-12fc-4a19-81c6-0fd97ec7d08b.jpg?aki_policy=profile_x_medium" />
-
-                <Username>Marlena</Username>
-            </User>
-        </Row>
-
-        <RoomDetails>
-            <GroupIcon />
-            <RoomDetailsText>2 goście</RoomDetailsText>
-
-            <DoorIcon />
-            <RoomDetailsText>1 sypialnia</RoomDetailsText>
-
-            <BedIcon />
-            <RoomDetailsText>1 lozko</RoomDetailsText>
-
-            <BathIcon />
-            <RoomDetailsText>1 lazienka</RoomDetailsText>
-        </RoomDetails>
-
-        <Description>
-            Bardzo słoneczny i ciepły w pełni wyposażony apartament ok 25m2 w
-            centrum Gdyni. Duży pokój z narożnikiem, aneks kuchenny, łazienka.
-            Do dworca Gdynia Główna 7 min spacerem. Wszystko czego możesz chcieć
-            na wakacjach i w podróży służbowej. Zapraszam :)
-        </Description>
-
-        <Br />
-    </Container>
-)
+import { ListingQuery } from 'src/Graphql/Listing'
+import { DetailsUI } from './Details'
+
+interface Props {
+    id: string
+}
+
+export class Details extends React.Component<Props, {}> {
+    public render() {
+        const { id } = this.props
+        return (
+            <ListingQuery id={id}>
+                {({ listing, loading }) => {
+                    if (loading || !listing) {
+                        return <div />
+                    }
+                    return <DetailsUI {...listing} />
+                }}
+            </ListingQuery>
+        )
+    }
+}

client/src/Pages/Listing/Components/Details/style.tsx

@@ -10,6 +10,9 @@ export const Container = styled.div`
 export const Row = styled.div`
     display: flex;
 `
+export const TitleWrap = styled.div`
+    width: 500px;
+`
 export const Title = styled.p`
     max-width: 500px;
     font-size: 30px;

client/src/Pages/Listing/index.tsx

@@ -4,13 +4,18 @@ import { Image } from './Components/Image'
 import { Row } from './Components/Row'
 import { Details } from './Components/Details'
 import { Reservation } from './Components/Reservation'
+import { RouteComponentProps } from 'react-router'
 
-export const Listing: React.SFC<{}> = () => (
+export const Listing: React.SFC<RouteComponentProps<{ id: string }>> = ({
+    match: {
+        params: { id }
+    }
+}) => (
     <>
         <Image />
 
         <Row>
-            <Details />
+            <Details id={id} />
             <Reservation />
         </Row>
     </>

client/src/Pages/Listings/Components/ListingsList/Components/ListingItem/index.tsx

@@ -15,33 +15,58 @@ import {
     VerySmallText
 } from './style'
 
-export const ListingItem: React.SFC<{}> = () => (
-    <Link to="/listing/1" style={{ textDecoration: 'none' }}>
+interface Props {
+    id: number
+    name: string
+    category: string
+    description: string
+    price: number
+    beds: number
+    guests: number
+    lat: number
+    lng: number
+    amenities: string[]
+}
+
+const getRoute = (id: number) => `/listing/${id}`
+
+export const ListingItem: React.SFC<Props> = ({
+    id,
+    name,
+    category,
+    description,
+    price,
+    beds,
+    guests,
+    lat,
+    lng,
+    amenities
+}) => (
+    <Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
         <Container>
             <Image src="https://a0.muscache.com/im/pictures/126e41c4-2a1b-4251-b516-d239351126f7.jpg?aki_policy=large" />
 
             <Row>
                 <Details>
                     <Subtitle>CAŁY APARTAMENT</Subtitle>
-                    <Title>Studio w Centrum przy Dworcy Gdynia</Title>
+                    <Title>{name}</Title>
 
                     <RoomsDetails>
-                        <SmallText>2 goście •</SmallText>
+                        <SmallText>{guests} goście •</SmallText>
                         <SmallText>1 sypialnia •</SmallText>
-                        <SmallText>1 Łóżko •</SmallText>
+                        <SmallText>{beds} Łóżko •</SmallText>
                         <SmallText>1 Łazienka</SmallText>
                     </RoomsDetails>
 
                     <RoomsDetails>
-                        <SmallText>WIFI •</SmallText>
-                        <SmallText>Kuchnia •</SmallText>
-                        <SmallText>Pralka •</SmallText>
-                        <SmallText>Zmywarka</SmallText>
+                        {amenities.map((amenitie, i) => (
+                            <SmallText key={i}>{amenitie} •</SmallText>
+                        ))}
                     </RoomsDetails>
                 </Details>
 
                 <Pricing>
-                    <Title>90 zł</Title>
+                    <Title>{price} zł</Title>
                     <VerySmallText>za dzien</VerySmallText>
 
                     <Stars />

client/src/Pages/Listings/Components/ListingsList/index.tsx

@@ -9,7 +9,9 @@ export const ListingsList: React.SFC<{}> = () => (
     <Container>
         <ListingsQuery>
             {({ listings, loading }) =>
-                listings.map(listing => <ListingItem key={listing.id} />)
+                listings.map(listing => (
+                    <ListingItem key={listing.id} {...listing} />
+                ))
             }
         </ListingsQuery>
     </Container>