RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

handling render errors on PostCard

Browse Source
This commit is contained in:
SrGooglo 2022-12-12 11:50:18 +00:00
parent 15214cff3f
commit 472050c8b0
3 changed files with 84 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/app/src/components/PostCard/components/attachments/index.jsx
View File

@ -30,7 +30,7 @@ import "plyr-react/dist/plyr.css"
import "./index.less" import "./index.less"
const Attachment = React.memo((props) => { const Attachment = React.memo((props) => {
const { url, id, name } = props.attachment const { url, id } = props.attachment
const [loaded, setLoaded] = React.useState(false) const [loaded, setLoaded] = React.useState(false)
@ -108,9 +108,19 @@ const Attachment = React.memo((props) => {
return <ContentFailed /> return <ContentFailed />
} }
return <div className="attachment" id={id}> try {
{renderMedia()} return <div
</div> key={props.index}
id={id}
className="attachment"
>
{renderMedia()}
</div>
} catch (error) {
console.error(`Failed to render attachment ${props.attachment.name} (${props.attachment.id})`, error)
return <ContentFailed />
}
}) })
export default (props) => { export default (props) => {
@ -158,8 +168,8 @@ export default (props) => {
stopOnHover={true} stopOnHover={true}
> >
{ {
props.attachments.map((attachment, index) => { props.attachments?.length > 0 && props.attachments.map((attachment, index) => {
return <Attachment key={index} attachment={attachment} /> return <Attachment index={index} attachment={attachment} />
}) })
} }
</Carousel> </Carousel>

11
packages/app/src/components/PostCard/components/content/index.jsx
View File

@ -8,19 +8,10 @@ import { processString } from "utils"
import "./index.less" import "./index.less"
export default (props) => { export default (props) => {
let { message, data } = props.data let { message } = props.data
const [nsfwAccepted, setNsfwAccepted] = React.useState(false) const [nsfwAccepted, setNsfwAccepted] = React.useState(false)
if (typeof data === "string") {
try {
data = JSON.parse(data)
} catch (error) {
console.error(error)
data = {}
}
}
// parse message // parse message
const regexs = [ const regexs = [
{ {

120
packages/app/src/components/PostCard/index.jsx
View File

@ -133,58 +133,72 @@ export default ({
return <antd.Skeleton active /> return <antd.Skeleton active />
} }
return <div try {
key={data.key ?? data._id} return <div
id={data._id} key={data.key ?? data._id}
className={classnames( id={data._id}
"postCard", className={classnames(
data.type, "postCard",
{ ["liked"]: hasLiked }, data.type,
{ ["noHide"]: window.isMobile || !expansibleActions }, { ["liked"]: hasLiked },
{ ["fullmode"]: fullmode }, { ["noHide"]: window.isMobile || !expansibleActions },
)} { ["fullmode"]: fullmode },
context-menu={"postCard-context"} )}
user-id={data.user_id} context-menu={"postCard-context"}
self-post={isSelf.toString()} user-id={data.user_id}
> self-post={isSelf.toString()}
<div className="wrapper"> >
<PostHeader <div className="wrapper">
postData={data} <PostHeader
isLiked={hasLiked} postData={data}
likes={likes.length} isLiked={hasLiked}
comments={comments.length} likes={likes.length}
fullmode={fullmode} comments={comments.length}
onDoubleClick={onDoubleClick} fullmode={fullmode}
/> onDoubleClick={onDoubleClick}
<PostContent />
data={data} <PostContent
autoCarrousel={autoCarrousel} data={data}
fullmode={fullmode} autoCarrousel={autoCarrousel}
onDoubleClick={onDoubleClick} fullmode={fullmode}
nsfw={data.flags && data.flags.includes("nsfw")} onDoubleClick={onDoubleClick}
> nsfw={data.flags && data.flags.includes("nsfw")}
{data.attachments && data.attachments.length > 0 && <PostAttachments >
attachments={data.attachments} {data.attachments && data.attachments.length > 0 && <PostAttachments
/>} attachments={data.attachments}
</PostContent> />}
</div> </PostContent>
{!fullmode &&
<div className="post_actionsIndicator">
<Icons.MoreHorizontal />
</div> </div>
} {!fullmode &&
{!fullmode && <div className="post_actionsIndicator">
<PostActions <Icons.MoreHorizontal />
defaultLiked={hasLiked} </div>
defaultSaved={hasSaved} }
onClickLike={onClickLike} {!fullmode &&
onClickSave={onClickSave} <PostActions
onClickOpen={onClickOpen} defaultLiked={hasLiked}
actions={{ defaultSaved={hasSaved}
delete: onClickDelete, onClickLike={onClickLike}
}} onClickSave={onClickSave}
fullmode={fullmode} onClickOpen={onClickOpen}
/> actions={{
} delete: onClickDelete,
</div> }}
fullmode={fullmode}
/>
}
</div>
} catch (error) {
console.error(error)
return <div className="postCard error">
<h1>
<Icons.AlertTriangle />
<span>Cannot render this post</span>
<span>
Maybe this version of the app is outdated or is not supported yet
</span>
</h1>
</div>
}
} }