Hide blessed packs section if we don't have any blessed packs
This commit is contained in:
parent
058feb317c
commit
8677e8376a
2 changed files with 40 additions and 31 deletions
|
@ -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 = [];
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue