12 |
16 |
13 | 
14 |
15 |
16 |
17 | {title}
18 |
19 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/server/src/lib/api/Google.ts:
--------------------------------------------------------------------------------
1 | import { google } from "googleapis";
2 |
3 | const auth = new google.auth.OAuth2(
4 | process.env.GOOGLE_CLIENT_ID,
5 | process.env.GOOGLE_CLIENT_SECRET,
6 | `${process.env.PUBLIC_URL}/login` // redirect url
7 | );
8 |
9 | export const Google = {
10 |
11 | authUrl: auth.generateAuthUrl({
12 | access_type: "online",
13 | scope: [
14 | "https://www.googleapis.com/auth/userinfo.email",
15 | "https://www.googleapis.com/auth/userinfo.profile",
16 | ],
17 | }),
18 |
19 | logIn: async (code: string) => {
20 | const { tokens } = await auth.getToken(code);
21 |
22 | auth.setCredentials(tokens);
23 |
24 | const { data } = await google
25 | .people({ version: "v1", auth })
26 | .people.get({
27 | resourceName: "people/me",
28 | personFields: "emailAddresses,names,photos",
29 | });
30 |
31 | return { user: data };
32 | },
33 |
34 | };
35 |
--------------------------------------------------------------------------------
/client/src/lib/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { message, notification } from "antd";
2 |
3 | export const iconColor = "#1890ff";
4 |
5 | export let token = sessionStorage.getItem("token");
6 |
7 | export const setToken = (t: string) => {
8 | token = t;
9 | }
10 |
11 | export const formatListingPrice = (price: number, round = true) => {
12 | const formattedListingPrice = round ? Math.round(price / 100) : price / 100;
13 | return `$${formattedListingPrice}`;
14 | };
15 |
16 | export const displaySuccessNotification = (
17 | message: string,
18 | description?: string
19 | ) => {
20 | return notification["success"]({
21 | message,
22 | description,
23 | placement: "topLeft",
24 | style: {
25 | marginTop: 50
26 | }
27 | });
28 | };
29 |
30 | export const displayErrorMessage = (error: string) => {
31 | return message.error(error);
32 | };
33 |
34 |
35 | export const stripeAuthUrl = `https://connect.stripe.com/oauth/authorize?response_type=code&client_id=${process.env.REACT_APP_STRIPE_CLIENT_ID}&scope=read_write`;
--------------------------------------------------------------------------------
/client/src/lib/graphql/mutations/CreateReview/__generated__/CreateReview.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 | import { CreateReviewInput } from "./../../../globalTypes";
7 |
8 | // ====================================================
9 | // GraphQL mutation operation: CreateReview
10 | // ====================================================
11 |
12 | export interface CreateReview_createReview_author {
13 | __typename: "User";
14 | id: string;
15 | name: string;
16 | avatar: string;
17 | contact: string;
18 | }
19 |
20 | export interface CreateReview_createReview {
21 | __typename: "Review";
22 | id: string;
23 | rating: number;
24 | comment: string | null;
25 | createdAt: string;
26 | author: CreateReview_createReview_author;
27 | }
28 |
29 | export interface CreateReview {
30 | createReview: CreateReview_createReview;
31 | }
32 |
33 | export interface CreateReviewVariables {
34 | input: CreateReviewInput;
35 | }
36 |
--------------------------------------------------------------------------------
/client/src/sections/Home/components/HomeListingsSkeleton/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Card, List, Skeleton } from "antd";
3 |
4 | import listingLoadingCardCover from "../../assets/listing-loading-card-cover.jpg";
5 |
6 | export const HomeListingsSkeleton = () => {
7 | const emptyData = [{}, {}, {}, {}];
8 |
9 | return (
10 | - (
28 |
11 |
28 | }
29 | loading
30 | />
31 |
32 | )}
33 | />
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/client/src/lib/graphql/queries/Listings/__generated__/Listings.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 | import { ListingsFilter } from "./../../../globalTypes";
7 |
8 | // ====================================================
9 | // GraphQL query operation: Listings
10 | // ====================================================
11 |
12 | export interface Listings_listings_result {
13 | __typename: "Listing";
14 | id: string;
15 | title: string;
16 | image: string;
17 | address: string;
18 | price: number;
19 | numOfGuests: number;
20 | numReviews: number;
21 | rating: number;
22 | }
23 |
24 | export interface Listings_listings {
25 | __typename: "Listings";
26 | region: string | null;
27 | total: number;
28 | result: Listings_listings_result[];
29 | }
30 |
31 | export interface Listings {
32 | listings: Listings_listings;
33 | }
34 |
35 | export interface ListingsVariables {
36 | location?: string | null;
37 | filter: ListingsFilter;
38 | limit: number;
39 | page: number;
40 | }
41 |
--------------------------------------------------------------------------------
/client/src/sections/Listings/components/ListingsSkeleton/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Card, List, Skeleton } from "antd";
3 |
4 | import listingLoadingCardCover from "../../assets/listing-loading-card-cover.jpg";
5 |
6 | export const ListingsSkeleton = () => {
7 | const emptyData = [{}, {}, {}, {}, {}, {}, {}, {}];
8 |
9 | return (
10 | - (
21 |
11 |
28 | }
29 | loading
30 | className="listings-skeleton__card"
31 | />
32 |
33 | )}
34 | />
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/client/src/sections/Listings/components/ListingsFilters/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Select } from "antd";
3 | import { ListingsFilter } from "../../../../lib/graphql/globalTypes";
4 |
5 | interface Props {
6 | filter: ListingsFilter;
7 | setFilter: (filter: ListingsFilter) => void;
8 | }
9 |
10 | const { Option } = Select;
11 |
12 | export const ListingsFilters = ({ filter, setFilter }: Props) => {
13 | return (
14 | - (
21 |
15 | Filter By
16 |
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/server/src/database/index.ts:
--------------------------------------------------------------------------------
1 | import { MongoClient } from "mongodb";
2 | import { Booking, Chat, Database, Listing, Message, User } from "../lib/types";
3 |
4 | const username = encodeURIComponent(process.env.MONGO_USER!);
5 | const password = encodeURIComponent(process.env.MONGO_PASSWORD!);
6 |
7 | let MONG0_URI_PROD = `mongodb+srv://${username}:${password}@paper-houses.3df2fiq.mongodb.net/?retryWrites=true&w=majority`;
8 |
9 | const url =
10 | process.env.NODE_ENV === "production"
11 | ? MONG0_URI_PROD
12 | : encodeURI(process.env.MONGO_URI_DEV!);
13 |
14 | export const connectDatabase = async (): Promise- setListingsPage(page)
41 | }}
42 | renderItem={userListing => (
43 |
52 |
53 | Listings
54 |
55 |
56 | This section highlights the listings this user currently hosts and has
57 | made available for bookings.
58 |
59 | {userListingsList}
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/client/src/sections/Chat/components/NewMessageInput/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMutation } from '@apollo/client';
2 | import React, { useState } from 'react'
3 | import { CREATE_MESSAGE } from '../../../../lib/graphql/mutations';
4 | import { CreateMessage as CreateMessageData, CreateMessageVariables } from '../../../../lib/graphql/mutations/CreateMessage/__generated__/CreateMessage';
5 | import { displaySuccessNotification } from '../../../../lib/utils';
6 |
7 | interface Props {
8 | recipientId: string
9 | }
10 |
11 | export const NewMessageInput = ({ recipientId }: Props) => {
12 | const [message, setMessage] = useState("");
13 |
14 | // MUTATION TO SEND MESSAGE
15 | const [createMessage] = useMutation<
16 | CreateMessageData,
17 | CreateMessageVariables
18 | >(CREATE_MESSAGE, {
19 | onCompleted: () => {
20 | // displaySuccessNotification("Message Sent");
21 | },
22 | onError: (err) => {
23 | console.log(err);
24 | },
25 | });
26 |
27 | const handleSendMessage = (e: React.KeyboardEvent
48 |
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.9"
2 | services:
3 |
4 | # Backend AI
5 | api:
6 | container_name: api
7 | build:
8 | context: ./server
9 | dockerfile: Dockerfile
10 | restart: always # "no", always, on-failure, unless-stopped
11 | working_dir: /app
12 | volumes:
13 | - ./server:/app
14 | - /app/node_modules
15 | ports:
16 | - "9000:9000"
17 | environment:
18 | MONGO_URI_DEV: mongodb://root:exapmle@mongo-db:27017/paperhouses?authSource=admin
19 | NODE_ENV: development
20 | PUBLIC_URL: http://localhost:3000
21 | SECRET: my_super_secret_for_cookies
22 | GOOGLE_CLIENT_ID:
54 |
70 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | setSearch(evt.target.value)}
66 | onSearch={onSearch}
67 | />
68 |
69 |
71 |
73 | - setBookingsPage(page)
41 | }}
42 | renderItem={listingBooking => {
43 | const bookingHistory = (
44 |
45 |
52 | );
53 |
54 | return (
55 |
46 | Check in: {listingBooking.checkIn}
47 |
48 |
49 | Check out: {listingBooking.checkOut}
50 |
51 |
68 |
74 | ) : null;
75 |
76 | return listingBookingsElement;
77 | };
78 |
--------------------------------------------------------------------------------
/client/src/lib/components/ListingCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { Card, Rate, Typography } from "antd";
4 | import Icon, {
5 | UserOutlined,
6 | } from "@ant-design/icons";
7 | import { iconColor, formatListingPrice } from "../../utils";
8 |
9 | interface Props {
10 | listing: {
11 | id: string;
12 | title: string;
13 | image: string;
14 | address: string;
15 | price: number;
16 | numOfGuests: number;
17 | rating: number;
18 | };
19 | }
20 |
21 | const { Text, Title } = Typography;
22 |
23 | export const ListingCard = ({ listing }: Props) => {
24 | const { id, title, image, address, price, numOfGuests, rating } = listing;
25 |
26 | return (
27 |
28 |
70 | Bookings
71 |
72 | {listingBookingsList}
73 |
38 |
65 |
66 |
67 | );
68 | };
69 |
--------------------------------------------------------------------------------
/client/src/sections/User/components/UserBookings/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { List, Typography } from "antd";
3 | import { ListingCard } from "../../../../lib/components";
4 | import { User } from "../../../../lib/graphql/queries/User/__generated__/User";
5 |
6 | interface Props {
7 | userBookings: User["user"]["bookings"];
8 | bookingsPage: number;
9 | limit: number;
10 | setBookingsPage: (page: number) => void;
11 | }
12 |
13 | const { Paragraph, Text, Title } = Typography;
14 |
15 | export const UserBookings = ({
16 | userBookings,
17 | bookingsPage,
18 | limit,
19 | setBookingsPage
20 | }: Props) => {
21 | const total = userBookings ? userBookings.total : null;
22 | const result = userBookings ? userBookings.result : null;
23 |
24 | const userBookingsList = userBookings ? (
25 |
39 |
40 | {formatListingPrice(price)}
41 | <span>/day</span>
42 |
43 |
44 | {title}
45 |
46 |
47 | {address}
48 |
49 |
50 |
51 |
52 |
64 |
55 |
58 | }
59 | style={{ color: iconColor }}
60 | />
61 | {numOfGuests} guests
62 |
63 | - setBookingsPage(page)
42 | }}
43 | renderItem={userBooking => {
44 | const bookingHistory = (
45 |
46 |
53 | );
54 |
55 | return (
56 |
47 | Check in: {userBooking.checkIn}
48 |
49 |
50 | Check out: {userBooking.checkOut}
51 |
52 |
67 |
68 | Bookings
69 |
70 |
71 | This section highlights the bookings you've made, and the
72 | check-in/check-out dates associated with said bookings.
73 |
74 | {userBookingsList}
75 |
76 | ) : null;
77 |
78 | return userBookingsElement;
79 | };
80 |
--------------------------------------------------------------------------------
/client/src/sections/Home/components/HomeHero/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { Card, Col, Input, Row, Typography } from "antd";
4 |
5 | import torontoImage from "../../assets/toronto.jpg";
6 | import dubaiImage from "../../assets/dubai.jpg";
7 | import losAngelesImage from "../../assets/los-angeles.jpg";
8 | import londonImage from "../../assets/london.jpg";
9 |
10 | const { Title } = Typography;
11 | const { Search } = Input;
12 |
13 | interface Props {
14 | onSearch: (value: string) => void;
15 | }
16 |
17 | export const HomeHero = ({ onSearch }: Props) => {
18 | return (
19 |
20 |
33 |
66 |
67 | );
68 | };
69 |
--------------------------------------------------------------------------------
/client/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import {
4 | ApolloClient,
5 | ApolloProvider,
6 | InMemoryCache,
7 | createHttpLink,
8 | split,
9 | Operation
10 | } from "@apollo/client";
11 | import { setContext } from "@apollo/client/link/context";
12 | import { SubscriptionClient } from "subscriptions-transport-ws";
13 | import { WebSocketLink } from "@apollo/client/link/ws";
14 | import { getMainDefinition } from "@apollo/client/utilities";
15 | import { loadStripe } from "@stripe/stripe-js";
16 | import { Elements } from "@stripe/react-stripe-js";
17 | import reportWebVitals from './reportWebVitals';
18 | import "./styles/index.css";
19 | import { App } from './App';
20 |
21 | // const uri = "https://paperhouses-server.onrender.com/api";
22 | // const wsUrl = "wss://paperhouses-server.onrender.com/api";
23 |
24 | const uri = "http://localhost:9000/api"
25 | const wsUrl = "ws://localhost:9000/api";
26 |
27 | const httpLink = createHttpLink({
28 | uri: uri,
29 | credentials: "include",
30 | });
31 |
32 |
33 | const wsLink = new WebSocketLink(
34 | new SubscriptionClient(wsUrl, {
35 | reconnect: true,
36 | lazy: true,
37 | connectionParams: {
38 | xCsrfToken: sessionStorage.getItem("token") || "",
39 | },
40 | })
41 | );
42 |
43 | const tokenLink = setContext((_, { headers }) => {
44 | // get the X-CSRF-TOKEN token from session storage if it exists
45 | const token = sessionStorage.getItem("token");
46 | console.log(token)
47 | // return the headers to the context so httpLink can read them
48 | return {
49 | headers: {
50 | ...headers,
51 | "X-CSRF-TOKEN": sessionStorage.getItem("token") || "",
52 | },
53 | };
54 | });
55 |
56 | function isSubscription(operation: Operation) {
57 | const definition = getMainDefinition(operation.query);
58 | return (
59 | definition.kind === "OperationDefinition" &&
60 | definition.operation === "subscription"
61 | );
62 | }
63 |
64 | const splitLink = split(
65 | isSubscription,
66 | wsLink,
67 | tokenLink.concat(httpLink)
68 | );
69 |
70 |
71 | const client = new ApolloClient({
72 | link: splitLink,
73 | credentials: 'include',
74 | cache: new InMemoryCache(),
75 | });
76 |
77 |
78 |
79 | const root = ReactDOM.createRoot(
80 | document.getElementById('root') as HTMLElement
81 | );
82 |
83 | const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY!);
84 |
85 | root.render(
86 | //
21 |
22 | Find a place you'll love to stay at
23 |
24 |
32 |
42 |
50 | This is the beginning of your conversation with{" "}
51 | {recipient.name}
52 |
53 |
54 | {messages.map((message, index) => {
55 | const thisMessageDate = new Date(
56 | message.createdAt
57 | ).toDateString();
58 | const prevMessageDate =
59 | index > 0 &&
60 | new Date(messages[index - 1]?.createdAt).toDateString();
61 |
62 | const isSameDay =
63 | index > 0 ? thisMessageDate === prevMessageDate : true;
64 |
65 | const incomingMessage = message.author.id !== viewer.id;
66 |
67 | return (
68 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/server/src/graphql/resolvers/Chat/index.ts:
--------------------------------------------------------------------------------
1 | import { IResolvers } from "apollo-server-express";
2 | import { Request } from "express";
3 | import { ObjectId } from "mongodb";
4 |
5 | import {
6 | Chat,
7 | Database,
8 | Message,
9 | User,
10 | } from "../../../lib/types";
11 | import { authorize } from "../../../lib/utils";
12 | import { ChatArgs } from "./types";
13 |
14 | export const chatResolvers: IResolvers = {
15 | Query: {
16 | chat: async (
17 | _root: undefined,
18 | { recipient }: ChatArgs,
19 | { db, req }: { db: Database; req: Request }
20 | ): Promise
69 | {(!isSameDay || index === 0) && (
70 |
83 | );
84 | })}
85 |
86 | - (
76 |
77 |
44 |
72 | );
73 | }
74 |
75 | return (
76 |
50 |
57 | {content}
58 |
59 |
60 |
68 | {formatDate(new Date(date))}
69 |
70 |
71 |
77 | {!sameAuthor && (
78 |
113 | );
114 | };
115 |
116 | export default Message;
117 |
--------------------------------------------------------------------------------
/client/src/sections/Listing/components/ListingDetails/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { Avatar, Divider, Rate, Tag, Typography } from "antd";
4 | import { EnvironmentOutlined } from "@ant-design/icons";
5 | import { Listing as ListingData } from "../../../../lib/graphql/queries/Listing/__generated__/Listing";
6 | import { iconColor } from "../../../../lib/utils";
7 | import { ShowLocation } from "../../../../lib/components/Map";
8 | import { Viewer } from "../../../../lib/types";
9 |
10 | interface Props {
11 | listing: ListingData["listing"];
12 | viewer: Viewer;
13 | }
14 |
15 | const { Paragraph, Title } = Typography;
16 |
17 | export const ListingDetails = ({ listing, viewer }: Props) => {
18 | const {
19 | title,
20 | description,
21 | image,
22 | type,
23 | address,
24 | city,
25 | numOfGuests,
26 | host,
27 | rating,
28 | numReviews,
29 | } = listing;
30 |
31 | return (
32 |
79 |
80 |
83 | )}
84 |
85 |
92 |
99 | {content}
100 |
101 |
102 |
109 | {formatDate(new Date(date))}
110 |
111 |
112 |
33 |
37 |
38 |
101 | );
102 | };
103 |
--------------------------------------------------------------------------------
/client/src/sections/Chat/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { Layout, Spin } from "antd";
3 | import { useQuery, useSubscription } from "@apollo/client";
4 | import { useParams, useNavigate } from "react-router-dom";
5 | import { SEND_MESSAGE } from "../../lib/graphql/subscriptions/SendMessage";
6 | import { Viewer } from "../../lib/types";
7 | import { CHAT } from "../../lib/graphql/queries";
8 | import {
9 | Chat as ChatData,
10 | ChatVariables,
11 | } from "../../lib/graphql/queries/Chat/__generated__/Chat";
12 | import {
13 | ErrorBanner,
14 | PageSkeleton,
15 | } from "../../lib/components";
16 | import { Messages } from "./components/Messages";
17 | import { NewMessageInput } from "./components/NewMessageInput";
18 | import { SendMessage as SendMessageData, SendMessageVariables } from "../../lib/graphql/subscriptions/SendMessage/__generated__/SendMessage";
19 | import { useScrollToTop } from "../../lib/hooks/useScrollToTop";
20 |
21 | const { Content } = Layout;
22 |
23 | interface Props {
24 | viewer: Viewer;
25 | }
26 |
27 | type Params = Record<"recipientId", string>;
28 |
29 | export const Chat = (props: Props) => {
30 | let params = useParams
39 |
44 |
45 |
51 |
52 | {title}
53 |
54 |
56 | ({numReviews} reviews)
57 |
58 |
59 |
60 |
63 |
64 |
66 | {host.name}
67 |
68 |
69 |
70 |
71 |
72 |
79 |
80 | <Tag color={iconColor}>Message</Tag> {host.name} to know
81 | more.
82 |
83 |
84 |
85 |
86 |
89 | About this space
90 |
95 | {description}
96 |
97 |
98 |
99 |
91 | {type}
92 | {numOfGuests} Guests
93 |
94 |
116 |
117 |
119 | );
120 | };
121 |
--------------------------------------------------------------------------------
/client/src/sections/Listings/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from "react";
2 | import { Link, useParams } from "react-router-dom";
3 | import { useQuery } from "@apollo/client";
4 | import { Affix, Layout, List, Typography } from "antd";
5 | import { ErrorBanner, ListingCard } from "../../lib/components";
6 | import { LISTINGS } from "../../lib/graphql/queries";
7 | import {
8 | Listings as ListingsData,
9 | ListingsVariables
10 | } from "../../lib/graphql/queries/Listings/__generated__/Listings";
11 | import { ListingsFilter } from "../../lib/graphql/globalTypes";
12 | import { ListingsFilters, ListingsPagination, ListingsSkeleton } from "./components";
13 | import { useScrollToTop } from "../../lib/hooks/useScrollToTop";
14 |
15 | type Params = Record<"location", string>;
16 |
17 | const { Content } = Layout;
18 | const { Paragraph, Text, Title } = Typography;
19 |
20 | const PAGE_LIMIT = 8;
21 |
22 | export const Listings = () => {
23 | const { location } = useParams
72 |
73 |
81 |
96 | ) : (
97 | - (
90 |
98 |
99 | It appears that no listings have yet been created for{" "}
100 | "{listingsRegion}"
101 |
102 |
103 | Be the first person to create a listing in this area!
104 |
105 |
106 | );
107 |
108 | const listingsRegionElement = listingsRegion ? (
109 |