rendering topic error states

This commit is contained in:
Roland Osborne 2022-07-12 23:40:35 -07:00
parent 0b20b3b9bf
commit 9020cd9375
3 changed files with 27 additions and 4 deletions

View File

@ -126,7 +126,7 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
<div class="carousel">
{error && (
<div class="status">
<FireOutlined style={{ fontSize: 32, color: 'red' }} />
<FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
</div>
)}
{!ready && !error && (

View File

@ -5,7 +5,7 @@ import { VideoAsset } from './VideoAsset/VideoAsset';
import { AudioAsset } from './AudioAsset/AudioAsset';
import { ImageAsset } from './ImageAsset/ImageAsset';
import { Avatar } from 'avatar/Avatar';
import { Space, Button, Input } from 'antd';
import { Space, Skeleton, Button, Input } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Carousel } from 'Carousel/Carousel';
@ -86,6 +86,26 @@ export function TopicItem({ host, topic }) {
return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
}
if (!state.confirmed) {
return (
<TopicItemWrapper>
<div class="avatar">
<Avatar imageUrl={state.imageUrl} />
</div>
<div class="topic">
<div class="info">
<div class={nameClass}>{ name }</div>
<div>{ getTime(offset) }</div>
</div>
<Skeleton />
<div class="options">
<Options />
</div>
</div>
</TopicItemWrapper>
)
}
return (
<TopicItemWrapper>
<div class="avatar">

View File

@ -13,6 +13,7 @@ export function useTopicItem(topic) {
imageUrl: null,
message: null,
created: null,
confirmed: false,
ready: false,
error: false,
owner: false,
@ -50,8 +51,10 @@ export function useTopicItem(topic) {
let message;
let ready = false;
let error = false;
let confirmed = false;
let assets = [];
if (status === 'confirmed') {
confirmed = true;
try {
message = JSON.parse(data);
if (message.textColor != null) {
@ -80,11 +83,11 @@ export function useTopicItem(topic) {
const { guid, created } = topic.data.topicDetail;
if (profile.state.profile.guid == guid) {
const { name, handle, imageUrl } = profile.actions.getProfile();
updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
}
else {
const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
}
}
}, [profile, card, conversation, topic]);