{"componentChunkName":"component---src-templates-post-js","path":"/create-view-a-listing-page","result":{"data":{"markdownRemark":{"html":"

In this chapter we will create the page that will allow users to view an individual listing.

\n

In the pages directory create a ViewListing.js file and add the following:

\n
import React from \"react\"\nimport RedBlockButton from \"../components/buttons/RedBlockButton\"\nimport { useQuery } from \"@apollo/react-hooks\"\nimport { GET_A_LISTING } from \"../graphql/Queries\"\nimport activy from \"../assets/trip_type.svg\"\nimport amenities from \"../assets/trip_activity.svg\"\nimport LandingHeader from \"../components/navs/LandingHeader\"\nimport { Skeleton } from \"antd\"\n\nimport {\n  HeadingOne,\n  HeadingTwo,\n  HeadingThree,\n  BodyOne,\n} from \"../components/typography\"\nconst ViewListing = props => {\n  const { loading, data, error } = useQuery(GET_A_LISTING, {\n    variables: {\n      listingId: props.id,\n    },\n  })\n\n  if (loading) return <Skeleton />\n  if (error) return <p className=\"text-red\">{error}</p>\n\n  const listing = data.getAListing\n  return (\n    <>\n      <LandingHeader imgURL={listing.coverPhoto} />\n      <div className=\"grid grid-cols-13 p-5 mt-10\">\n        <div className=\"mr-16\">\n          <HeadingOne className=\"font-display  font-semibold text-3xl text-black\">\n            {listing.listingName}\n          </HeadingOne>\n          <HeadingTwo className=\"font-display text-xl text-black mt-4 mb-8\">\n            {listing.listingLocation}\n          </HeadingTwo>\n          <HeadingThree className=\"font-display font-bold text-xl text-center s:text-left mb-5 text-black \">\n            $ {listing.price}\n          </HeadingThree>\n          <BodyOne className=\"font-display text-left text-black \">\n            {listing.listingDescription}\n          </BodyOne>\n\n          <HeadingThree className=\"font-display text-2xl font-bold text-black mt-10\">\n            Trip ammenities\n          </HeadingThree>\n\n          <div className=\"flex flex-col p-3\" key=\"types\">\n            {listing.listingType.map((t, index) => (\n              <div key={index} className=\"flex flex-row\">\n                <img src={activy} alt=\"activity\" />\n                <BodyOne className=\"font-display ml-2 mt-2\">{t.name}</BodyOne>\n              </div>\n            ))}\n          </div>\n\n          <HeadingThree className=\"font-display text-2xl font-bold text-black  mt-10\">\n            Activites\n          </HeadingThree>\n          <div className=\"flex flex-col p-3\" key=\"activies\">\n            {listing.listingActivities.map((a, index) => (\n              <div key={index} className=\"flex flex-row\">\n                <img src={amenities} alt=\"amend\" />\n                <BodyOne className=\"font-display ml-2 mt-2\">{a.name}</BodyOne>\n              </div>\n            ))}\n          </div>\n        </div>\n        <div className=\"flex flex-col \">\n          <div>\n            <RedBlockButton\n              onClick={() => props.navigate(`/booking/${props.id}`)}\n              className=\" text-center s:pr-20 mb-10 mt-10\"\n            >\n              Book\n            </RedBlockButton>\n          </div>\n          <div>\n            <HeadingThree className=\"font-display text-xl   text-black mt-10 mb-10\">\n              Your guide\n            </HeadingThree>\n            <img\n              src={listing.guide.Avatar}\n              alt=\"guide\"\n              className=\"rounded-lg h-48\"\n            />\n          </div>\n          <div>\n            <HeadingThree className=\"font-display text-xl   text-black mt-10\">\n              {listing.guide.Name}\n            </HeadingThree>\n            <BodyOne className=\"font-display   text-black mt-5 \">\n              {listing.guide.Bio}\n            </BodyOne>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default ViewListing
\n

👁️ Like with the getAllListings query we are hit the GET_A_LISTING query however we are passing in the listingId as the variable which we are getting from the URL of this component.

\n

👁️ In our Return block we have basic markup with CSS Grid to display the content of the listing in a responsive manner. We also map over the activities and types with icons.

\n

Next up go into the Queries.js file and add the following schema doc:

\n
export const GET_A_LISTING = gql`\n  query GetAListing($listingId: String!) {\n    getAListing(listingId: $listingId) {\n      coverPhoto\n      listingId\n      listingName\n      listingType {\n        name\n      }\n      listingLocation\n      listingActivities {\n        name\n      }\n      listingDescription\n      price\n      numberOfDays\n      guide {\n        Bio\n        Name\n        Avatar\n      }\n      specialType\n    }\n  }\n`
\n

👁️ For this specific query we are specifing that the listingId is a string and we are querying all the fields from the listing Type

\n

Next go over to the routes.js file and add the following:

\n
import React from \"react\"\nimport { Router } from \"@reach/router\"\nimport Home from \"./pages/index\"\nimport ViewListing from \"./pages/ViewListing\"\nconst Routes = ({ props }) => {\n  return (\n    <Router>\n      <Home path=\"/\" props={props} />\n      <ViewListing path=\"/listing/:id\" props={props} />\n    </Router>\n  )\n}\n\nexport default Routes
\n

👁️ All we doing here is making our ViewListing component accessabile on the /listing/:id route, where we will swap :id for the actual id of the listing from the server to enable us to query the API for the listing data.

\n

👁️ By passing down the props into the components we can pass down functions from Reach router and other utils so that it is accessible in other parts of the application.

\n

Now you should be able to view any listing.

\n

\"view-a-listing\"

","frontmatter":{"date":"July 20, 2020","path":"/create-view-a-listing-page","title":"Create View a Listing Page","postnumber":44}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/setting-up-advanced-forms","postnumber":45}}},"next":{"node":{"frontmatter":{"path":"/create-all-listings-page","postnumber":43}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}