Frontend Serverless with React and GraphQL

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

27. Add a Create Recipe Page

Objective: Add a create page so that we will have a route at `/create` for making new recipes.

So far, we've been displaying recipes that we loaded in via the GraphCMS web ui. Let's create a /create route so that we can later add a create recipe component. First start by creating a create component in the pages directory.

pages/create.tsx

import { MainLayout } from '../components/layout/MainLayout';
import styled from 'styled-components';
const StyledHeader = styled.h1`
  ${({ theme }) => `
        padding: ${theme['padding-small']} ${theme['padding-small']};
    `}
`;
const Create = () => {
  return (
    <MainLayout title="Create Recipe">
      <StyledHeader>Create Recipe</StyledHeader>
    </MainLayout>
  );
};
export default Create;

Now we need to modify the my-recipes page to add a create button that will link to the /create page.

pages/my-recipes/index.tsx

import styled from 'styled-components';
import { MainLayout } from '../../components/layout/MainLayout';
import { RecipesList, queryEnum } from '../../components/RecipesList';
import { Col, Row, Button } from 'antd';
import { useFetchUser } from '../../utils/user';
import * as _ from 'lodash';
import Router from 'next/router';
import { Loading } from '../../components/notify/Loading';
import Link from 'next/link';
const StyledRow = styled(Row)`
  ${({ theme }) => `
  div {
    padding: ${theme['padding-small']} ${theme['padding-small']};
    display: flex;
    h1 {
        padding-left: ${theme['padding-small']};
        text-align: left;
    }
  }
  `}
`;
const Index = () => {
  const { user, loading: isFetchUser } = useFetchUser();
  const owner = _.get(user, 'sub');
  const options = owner ? { variables: { where: { owner } } } : {};
  if (isFetchUser) return <Loading />;
  if (!user) {
    Router.replace('/');
  }
  return (
    <MainLayout title="My Recipes">
      <StyledRow>
        <Col span={24}>
          <Link href="/create">
            <Button type="primary">Create</Button>
          </Link>
          <h1>My Recipes</h1>
        </Col>
      </StyledRow>
      <RecipesList
        options={options}
        parentRoute="my-recipes"
        queryType={queryEnum.recipes}
      />
    </MainLayout>
  );
};
export default Index;