martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-15 04:59:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering topic error states

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/Carousel/Carousel.jsx
View File

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

22
net/web/src/User/Conversation/TopicItem/TopicItem.jsx
View File

@ -5,7 +5,7 @@ import { VideoAsset } from './VideoAsset/VideoAsset';
import { AudioAsset } from './AudioAsset/AudioAsset'; import { AudioAsset } from './AudioAsset/AudioAsset';
import { ImageAsset } from './ImageAsset/ImageAsset'; import { ImageAsset } from './ImageAsset/ImageAsset';
import { Avatar } from 'avatar/Avatar'; 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 { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Carousel } from 'Carousel/Carousel'; 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> 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 ( return (
<TopicItemWrapper> <TopicItemWrapper>
<div class="avatar"> <div class="avatar">

7
net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
View File

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