RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +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"
const Attachment = React.memo((props) => {
const { url, id, name } = props.attachment
const { url, id } = props.attachment
const [loaded, setLoaded] = React.useState(false)
@ -108,9 +108,19 @@ const Attachment = React.memo((props) => {
return <ContentFailed />
}
return <div className="attachment" id={id}>
{renderMedia()}
</div>
try {
return <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) => {
@ -158,8 +168,8 @@ export default (props) => {
stopOnHover={true}
>
{
props.attachments.map((attachment, index) => {
return <Attachment key={index} attachment={attachment} />
props.attachments?.length > 0 && props.attachments.map((attachment, index) => {
return <Attachment index={index} attachment={attachment} />
})
}
</Carousel>

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

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

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

@ -133,58 +133,72 @@ export default ({
return <antd.Skeleton active />
}
return <div
key={data.key ?? data._id}
id={data._id}
className={classnames(
"postCard",
data.type,
{ ["liked"]: hasLiked },
{ ["noHide"]: window.isMobile || !expansibleActions },
{ ["fullmode"]: fullmode },
)}
context-menu={"postCard-context"}
user-id={data.user_id}
self-post={isSelf.toString()}
>
<div className="wrapper">
<PostHeader
postData={data}
isLiked={hasLiked}
likes={likes.length}
comments={comments.length}
fullmode={fullmode}
onDoubleClick={onDoubleClick}
/>
<PostContent
data={data}
autoCarrousel={autoCarrousel}
fullmode={fullmode}
onDoubleClick={onDoubleClick}
nsfw={data.flags && data.flags.includes("nsfw")}
>
{data.attachments && data.attachments.length > 0 && <PostAttachments
attachments={data.attachments}
/>}
</PostContent>
</div>
{!fullmode &&
<div className="post_actionsIndicator">
<Icons.MoreHorizontal />
try {
return <div
key={data.key ?? data._id}
id={data._id}
className={classnames(
"postCard",
data.type,
{ ["liked"]: hasLiked },
{ ["noHide"]: window.isMobile || !expansibleActions },
{ ["fullmode"]: fullmode },
)}
context-menu={"postCard-context"}
user-id={data.user_id}
self-post={isSelf.toString()}
>
<div className="wrapper">
<PostHeader
postData={data}
isLiked={hasLiked}
likes={likes.length}
comments={comments.length}
fullmode={fullmode}
onDoubleClick={onDoubleClick}
/>
<PostContent
data={data}
autoCarrousel={autoCarrousel}
fullmode={fullmode}
onDoubleClick={onDoubleClick}
nsfw={data.flags && data.flags.includes("nsfw")}
>
{data.attachments && data.attachments.length > 0 && <PostAttachments
attachments={data.attachments}
/>}
</PostContent>
</div>
}
{!fullmode &&
<PostActions
defaultLiked={hasLiked}
defaultSaved={hasSaved}
onClickLike={onClickLike}
onClickSave={onClickSave}
onClickOpen={onClickOpen}
actions={{
delete: onClickDelete,
}}
fullmode={fullmode}
/>
}
</div>
{!fullmode &&
<div className="post_actionsIndicator">
<Icons.MoreHorizontal />
</div>
}
{!fullmode &&
<PostActions
defaultLiked={hasLiked}
defaultSaved={hasSaved}
onClickLike={onClickLike}
onClickSave={onClickSave}
onClickOpen={onClickOpen}
actions={{
delete: onClickDelete,
}}
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>
}
}