Пишем приложение «обзор ресторанов» на AWS AppSync

gatsby new restaurant-reviews
cd restaurant-reviews

npm install --save aws-amplify styled-components grommet grommet-icons react-rating

npm install -g @aws-amplify/cli
amplify configure

amplify init

amplify add api

? Please select from one of the below mentioned services GraphQL
? Provide API name: restaurantReviews
? Choose an authorization type for the API API key
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? Yes

type Restaurant @model {
  id: ID!
  city: String!
  name: String!
  numRatings: Int
  photo: String!
  reviews: [Review] @connection(name: "RestaurantReview")
}

type Review @model {
  rating: Int!
  text: String!
  createdAt: String
  restaurant: Restaurant! @connection(name: "RestaurantReview")
}

amplify push

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

import { API, graphqlOperation } from 'aws-amplify'
import * as queries from './graphql/queries'

const data = await API.graphql(graphqlOperation(queries.listRestaurants))

import { API, graphqlOperation } from 'aws-amplify'
import * as mutations from './graphql/mutations'

const restaurant = { name: "SOHO", city: "Saratov" }
const data = await API.graphql(graphqlOperation(
  mutations.createRestaurant,
  { input: restaurant }
))

import React from 'react';
import Amplify from 'aws-amplify';
import { ThemeProvider } from 'styled-components';
import { NavContextProvider } from './src/context/NavContext';

// Import API key so that we could use AppSync
import config from './src/aws-exports';

Amplify.configure(config);

const theme = {};

export const wrapRootElement = ({ element }) => (
  <NavContextProvider>
    <ThemeProvider theme={theme}>{element}</ThemeProvider>
  </NavContextProvider>
);

import React, { useReducer } from 'react';

const NavContext = React.createContext({
  toastrIsOpen: false,
  createRestaurantIsOpen: false
});

const reducer = (state, action) => {
  switch (action.type) {
    case 'open':
      return { ...state, [action.nav]: true };
    case 'close':
      return { ...state, [action.nav]: false };
    default:
      return { ...state, [action.nav]: !state[action.nav] };
  }
};

export const NavContextProvider = ({ children }) => {
  const [{ toastrIsOpen, createRestaurantIsOpen }, dispatch] = useReducer(reducer, {
    toastrIsOpen: false,
    createRestaurantIsOpen: false
  });

  const toggleNavState = (nav, type) => {
    dispatch({ nav, type });
  };

  return (
    <NavContext.Provider
      value={{
        toastrIsOpen,
        createRestaurantIsOpen,
        toggleNavState
      }}
    >
      {children}
    </NavContext.Provider>
  );
};

export default NavContext;

import React, { useContext } from 'react';
import { Link as GatsbyLink } from 'gatsby';
import styled from 'styled-components';
import { Box, Button, Heading, Grommet, Collapsible } from 'grommet';
import { Add } from 'grommet-icons';
import { grommet } from 'grommet/themes';

import NavContext from '../context/NavContext';
import CreateRestaurant from '../components/CreateRestaurant';
import Toastr from '../components/Toastr';

const Link = styled(GatsbyLink)`
  text-decoration: none;
`;

const Layout = ({ children }) => {
  const { createRestaurantIsOpen, toggleNavState } = useContext(NavContext);

  const onClose = () => {
    toggleNavState('createRestaurantIsOpen');
  };

  return (
    <Grommet full theme={grommet}>
      <Box
        as="header"
        direction="row"
        align="center"
        pad={{ vertical: 'small', horizontal: 'medium' }}
        justify="between"
        background="neutral-3"
        elevation="large"
        style={{ zIndex: '1000' }}
      >
        <Link to="/">
          <Heading level={3} margin="none" color="white">
            <strong>Обзор ресторанов</strong>
          </Heading>
        </Link>
        <Button onClick={onClose} icon={<Add color="white" />} />
      </Box>
      <Box pad="medium" flex direction="row">
        {children}
        <Collapsible direction="horizontal" open={createRestaurantIsOpen}>
          <CreateRestaurant />
        </Collapsible>
      </Box>
      <Toastr />
    </Grommet>
  );
};

export default Layout;

