Post dev

src/APIs/APIs.js

@@ -29,3 +29,8 @@ export const GET_METADATA = ROOT + "api/user/get_metadata";
 export const GET_AVATAR = ROOT + "api/user/get_avatar";
 export const TOGGLE_NICKNAME = ROOT + "api/my/toggle_nickname";
 export const UPDATE_CONTACT = ROOT + "api/user/update_contact";
+export const POST_LIST = ROOT + "api/list/posts";
+export const GET_POST_CONTENT = ROOT + "api/query/post_content";
+export const REMOVE_POST = ROOT + "api/mutating/remove_post";
+export const ADD_POST = ROOT + "api/mutating/new_post";
+export const MODIFY_POST = ROOT + "api/mutating/modify_post";

src/Components/Admin/AdminEmail/AdminEmailPage.jsx

@@ -14,6 +14,7 @@
 import RestoreFromTrashIcon from '@mui/icons-material/RestoreFromTrash';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import {useState} from "react";
+import {TimeTick2String} from "../../../Data/Common";
 
 export async function loader() {
     const inboxes = await getEmailList('inbox');
@@ -135,6 +136,15 @@
                             width: "30%",
                             justifyContent: 'flex-end'
                         }}>{
+                            // TimeTick2String(email.time, {
+                            //     hour12: false,
+                            //     year: 'numeric',
+                            //     month: '2-digit',
+                            //     day: '2-digit',
+                            //     hour: '2-digit',
+                            //     minute: '2-digit',
+                            //     second: '2-digit'
+                            // })
                             new Date(email.time).toDateString()
                                 .toLocaleString('en-US', {
                                         hour12: false,

src/Components/DataPoints/DataPoints.jsx

@@ -279,7 +279,7 @@ export function DataGrid({records, insideProgramPage, style = {}}) {
                     filter={!insideProgramPage}
                     filterPlaceholder="搜索项目"
                     className="ProgramIDColumn"
-                    style={{minWidth: '12rem'}}
+                    style={{width: '10rem'}}
                 />}
                 <Column
                     field='Status'
@@ -310,7 +310,7 @@ export function DataGrid({records, insideProgramPage, style = {}}) {
                     filterPlaceholder="搜索申请季"
                     body={programPeriodBodyTemplate}
                     className="SeasonColumn"
-                    style={{minWidth: '8rem'}}
+                    style={{width: '7rem'}}
                 />
                 <Column
                     field='TimeLine.Decision'

src/Components/Errors/ErrorPage.jsx

@@ -19,13 +19,13 @@ export default function ErrorPage() {
                     </p>
                 ))}
             </div>
-            {/*<div className="error-stack">*/}
-            {/*    {stackLines.map((line, index) => (*/}
-            {/*        <p key={index} className="stack-line">*/}
-            {/*            <small>{line}</small>*/}
-            {/*        </p>*/}
-            {/*    ))}*/}
-            {/*</div>*/}
+            <div className="error-stack">
+                {stackLines.map((line, index) => (
+                    <p key={index} className="stack-line">
+                        <small>{line}</small>
+                    </p>
+                ))}
+            </div>
         </div>
     );
 }

src/Components/HowToUse/HowToUse.jsx

@@ -1,123 +1,162 @@
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary, Button, Dialog, DialogActions,
+    AccordionSummary, Box, Button, Dialog, DialogActions,
     DialogContent,
     DialogContentText,
-    DialogTitle, ListItem, ListItemButton
+    DialogTitle, Divider, ListItem, ListItemButton, Paper, Typography
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import React, {useState} from "react";
 import profile from "../../Assets/imgs/profile.png";
 import applicant from "../../Assets/imgs/applicant.png";
 import newApplicant from "../../Assets/imgs/new-applicant.png";
 import record from "../../Assets/imgs/record.png";
 import program from "../../Assets/imgs/program.png";
 import {Link, useLoaderData, useNavigate} from "react-router-dom";
 import {Link as MuiLink} from '@mui/material';
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
+import Grid2 from "@mui/material/Unstable_Grid2";
+import {BoldTypography} from "../common";
 
 
 export function HowToUse() {
     const loaderData = useLoaderData();
     return (
-        <div style={{width: '90%'}}>
-            <h1 style={{textAlign: 'center'}}>OpenSIST使用指南</h1>
+        <Box sx={{p: '1rem'}}>
+            <BoldTypography variant="h4" sx={{textAlign: 'center'}}>OpenSIST使用指南</BoldTypography>
             <Graduated loaderData={loaderData}/>
             <Current/>
-        </div>
+        </Box>
     )
 }
 
