martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 00:50:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

render fire icon on topic error

Browse Source
This commit is contained in:
Roland Osborne 2022-07-12 15:45:04 -07:00
parent f3ba244fb0
commit 0b20b3b9bf
5 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Skeleton } from 'antd'; import { Skeleton } from 'antd';
import { CarouselWrapper } from './Carousel.styled'; import { CarouselWrapper } from './Carousel.styled';
import { RightOutlined, LeftOutlined, CloseOutlined } from '@ant-design/icons'; import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons';
import ReactResizeDetector from 'react-resize-detector'; import ReactResizeDetector from 'react-resize-detector';
export function Carousel({ ready, items, itemRenderer, itemRemove }) { export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
const [slots, setSlots] = useState([]); const [slots, setSlots] = useState([]);
const [carouselRef, setCarouselRef] = useState(false); const [carouselRef, setCarouselRef] = useState(false);
const [itemIndex, setItemIndex] = useState(0); const [itemIndex, setItemIndex] = useState(0);
@ -120,11 +120,20 @@ export function Carousel({ ready, items, itemRenderer, itemRemove }) {
} }
} }
if (!ready) { if (!ready || error) {
return ( return (
<CarouselWrapper> <CarouselWrapper>
<div class="carousel"> <div class="carousel">
<Skeleton.Image style={{ height: 128 }} /> {error && (
<div class="status">
<FireOutlined style={{ fontSize: 32, color: 'red' }} />
</div>
)}
{!ready && !error && (
<div class="status">
<PictureOutlined style={{ fontSize: 32 }} />
</div>
)}
</div> </div>
<div class="arrows"> <div class="arrows">
<div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div> <div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div>

10
net/web/src/Carousel/Carousel.styled.js
View File

@ -19,6 +19,16 @@ export const CarouselWrapper = styled.div`
scrollbar-width: none; scrollbar-width: none;
} }
.status {
width: 128px;
height: 128px;
display: flex;
align-items: center;
justify-content: center;
color: #888888;
background-color: #eeeeee;
}
.carousel::-webkit-scrollbar { .carousel::-webkit-scrollbar {
display: none; display: none;
} }

3
net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js
View File

@ -104,7 +104,8 @@ export function useAddTopic() {
updateState({ messageText: null, textColor: '#444444', textColorSet: false, textSize: 12, textSizeSet: false, assets: [] }); updateState({ messageText: null, textColor: '#444444', textColorSet: false, textSize: 12, textSizeSet: false, assets: [] });
} }
catch(err) { catch(err) {
window.alert(err); console.log(err);
window.alert("failed to add message");
} }
updateState({ busy: false }); updateState({ busy: false });
} }

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

@ -96,7 +96,7 @@ export function TopicItem({ host, topic }) {
<div class={nameClass}>{ name }</div> <div class={nameClass}>{ name }</div>
<div>{ getTime(offset) }</div> <div>{ getTime(offset) }</div>
</div> </div>
<Carousel ready={state.ready} items={state.assets} itemRenderer={renderAsset} /> <Carousel ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
<div class="message"> <div class="message">
<Message /> <Message />
</div> </div>

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

@ -14,6 +14,7 @@ export function useTopicItem(topic) {
message: null, message: null,
created: null, created: null,
ready: false, ready: false,
error: false,
owner: false, owner: false,
assets: [], assets: [],
editing: false, editing: false,
@ -48,6 +49,7 @@ export function useTopicItem(topic) {
const { status, transform, data } = topic.data.topicDetail; const { status, transform, data } = topic.data.topicDetail;
let message; let message;
let ready = false; let ready = false;
let error = false;
let assets = []; let assets = [];
if (status === 'confirmed') { if (status === 'confirmed') {
try { try {
@ -65,6 +67,9 @@ export function useTopicItem(topic) {
if (transform === 'complete') { if (transform === 'complete') {
ready = true; ready = true;
} }
if (transform === 'error') {
error = true;
}
} }
catch(err) { catch(err) {
console.log(err); console.log(err);
@ -75,11 +80,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, ready, created, owner, textColor, textSize }); updateState({ name, handle, imageUrl, status, message, transform, assets, 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, ready, created, owner, textColor, textSize }); updateState({ name, handle, imageUrl, status, message, transform, assets, error, ready, created, owner, textColor, textSize });
} }
} }
}, [profile, card, conversation, topic]); }, [profile, card, conversation, topic]);