Merge pull request #1 from CaptainChemist/staging

Release V2.0

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+.DS_Store
+.env
+.vercel

codegen.yml

@@ -0,0 +1,8 @@
+overwrite: true
+schema: '${GRAPHCMSURL}/${GRAPHCMSPROJECTID}/${BRANCH}'
+documents: graphql/**/*.ts
+generates:
+  generated/apollo-components.tsx:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'

components/CreateRecipe.tsx

@@ -0,0 +1,106 @@
+import { Row, Col, Form, Button } from 'antd';
+import { submitForm } from '../utils/submitForm';
+import { GenerateInput, GenerateTextInput } from './GenerateFields';
+import { GenerateIngredients } from './GenerateIngredients';
+import { useMutation } from '@apollo/react-hooks';
+import { createRecipeGraphQL } from '../graphql/mutations/createRecipe';
+import { useFetchUser } from '../utils/user';
+import * as _ from 'lodash';
+import { Loading } from './notify/Loading';
+import Router from 'next/router';
+import { recipesGraphQL } from '../graphql/queries/recipes';
+import { PictureUploader } from './PictureUploader';
+import { useState } from 'react';
+
+export const CreateRecipe = () => {
+  const [recipeState, setRecipeState] = useState({ isPicUploading: false });
+  const [createRecipeMutation, { loading }] = useMutation(createRecipeGraphQL);
+  const { user, loading: isFetchingUser } = useFetchUser();
+  const owner = _.get(user, 'sub');
+
+  const initiateCreateRecipe = () => {
+    createRecipeMutation({
+      refetchQueries: [
+        { query: recipesGraphQL },
+        { query: recipesGraphQL, variables: { where: { owner } } },
+      ],
+      variables: {
+        data: {
+          ...inputs,
+          owner,
+        },
+      },
+    });
+    Router.replace('/my-recipes');
+  };
+
+  const {
+    inputs,
+    handleInputChange,
+    handleAddIngredient,
+    handleDeleteIngredient,
+    handleDropdownChange,
+    handleSubmit,
+    handleSubmitImage,
+  } = submitForm(
+    {
+      title: '',
+      description: '',
+      content: '',
+      ingredients: [],
+    },
+    initiateCreateRecipe,
+  );
+
+  if (isFetchingUser) return <Loading />;
+
+  return (
+    <Form onFinish={handleSubmit}>
+      <GenerateInput
+        name="title"
+        value={inputs.title}
+        handleInputChange={handleInputChange}
+      />
+      <GenerateInput
+        name="description"
+        value={inputs.description}
+        handleInputChange={handleInputChange}
+      />
+      <GenerateTextInput
+        name="content"
+        value={inputs.content}
+        handleInputChange={handleInputChange}
+      />
+      <GenerateIngredients
+        names={['amount', 'unit', 'type']}
+        values={inputs.ingredients}
+        handleAddIngredient={handleAddIngredient}
+        handleDeleteIngredient={handleDeleteIngredient}
+        handleInputChange={handleInputChange}
+        handleDropdownChange={handleDropdownChange}
+      />
+      <Row>
+        <Col span={12} />
+        <Col span={4}>
+          <Form.Item label="Upload Image">
+            <PictureUploader
+              setRecipeState={setRecipeState}
+              handleSubmitImage={handleSubmitImage}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item label="Create Recipe">
+            <Button
+              disabled={loading || recipeState.isPicUploading}
+              type="primary"
+              htmlType="submit"
+            >
+              Create Recipe
+            </Button>
+          </Form.Item>
+        </Col>
+      </Row>
+    </Form>
+  );
+};

components/DeleteButton.tsx

@@ -0,0 +1,73 @@
+import { Button, Modal } from 'antd';
+import { useMutation } from '@apollo/react-hooks';
+import { deleteRecipeGraphQL } from '../graphql/mutations/deleteRecipe';
+import { useState } from 'react';
+import { recipesGraphQL } from '../graphql/queries/recipes';
+import Router from 'next/router';
+import { deleteAssetGraphQL } from '../graphql/mutations/deleteAsset';
+
+export const DeleteButton = ({
+  id,
+  disabled,
+  imageId,
+}: {
+  id: string;
+  disabled: boolean;
+  imageId: string;
+}) => {
+  const [deleteRecipeMutation, { loading: deleteRecipeLoading }] = useMutation(
+    deleteRecipeGraphQL,
+  );
+  const [deleteAssetMutation, { loading: deleteAssetLoading }] = useMutation(
+    deleteAssetGraphQL,
+  );
+
+  const [isModalVisible, setModalVisibility] = useState(false);
+
+  const handleOk = async () => {
+    if (imageId && !deleteAssetLoading) {
+      await deleteAssetMutation({
+        refetchQueries: [{ query: recipesGraphQL }],
+        variables: {
+          where: { id: imageId },
+        },
+      });
+    }
+
+    if (!deleteRecipeLoading) {
+      await deleteRecipeMutation({
+        refetchQueries: [{ query: recipesGraphQL }],
+        variables: {
+          where: { id },
+        },
+      });
+    }
+
+    setModalVisibility(false);
+    Router.replace('/my-recipes');
+  };
+  const handleShow = () => setModalVisibility(true);
+  const handleHide = () => setModalVisibility(false);
+
+  return (
+    <>
+      <Button
+        block
+        // @ts-ignore
+        type="danger"
+        disabled={disabled || deleteRecipeLoading || deleteAssetLoading}
+        onClick={handleShow}
+      >
+        Delete Recipe
+      </Button>
+      <Modal
+        title="Confirm Delete"
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleHide}
+      >
+        <p>Are you sure that you want to delete this recipe?</p>
+      </Modal>
+    </>
+  );
+};

