docs: explain why maintaining local tag list

src/components/media/AddTag.tsx

@@ -27,12 +27,6 @@ export default function AddTag ({ mediaWithTags, onCancel, onAdd, label, openSea
         const linkedEntityId = props.type === EntityType.climb
           ? (props as TypesenseDocumentType).climbUUID
           : (props as TypesenseAreaType).id
-
-        // const [newTag, updatedMediaObject] = await addEntityTagCmd({
-        //   mediaId: mediaWithTags.id,
-        //   entityId: linkedEntityId,
-        //   entityType: props.type === EntityType.climb ? TagTargetType.climb : TagTargetType.area
-        // })
         void onAdd({
           mediaId: mediaWithTags.id,
           entityId: linkedEntityId,

src/components/media/MobileMediaCard.tsx

@@ -20,6 +20,13 @@ export interface MobileMediaCardProps {
  * Media card for mobile view
  */
 export default function MobileMediaCard ({ header, isAuthorized = false, isAuthenticated = false, mediaWithTags }: MobileMediaCardProps): JSX.Element {
+  /**
+   * Why maintaining media object in a local state?
+   * Normally, this component receives tag data via props. However, when the media owner
+   * adds/removes tags, after the backend is updated, we also update the media object
+   * in Apollo cache and keep the updated state here.  This way we only need to deal
+   * with a single media instead a large list.
+   */
   const [localMediaWithTags, setMedia] = useState(mediaWithTags)
   const { mediaUrl, entityTags, uploadTime } = localMediaWithTags
   const tagCount = entityTags.length

src/components/media/Tag.tsx

@@ -39,8 +39,6 @@ export default function Tag ({ mediaId, tag, onDelete, size = 'md', showDelete =
             onClick={async (e) => {
               e.preventDefault()
               await onDelete({ mediaId: mediaId, tagId: tag.id })
-              // e.stopPropagation()
-              // e.preventDefault()
             }}
             title='Delete tag'
           >

src/components/media/TagList.tsx

@@ -29,6 +29,13 @@ interface TagsProps {
  */
 export default function TagList ({ mediaWithTags, isAuthorized = false, isAuthenticated = false, showDelete = false, showActions = true, className = '' }: TagsProps): JSX.Element | null {
   const { addEntityTagCmd, removeEntityTagCmd } = useMediaCmd()
+  /**
+   * Why maintaining media object in a local state?
+   * Normally, this component receives tag data via props. However, when the media owner
+   * adds/removes tags, after the backend is updated, we also update the media object
+   * in Apollo cache and keep the updated state here.  This way we only need to deal
+   * with a single media instead a large list.
+   */
   const [localMediaWithTags, setMedia] = useState(mediaWithTags)
 
   useEffect(() => {
@@ -95,8 +102,6 @@ export interface TagListProps {
  * Mobile tag list wrapped in a popup menu
  */
 export const MobilePopupTagList: React.FC<TagListProps> = ({ mediaWithTags, isAuthorized = false, onChange }) => {
-  // const [localMediaWithTags, setMedia] = useState(mediaWithTags)
-
   const { addEntityTagCmd, removeEntityTagCmd } = useMediaCmd()
   const [openSearch, setOpenSearch] = useState(false)