Replace tag components across how-to and research

[benfurber]

In components like HowToCard there's this:

...
interface IProps {
  howto: IHowtoDB & { tagList?: ITag[] }
  ...
}

return (
  ...
  {howto.tagList &&
    howto.tagList.map((tag, idx) => (
      <Tag key={idx} tag={tag} sx={{ mr: 1 }} />
    ))}
   ...

Created in HowToList:

  const howtoItems = filteredHowtos.map((howto: IHowto) => ({
    ...howto,
    tagList:
      howto.tags &&
      Object.keys(howto.tags)
        .map((key) => allTagsByKey[key])
        .filter(Boolean),
  }))

With the TagList component at src/common/Tags/TagsList.tsx created in #3356, howto.tags can be given to TagsList in HowToCard and none of this extra code is needed.

Please implement for Howtos and Research.

[simontree]

Hey @benfurber - wanted to start working on this issue, but can't replicate the part with the HowToCard component as I couldn't find the code snippet you described in that corresponding current file - https://github.com/ONEARMY/community-platform/blob/master/src/pages/Howto/Content/HowtoList/HowToCard.tsx - Could you please double check? Thx & best wishes!

[simontree]

Hey @benfurber - wanted to start working on this issue, but can't replicate the part with the HowToCard component as I couldn't find the code snippet you described in that corresponding current file - https://github.com/ONEARMY/community-platform/blob/master/src/pages/Howto/Content/HowtoList/HowToCard.tsx - Could you please double check? Thx & best wishes!

nvm - I think I found it. Should be the HowToDescription.tsx instead HowToCard.tsx, correct?