components/GenerateContent.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export const GenerateContent = ({ textString }: { textString: string }) => (
+  <p>
+    {textString.split('\n').map((item, key) => (
+      <React.Fragment key={key}>
+        {item}
+        <br />
+      </React.Fragment>
+    ))}
+  </p>
+);

components/GenerateFields.tsx

@@ -0,0 +1,45 @@
+import { Row, Col, Form, Input } from 'antd';
+
+type InputType = {
+  name: string;
+  value: string;
+  handleInputChange?: (event: any) => void;
+};
+
+export const GenerateInput = ({
+  name,
+  value,
+  handleInputChange,
+}: InputType) => (
+  <Row>
+    <Col span={12} offset={6}>
+      <Form.Item label={`${name}`}>
+        <Input
+          placeholder={`${name}`}
+          name={`${name}`}
+          value={value}
+          onChange={handleInputChange}
+        />
+      </Form.Item>
+    </Col>
+  </Row>
+);
+
+export const GenerateTextInput = ({
+  name,
+  value,
+  handleInputChange,
+}: InputType) => (
+  <Row>
+    <Col span={12} offset={6}>
+      <Form.Item label={`${name}`}>
+        <Input.TextArea
+          placeholder={`${name}`}
+          name={`${name}`}
+          value={value}
+          onChange={handleInputChange}
+        />
+      </Form.Item>
+    </Col>
+  </Row>
+);

components/GenerateIngredients.tsx

@@ -0,0 +1,102 @@
+import { Row, Col, Button, Table, Input, Dropdown } from 'antd';
+import { MenuList } from './MenuList';
+import * as _ from 'lodash';
+
+type IngredientsProps = {
+  names?: string[];
+  values?: [{ amount: string; unit: string; type: string }];
+  handleAddIngredient: (event: any) => void;
+  handleDeleteIngredient: (event: any) => void;
+  handleInputChange: (event: any) => void;
+  handleDropdownChange: (event: any) => void;
+};
+
+const units = ['-', 'ounce', 'lb', 'cup', 'tb', 'tsp', 'g', 'kg'];
+
+export const GenerateIngredients = ({
+  names,
+  values,
+  handleAddIngredient,
+  handleDeleteIngredient,
+  handleInputChange,
+  handleDropdownChange,
+}: IngredientsProps) => {
+  const columns = _.concat(
+    names.map((name) => ({
+      title: `${name}`,
+      key: `${name}`,
+      render: (ingredient, _record, index: number) => {
+        return name === 'unit' ? (
+          <Dropdown
+            overlay={
+              <MenuList
+                iterableList={units}
+                name={`ingredients[${index}].${name}`}
+                handleDropdownChange={handleDropdownChange}
+              />
+            }
+            placement="bottomLeft"
+          >
+            <Button>{ingredient[name]}</Button>
+          </Dropdown>
+        ) : (
+          <Input
+            value={ingredient[name]}
+            placeholder={`${name}`}
+            name={`ingredients[${index}].${name}`}
+            onChange={handleInputChange}
+          />
+        );
+      },
+    })),
+    [
+      {
+        title: 'delete',
+        key: 'delete',
+        render: (_ingredient, _record, index: number) => (
+          <Button
+            onClick={handleDeleteIngredient}
+            // @ts-ignore
+            type="danger"
+            shape="circle"
+            size="small"
+            name={`${index}`}
+          >
+            -
+          </Button>
+        ),
+      },
+    ],
+  );
+
+  return (
+    <>
+      <Row>
+        <Col span={12} offset={6}>
+          <p>
+            <Button
+              onClick={handleAddIngredient}
+              type="primary"
+              shape="circle"
+              size="small"
+            >
+              +
+            </Button>
+            ingredients:
+          </p>
+        </Col>
+      </Row>
+      {values.length > 0 ? (
+        <Row>
+          <Col span={12} offset={6}>
+            <Table
+              dataSource={values}
+              columns={columns}
+              pagination={{ pageSize: 25 }}
+            />
+          </Col>
+        </Row>
+      ) : null}
+    </>
+  );
+};