fix: hide add tag options if no tags available

standardnotes · May 5, 2021 · 4308f4e · 4308f4e
1 parent 323bc34
commit 4308f4e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 59 deletions.
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
@@ -68,66 +68,68 @@ export const NotesOptions = observer(
           </span>
         </Switch>
         <div className="h-1px my-2 bg-secondary-contrast"></div>
-        <Disclosure
-          open={tagsMenuOpen}
-          onChange={() => {
-            const buttonRect = tagsButtonRef.current.getBoundingClientRect();
-            const { offsetTop, offsetWidth } = tagsButtonRef.current;
-            setTagsMenuPosition({
-              top: offsetTop,
-              right:
-                buttonRect.right + 265 > document.body.clientWidth
-                  ? offsetWidth
-                  : -offsetWidth,
-            });
-            setTagsMenuOpen(!tagsMenuOpen);
-          }}
-        >
-          <DisclosureButton
-            onKeyUp={(event) => {
-              if (event.key === 'Escape') {
-                setTagsMenuOpen(false);
-              }
-            }}
-            onBlur={closeOnBlur}
-            ref={tagsButtonRef}
-            className={`${buttonClass} justify-between`}
-          >
-            <div className="flex items-center">
-              <Icon type={IconType.Hashtag} className={iconClass} />
-              {'Add tag'}
-            </div>
-            <Icon
-              type={IconType.ChevronRight}
-              className="fill-current color-neutral"
-            />
-          </DisclosureButton>
-          <DisclosurePanel
-            onKeyUp={(event) => {
-              if (event.key === 'Escape') {
-                setTagsMenuOpen(false);
-                tagsButtonRef.current.focus();
-              }
-            }}
-            style={{
-              ...tagsMenuPosition,
+        {appState.tags.tagsCount > 0 && (
+          <Disclosure
+            open={tagsMenuOpen}
+            onChange={() => {
+              const buttonRect = tagsButtonRef.current.getBoundingClientRect();
+              const { offsetTop, offsetWidth } = tagsButtonRef.current;
+              setTagsMenuPosition({
+                top: offsetTop,
+                right:
+                  buttonRect.right + 265 > document.body.clientWidth
+                    ? offsetWidth
+                    : -offsetWidth,
+              });
+              setTagsMenuOpen(!tagsMenuOpen);
             }}
-            className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px max-h-80 overflow-y-scroll"
           >
-            {appState.tags.tags.map((tag) => (
-              <button
-                key={tag.title}
-                className={buttonClass}
-                onBlur={closeOnBlur}
-                onClick={() => {
-                  appState.tags.addTagToSelectedNotes(tag);
-                }}
-              >
-                {tag.title}
-              </button>
-            ))}
-          </DisclosurePanel>
-        </Disclosure>
+            <DisclosureButton
+              onKeyUp={(event) => {
+                if (event.key === 'Escape') {
+                  setTagsMenuOpen(false);
+                }
+              }}
+              onBlur={closeOnBlur}
+              ref={tagsButtonRef}
+              className={`${buttonClass} justify-between`}
+            >
+              <div className="flex items-center">
+                <Icon type={IconType.Hashtag} className={iconClass} />
+                {'Add tag'}
+              </div>
+              <Icon
+                type={IconType.ChevronRight}
+                className="fill-current color-neutral"
+              />
+            </DisclosureButton>
+            <DisclosurePanel
+              onKeyUp={(event) => {
+                if (event.key === 'Escape') {
+                  setTagsMenuOpen(false);
+                  tagsButtonRef.current.focus();
+                }
+              }}
+              style={{
+                ...tagsMenuPosition,
+              }}
+              className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px max-h-80 overflow-y-scroll"
+            >
+              {appState.tags.tags.map((tag) => (
+                <button
+                  key={tag.title}
+                  className={buttonClass}
+                  onBlur={closeOnBlur}
+                  onClick={() => {
+                    appState.tags.addTagToSelectedNotes(tag);
+                  }}
+                >
+                  {tag.title}
+                </button>
+              ))}
+            </DisclosurePanel>
+          </Disclosure>
+        )}
         <button
           onBlur={closeOnBlur}
           className={buttonClass}

diff --git a/app/assets/javascripts/ui_models/app_state/tags_state.ts b/app/assets/javascripts/ui_models/app_state/tags_state.ts
@@ -1,5 +1,5 @@
 import { ContentType, SNSmartTag, SNTag } from '@standardnotes/snjs';
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
 
 export class TagsState {
@@ -13,6 +13,9 @@ export class TagsState {
     makeObservable(this, {
       tags: observable,
       smartTags: observable,
+
+      tagsCount: computed,
+
       addTagToSelectedNotes: action,
     });
 
@@ -43,4 +46,8 @@ export class TagsState {
     );
     this.application.sync();
   }
+
+  get tagsCount(): number {
+    return this.tags.length;
+  }
 }