Hide blessed packs section if we don't have any blessed packs

This commit is contained in:
Scott Nonnenberg 2019-05-29 14:36:34 -07:00
parent 058feb317c
commit 8677e8376a
2 changed files with 40 additions and 31 deletions

View file

@ -55,7 +55,7 @@ const blessedPacks = packs.map(p => ({
</util.ConversationContext>; </util.ConversationContext>;
``` ```
#### No Advertised Packs #### Only installed packs
```jsx ```jsx
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
@ -107,7 +107,7 @@ const noPacks = [];
</util.ConversationContext>; </util.ConversationContext>;
``` ```
#### No Installed Packs #### Only received packs
```jsx ```jsx
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
@ -158,7 +158,7 @@ const noPacks = [];
</util.ConversationContext>; </util.ConversationContext>;
``` ```
#### No with 'known' #### Just installed and 'known'
```jsx ```jsx
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
@ -216,7 +216,7 @@ const noPacks = [];
</util.ConversationContext>; </util.ConversationContext>;
``` ```
#### No Packs at All #### No packs at All
```jsx ```jsx
const noPacks = []; const noPacks = [];

View file

@ -75,45 +75,54 @@ export const StickerManager = React.memo(
i18nKey: 'stickers--StickerManager--InstalledPacks', i18nKey: 'stickers--StickerManager--InstalledPacks',
i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty', i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty',
packs: installedPacks, packs: installedPacks,
hideIfEmpty: false,
}, },
{ {
i18nKey: 'stickers--StickerManager--BlessedPacks', i18nKey: 'stickers--StickerManager--BlessedPacks',
i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty', i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty',
packs: blessedPacks, packs: blessedPacks,
hideIfEmpty: true,
}, },
{ {
i18nKey: 'stickers--StickerManager--ReceivedPacks', i18nKey: 'stickers--StickerManager--ReceivedPacks',
i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty', i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty',
packs: receivedPacks, packs: receivedPacks,
hideIfEmpty: false,
}, },
].map(section => ( ].map(section => {
<React.Fragment key={section.i18nKey}> if (section.hideIfEmpty && section.packs.length === 0) {
<h2 return;
className={classNames( }
'module-sticker-manager__text',
'module-sticker-manager__text--heading' return (
<React.Fragment key={section.i18nKey}>
<h2
className={classNames(
'module-sticker-manager__text',
'module-sticker-manager__text--heading'
)}
>
{i18n(section.i18nKey)}
</h2>
{section.packs.length > 0 ? (
section.packs.map(pack => (
<StickerManagerPackRow
key={pack.id}
pack={pack}
i18n={i18n}
onClickPreview={previewPack}
installStickerPack={installStickerPack}
uninstallStickerPack={uninstallStickerPack}
/>
))
) : (
<div className="module-sticker-manager__empty">
{i18n(section.i18nEmptyKey)}
</div>
)} )}
> </React.Fragment>
{i18n(section.i18nKey)} );
</h2> })}
{section.packs.length > 0 ? (
section.packs.map(pack => (
<StickerManagerPackRow
key={pack.id}
pack={pack}
i18n={i18n}
onClickPreview={previewPack}
installStickerPack={installStickerPack}
uninstallStickerPack={uninstallStickerPack}
/>
))
) : (
<div className="module-sticker-manager__empty">
{i18n(section.i18nEmptyKey)}
</div>
)}
</React.Fragment>
))}
</div> </div>
</> </>
); );