import React, { useContext, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { Box, Button, Heading, FormField, TextInput, Layer } from 'grommet';
import { Close } from 'grommet-icons';
import * as mutations from '../graphql/mutations';
import NavContext from '../context/NavContext';

const CreateRestaurant = () => {
  const [name, setName] = useState('');
  const [city, setCity] = useState('');
  const [photo, setPhoto] = useState('');

  // Is sidebar open? Control the nav state
  const { createRestaurantIsOpen, toggleNavState } = useContext(NavContext);

  const createRestaurantHandler = async restaurant => {
    try {
      await API.graphql(graphqlOperation(mutations.createRestaurant, { input: restaurant }));
    } catch (err) {
      console.log('error creating restaurant: ', err);
    }
  };

  const toggleNav = () => {
    toggleNavState('createRestaurantIsOpen');
  };

  /**
   * Clear all the fields
   */
  const resetForm = () => {
    setName('');
    setCity('');
    setPhoto('');
  };

  const handleSubmit = event => {
    event.preventDefault();

    try {
      createRestaurantHandler({ name, city, photo });
      resetForm();
      toggleNav();
      toggleNavState('toastrIsOpen', 'open');
    } catch (err) {
      console.log('error submitting form: ', err);
    }
  };

  return (
    createRestaurantIsOpen && (
      <Layer position="right" full="vertical" modal onClickOutside={toggleNav} onEsc={toggleNav}>
        <Box
          as="form"
          fill="vertical"
          overflow="auto"
          width="medium"
          pad="medium"
          onSubmit={handleSubmit}
        >
          <Box flex={false} direction="row" justify="between">
            <Heading level={3} margin="none">
              Добавить ресторан
            </Heading>
            <Button icon={<Close />} onClick={toggleNav} />
          </Box>
          <Box flex="grow" overflow="auto" pad={{ vertical: 'medium' }}>
            <FormField label="Название кафе/ресторана">
              <TextInput
                name="name"
                onChange={value => setName(value.target.value)}
                value={name}
                required
              />
            </FormField>
            <FormField label="Город">
              <TextInput
                name="city"
                onChange={value => setCity(value.target.value)}
                value={city}
                required
              />
            </FormField>
            <FormField label="Фотография">
              <TextInput
                name="photo"
                onChange={value => setPhoto(value.target.value)}
                value={photo}
                required
              />
            </FormField>
          </Box>
          <Box flex={false} as="footer" align="start">
            <Button type="submit" label="Отправить" primary />
          </Box>
        </Box>
      </Layer>
    )
  );
};

export default CreateRestaurant;

import React, { useContext } from 'react';
import { Layer, Box, Button, Text } from 'grommet';
import { FormClose, StatusGood } from 'grommet-icons';
import NavContext from '../context/NavContext';

const Toastr = () => {
  const { toastrIsOpen, toggleNavState } = useContext(NavContext);

  const closeHandler = () => {
    toggleNavState('toastrIsOpen', 'close');
  };

  return (
    toastrIsOpen && (
      <Layer
        position="bottom"
        modal={false}
        margin={{ vertical: 'medium', horizontal: 'small' }}
        onEsc={closeHandler}
        responsive={false}
        plain
      >
        <Box
          align="center"
          direction="row"
          gap="small"
          justify="between"
          round="medium"
          elevation="medium"
          pad={{ vertical: 'xsmall', horizontal: 'small' }}
          background="status-ok"
        >
          <Box align="center" direction="row" gap="xsmall">
            <StatusGood />
            <Text>Новый ресторан был успешно добавлен</Text>
          </Box>
          <Button icon={<FormClose />} onClick={closeHandler} plain />
        </Box>
      </Layer>
    )
  );
};

export default Toastr;

import React from 'react';

import Layout from '../layouts/layout';
import SEO from '../components/seo';
import Restaurants from '../components/Restaurants';

const HomePage = () => (
  <Layout>
    <SEO title="Главная страница" />
    <Restaurants />
  </Layout>
);

export default HomePage;

import React, { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { Link } from 'gatsby';
import styled from 'styled-components';
import { Box, Grid, Image, Heading, Paragraph, ResponsiveContext } from 'grommet';

import * as queries from '../graphql/queries';

const GatsbyLink = styled(Link)`
  color: #00739d;
  text-decoration: none;
`;

const Restaurants = () => {
  const [restaurants, setRestaurants] = useState([]);

  // Fetch the data once the component is loaded
  useEffect(() => {
    async function fetchRestaurantsAPI() {
      try {
        const rdata = await API.graphql(graphqlOperation(queries.listRestaurants));
        const {
          data: {
            listRestaurants: { items }
          }
        } = rdata;
        console.log('items: ', items);
        setRestaurants(items);
      } catch (err) {
        console.log('error: ', err);
      }
    }

    fetchRestaurantsAPI();
  }, []);

  // Display the message if no restaurants are available
  let output = (
    <Box flex align="center" justify="center">
      Создайте ваш первый ресторан, нажав +
    </Box>
  );

  if (restaurants.length !== Number(0)) {
    output = restaurants.map((r, i) => (
      // eslint-disable-next-line react/no-array-index-key
      <Box gap="medium" key={i}>
        <Box height="small" border>
          <Image src={r.photo} fit="cover" />
        </Box>

        <div>
          <GatsbyLink to={`/restaurant/${r.id}`} state={{ restaurant: r }}>
            <Heading level={3} margin="none">
              {r.name}
            </Heading>
          </GatsbyLink>
          <Paragraph>{r.city}</Paragraph>
        </div>
      </Box>
    ));
  }

  return (
    <ResponsiveContext.Consumer>
      {size => (
        <Grid
          columns={{
            count: size === 'small' ? 2 : 3,
            size: 'auto'
          }}
          gap="small"
          style={{ maxWidth: '1280px', margin: '25px auto' }}
        >
          {output}
        </Grid>
      )}
    </ResponsiveContext.Consumer>
  );
};

export default Restaurants;

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/restaurant/)) {
    page.matchPath = '/restaurant/*';

    // Update the page.
    createPage(page);
  }
};

