Feat:Email validation regex field added along with default values by RajGM · Pull Request #820 · rowyio/rowy

RajGM · 2022-09-17T07:49:44Z

Signed-off-by: Raj Gaurav Maurya rajgmsocial19@gmail.com

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

RajGM · 2022-09-18T02:22:40Z

notsidney · 2022-09-26T06:52:10Z

This PR only adds the text field to save the custom regex to the column config. ~~It does not do any validation on data. @harinij is that within the scope of the original issue (#799)?~~

Edit: we have exiting behavior that validates any field if it has the config.validationRegex field set, so no further implementation is required in this PR.

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

vercel · 2022-10-02T15:40:34Z

@RajGM is attempting to deploy a commit to the Rowy Team on Vercel.

A member of the Team first needs to authorize it.

RajGM · 2022-10-02T15:41:39Z

Hi @notsidney
It's working now.

notsidney · 2022-10-03T05:51:05Z

Thanks, it works when I manually update the regex (such as adding a space at the end) then saving.

The issue is that having that as the default value in the UI implies that that setting has already been set and that clicking “Update” will set it. However, reading the code, it’s only set when there is an input to the text field, so it has to be typed in first.

I don’t think it’s a good idea to have it as the default value, but rather have a button next to it that says “Use standard regex” or something similar that sets the regex. This makes sure the user doesn’t think the regex is set but it’s not working.

src/components/fields/Email/Settings.tsx

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

notsidney

Please commit the suggestions, then this PR is ready to be merged.

notsidney · 2022-11-28T04:43:07Z

src/components/fields/Email/Settings.tsx

+    const emailFieldValidation = useRef<HTMLInputElement>(null);
+    const useStandardRegex = () => {
+        if (emailFieldValidation.current != null) {
+            emailFieldValidation.current.value = "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$";  


Suggested change

emailFieldValidation.current.value = "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$";

onChange("validationRegex")("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$");

As I wrote in a previous comment:

it works when I manually update the regex (such as adding a space at the end) then saving.

it’s only set when there is an input to the text field, so it has to be typed in first.

This is because you call onChange when the user types in the text field only. You manually change the value of the input element in the DOM, which doesn’t update the React state.

So when the user clicks the button, it updates the rendered input but doesn’t save in the column config, so it will never validate unless if they type in the input after clicking the button.

notsidney · 2022-11-28T04:43:23Z

src/components/fields/Email/Settings.tsx

+
+export default function Settings({ onChange, config }: ISettingsProps) {
+
+    const emailFieldValidation = useRef<HTMLInputElement>(null);


Suggested change

const emailFieldValidation = useRef<HTMLInputElement>(null);

Remove unnecessary refs.

notsidney · 2022-11-28T04:43:30Z

src/components/fields/Email/Settings.tsx

+    return (
+        <>
+            <TextField
+                inputRef={emailFieldValidation}


Suggested change

inputRef={emailFieldValidation}

Remove unnecessary refs.

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

…nto emailValidation_799

vercel · 2022-11-28T16:21:58Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
rowy-typedoc	⬜️ Ignored (Inspect)		Nov 29, 2022 at 0:26AM (UTC)

RajGM · 2022-11-28T16:24:17Z

Hi @notsidney
In the latest push, I made some changes; the standard regex is copied to the clipboard, and the user pastes it on the input.
Now it's working as expected.
Also, the regex works if the page is reloaded or the application restarts.
Unnecessary refs are deleted as well.

notsidney · 2022-11-29T00:21:28Z

@RajGM What’s the benefit of copying to the clipboard instead of updating the value in state directly? The user would have to click the button then click on the text field then paste. I already provided a working suggestion that would have resolved this issue.

RajGM · 2022-11-29T10:15:44Z

Ok, let me directly implement the changes into state using https://www.npmjs.com/package/jotai

notsidney

No, it is entirely unnecessary to have to use Jotai. The suggestion I made previously is enough to implement this behavior. Let’s get this PR over the line.

notsidney · 2022-11-29T10:41:35Z

src/components/fields/Email/Settings.tsx

+export default function Settings({ onChange, config }: ISettingsProps) {
+
+    const copyStandardRegex = () => {
+      navigator.clipboard.writeText('^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$');


Suggested change

navigator.clipboard.writeText('^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$');

onChange("validationRegex")("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$");

As I wrote in a previous comment:

it works when I manually update the regex (such as adding a space at the end) then saving.

it’s only set when there is an input to the text field, so it has to be typed in first.

This is because you call onChange when the user types in the text field only. You manually change the value of the input element in the DOM, which doesn’t update the React state.

So when the user clicks the button, it updates the rendered input but doesn’t save in the column config, so it will never validate unless if they type in the input after clicking the button.

Hi Sidney
Can you please refer to some docs or something.
While I understood what you are trying to convey but being unable to implement the feature.

I’ve gone ahead and merged this PR with some changes to make it work. An updated contribution guide will be published shortly, which will help for more complex contributions. Here’s a draft link.

For this feature:

The Settings component takes onChange and config as props. config is the current local state of the column config. onChange will update the config in local state.

A parent component renders this Settings component and an “Update” button that will save the updated config stored in local state to the database.

Separately, the TextField component has its own onChange prop, where you can pass a function that will be called whenever the user types in that text field.

You set this to update the local state using onChange from Settings. So the user can type their own regex and it will be saved when they click “Update”.

When you created the “Use standard Regex” button, you did not use onChange from Settings, but rather changed the rendered input directly (using a ref). This means you did not “inform” React, so the local state did not change.

You can learn more about this in the React docs. We use controlled components but you treated it like an uncontrolled component. The source of truth is in the local state (in the parent component).

When the user clicks “Update”, the parent component saves the local state. But since it was never updated, the standard regex is never saved to the database, so there is no validation.

The way to fix it is to use the onChange prop from Settings for the button, which you already did for the TextField.

src/components/fields/Email/Settings.tsx

Feat:Email validation regex field added along with default values

71d68c5

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

RajGM mentioned this pull request Sep 17, 2022

Email field: Validation regex option #799

Closed

harinij requested a review from notsidney September 20, 2022 02:39

harinij changed the base branch from main to develop September 21, 2022 06:32

Bug:regex fixed

cd398da

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

notsidney suggested changes Oct 3, 2022

View reviewed changes

src/components/fields/Email/Settings.tsx Outdated Show resolved Hide resolved

harinij and others added 5 commits November 22, 2022 16:28

Update CONTRIBUTING.md

d6dcec2

ref added with button and inputfield but current not working

40dcf4f

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

Feat: standard Regex is now being filled into the input

476c148

Merge branch 'rowyio:main' into emailValidation_799

fb0bc61

Merge branch 'develop' into emailValidation_799

d808e7e

notsidney suggested changes Nov 28, 2022

View reviewed changes

notsidney and others added 3 commits November 28, 2022 15:45

Merge branch 'develop' into emailValidation_799

19fcc4a

Feat: Copy feature added, ref deleted, working as expected

991e763

Signed-off-by: Raj Gaurav Maurya <rajgmsocial19@gmail.com>

Merge branch 'emailValidation_799' of https://github.com/RajGM/rowy i…

0e29634

…nto emailValidation_799

vercel bot had a problem deploying to Preview – rowy-typedoc November 28, 2022 16:22 Failure

notsidney suggested changes Nov 29, 2022

View reviewed changes

Update src/components/fields/Email/Settings.tsx

a6fe181

notsidney reviewed Nov 29, 2022

View reviewed changes

src/components/fields/Email/Settings.tsx Outdated Show resolved Hide resolved

Update src/components/fields/Email/Settings.tsx

1b0ae89

notsidney approved these changes Nov 29, 2022

View reviewed changes

notsidney merged commit bc48d80 into rowyio:develop Nov 29, 2022

	emailFieldValidation.current.value = "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$";
	onChange("validationRegex")("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$");


		export default function Settings({ onChange, config }: ISettingsProps) {

		const emailFieldValidation = useRef<HTMLInputElement>(null);

	navigator.clipboard.writeText('^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$');
	onChange("validationRegex")("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$");

Conversation

RajGM commented Sep 17, 2022

Uh oh!

RajGM commented Sep 18, 2022

Uh oh!

notsidney commented Sep 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Oct 2, 2022

Uh oh!

RajGM commented Oct 2, 2022

Uh oh!

notsidney commented Oct 3, 2022

Uh oh!

Uh oh!

notsidney left a comment

Choose a reason for hiding this comment

Uh oh!

notsidney Nov 28, 2022

Choose a reason for hiding this comment

Uh oh!

notsidney Nov 28, 2022

Choose a reason for hiding this comment

Uh oh!

notsidney Nov 28, 2022

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Nov 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RajGM commented Nov 28, 2022

Uh oh!

notsidney commented Nov 29, 2022

Uh oh!

RajGM commented Nov 29, 2022

Uh oh!

notsidney left a comment

Choose a reason for hiding this comment

Uh oh!

notsidney Nov 29, 2022

Choose a reason for hiding this comment

Uh oh!

RajGM Nov 29, 2022

Choose a reason for hiding this comment

Uh oh!

notsidney Nov 29, 2022 • 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

notsidney commented Sep 26, 2022 •

edited

Loading

vercel bot commented Nov 28, 2022 •

edited

Loading

notsidney Nov 29, 2022 •

edited

Loading