Add proverb form component

[salih18]

Created Proverb Form component
Created Modal reusable component to show proverb add page inside it.
Add some styling

[sarah-vanderlaan]

Great job!!! Added a couple of comments to make the code a bit more readable in some areas

[sarah-vanderlaan]

Suggested change

	></ModalBootstrap.Header>
	/>

since this component has no children, you can close it within the same <>

[salih18]

Absolutely.

[sarah-vanderlaan]

do we need the id field here?

[salih18]

No. For now we dont need it.

[sarah-vanderlaan]

Suggested change

	const handleShow = (type) => async (e) => {
	const handleShowModal = (type) => async (e) => {

Let's make this function name even more specific so it is very clear what it is for

[sarah-vanderlaan]

Suggested change

	modalClose={() => setModal({ isOpen: false })}
	modalClose={() => setModal({ isOpen: false, type: undefined })}

I think we should reset the state here as well, so that when we add other modal types (for example Edit), then we wont accidentally open the add one

[sarah-vanderlaan]

Lets extract this into 2 lines so it is more readable:

const shouldBeDisabled = !isFilled || !result;
setDisabled(shouldBeDisabled);

[salih18]

I like it. Thank you

[sarah-vanderlaan]

Suggested change

	const onChange = (e) => {
	const handleInputChange = (e) => {

Lets make this function name more explicit as well, to make it even more readable :)

[sarah-vanderlaan]

Suggested change

	onChange={(e) => onChange(e)}
	onChange={handleInputChange}

[sarah-vanderlaan]

Suggested change

	onChange={(e) => onChange(e)}
	onChange={handleInputChange}

[sarah-vanderlaan]

Suggested change

	onChange={(e) => onChange(e)}
	onChange={handleInputChange}

[sarah-vanderlaan]

Suggested change

	onClick={(e) => onSubmit(e)}
	onClick={onSubmit}

[salih18]

Yes my fault. We dont need to create a new function.

[frankPairs]

great Salih! I only added a couple of small comments.

[frankPairs]

Suggested change

	const result = pattern.test(text);
	return pattern.test(text);

this can be simplified as we are not using the result value.

[frankPairs]

Suggested change

	modalClose={() => setModal({ isOpen: false, type: undefined })}
	modalClose={handleCloseModal}

you could create a function called handleCloseModal and use it as I wrote above. this could be an implementation:

function handleCloseModal() {
   setModal({ isOpen: false, type: undefined })
}

It's good to have named functions, they are easier to read and to debug than anonymous functions. I would advise
using arrow functions when they really improve the readability of the code or when you want to avoid context issues related to using the "this" object.

You can find a lot of interesting information about arrow functions here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[sarah-vanderlaan]

🎉