+export function GuidanceGrid({Index, TitlePrime, TitleSecond, Content, ButtonLink, ButtonContent}) {
+    return (
+        <Grid2 xs={12} sm={6} md={6} xl={3}
+               sx={{
+                   display: 'flex',
+                   flexDirection: 'column',
+                   gap: '3rem',
+                   justifyContent: 'space-between'
+               }}
+        >
+            <Box sx={{display: 'flex', flexDirection: "column", gap: "1.5rem"}}>
+                <BoldTypography variant="h5">{Index}.</BoldTypography>
+                <Box>
+                    <BoldTypography variant='h6'
+                                    sx={{color: (theme) => theme.palette.mode === 'dark' ? "#fff" : "#000"}}>
+                        {TitlePrime}
+                    </BoldTypography>
+                    <BoldTypography variant='h6'
+                                    sx={{color: (theme) => theme.palette.mode === 'dark' ? "#fff" : "#000"}}>
+                        {TitleSecond}
+                    </BoldTypography>
+                </Box>
+                <Typography>{Content}</Typography>
+            </Box>
+            <Button component={Link} to={ButtonLink} variant='contained'>
+                {`${ButtonContent}`}
+            </Button>
+        </Grid2>
+
+    )
+
+}
+
 function Graduated({loaderData}) {
     const applicantIDs = loaderData.metaData.ApplicantIDs;
     const [open, setOpen] = useState(false);
     const navigate = useNavigate();
     return (
-        <Accordion sx={{bgcolor: '#448aff1a'}}>
-            <AccordionSummary
-                expandIcon={<ArrowDropDownIcon/>}
-            >
-                <h2 style={{margin: 0}}><b>毕业生或大四研三请阅读：</b></h2>
-            </AccordionSummary>
-            <AccordionDetails>
-                <h3><b>我来这个网站应该干什么？</b></h3>
-                <h5><b>为了给SIST学弟学妹们提供更多海外申请的信息，我们希望你能抽出宝贵的15分钟，做三件事情：</b></h5>
-                <ol>
-                    <li>
-                        <b>贡献自己申请时的背景（可选匿名）</b>。考虑到有的人也许会有多于一年的申请经历，因此每个用户可添加多个申请人，以申请年份作区分。
-                    </li>
-                    <li>
-                        <b>尽可能多地贡献自己的申请记录</b>，也就是你申请的各个项目的admit/reject的结果，最终呈现出来的就像在一亩三分地或opencs上浏览申请结果一样。
-                    </li>
-                    <li>
-                        <b>贡献海外高校graduate program信息</b>，如果你对某些项目有着很深入的了解，我们希望你把你了解到的给写上，这样能为学弟学妹们提供更多insight。
-                    </li>
-                </ol>
-                <h3><b>上面说的这三件事该咋做？</b></h3>
-                <h5>我们在下方提供了详细的图文教程，但是——</h5>
-                <h4><b><i>如果您懒得读和申请人相关的详细教程，可以直接前往<MuiLink
-                    href='/profile/new-applicant'>添加申请人</MuiLink>。</i></b></h4>
-                <h4>
-                    <b><i>
-                        添加完申请人之后，可为该申请人<MuiLink onClick={() => setOpen(true)} style={{cursor: 'pointer'}}>添加申请记录</MuiLink>。
-                    </i></b>
-                </h4>
-                <h4><b><i>如果您觉得项目信息表的教程也太长，可以直接移步<MuiLink href='/programs'>项目信息表</MuiLink>。</i></b>
-                </h4>
-                <Dialog open={open} onClose={() => {
-                    setOpen(false);
-                }}>
-                    <DialogTitle>请选择要添加记录的申请人</DialogTitle>
-                    <DialogContent>
-                        {applicantIDs.length > 0 ? applicantIDs.map((applicantID, index) => {
-                            return (
-                                <ListItem key={index}>
-                                    <ListItemButton
-                                        sx={{justifyContent: 'center'}}
-                                        onClick={() => {
-                                            navigate(`/profile/new-record`, { state: {applicantID: applicantID, from: window.location.pathname } })
-                                        }}
-                                    >
-                                        <PersonOutlineIcon/> {applicantID}
-                                    </ListItemButton>
-                                </ListItem>
-                            )
-                        }) : <DialogContentText>您还没有申请人，请先添加申请人信息</DialogContentText>}
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => {
-                            setOpen(false);
-                        }}>
-                            取消
-                        </Button>
-                    </DialogActions>
-                </Dialog>
-                <h3><b>申请人信息和申请记录的添加和修改：</b></h3>
-                <ol style={{paddingLeft: '1rem'}}>
-                    <li>点击右上角头像，在下拉菜单中选择Profile。</li>
-                    <li>
-                        在Profile页面，下图介绍了该页面的一些按钮功能，你也可以阅读页面右侧使用指南来获取更详细的信息。
-                        <img src={profile} alt='profile' width='100%'/>
-                    </li>
-                    <li>
-                        点击左侧“添加申请人”按钮，可以在右侧界面填写你的申请人信息。
-                        <img src={newApplicant} alt='new-applicant' width='100%'/>
-                    </li>
-                    <li>
-                        添加完申请人信息后，你可以打开自己的申请人信息页，添加自己的申请记录。
-                        <img src={applicant} alt='applicant' width='100%'/>
-                        <img src={record} alt='add-modify-record' width='100%'/>
-                    </li>
-                </ol>
-                <h3><b>海外graduate program的添加和修改：</b></h3>
-                <ol style={{paddingLeft: '1rem'}}>
-                    <li>点击顶部导航栏的“项目信息表”按钮，即可前往查看各个项目。使用前请先阅读该页面的使用指南。</li>
-                    <li>下图展示了该页面的项目添加和修改功能：</li>
-                    <img src={program} alt='program' width='100%'/>
-                </ol>
-            </AccordionDetails>
-        </Accordion>
+        <Box sx={{display: 'flex', flexDirection: 'column', gap: "2rem", m: '2rem'}}>
+            <BoldTypography variant="h5">我来这个网站应该干什么？</BoldTypography>
+            <BoldTypography variant="subtitl1">
+                为了给SIST学弟学妹们提供更多海外申请的信息，我们希望你能抽出宝贵的一点时间，按个人意愿来做至多四件事情：
+            </BoldTypography>
+            <Divider variant='middle'/>
+            <Grid2 container columnSpacing={7} rowSpacing={3}>
+                <GuidanceGrid
+                    Index={1}
+                    TitlePrime='填写申请时的'
+                    TitleSecond='个人背景（可匿名）'
+                    Content='考虑到有的人也许会有多于一年的申请经历，因此每个用户可添加多个申请人，以申请年份作区分'
+                    ButtonLink='/profile/new-applicant'
+                    ButtonContent='添加申请人'
+                />
+                <GuidanceGrid
+                    Index={2}
+                    TitlePrime='填写申请项目'
+                    TitleSecond='admit/reject的情况'
+                    Content='尽可能多地填写自己的申请记录，也就是你申请的各个项目的admit/reject的结果'
+                    ButtonLink='/profile/new-record'
+                    ButtonContent='添加申请记录'
+                />
+                <GuidanceGrid
+                    Index={3}
+                    TitlePrime='分享你所了解的'
+                    TitleSecond='海外硕博项目细节'
+                    Content='如果你对某些项目有着很深入的了解，我们希望你能够把你所了解的内容进行分享，为学弟学妹们提供更多insight'
+                    ButtonLink='/programs/new'
+                    ButtonContent='添加项目信息'
+                />
+                <GuidanceGrid
+                    Index={4}
+                    TitlePrime='在本站'
+                    TitleSecond='分享你的申请经验'
+                    Content='在本站发布申请分享帖，分享你申请过程中的心得体会，包括但不限于选校、套磁、申请总结等方面'
+                    ButtonLink='/posts/new'
+                    ButtonContent='添加申请分享帖'
+                />
+            </Grid2>
+            <Dialog open={open} onClose={() => {
+                setOpen(false);
+            }}>
+                <DialogTitle>请选择要添加记录的申请人</DialogTitle>
+                <DialogContent>
+                    {applicantIDs.length > 0 ? applicantIDs.map((applicantID, index) => {
+                        return (
+                            <ListItem key={index}>
+                                <ListItemButton component={Link} to={`/profile/${applicantID}/new-record`}
+                                                sx={{justifyContent: 'center'}}>
+                                    <PersonOutlineIcon/> {applicantID}
+                                </ListItemButton>
+                            </ListItem>
+                        )
+                    }) : <DialogContentText>您还没有申请人，请先添加申请人信息</DialogContentText>}
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => {
+                        setOpen(false);
+                    }}>
+                        取消
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            {/*<h3><b>申请人信息和申请记录的添加和修改：</b></h3>*/}
+            {/*<ol style={{paddingLeft: '1rem'}}>*/}
+            {/*    <li>点击右上角头像，在下拉菜单中选择Profile。</li>*/}
+            {/*    <li>*/}
+            {/*        在Profile页面，下图介绍了该页面的一些按钮功能，你也可以阅读页面右侧使用指南来获取更详细的信息。*/}
+            {/*        <img src={profile} alt='profile' width='100%'/>*/}
+            {/*    </li>*/}
+            {/*    <li>*/}
+            {/*        点击左侧“添加申请人”按钮，可以在右侧界面填写你的申请人信息。*/}
+            {/*        <img src={newApplicant} alt='new-applicant' width='100%'/>*/}
+            {/*    </li>*/}
+            {/*    <li>*/}
+            {/*        添加完申请人信息后，你可以打开自己的申请人信息页，添加自己的申请记录。*/}
+            {/*        <img src={applicant} alt='applicant' width='100%'/>*/}
+            {/*        <img src={record} alt='add-modify-record' width='100%'/>*/}
+            {/*    </li>*/}
+            {/*</ol>*/}
+            {/*<h3><b>海外graduate program的添加和修改：</b></h3>*/}
+            {/*<ol style={{paddingLeft: '1rem'}}>*/}
+            {/*    <li>点击顶部导航栏的“项目信息表”按钮，即可前往查看各个项目。使用前请先阅读该页面的使用指南。</li>*/}
+            {/*    <li>下图展示了该页面的项目添加和修改功能：</li>*/}
+            {/*    <img src={program} alt='program' width='100%'/>*/}
+            {/*</ol>*/}
+        </Box>
     )
 }