search

frankmarra / DLCM

0 stars 0 forks source link

Forms refactoring #183

Closed frankmarra closed 8 months ago

frankmarra commented 10 months ago

This PR is going to refactor the way that forms work. A new component, InputReducer, has been created to be used in conjunction with forms.

All forms will now use useReducer with InputReducer as the first value and the form fields as the second. An example of this can be seen here, from the signup page:

const [formValue, dispatch] = useReducer(InputReducer, { email: "", password: "", passwordCheck: "", type: accountTypes[0].value, name: "", location: "", submitting: false, success: false, error: null, })

The last three key value pairs represent actions that we can use for conditional rendering on the page, thus eliminating some of the state that was only created for this purpose.

I believe that there is more we can do with these. Would love to hear some ideas.

Once we review this, I will implement on all forms in dlcm.

To currently test, create a new user through the signup page.

netlify[bot] commented 10 months ago

Deploy Preview for unrivaled-pie-1255ea ready!

Name Link
Latest commit f37d98c93b78bca057273dba518c79e27d07e32d
Latest deploy log https://app.netlify.com/sites/unrivaled-pie-1255ea/deploys/65875c46d0e5650008a460a8
Deploy Preview https://deploy-preview-183--unrivaled-pie-1255ea.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

frankmarra commented 10 months ago

Running into an issue with using the newly created InputReducer in regards to slugified values. Any value that needs the slugify function called on it, is not updating instantly like it was with useState. You can see an example of this in UpdateProfile.jsx

Normally, whenever the state changed for sluggedName, it would run the checkName function and slugify sluggedName. That is still happening, but its not slugifying the last character that is entered into the input field.

Just writing this is confusing, so I am sure the logic is overcomplicated.

I have tried adding slugify to the onChange dispatch for slugged name like this:

onChange={(e) => dispatch({ type: "input", name: "sluggedName", value: slugify(e.target.value)}

The problem with the above codes, is that it does not allow any invalid keystrokes, such as spaces and -'s. This is not acceptable, as users should be able to have spaces in their slug represented by a -.