Fix: posts loading error

Author: thezbm

src/Components/Post/PostContent/PostContent.jsx

@@ -18,18 +18,23 @@ import React, {useState} from "react";
 import {BoldTypography, useSmallPage} from "../../common";
 import {isAuthApplicant} from "../../../Data/ApplicantData";
 import "./PostContent.css"
-import {getAvatar, getMetaData} from "../../../Data/UserData";
+import {getMetaData, getAvatar} from "../../../Data/UserData";
 import Grid2 from "@mui/material/Unstable_Grid2";
 
 export async function loader({params}) {
     const postId = params.postId;
     try {
         const postObj = await getPostObject(postId);
-        const editable = await isAuthApplicant(postObj?.Author);
-        const metaData = postObj?.Author ? await getMetaData(postObj?.Author.split("@")[0]) : {};
-        const avatar = await getAvatar(metaData?.Avatar, postObj?.Author);
-        return {postObj, editable, avatar};
+
+        const authorId = postObj?.author;
+        const editable = authorId ? await isAuthApplicant(authorId) : false;
+
+        const metaData = authorId ? await getMetaData(authorId.split("@")[0]) : {};
+        const avatar = await getAvatar(metaData?.Avatar, authorId);
+        const latestYear = metaData?.latestYear;
+        return {postObj, editable, avatar, latestYear, urlPostId: postId};
     } catch (e) {
+        console.error("[PostContent Loader] Error:", e);
         throw e;
     }
 }
@@ -40,17 +45,23 @@ export async function action({request, params}) {
     const author = formData.get('Author');
     const ActionType = formData.get('ActionType');
     if (ActionType === 'Refresh') {
-        return await getPostObject(postId, true);
+        await getPostObject(postId, true);
+        return {urlPostId: postId};
     } else if (ActionType === 'Delete') {
         await removePost(postId, author);
         return redirect("/posts");
     }
+    return {urlPostId: postId};
 }
 
 export default function PostContent() {
-    const {postObj, editable, avatar} = useLoaderData();
+    const {postObj, editable, avatar, latestYear, urlPostId} = useLoaderData();
     const smallPage = useSmallPage();
     const [open, setOpen] = useState(false);
+
+    if (!postObj) {
+        return <Typography>帖子加载失败或不存在。</Typography>;
+    }
     const handleClose = () => {
         setOpen(false);
     };
@@ -62,31 +73,31 @@ export default function PostContent() {
             <Box className="PostContentHeader" sx={{pb: "0.5rem"}}>
                 <Box sx={{pb: "0.5rem", display: 'flex', gap: '1rem'}}>
                     <Avatar src={avatar} sx={{height: (smallPage ? "5rem" : "4rem"), width: (smallPage ? "5rem" : "4rem"), cursor: 'pointer'}} component={Link}
-                            to={`/datapoints/applicant/${postObj.Author}`}/>
+                            to={`/datapoints/applicant/${postObj.author}${latestYear ? '@' + latestYear : ''}`}/>
                     <Grid2 container>
                         <Grid2 xs={12}>
-                            <BoldTypography variant="h6" component={Link} to={`/datapoints/applicant/${postObj.Author}`}
+                            <BoldTypography variant="h6" component={Link} to={`/datapoints/applicant/${postObj.author}${latestYear ? '@' + latestYear : ''}`}
                                             sx={{
                                                 cursor: 'pointer',
                                                 textDecoration: "none",
                                             }}
                             >
-                                {postObj.Author}
+                                {postObj.author}
                             </BoldTypography>
                         </Grid2>
                         <Grid2 component={Typography} xs={12} md={5}>
-                            创建于: {new Date(postObj.created).toISOString().split('T')[0]}
+                            创建于: {postObj.created_at}
                         </Grid2>
                         <Grid2 component={Typography} xs={12} md={7}>
-                            最后修改于: {new Date(postObj.modified).toISOString().split('T')[0]}
+                            最后修改于: {postObj.updated_at}
                         </Grid2>
                     </Grid2>
                 </Box>
                 <Box className='ReviseRefreshButtonGroup'>
                     {editable ?
                         <>
                             <Tooltip title="编辑内容" arrow>
-                                <IconButton component={Link} to={`edit${window.location.search}`}>
+                                <IconButton component={Link} to={`/posts/${urlPostId}/edit${window.location.search}`}>
                                     <Edit/>
                                 </IconButton>
                             </Tooltip>
@@ -97,12 +108,12 @@ export default function PostContent() {
                             </Tooltip>
                             <Dialog open={open} onClose={handleClose}>
                                 <DialogTitle>
-                                    是否要删除《{postObj.Title}》这篇文章？
+                                    是否要删除《{postObj.title}》这篇文章？
                                 </DialogTitle>
                                 <DialogActions>
                                     <Button onClick={handleClose}>取消</Button>
                                     <Form method="post">
-                                        <Input type="hidden" name="Author" value={postObj.Author}/>
+                                        <Input type="hidden" name="Author" value={postObj.author}/>
                                         <Button color='error' type="submit"
                                                 name="ActionType" value="Delete"
                                                 onClick={handleClose}
@@ -124,12 +135,12 @@ export default function PostContent() {
             </Box>
             <Paper sx={{display: 'flex', flexDirection: 'column', p: '1rem', height: '100%', overflowY: 'auto'}}>
                 <Typography variant={'h4'} sx={{display: 'flex', position: 'relative', mb: '1rem'}}>
-                    {postObj.Title}
+                    {postObj.title}
                 </Typography>
                 <ReactMarkdown>
-                    {postObj.Content}
+                    {postObj.content}
                 </ReactMarkdown>
             </Paper>
         </>
     )
-}
+}