Merge pull request #9 from lizaklimova/add-recipe

Add recipe

src/components/AddRecipe/AddRecipeForm/AddRecipeForm.styled.tsx

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/components/AddRecipe/AddRecipeForm/AddRecipeForm.tsx

@@ -0,0 +1,33 @@
+import RecipeDescriptionFields from 'components/AddRecipe/RecipeDescriptionFields';
+import RecipeIngredientsFields from 'components/AddRecipe/RecipeIngredientsFields';
+import RecipePreparationFields from 'components/AddRecipe/RecipePreparationFields';
+import { FC, FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+//TODO install React-Select
+// містить стейт => зберігаються заповнені у формі  дані
+// всі поля required, валідуються. Інфа якщо значення невалідне
+const AddRecipeForm: FC = () => {
+  const inputValues = 'test';
+  const navigate = useNavigate();
+
+  const handleFormSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    navigate('/my');
+  };
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <RecipeDescriptionFields
+        value={inputValues}
+        onSubmit={handleFormSubmit}
+      />
+      <RecipeIngredientsFields />
+      <RecipePreparationFields />
+      <button type="submit">Add</button>
+    </form>
+  );
+};
+
+export default AddRecipeForm;

src/components/AddRecipe/AddRecipeForm/index.ts

@@ -0,0 +1 @@
+export { default } from './AddRecipeForm';

src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.styled.tsx

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/components/AddRecipe/RecipeDescriptionFields/RecipeDescriptionFields.tsx

@@ -0,0 +1,28 @@
+import { FC, FormEvent } from 'react';
+
+interface RecipeDescriptionFieldsProps {
+  value: string;
+  onSubmit: (e: FormEvent, data: unknown) => void;
+}
+
+// time 5mins-120mins. Interval 5mins
+// selects must have visible 6 options, other scroll
+const RecipeDescriptionFields: FC<RecipeDescriptionFieldsProps> = ({
+  value,
+  onSubmit,
+}) => {
+  return (
+    <div>
+      <input type="file" name="picture" />
+      <div>
+        <input type="text" name="title" />
+        <input type="text" name="about" />
+        <select name="category"></select>
+        <select name="time"></select>
+        <select name="" />
+      </div>
+    </div>
+  );
+};
+
+export default RecipeDescriptionFields;

src/components/AddRecipe/RecipeDescriptionFields/index.ts

@@ -0,0 +1 @@
+export { default } from './RecipeDescriptionFields';

src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.styled.tsx

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/components/AddRecipe/RecipeIngredientsFields/RecipeIngredientsFields.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+const RecipeIngredientsFields = () => {
+  const [count, setCount] = useState<number>(3);
+
+  return (
+    <>
+      <div>
+        <h3>Ingredients</h3>
+        <div>
+          <button
+            onClick={() => {
+              setCount(prev => prev + 1);
+            }}
+          >
+            -
+          </button>
+          <span>{count}</span>
+          <button
+            onClick={() => {
+              setCount(prev => {
+                if (prev === 1) return prev;
+                return prev - 1;
+              });
+            }}
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <ul>
+        {/* Create Item component and map in ul */}
+        <li>
+          <select name="ingredient"></select>
+          <select name="weight"></select>
+          <button>delete</button>
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default RecipeIngredientsFields;

src/components/AddRecipe/RecipeIngredientsFields/index.ts

@@ -0,0 +1 @@
+export { default } from './RecipeIngredientsFields';

src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.styled.tsx

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/components/AddRecipe/RecipePreparationFields/RecipePreparationFields.tsx

@@ -0,0 +1,10 @@
+const RecipePreparationFields = () => {
+  return (
+    <>
+      <h3>Recipe Preparation</h3>
+      <textarea name="recipe" placeholder="Enter recipe" required />
+    </>
+  );
+};
+
+export default RecipePreparationFields;

src/components/AddRecipe/RecipePreparationFields/index.ts

@@ -0,0 +1 @@
+export { default } from './RecipePreparationFields';

src/components/AddRecipe/index.ts

@@ -0,0 +1 @@
+export { default } from './AddRecipeForm';

src/components/MainTitle/MainTitle.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+interface IMainTitleProps {
+  title: string;
+}
+
+const MainTitle: FC<IMainTitleProps> = ({ title }) => {
+  return <h2>{title}</h2>;
+};
+
+export default MainTitle;

src/pages/AddRecipesPage.tsx

@@ -1,7 +1,15 @@
-import { FC } from 'react';
+import AddRecipeForm from 'components/AddRecipe';
+import MainTitle from 'components/MainTitle/MainTitle';
 
-const AddRecipesPage: FC = () => {
-  return <div></div>;
+const AddRecipesPage = () => {
+  return (
+    <>
+      <section>
+        <MainTitle title={'Add recipe'} />
+        <AddRecipeForm />
+      </section>
+    </>
+  );
 };
 
 export default AddRecipesPage;