Feature/create movie form by Hezanin · Pull Request #12 · OctaFloare/flitnext-2024

Hezanin · 2024-07-11T15:59:53Z

Add form for creating movies.

This pr adds a way of creating a new movie on the create movie page using Formik for the form submission.
-The form contains some basic input validation to make the fields required, Yup library was used for this purpose.
-This also includes a success message that disappears after 5 seconds which contains the id and the name of the newly created movie. An error message is also displayed on bad creation requests.

Add form input fields file that define the required input fields to create a movie;

Add style dir and style file for movie form;

Add custom hook for movie post request

Update movie form component to accept an onSubmit prop and call it when the form is submitted; Update movie form component to include styling;

Update create movie component to integrate form and form submission; movieForm component was renamed to createMovieForm; Remove unused imports;

Update display of form submission feedback on create movie page to separate be components

Update form with addition of input validation using Yup library that requires both movieId and movieName to be non-empty strings; Add button in movies page for routing to create movie page;

Update display of success message after creating a movie to dissapear after timed period (set to 5 seconds)

OctaFloare · 2024-07-12T07:12:03Z

src/app/containers/create-movie/formField.js

+const FormField = ({ id, label, formik }) => (
+  <div className="formGroup">
+    <label className='formLabel' htmlFor={id}>{label}</label>
+    <input


The Field component from formik also handles errors inside. It's a good practice not to reinvent the wheel.

A bit of a larger commit for this but i think it's an improvement, see 40cbf22 and 846c45f for the field

OctaFloare · 2024-07-12T07:13:30Z

src/app/containers/create-movie/index.jsx

+    const { mutate, data, isSuccess, isError, error } = useCreateMovie();

-}
+    const handleFormSubmit = (values) => {


This is just a renaming for the mutate function. We could rename it where we destructure it from the useMutation

const { mutate: handleFormSubmit, data, isSuccess, isError, error } = useCreateMovie()

Solved at 6c63366

OctaFloare

Really nice work. Good extraction, added validation. Also love the user experience you are always considering, like the DisplaySuccess that shows a feedback to the user and afterwards disappears

OctaFloare · 2024-07-12T08:30:12Z

src/app/containers/create-movie/formField.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const FormField = ({ id, label, formik }) => (


Suggested change

const FormField = ({ id, label, formik }) => (

import React from 'react';

const FormField = ({ id, label, formik }) => {

const { handleChange, handleBlur, values, errors, touched } = formik

return (

<div className="formGroup">

<label className='formLabel' htmlFor={id}>{label}</label>

<input

id={id}

name={id}

type="text"

onChange={handleChange}

onBlur={handleBlur}

value={values[id]}

className="input"

/>

{touched[id] && errors[id] ? (

<div className="text-red-500 text-sm mt-1">{errors[id]}</div>

) : null}

</div>

);

};

export default FormField;

OctaFloare · 2024-07-12T08:31:59Z

src/app/containers/create-movie/displayError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const DisplayError = ({ error }) => {


We should consider returning the jsx directly instead of using curly braces and return statement. It is redundant

solved at 6c63366

OctaFloare · 2024-07-12T08:32:57Z

src/app/containers/create-movie/displayError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const DisplayError = ({ error }) => {


The component DisplayError should not be aware of the full error object if it only uses the message

solved at 6c63366

OctaFloare · 2024-07-12T08:38:20Z

src/app/containers/create-movie/displaySuccess.js

+  return (
+    <div className="absolute bottom-0 bg-green-100 border border-green-500 text-green-700 rounded p-4 w-full max-w-md text-center mt-4">
+      <h3 className="font-bold mb-2">Newly Created Movie</h3>
+      <p><strong>ID:</strong> {data.id}</p>


We could destructure id and name from data since the object data itself it's not used

solved at 6c63366

OctaFloare · 2024-07-12T08:46:35Z

src/app/containers/create-movie/index.jsx

+          {isSuccess && <DisplaySuccess data={data} />}
+        </div>
+    );
+};


Let's leave an empty line at the end of the file

solved at 6c63366

OctaFloare · 2024-07-12T08:49:22Z

src/app/containers/hooks/useSubmitMovieFormik.js

+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+
+const UseSubmitMovieFormik = (onSubmit) => {


This hook should start with lower case useSubmitMovieFormik

hook was deleted but point noted :D

OctaFloare · 2024-07-12T08:50:58Z

src/app/containers/hooks/useSubmitMovieFormik.js

+import * as Yup from 'yup';
+
+const UseSubmitMovieFormik = (onSubmit) => {
+  return useFormik({


We should return the jsx directly instead of adding curly braces and return statement

Ex: const useSubmitMovieFormik = () => useFormik()

hook was deleted but point noted :D

OctaFloare · 2024-07-12T08:56:09Z

package.json

    "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "yup": "^1.4.0"


We should remove the "^" because we need the libraries to be stable and not have surprises with breaking changes. let's remove it from all the libraries as well

solved at 6c63366

Update form field to contain a formik field as to remove the redundant custom implementation;

Update create movie component to include extractions for initial values, validation schema, form

- remove reduntant rename of mutate function and call - update display error component to not receive error object but error message - update display success component to destructure id and name - update package file dependencies to not include '^' before version

Update movie form field for id to type number

Hezanin added 8 commits July 11, 2024 14:16

Add form input fields file

88e1f03

Add form input fields file that define the required input fields to create a movie;

Add style dir and style file for movie form

5377ce4

Add style dir and style file for movie form;

Add custom hook for movie post request

32bb822

Add custom hook for movie post request

Update movie form submission

866b7ee

Update movie form component to accept an onSubmit prop and call it when the form is submitted; Update movie form component to include styling;

Update create movie page to integrate form and form submission

d880c91

Update create movie component to integrate form and form submission; movieForm component was renamed to createMovieForm; Remove unused imports;

Update display of form submission feedback

7ff2408

Update display of form submission feedback on create movie page to separate be components

Update form with addition of input validation

e090cc8

Update form with addition of input validation using Yup library that requires both movieId and movieName to be non-empty strings; Add button in movies page for routing to create movie page;

Update display of success message to dissapear after timed period

d04aaa6

Update display of success message after creating a movie to dissapear after timed period (set to 5 seconds)

OctaFloare reviewed Jul 12, 2024

View reviewed changes

Hezanin added 4 commits July 12, 2024 21:34

Update form field to implement formik field

846c45f

Update form field to contain a formik field as to remove the redundant custom implementation;

Update create movie component to include extractions

40cbf22

Update create movie component to include extractions for initial values, validation schema, form

Update movie form field for id to type number

155840e

Update movie form field for id to type number

		@@ -0,0 +1,21 @@
		import React from 'react';

		const FormField = ({ id, label, formik }) => (

-const FormField = ({ id, label, formik }) => (
+import React from 'react';
+const FormField = ({ id, label, formik }) => {
+  const { handleChange, handleBlur, values, errors, touched } = formik
+  return (
+    <div className="formGroup">
+      <label className='formLabel' htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        name={id}
+        type="text"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={values[id]}
+        className="input"
+      />
+      {touched[id] && errors[id] ? (
+        <div className="text-red-500 text-sm mt-1">{errors[id]}</div>
+      ) : null}
+    </div>
+  );
+};
+export default FormField;

		@@ -0,0 +1,11 @@
		import React from 'react';

		const DisplayError = ({ error }) => {

Conversation

Hezanin commented Jul 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OctaFloare left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hezanin Jul 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Hezanin commented Jul 11, 2024 •

edited

Loading

Hezanin Jul 12, 2024 •

edited

Loading