import React, { useEffect, useState } from 'react';
import { Box, Heading, Grid, Image, Paragraph } from 'grommet';
import Rating from 'react-rating';
import { API, graphqlOperation } from 'aws-amplify';

import { Star } from 'grommet-icons';
import * as queries from '../graphql/queries';
import Layout from '../layouts/layout';
import SEO from '../components/seo';
import CreateReviewForm from '../components/CreateReviewForm';

const RestaurantPage = ({ location }) => {
  const [restaurant, setRestaurant] = useState({});
  const [reviews, setReviews] = useState([]);

  // Fetch the data once the component is loaded
  useEffect(() => {
    async function fetchRestaurantAPI(r) {
      try {
        const rdata = await API.graphql(graphqlOperation(queries.getRestaurant, { id: r.id }));
        const {
          data: { getRestaurant }
        } = rdata;
        setRestaurant(getRestaurant);
        setReviews(getRestaurant.reviews.items);
      } catch (err) {
        console.log('error: ', err);
      }
    }

    if (location.state.restaurant) {
      fetchRestaurantAPI(location.state.restaurant);
    }
  }, []);

  const reviewsList = reviews.map((r, i) => (
    // eslint-disable-next-line react/no-array-index-key
    <Box key={i} background="light-2" pad="medium" round="small">
      <Rating
        fullSymbol={<Star color="#ffc95e" />}
        emptySymbol={<Star color="#cccccc" />}
        initialRating={r.rating}
        readonly
      />
      <Paragraph fill>{r.text}</Paragraph>
    </Box>
  ));

  return (
    <Layout>
      <SEO title="Страница ресторана" />
      <Box style={{ maxWidth: '1280px', margin: '25px auto' }}>
        {restaurant.name && (
          <>
            <Heading level={1} margin="none">
              {restaurant.name}
            </Heading>
            <Paragraph>{restaurant.city}</Paragraph>
            <Box height="medium" border>
              <Image src={restaurant.photo} fit="cover" />
            </Box>
          </>
        )}

        {reviewsList.length !== Number(0) && (
          <Grid gap="small">
            <Heading level={2}>Отзывы ({reviewsList.length}):</Heading>
            {reviewsList}
          </Grid>
        )}

        {restaurant.id && <CreateReviewForm setReviews={setReviews} id={restaurant.id} />}
      </Box>
    </Layout>
  );
};

export default RestaurantPage;

const input = { reviewRestaurantId: id, text, rating };

import React, { useState } from 'react';
import { Box, Button, FormField, Heading, TextArea } from 'grommet';
import Rating from 'react-rating';
import { Edit, Star } from 'grommet-icons';
import { API, graphqlOperation } from 'aws-amplify';
import * as mutations from '../graphql/mutations';

const CreateReviewForm = ({ setReviews, id }) => {
  const [text, setText] = useState('');
  const [rating, setRating] = useState(0);

  const createReview = async input => {
    try {
      console.log(input);
      await API.graphql(graphqlOperation(mutations.createReview, { input }));
    } catch (err) {
      console.log('error creating review: ', err);
    }
  };

  /**
   * Clear all the fields
   */
  const resetForm = () => {
    setText('');
    setRating(0);
  };

  const handleSubmit = event => {
    event.preventDefault();
    if (text === '' || rating === Number(0)) return;

    try {
      const input = { reviewRestaurantId: id, text, rating };
      createReview(input);
      // Update the UI
      setReviews(oldReviews => [...oldReviews, input]);
      resetForm();
    } catch (err) {
      console.log('error submitting form: ', err);
    }
  };

  return (
    <Box pad={{ vertical: 'medium' }} as="form" onSubmit={handleSubmit}>
      <Heading level={3}>Добавить отзыв</Heading>
      <Box>
        <Rating
          id="rating"
          fullSymbol={<Star color="#ffc95e" />}
          emptySymbol={<Star color="#cccccc" />}
          onChange={value => setRating(value)}
          initialRating={rating}
        />
        <FormField label="Текст отзыва">
          <TextArea
            name="text"
            onChange={value => setText(value.target.value)}
            value={text}
            required
          />
        </FormField>
      </Box>
      <Box flex={false} as="footer">
        <Button primary type="submit" icon={<Edit />} label="Отправить отзыв" />
      </Box>
    </Box>
  );
};

export default CreateReviewForm;

gatsby develop

gatsby build
gatsby start