suggested changes

galaniprojects · Jul 24, 2023 · 162d692 · 162d692
1 parent 0106824
commit 162d692
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 188 deletions.
diff --git 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
@@ -340,6 +340,15 @@ exports[`CTypeDetails > should match snapshot 1`] = `
     <dt class="_term">Creation date:</dt>
     <dd class="_definition3">5/1/2023, 12:00:00 PM</dd>
 
+    <dt class="_term">Tags</dt>
+    <dd class="_definition3">
+      <ul>
+        <li>
+          <a href="/?query=example" class="_anchor"> #example </a>
+        </li>
+      </ul>
+    </dd>
+
     <dt class="_term">Extrinsic:</dt>
     <dd class="_definition3">
       <a class="_anchor" href="https://example.subscan.io/extrinsic/0xexamplehash">

diff --git 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
@@ -14,21 +14,18 @@ vi.mocked(useSupportedExtensions).mockReturnValue([
 
 describe('CreateForm', () => {
   it('should render', async () => {
-    const { container, queryAllByLabelText, getByText, getByRole } = render(
-      <CreateForm />,
-    );
+    const { container, queryAllByLabelText, getByText, getByLabelText } =
+      render(<CreateForm />);
     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
@@ -50,42 +50,37 @@ export function CreateForm() {
 
   const handleTagInputKeyUp = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
-      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<HTMLInputElement>) => {
       addTag(event.currentTarget.value);
       event.currentTarget.value = '';
     },
     [addTag],
   );
-  const handleTagInputKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      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<HTMLButtonElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
-      setTags(tags.filter((tag) => tag !== tagToRemove));
+      setTags(tags.filter((tag) => tag !== event.currentTarget.value));
     },
     [tags],
   );
@@ -233,8 +228,8 @@ export function CreateForm() {
         </p>
       </fieldset>
 
-      <label className={styles.label} htmlFor="tagInput">
-        Tags (Optional)
+      <div className={styles.label}>
+        <label htmlFor="tagInput">Tags (Optional)</label>
         <ul className={styles.tags}>
           {tags.map((tag) => (
             <li key={tag} className={styles.tag}>
@@ -243,7 +238,8 @@ export function CreateForm() {
                 type="button"
                 aria-label="remove tag"
                 className={styles.removeTag}
-                onClick={handleRemoveTag(tag)}
+                value={tag}
+                onClick={handleRemoveTag}
               />
             </li>
           ))}
@@ -253,7 +249,6 @@ export function CreateForm() {
               id="tagInput"
               className={styles.tagInput}
               onKeyUp={handleTagInputKeyUp}
-              onKeyDown={handleTagInputKeyDown}
               onBlur={handleTagInputBlur}
               maxLength={50}
               aria-describedby="tagInputDescription"
@@ -263,7 +258,7 @@ export function CreateForm() {
         <p id="tagInputDescription" className={styles.tagInputDescription}>
           Enter a comma after each tag
         </p>
-      </label>
+      </div>
 
       <SelectAccount onSelect={setAccount} />