Login to add listings.
; 54 | 55 | const onSubmit = handleSubmit(async ({ description, title }) => { 56 | await createListing({ variables: { description, title } }); 57 | reset(); 58 | pushAddListing(); 59 | }); 60 | 61 | return ( 62 | 75 | ); 76 | }; 77 | 78 | export default AddListing; 79 | -------------------------------------------------------------------------------- /classifieds-app/src/components/Root/Listings/AddListing/index.js: -------------------------------------------------------------------------------- 1 | import AddListing from "./AddListing"; 2 | 3 | export default AddListing; 4 | -------------------------------------------------------------------------------- /classifieds-app/src/components/Root/Listings/Listings.js: -------------------------------------------------------------------------------- 1 | import gql from "graphql-tag"; 2 | import React from "react"; 3 | import { useQuery } from "react-apollo"; 4 | import styled from "styled-components"; 5 | 6 | import AddListing from "./AddListing"; 7 | 8 | const Description = styled.p` 9 | margin-bottom: 0; 10 | `; 11 | 12 | const Listing = styled.div` 13 | padding: 1rem 0; 14 | 15 | :not(:last-child) { 16 | border-bottom: 1px solid ${props => props.theme.veryLightGrey}; 17 | } 18 | `; 19 | 20 | const Title = styled.strong` 21 | display: block; 22 | font-size: 1.5rem; 23 | font-weight: 700; 24 | `; 25 | 26 | const Wrapper = styled.div``; 27 | 28 | const query = gql` 29 | { 30 | listings { 31 | description 32 | id 33 | title 34 | } 35 | } 36 | `; 37 | 38 | const Listings = () => { 39 | const { data, loading, refetch } = useQuery(query); 40 | 41 | if (loading) return "Loading..."; 42 | 43 | return ( 44 |