From 162d6924a4aa1c24ba3c37a7dc25eaa8a3b2d95a Mon Sep 17 00:00:00 2001 From: lukeg90 Date: Mon, 24 Jul 2023 17:12:34 +0200 Subject: [PATCH] suggested changes --- .../CTypeDetails/CTypeDetails.astro | 2 +- .../__snapshots__/CTypeDetails.test.ts.snap | 9 + .../CreateForm/CreateForm.module.css | 10 +- src/components/CreateForm/CreateForm.test.tsx | 13 +- src/components/CreateForm/CreateForm.tsx | 49 ++- .../__snapshots__/CreateForm.test.tsx.snap | 302 +++++++++--------- src/models/ctype.ts | 2 +- 7 files changed, 199 insertions(+), 188 deletions(-) diff --git a/src/components/CTypeDetails/CTypeDetails.astro b/src/components/CTypeDetails/CTypeDetails.astro index a9e50457..87189992 100644 --- a/src/components/CTypeDetails/CTypeDetails.astro +++ b/src/components/CTypeDetails/CTypeDetails.astro @@ -36,7 +36,7 @@ const { tags, } = Astro.props.cTypeData; -const tagNames = tags?.map((tag) => tag.dataValues.tagName); +const tagNames = tags?.map(({ dataValues }) => dataValues.tagName); const web3Name = await getWeb3NameForDid(creator); diff --git a/src/components/CTypeDetails/__snapshots__/CTypeDetails.test.ts.snap b/src/components/CTypeDetails/__snapshots__/CTypeDetails.test.ts.snap index 76a50313..65a2e6b4 100644 --- a/src/components/CTypeDetails/__snapshots__/CTypeDetails.test.ts.snap +++ b/src/components/CTypeDetails/__snapshots__/CTypeDetails.test.ts.snap @@ -340,6 +340,15 @@ exports[`CTypeDetails > should match snapshot 1`] = `
Creation date:
5/1/2023, 12:00:00 PM
+
Tags
+
+ +
+
Extrinsic:
diff --git a/src/components/CreateForm/CreateForm.module.css b/src/components/CreateForm/CreateForm.module.css index c1bf5e8c..138029e1 100644 --- a/src/components/CreateForm/CreateForm.module.css +++ b/src/components/CreateForm/CreateForm.module.css @@ -62,11 +62,10 @@ .tag { box-sizing: border-box; display: inline-flex; - height: 1.5rem; + block-size: 1.5rem; align-items: center; background: var(--color-tag); color: white; - border: 1px solid white; border-radius: var(--border-radius); padding-inline-start: 0.5rem; gap: 0.25rem; @@ -75,8 +74,8 @@ .removeTag { border: 0; padding: 0; - width: 1.5rem; - height: 100%; + inline-size: 1.5rem; + block-size: 100%; background: url('./xmark-solid.svg') no-repeat center/50%; display: inline-flex; cursor: pointer; @@ -89,8 +88,7 @@ .tagInput { border: none; - outline: none; - width: 100%; + inline-size: 100%; } .tagInputDescription { diff --git a/src/components/CreateForm/CreateForm.test.tsx b/src/components/CreateForm/CreateForm.test.tsx index d725bb7d..a681275f 100644 --- a/src/components/CreateForm/CreateForm.test.tsx +++ b/src/components/CreateForm/CreateForm.test.tsx @@ -14,21 +14,18 @@ vi.mocked(useSupportedExtensions).mockReturnValue([ describe('CreateForm', () => { it('should render', async () => { - const { container, queryAllByLabelText, getByText, getByRole } = render( - , - ); + const { container, queryAllByLabelText, getByText, getByLabelText } = + render(); expect(container).toMatchSnapshot(); await userEvent.click(getByText(/Add Property/)); await waitFor(() => queryAllByLabelText('Type:').length === 1); - expect(container).toMatchSnapshot(); + expect(container).toMatchSnapshot('adding property'); await userEvent.type( - getByRole('textbox', { - name: 'Tags (Optional) Enter a comma after each tag', - }), + getByLabelText('Tags (Optional)'), 'tag1 ,tag2, x, tag3,', ); - expect(container).toMatchSnapshot(); + expect(container).toMatchSnapshot('with tags'); }); }); diff --git a/src/components/CreateForm/CreateForm.tsx b/src/components/CreateForm/CreateForm.tsx index 79ebc3bf..bd37ed69 100644 --- a/src/components/CreateForm/CreateForm.tsx +++ b/src/components/CreateForm/CreateForm.tsx @@ -50,14 +50,25 @@ export function CreateForm() { const handleTagInputKeyUp = useCallback( (event: KeyboardEvent) => { - if (event.key !== ',') { + const { key, currentTarget } = event; + + if (![',', 'Backspace'].includes(key)) { return; } - addTag(event.currentTarget.value); - event.currentTarget.value = ''; + + if (key === ',' && currentTarget.value) { + addTag(currentTarget.value); + currentTarget.value = ''; + } + if (key === 'Backspace' && !currentTarget.value && tags.length > 0) { + const lastTag = tags.slice(-1)[0]; + setTags(tags.slice(0, -1)); + currentTarget.value = lastTag; + } }, - [addTag], + [addTag, tags], ); + const handleTagInputBlur = useCallback( (event: FocusEvent) => { addTag(event.currentTarget.value); @@ -65,27 +76,11 @@ export function CreateForm() { }, [addTag], ); - const handleTagInputKeyDown = useCallback( - (event: KeyboardEvent) => { - if ( - event.key !== 'Backspace' || - event.currentTarget.value || - tags.length === 0 - ) { - return; - } - - const lastTag = tags.slice(-1)[0]; - setTags(tags.slice(0, -1)); - event.currentTarget.value = lastTag; - }, - [tags], - ); const handleRemoveTag = useCallback( - (tagToRemove: string) => (event: MouseEvent) => { + (event: MouseEvent) => { event.preventDefault(); - setTags(tags.filter((tag) => tag !== tagToRemove)); + setTags(tags.filter((tag) => tag !== event.currentTarget.value)); }, [tags], ); @@ -233,8 +228,8 @@ export function CreateForm() {

-
-
-

- Create a Claim Type -

-

- To create a Claim Type you need a - - - KILT DID - - - and the - - - Sporran wallet - - - (or another wallet supporting the - - - DID Sign API Specification v1.1+ - - ) -

-

- -

-

-