(() => ({
- display: "inline-flex",
- alignItems: "center",
- }));
-
- return (
-
-
-
-
- {record.ProgramID}
-
-
-
- navigate(`/profile/new-record`, {
- state: {
- programID: record.ProgramID,
- from: window.location.pathname,
- },
- })
- }
- sx={{
- // fontSize: "0.5rem",
- cursor: "pointer",
- "&:hover": {
- color: (theme) =>
- theme.palette.mode === "dark" ? "#a1a1a1" : "#6b6b6b",
- },
- }}
- />
-
-
-
-
+
+
+
+ {record.ProgramID}
+
+
+
+ navigate(`/profile/new-record`, {
+ state: {
+ programID: record.ProgramID,
+ from: window.location.pathname,
+ },
+ })
+ }
+ sx={{
+ padding: "2px",
+ "&:hover": {
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "#a1a1a1" : "#6b6b6b",
+ },
+ }}
+ >
+
+
+
+
+
+
- {item}
-
+ item: ReactNode;
+ width: string;
+ style?: CSSProperties;
+}> = ({item, width, style}) => (
+
+ {item}
+
);
const NoMarginCell: FC<{
- item: ReactNode;
- width: string;
- style?: CSSProperties;
-}> = ({ item, width, style }) => (
-
- {item}
-
+ item: ReactNode;
+ width: string;
+ style?: CSSProperties;
+}> = ({item, width, style}) => (
+
+ {item}
+
);
/** One row in the table, rendering all the fields of a single RecordData. */
-const Row: FC<{ record: RecordData, hideProgramColumn: boolean }> = ({ record, hideProgramColumn }) => {
- const navigate = useNavigate();
- const location = useLocation();
+const Row: FC<{ record: RecordData, hideProgramColumn: boolean }> = ({record, hideProgramColumn}) => {
+ const navigate = useNavigate();
+ const location = useLocation();
- return (
-
-
- {hideProgramColumn || }
- |
- |
- |
- |
- |
- |
- |
- | |
- );
+ return (
+
+
+ {hideProgramColumn || }
+
+
+
+
+
+
+ |
+ | | | | | | | | |
+ );
};
/**
@@ -234,33 +243,33 @@ const statusChipColorMap = {
}
const statusBodyTemplate = (rowData: RecordData) => (
-
- {rowData.Status}
-
+
+ {rowData.Status}
+
);
const finalBodyTemplate = (rowData: RecordData) => (
-
- {rowData.Final ? : null}
-
+
+ {rowData.Final ? : null}
+
);
/**
@@ -274,31 +283,28 @@ const semesterBodyColorMap = {
}
const semesterBodyTemplate = (rowData: RecordData) => (
-
- {`${rowData.ProgramYear}${rowData.Semester}`}
-
+
+ {`${rowData.ProgramYear}${rowData.Semester}`}
+
);
-const timelineBodyTemplate = (rowData: RecordData, timelineKey: string) => (
-
- {
- // @ts-expect-error
- rowData.TimeLine[timelineKey]?.split("T")[0]
- }
-
+const timelineBodyTemplate = (rowData: RecordData, timelineKey: keyof RecordData["TimeLine"]) => (
+
+ {rowData.TimeLine?.[timelineKey]?.split("T")[0]}
+
);
const applicantBodyTemplate = (rowData: RecordData, navigate: NavigateFunction, location: Location) => {
@@ -331,44 +337,44 @@ const applicantBodyTemplate = (rowData: RecordData, navigate: NavigateFunction,
};
const programBodyTemplate = (rowData: RecordData, navigate: NavigateFunction) => (
-
- navigate(
- `/datapoints/program/${encodeURIComponent(rowData.ProgramID)}`
- )
- }
- >
- {rowData.ProgramID}
-
+
+ navigate(
+ `/datapoints/program/${encodeURIComponent(rowData.ProgramID)}`
+ )
+ }
+ >
+ {rowData.ProgramID}
+
);
const detailTemplate = (rowData: RecordData) => (
-
- {rowData.Detail}
-
+
+ {rowData.Detail}
+
);
/**
@@ -376,53 +382,49 @@ const detailTemplate = (rowData: RecordData) => (
* Inserts a StickyCell header each time the ProgramID changes.
*/
export const PlainTable: FC<{
- records: RecordData[];
- insideProgramPage: boolean;
-}> = ({ records, insideProgramPage }) => {
- if (records.length === 0) {
- return 未找到任何匹配结果
;
- }
+ records: RecordData[];
+ insideProgramPage: boolean;
+}> = ({records, insideProgramPage}) => {
+ // Compute container and header widths
+ const containerWidth = insideProgramPage ? topStickyRowWidthWithoutProgram : topStickyRowWidth;
+ const groupHeaderWidth = insideProgramPage ? stickyHeaderWidthWithoutProgram : stickyHeaderWidth;
- const resultJsx: ReactNode[] = [];
- let currentProgramID = "";
+ let currentProgramID = '';
+ const groupCounts: number[] = [];
+ const groupFirstRecord: RecordData[] = [];
+ records.forEach((record: RecordData) => {
+ if (currentProgramID !== record.ProgramID) {
+ currentProgramID = record.ProgramID;
+ groupCounts.push(0);
+ groupFirstRecord.push(record)
+ }
+ groupCounts[groupCounts.length - 1]++;
+ })
+ // Empty state
+ if (records.length === 0) {
+ return {insideProgramPage ? '该项目暂无申请记录' : '未找到任何匹配结果'}
;
+ }
- records.forEach((r) => {
- // If a different program name is detected, create a new group header
- if (!insideProgramPage && currentProgramID !== r.ProgramID) {
- currentProgramID = r.ProgramID;
- resultJsx.push(
-
- );
+ if (insideProgramPage) {
+ return (
+ }
+ style={{scrollbarWidth: 'none', flex: 'auto', minHeight: 0, width: containerWidth}}
+ />
+ );
}
- // A row for this record
- resultJsx.push(|
);
- });
- return (
-
- );
+ return (
+ {
+ return
+ }}
+ itemContent={(index, _) => }
+ style={{scrollbarWidth: 'none', flex: 'auto', minHeight: 0, width: containerWidth}}
+ />
+ );
};
diff --git a/src/Components/Errors/ErrorPage.jsx b/src/Components/Errors/ErrorPage.jsx
index 672965ec..27bb1763 100644
--- a/src/Components/Errors/ErrorPage.jsx
+++ b/src/Components/Errors/ErrorPage.jsx
@@ -1,32 +1,25 @@
-import { useRouteError } from "react-router-dom";
+import {useRouteError} from "react-router-dom";
import "./ErrorPage.css"
import {Box, Typography} from "@mui/material";
const NetworkBrokeMessage = "网络异常，请检查网络连接或采取以下措施：\n" +
"1. 如果您连接的是上科大校园网，可以不用开启VPN\n" +
- "2. 如果您在国内且未连接上科大校园网，请尝试开启VPN并保证网络稳定\n" +
+ "2. 如果您在国内且未连接上科大校园网，请尝试开启VPN并保证网络稳定\n" +
"3. 如果您在海外（包含港澳台地区），则无需使用代理服务"
export default function ErrorPage() {
const error = useRouteError();
- // const stackLines = error?.stack?.split('\n') || [];
- error.message = (error.message === 'Failed to fetch' ? NetworkBrokeMessage : error.message) ?? "";
+ const message = error?.message === 'Failed to fetch' ? NetworkBrokeMessage : error?.message;
+ const detail = error?.statusText || message || "";
return (
- theme.palette.mode === 'dark'? '#fff': '#000'}}>
+ theme.palette.mode === 'dark' ? '#fff' : '#000'}}>
Oops!
- {(error.statusText || error.message).split("\n").map((line, index) => (
+ {detail.split("\n").map((line, index) => (
{line}
))}
- {/**/}
- {/* {stackLines.map((line, index) => (*/}
- {/*
*/}
- {/* {line}*/}
- {/*
*/}
- {/* ))}*/}
- {/*
+ 项目信息表数据来源于用户创建。我们鼓励用户创建更多项目信息；如果发现错误，可以点击项目描述中的修改按钮直接修改。
+ 对于往年录取数据汇总和申请分享贴的数据，用户只能修改自己创建的信息，不能直接修改其他用户创建的信息。
+
+ 对于其他错误信息，可以前往GitHub提出
+
+ issue
+
+ ，我们会尽快处理。
+
+
+
+ ),
+ },
+ {
+ question: "我在添加项目信息时，找不到我的项目所属的学校，怎么办？",
+ answer: (
+
+ 如果项目所属的学校不在学校列表中，请到GitHub的
+
+ Discussion
+
+ 中提出需要添加的学校名称，我们会尽快处理。
+
+ ),
+ },
+ {
+ question: "我是一名小白，我觉得网站上数据不足够帮助我选校，希望能够咨询一些学长学姐，怎么办？",
+ answer: (
+
+ 我们提供了QQ群，你可以加入QQ群进行交流。群号：
+
+ 132055126
+
+ 。
+
+ ),
+ },
+];
+
+const glossarySections = [
+ {
+ title: "常用词缩写：网站/申请相关",
+ terms: [
+ "dp: datapoints",
+ "IE: 信息学院的研究生专业，全称Information Engineering",
+ "SCA: 创意与艺术学院的简称，全称School of Creativity and Art",
+ "AD: Admission",
+ "Rej: Rejection",
+ "PoI: Professor of Interest",
+ "LoR: Letter of Recommendation",
+ "Pub: Publication",
+ "ap: assistant professor",
+ "STEM: Science, Technology, Engineering, and Math",
+ "SDE: Software Development Engineer",
+ "MLE: Machine Learning Engineer",
+ "DS: Data Science",
+ "CSE: 有时指Computer Science and Engineering，有时指Computational Science and Engineering",
+ "MS/MSc: Master of Science",
+ "MSE: 一般指Master of Science and Engineering，少数情况指Master of Software Engineering",
+ "MASc: Master of Applied Science",
+ "MEng: Master of Engineering",
+ "ScM: Science Master",
+ "MPhil: Master of Philosophy",
+ "PhD: Doctor of Philosophy",
+ "deposit: 接offer后要交的押金，俗称占位费，正式入学后会抵扣等额的学费",
+ "TA: Teaching Assistant",
+ "RA: Research Assistant",
+ "bar: 项目录取的准入门槛",
+ "co-op: Cooperative education，学期内官方带薪实习。",
+ ],
+ },
+ {
+ title: "常用词缩写：签证/国外身份/找工作相关",
+ terms: [
+ "I20: 接offer之后学校签发的文件，是维持在美国学生身份的唯一合法文件，办签证必带",
+ "F-1: 美国的学生签证",
+ "J-1: 美国的访问学者签证，一般用于暑研等用途",
+ "OPT: Optional Practical Training，美国高校毕业后的临时工作身份，时长一年，STEM专业的毕业生可以申请延期两年，共三年",
+ "CPT: Curricular Practical Training，学期内的实习许可身份",
+ "H1B: 美国的工作签证，一般需要公司帮助申请，目前是每年3月份抽签，一人每年只能抽一次，一共可以抽三年；如果抽中，就获得了在美国正式的工作许可，且可以让公司担保办理绿卡",
+ "CBP: Customs and Border Protection，美国海关与边境保护局，负责入境出境的检查",
+ "IRCC: 加拿大移民局，负责加拿大签证的审核和签发",
+ "NG: New Grad，是美国就业市场中的概念，对应着国内的应届毕业生的概念",
+ "BCPNP: 加拿大不列颠哥伦比亚省提名移民计划",
+ "ONIP: 加拿大安大略省提名移民计划",
+ ],
+ },
+];
+
+function FoldedSection({title, children}) {
+ return (
+
+ }>
+ {title}
+
+
+ {children}
+
+
+ );
+}
+
+export default function FAQ() {
+ return (
+ theme.palette.mode === "dark" ? "#1A1E24" : "#FAFAFA",
+ overflowY: "auto",
+ p: "1rem",
+ width: "80%",
+ }}
+ >
+ 常见问题
+ {faqItems.map((item) => (
+
+ {item.answer}
+
+ ))}
+
+ {glossarySections.map((section) => (
+
+
+ {section.terms.map((term) => (
+ {term}
+ ))}
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/Components/Favorites/Favorites.jsx b/src/Components/Favorites/Favorites.jsx
index e2bd082d..dd4231d6 100644
--- a/src/Components/Favorites/Favorites.jsx
+++ b/src/Components/Favorites/Favorites.jsx
@@ -1,18 +1,29 @@
-import { Container, Typography } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
-import { Outlet, useLoaderData } from "react-router-dom";
-import { getMetaData } from "../../Data/UserData";
-import { loader as ProgramPageLoader } from "../ProgramPage/ProgramPage";
+import {Container, createTheme, ThemeProvider, Typography} from "@mui/material";
+import Grid from "@mui/material/Grid";
+import {Outlet, useLoaderData} from "react-router-dom";
+import {getMetadata} from "../../Data/UserData";
+import {loader as ProgramPageLoader} from "../ProgramPage/ProgramPage";
import SearchBar from "../ProgramPage/SideBar/SearchBar/SearchBar";
-import { getQuery } from "../ProgramPage/SideBar/SideBar";
+import {getQuery} from "../ProgramPage/SideBar/SideBar";
import ProgramCard from "./ProgramCard";
import "./Favorites.css";
import capoobeat from "../../Assets/images/Favorites/capoobeat.gif";
-import capooknife from "../../Assets/images/Favorites/capooknife.gif";
-import capoosigh from "../../Assets/images/Favorites/capoosigh.gif";
+
+const favoritesTheme = (theme) => createTheme({
+ ...theme,
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 580,
+ md: 900,
+ lg: 1100,
+ xl: 1436,
+ },
+ },
+});
function filterProgramsById(programs, programIDs) {
- let filtered = {};
+ const filtered = {};
for (const university in programs) {
const filteredPrograms = programs[university].filter((program) =>
programIDs.includes(program.ProgramID),
@@ -25,35 +36,32 @@ function filterProgramsById(programs, programIDs) {
}
function flattenPrograms(programs) {
- let flattened = [];
+ const flattened = [];
for (const university in programs) {
flattened.push(...programs[university]);
}
return flattened;
}
-export async function loader({ request }) {
- const metaData = await getMetaData();
- const programPageData = await ProgramPageLoader({ request });
+export async function loader({request}) {
+ const metadata = await getMetadata();
+ const programPageData = await ProgramPageLoader({request});
programPageData.programs = filterProgramsById(
programPageData.programs,
- metaData.ProgramCollection ?? [],
+ metadata.ProgramCollection ?? [],
);
- return { programPageData };
+ return {programPageData};
}
export default function Favorites() {
- let { programPageData } = useLoaderData();
+ const {programPageData} = useLoaderData();
const noPrograms = Object.keys(programPageData.programs).length === 0;
- const noProgramImgs = [capoobeat, capoosigh, capooknife]
- const noProgramImg = noProgramImgs[Math.floor(Math.random() * noProgramImgs.length)]
-
return (
-
-
+
+
{noPrograms ? (
No programs to display.
- 
+ 
) : (
-
- {flattenPrograms(programPageData.programs).map((program) => (
-
- ))}
-
+
+
+ {flattenPrograms(programPageData.programs).map((program) => (
+
+ ))}
+
+
)}
);
-}
\ No newline at end of file
+}
diff --git a/src/Components/Favorites/ProgramCard.jsx b/src/Components/Favorites/ProgramCard.jsx
index f907faad..915ca21d 100644
--- a/src/Components/Favorites/ProgramCard.jsx
+++ b/src/Components/Favorites/ProgramCard.jsx
@@ -1,13 +1,13 @@
-import { ThemeProvider, createTheme, useTheme } from "@mui/material";
+import {useTheme} from "@mui/material";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
-import Grid from "@mui/material/Unstable_Grid2";
-import { grey } from "@mui/material/colors";
-import { useNavigate } from "react-router-dom";
-import { regionFlagMapping } from "../../Data/Schemas";
-import { univAbbrFullNameMapping, univColorMapping } from "../../Data/Common";
+import Grid from "@mui/material/Grid";
+import {grey} from "@mui/material/colors";
+import {useNavigate} from "react-router-dom";
+import {regionFlagMapping} from "../../Data/Schemas";
+import {univAbbrFullNameMapping, univColorMapping} from "../../Data/Common";
-const ProgramCard = ({ program }) => {
+const ProgramCard = ({program}) => {
const darkMode = useTheme().palette.mode === "dark";
const navigate = useNavigate();
@@ -19,30 +19,18 @@ const ProgramCard = ({ program }) => {
const color = univColorMapping[program.University] ?? [85, 221, 128]; // [85, 221, 128] is a magic number
- const breakpointsTheme = (theme) => createTheme({
- ...theme,
- breakpoints: {
- values: {
- xs: 0,
- sm: 580,
- md: 900,
- lg: 1100,
- xl: 1436,
- },
- },
- });
-
- return (
+ return (
+ size={{
+ xs: 60,
+ sm: 30,
+ md: 20,
+ lg: 15,
+ xl: 12
+ }}>
{
{program.University}
{univAbbrFullNameMapping[program.University]}
@@ -91,7 +79,7 @@ const ProgramCard = ({ program }) => {
- );
+ );
};
-export default ProgramCard;
\ No newline at end of file
+export default ProgramCard;
diff --git a/src/Components/Home/home.jsx b/src/Components/Home/home.jsx
index be6badbc..8bd22303 100644
--- a/src/Components/Home/home.jsx
+++ b/src/Components/Home/home.jsx
@@ -1,14 +1,14 @@
import TopBar from "../TopBar/TopBar";
-import {Outlet, Link} from "react-router-dom";
+import {Link, Outlet} from "react-router-dom";
import React, {useEffect, useRef, useState} from "react";
import {BoldTypography, LoadingBackdrop, OpenSIST, useSmallPage} from "../common";
import {Box, Button, Divider, IconButton, Paper, SvgIcon, Typography, useTheme} from "@mui/material";
-import {clickHandler, init_map} from "../WorldMap/display";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import {clickHandler, initMap} from "../WorldMap/display";
+import Grid2 from "@mui/material/Grid";
import './home.css';
import ReactMarkdown from "react-markdown";
-import {ReactComponent as VectorArrowDark} from "../icons/VectorArrowDark.svg";
-import {ReactComponent as VectorArrowLight} from "../icons/VectorArrowLight.svg";
+import VectorArrowDark from "../icons/VectorArrowDark.svg?react";
+import VectorArrowLight from "../icons/VectorArrowLight.svg?react";
import {isSafari} from 'react-device-detect';
function Home() {
@@ -30,21 +30,16 @@ function Home() {
export function HomeIndex() {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
- const nodeRef = useRef(null);
useEffect(() => {
const handleResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};
- nodeRef.current.addEventListener("click", clickHandler);
window.addEventListener("resize", handleResize);
- return () => {
- window.removeEventListener("resize", handleResize);
- };
+ return () => window.removeEventListener("resize", handleResize);
}, []);
return (
theme.palette.mode === 'dark' ? "#1A1E24" : "#FAFAFA",
height: "100%",
@@ -166,19 +161,27 @@ function HomeIndexContent() {
/>
-
+
- {!smallPage ? : null}
- {!smallPage ? : null}
-
+ {!smallPage ? : null}
+ {!smallPage ? : null}
+
- )
+ );
}
function WelcomeBlock() {
@@ -191,7 +194,6 @@ function WelcomeBlock() {
width: {xs: '100%', sm: '70%', md: '60%', lg: '50%'},
position: 'relative',
backdropFilter: 'blur(2px)',
- // mt: smallPage ? '10vh' : '23vh'
}}>
Welcome to
@@ -297,13 +299,13 @@ function WorldMap({width, height}) {
} else {
map_height = map_width / desired_scale;
}
- init_map(staticCanvasRef.current, dynamicCanvasRef.current, map_width, map_height, mode);
+ return initMap(staticCanvasRef.current, dynamicCanvasRef.current, map_width, map_height, mode);
}, [width, height, mode]);
return (
<>
-
)
diff --git a/src/Components/HowToUse/HowToUse.css b/src/Components/HowToUse/HowToUse.css
deleted file mode 100644
index 2b14e1dc..00000000
--- a/src/Components/HowToUse/HowToUse.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.img-mask {
- position: relative;
- overflow: hidden;
-}
-
-.img-mask blockquote {
- color: inherit;
-}
-
-.img-mask::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-size: cover;
- background-position: top;
- filter: blur(40px);
- transition: filter 0.3s ease;
-}
-
-.img-mask:hover::before {
- filter: none;
-}
-
-.img-mask:hover::after {
- background: transparent;
-}
-
-.img-mask > * {
- position: relative;
- opacity: 1;
- filter: blur(0px);
- transition: all 0.3s ease;
-}
-
-.img-mask:hover > * {
- filter: blur(40px);
- opacity: 0;
-}
\ No newline at end of file
diff --git a/src/Components/HowToUse/HowToUse.jsx b/src/Components/HowToUse/HowToUse.jsx
deleted file mode 100644
index b9cc6d30..00000000
--- a/src/Components/HowToUse/HowToUse.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
- Box, Card, CardActionArea, CardContent, CardMedia, Divider, Typography, useTheme
-} from "@mui/material";
-import React from "react";
-import {Link} from "react-router-dom";
-import {BoldTypography, OpenSIST} from "../common";
-import DatapointsDark from "../../Assets/images/HowToUse/dark/datapoints.webp";
-import DatapointsLight from "../../Assets/images/HowToUse/light/datapoints.webp";
-import PostsDark from "../../Assets/images/HowToUse/dark/posts.webp";
-import PostsLight from "../../Assets/images/HowToUse/light/posts.webp";
-import ProfileDark from "../../Assets/images/HowToUse/dark/profile.webp";
-import ProfileLight from "../../Assets/images/HowToUse/light/profile.webp";
-import ProgramsDark from "../../Assets/images/HowToUse/dark/programs.webp";
-import ProgramsLight from "../../Assets/images/HowToUse/light/programs.webp";
-import LightPointer from "../../Assets/images/light-pointer-56px.png";
-import DarkPointer from "../../Assets/images/dark-pointer-56px.png";
-import "./HowToUse.css"
-import Grid2 from "@mui/material/Unstable_Grid2";
-
-const imageDir = {
- light: {
- profile: ProfileLight,
- programs: ProgramsLight,
- datapoints: DatapointsLight,
- posts: PostsLight
- },
- dark: {
- profile: ProfileDark,
- programs: ProgramsDark,
- datapoints: DatapointsDark,
- posts: PostsDark
- }
-}
-
-export function HowToUse() {
- return (
- theme.palette.mode === "dark" ? "#1A1E24" : "#FAFAFA"}}>
- 使用指南
-
- 非毕业年级的在读生请阅读：
- 请自由探索顶部导航栏的三个主要板块（申请季数据汇总、项目信息表、申请分享帖），每个版块内部请配合使用指南食用。
-
-
-
- )
-}
-
-export function GuidanceGrid({Index, TitlePrime, TitleSecond, Content, ButtonLink}) {
- const nameList = ['profile', 'datapoints', 'programs', 'posts'];
- const theme = useTheme();
- return (
-
-
- < CardActionArea component={Link} to={ButtonLink} sx={{display: 'flex', justifyContent: 'start', flexDirection: 'column', height: '100%'}}>
-
-
- {Index}.
- theme.palette.mode === 'dark' ? "#fff" : "#000",
- height: 'auto'
- }}/>
-
- theme.palette.mode === 'dark' ? "#fff" : "#000"}}
- >
- {TitlePrime}
-
- theme.palette.mode === 'dark' ? "#fff" : "#000"}}
- >
- {TitleSecond}
-
-
- {Content}
-
-
-
-
-
- )
-}
-
-
-function Graduated() {
- return (
-
- 毕业生、大四、研三请阅读：
- 我可以为这个网站做些什么？
-
-
-
-
-
-
-
- )
-}
diff --git a/src/Components/Modify/Applicant/AddModifyApplicant.jsx b/src/Components/Modify/Applicant/AddModifyApplicant.jsx
index e3f50273..d53983f0 100644
--- a/src/Components/Modify/Applicant/AddModifyApplicant.jsx
+++ b/src/Components/Modify/Applicant/AddModifyApplicant.jsx
@@ -1,19 +1,13 @@
import {Form, redirect, useLoaderData} from "react-router-dom";
import {addModifyApplicant, getApplicant} from "../../../Data/ApplicantData";
-import {
- Box,
- Input,
- Step,
- StepButton,
- Stepper
-} from "@mui/material";
+import {Box, Input, Step, StepButton, Stepper} from "@mui/material";
import React, {useState} from "react";
import BasicInfo from "./FormComponent/BasicInfo";
import SoftBackground from "./FormComponent/SoftBackground";
import {getDisplayName} from "../../../Data/UserData";
import {getPrograms} from "../../../Data/ProgramData";
-import {blobToBase64} from "../../../Data/Common";
-import {addModifyFile, getFileObject, removeFile} from "../../../Data/FileData";
+import {getFiles} from "../../../Data/FileData";
+import {createApplicantRequestBody, createInitialApplicantFormValues, syncApplicantFile,} from "./applicantFormData";
export async function loader({params}) {
let programs = await getPrograms();
@@ -24,180 +18,30 @@ export async function loader({params}) {
if (params.applicantId) {
applicant = await getApplicant(params.applicantId);
if (applicant.Posts && applicant.Posts.length > 0) {
- for (const postId of applicant.Posts) {
- if (postId.startsWith("CV")) {
- cvPost = await getFileObject(postId);
- } else if (postId.startsWith("SoP")) {
- sopPost = await getFileObject(postId);
- }
- }
+ const applicantPostIds = new Set(applicant.Posts.map(String));
+ const files = (await getFiles()).filter(file => applicantPostIds.has(file.PostID.toString()));
+ cvPost = files.find(file => file.PostID.startsWith("CV"));
+ sopPost = files.find(file => file.PostID.startsWith("SoP"));
}
}
return {programs, applicant, cvPost, sopPost};
}
export async function action({request}) {
- const removeEmptyDictInList = (list) => {
- return list.filter(item => Object.values(item).filter(value => value.length > 0).length !== 0);
- }
const formData = await request.formData();
- const ActionType = formData.get('ActionType');
+ const actionType = formData.get('ActionType');
const formValues = JSON.parse(formData.get('formValues'));
- const Gender = formValues.Gender;
- const CurrentDegree = formValues.CurrentDegree;
const ApplicationYear = formValues.ApplicationYear;
- const Major = formValues.Major;
- const GPA = Number(formValues.GPA);
- const Ranking = formValues.Ranking;
- const V = formValues.V;
- const Q = formValues.Q;
- const AW = formValues.AW;
- const GRETotal = formValues.GRETotal;
- const GRE = {
- 'Total': GRETotal ? Number(GRETotal) : 260,
- 'V': V ? Number(V) : 130,
- 'Q': Q ? Number(Q) : 130,
- 'AW': AW ? Number(AW) : 0
- }
- const EnglishOption = formValues.EnglishOption;
- const EnglishTotal = formValues.EnglishTotal;
- const R = formValues.R;
- const W = formValues.W;
- const L = formValues.L;
- const S = formValues.S;
- const EnglishProficiency = {
- [EnglishOption === 'IELTS' ? 'IELTS' : 'TOEFL']: {
- 'Total': EnglishTotal ? Number(EnglishTotal) : null,
- 'R': R ? Number(R) : null,
- 'W': W ? Number(W) : null,
- 'L': L ? Number(L) : null,
- 'S': S ? Number(S) : null,
- }
- }
- console.log(EnglishProficiency);
- console.log(((EnglishTotal && R && W && L && S) && {'EnglishProficiency': EnglishProficiency}))
- const Exchange = formValues.Exchange ? removeEmptyDictInList(formValues.Exchange) : [];
- const Publication = formValues.Publication ? removeEmptyDictInList(formValues.Publication) : [];
- const Recommendation = formValues.Recommendation ? removeEmptyDictInList(formValues.Recommendation) : [];
- const ResearchFocus = formValues.ResearchFocus;
- const DomesticResearchNum = formValues.DomesticResearchNum;
- const DomesticResearchDetail = formValues.DomesticResearchDetail;
- const InternationalResearchNum = formValues.InternationalResearchNum;
- const InternationalResearchDetail = formValues.InternationalResearchDetail;
- const Research = {
- 'Focus': ResearchFocus ?? "",
- 'Domestic': {
- 'Num': DomesticResearchNum ? Number(DomesticResearchNum) : 0,
- 'Detail': DomesticResearchDetail ?? ""
- },
- 'International': {
- 'Num': InternationalResearchNum ? Number(InternationalResearchNum) : 0,
- 'Detail': InternationalResearchDetail ?? ""
- }
- }
- const DomesticInternNum = formValues.DomesticInternNum;
- const DomesticInternDetail = formValues.DomesticInternDetail;
- const InternationalInternNum = formValues.InternationalInternNum;
- const InternationalInternDetail = formValues.InternationalInternDetail;
- const Internship = {
- 'Domestic': {
- 'Num': DomesticInternNum ? Number(DomesticInternNum) : 0,
- 'Detail': DomesticInternDetail ?? ""
- },
- 'International': {
- 'Num': InternationalInternNum ? Number(InternationalInternNum) : 0,
- 'Detail': InternationalInternDetail ?? ""
- }
- }
- const Competition = formValues.Competition;
- const Final = formValues.Final;
- const Programs = formValues.Programs;
- const Posts = ActionType === 'new' ? [] : formValues.Posts;
+ const posts = actionType === 'new' ? [] : (formValues.Posts ?? []);
const displayName = await getDisplayName();
- const ApplicantID = `${displayName}@${ApplicationYear}`;
- let requestBody = {
- 'newApplicant': ActionType === 'new',
- 'content': {
- 'ApplicantID': ApplicantID,
- 'Gender': Gender,
- 'CurrentDegree': CurrentDegree,
- 'ApplicationYear': ApplicationYear,
- 'Major': Major,
- 'GPA': GPA,
- 'Ranking': Ranking,
- ...((GRE.Total !== 260 || GRE.V !== 130 || GRE.Q !== 130 || GRE.AW !== 0) && {'GRE': GRE}),
- // 'EnglishProficiency': EnglishProficiency,
- ...{'EnglishProficiency': ((EnglishTotal && R && W && L && S) ? EnglishProficiency : {})},
- ...(Exchange.length !== 0 && {'Exchange': Exchange}),
- ...(Publication.length !== 0 && {'Publication': Publication}),
- 'Research': Research,
- 'Internship': Internship,
- ...(Recommendation.length !== 0 && {'Recommendation': Recommendation}),
- ...(Competition !== undefined && {'Competition': Competition}),
- 'Programs': ActionType === 'new' ? {} : Programs,
- 'Final': Final === undefined ? "" : Final,
- 'Posts': Posts
- }
- };
+ const applicantId = `${displayName}@${ApplicationYear}`;
+ const requestBody = createApplicantRequestBody(formValues, actionType, applicantId);
await addModifyApplicant(requestBody);
- const PDFNewRequestBody = (type, content, title) => {
- return {
- 'ApplicantID': ApplicantID,
- 'content': {
- 'type': type,
- 'Title': `${title}`,
- 'Content': content
- }
- }
- }
-
- const PDFEditRequestBody = (type, postID, content, title) => {
- return {
- 'PostID': postID,
- 'content': {
- 'Title': `${title}`,
- 'Content': content
- }
- }
- }
-
- async function PDFRequesting(type) {
- /*
- * App.Posts.includes(PDF) && PDF -> edit
- * App.Posts.includes(PDF) && !PDF -> remove
- * !App.Posts.includes(PDF) && PDF -> new
- * !App.Posts.includes(PDF) && !PDF -> nothing
- */
- const postID = formValues[type]?.PostID;
- const title = formValues[type]?.Title;
- const file = formData.get(type);
- /*
- * when file.name === ''
- * only three possible conditions:
- * 1. existed before, user did nothing.
- * 2. existed before, user deleted it.
- * 3. not existed before, user did nothing
- */
- let pdfContent = await blobToBase64(file);
- if (Posts.includes(postID) && title) {
- if (file.name === '') {
- return;
- }
- const requestBody = PDFEditRequestBody(type, postID, pdfContent, title);
- await addModifyFile(requestBody, 'edit');
- } else if (Posts.includes(postID) && !title) {
- await removeFile(postID, ApplicantID);
- } else if (!Posts.includes(postID) && title) {
- const requestBody = PDFNewRequestBody(type, pdfContent, title);
- await addModifyFile(requestBody, 'new');
- }
- }
-
- await PDFRequesting('CV');
- await PDFRequesting('SoP');
+ await syncApplicantFile({applicantId, fileType: 'CV', formData, formValues, posts});
+ await syncApplicantFile({applicantId, fileType: 'SoP', formData, formValues, posts});
- return redirect(`/profile/${ApplicantID}`);
+ return redirect(`/profile/${applicantId}`);
}
const FormContent = (activeStep, formValues, handleBack, handleNext, handleChange, type, loaderData) => {
@@ -206,8 +50,7 @@ const FormContent = (activeStep, formValues, handleBack, handleNext, handleChang
return ;
case 1:
- return ;
+ return ;
default:
return null;
}
@@ -227,87 +70,28 @@ export default function AddModifyApplicant({type}) {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
- let applicantContent = loaderData.applicant;
- if (applicantContent) {
- applicantContent = {
- 'Gender': applicantContent.Gender,
- 'CurrentDegree': applicantContent.CurrentDegree,
- 'ApplicationYear': applicantContent.ApplicationYear,
- 'Major': applicantContent.Major,
- 'GPA': applicantContent.GPA,
- 'Ranking': applicantContent.Ranking,
- 'V': applicantContent.GRE?.V,
- 'Q': applicantContent.GRE?.Q,
- 'AW': applicantContent.GRE?.AW,
- 'GRETotal': applicantContent.GRE?.Total,
- ...(applicantContent.EnglishProficiency?.TOEFL && {
- 'EnglishOption': 'TOEFL',
- 'EnglishTotal': applicantContent.EnglishProficiency.TOEFL.Total,
- 'R': applicantContent.EnglishProficiency.TOEFL.R,
- 'W': applicantContent.EnglishProficiency.TOEFL.W,
- 'L': applicantContent.EnglishProficiency.TOEFL.L,
- 'S': applicantContent.EnglishProficiency.TOEFL.S
- }),
- ...(applicantContent.EnglishProficiency?.IELTS && {
- 'EnglishOption': 'IELTS',
- 'EnglishTotal': applicantContent.EnglishProficiency.IELTS.Total,
- 'R': applicantContent.EnglishProficiency.IELTS.R,
- 'W': applicantContent.EnglishProficiency.IELTS.W,
- 'L': applicantContent.EnglishProficiency.IELTS.L,
- 'S': applicantContent.EnglishProficiency.IELTS.S
- }),
- 'ResearchFocus': applicantContent.Research?.Focus,
- 'DomesticResearchNum': applicantContent.Research?.Domestic?.Num,
- 'DomesticResearchDetail': applicantContent.Research?.Domestic?.Detail,
- 'InternationalResearchNum': applicantContent.Research?.International?.Num,
- 'InternationalResearchDetail': applicantContent.Research?.International?.Detail,
- 'DomesticInternNum': applicantContent.Internship?.Domestic?.Num,
- 'DomesticInternDetail': applicantContent.Internship?.Domestic?.Detail,
- 'InternationalInternNum': applicantContent.Internship?.International?.Num,
- 'InternationalInternDetail': applicantContent.Internship?.International?.Detail,
- 'Competition': applicantContent.Competition,
- 'Programs': applicantContent.Programs,
- 'Exchange': applicantContent.Exchange,
- 'Publication': applicantContent.Publication,
- 'Recommendation': applicantContent.Recommendation,
- 'Final': applicantContent.Final,
- 'Posts': applicantContent.Posts,
- 'CV': {
- PostID: loaderData.cvPost?.PostID,
- Title: loaderData.cvPost?.Title
- },
- 'SoP': {
- PostID: loaderData.sopPost?.PostID,
- Title: loaderData.sopPost?.Title
- }
- }
- }
+ const applicantContent = createInitialApplicantFormValues(loaderData.applicant, loaderData.cvPost, loaderData.sopPost);
const [formValues, setFormValues] = useState(applicantContent ?? {});
const handleChange = (event, value, name) => {
- console.log(event?.target?.name, event?.target?.value, value, name)
- console.log({[event?.target.name ? event?.target.name : name]: value ? value : event?.target.value})
- setFormValues({
- ...formValues,
- [event?.target.name ? event?.target.name : name]: value ? value : event?.target.value
- });
- console.log(formValues);
- if (event?.target.value === "" || (event?.target.name === undefined && (value === "" || value === undefined || value === null || value === '[]'))) {
- if (name === "EnglishOption" || name === "R" || name === "W" || name === "L" || name === "S" || name === "EnglishTotal") {
- if (name === "EnglishOption") {
- setFormValues({
- ...formValues,
- 'EnglishTotal': undefined,
- 'R': undefined,
- 'W': undefined,
- 'L': undefined,
- 'S': undefined
- });
- }
- return
+ const fieldName = event?.target?.name ?? name;
+ const nextValue = value ?? event?.target?.value;
+ const isEmpty = nextValue === '' || nextValue === null || nextValue === undefined || nextValue === '[]';
+ setFormValues((currentValues) => {
+ const updatedValues = {...currentValues};
+ if (fieldName === 'EnglishOption' && isEmpty) {
+ delete updatedValues.EnglishOption;
+ delete updatedValues.EnglishTotal;
+ delete updatedValues.R;
+ delete updatedValues.W;
+ delete updatedValues.L;
+ delete updatedValues.S;
+ } else if (isEmpty) {
+ delete updatedValues[fieldName];
+ } else {
+ updatedValues[fieldName] = nextValue;
}
- const {[event?.target.name ? event?.target.name : name]: _, ...rest} = formValues;
- setFormValues(rest);
- }
+ return updatedValues;
+ });
}
return (
)
-}
\ No newline at end of file
+}
diff --git a/src/Components/Modify/Applicant/FormComponent/ApplicantFormShared.jsx b/src/Components/Modify/Applicant/FormComponent/ApplicantFormShared.jsx
new file mode 100644
index 00000000..ccd1d955
--- /dev/null
+++ b/src/Components/Modify/Applicant/FormComponent/ApplicantFormShared.jsx
@@ -0,0 +1,29 @@
+import {Box, Divider} from "@mui/material";
+
+export const numberInputSx = {
+ "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
+ display: "none",
+ },
+ "& input[type=number]": {
+ MozAppearance: "textfield",
+ },
+};
+
+export const sectionGridSx = {width: '80%', marginBottom: '10px'};
+
+export function FormSection({children, title}) {
+ return (
+ <>
+
+ {title}
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/Components/Modify/Applicant/FormComponent/BasicInfo.jsx b/src/Components/Modify/Applicant/FormComponent/BasicInfo.jsx
index 434d3468..3278f1f4 100644
--- a/src/Components/Modify/Applicant/FormComponent/BasicInfo.jsx
+++ b/src/Components/Modify/Applicant/FormComponent/BasicInfo.jsx
@@ -1,67 +1,123 @@
-import React, {useState} from "react";
-import {
- Box,
- Button, Divider,
- Paper,
- TextField, Tooltip
-} from "@mui/material";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import {Box, Button, Link as MuiLink, Paper, TextField, Tooltip} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
-import {
- applicationYearOptions,
- currentDegreeOptions, englishOptions,
- genderOptions, list2Options,
- majorOptions, rankPercentOptions,
-} from "../../../../Data/Schemas";
-import "../AddModifyApplicant.css";
-import {useNavigate} from "react-router-dom";
-import {Link as MuiLink} from '@mui/material';
-import {useSmallPage} from "../../../common";
+import Grid2 from "@mui/material/Grid";
import {HelpOutline} from "@mui/icons-material";
import {grey} from "@mui/material/colors";
+import {useNavigate} from "react-router-dom";
+import {applicationYearOptions, currentDegreeOptions, englishOptions, genderOptions, list2Options, majorOptions, rankPercentOptions,} from "../../../../Data/Schemas";
+import {useSmallPage} from "../../../common";
+import {FormSection, numberInputSx, sectionGridSx} from "./ApplicantFormShared";
+import "../AddModifyApplicant.css";
-function BasicInfo({formValues, handleNext, handleChange, actionType, loaderData}) {
- let finalOptions = loaderData.programs;
- finalOptions = list2Options(finalOptions);
+const englishScoreFields = [
+ ['R', '阅读'],
+ ['L', '听力'],
+ ['S', '口语'],
+ ['W', '写作'],
+];
+
+const greScoreFields = [
+ ['V', '语文', 130, 170],
+ ['Q', '数学', 130, 170],
+ ['AW', '写作', 0, 6],
+];
- const [englishOption, setEnglishOption] = useState('');
- const [isGRETotalRequired, setIsGRETotalRequired] = useState(!!(formValues.GRETotal || formValues.V || formValues.Q || formValues.AW));
- const [isGREVRequired, setIsGREVRequired] = useState(!!(formValues.GRETotal || formValues.V || formValues.Q || formValues.AW));
- const [isGREQRequired, setIsGREQRequired] = useState(!!(formValues.GRETotal || formValues.V || formValues.Q || formValues.AW));
- const [isGREAWRequired, setIsGREAWRequired] = useState(!!(formValues.GRETotal || formValues.V || formValues.Q || formValues.AW));
- const setGREStatus = (value) => {
- setIsGRETotalRequired(value);
- setIsGREVRequired(value);
- setIsGREQRequired(value);
- setIsGREAWRequired(value);
- }
+function hasValue(value) {
+ return value !== null && value !== undefined && value !== '';
+}
- const isGPAError = formValues.GPA && (formValues.GPA < 0 || formValues.GPA > 4);
- const isEnglishTotalError = formValues.EnglishTotal && ((formValues.EnglishOption === 'TOEFL' && (formValues.EnglishTotal < 0 || formValues.EnglishTotal > 120)) || (formValues.EnglishOption === 'IELTS' && (formValues.EnglishTotal < 0 || formValues.EnglishTotal > 9)));
- const isReadingError = formValues.R && ((formValues.EnglishOption === 'TOEFL' && (formValues.R < 0 || formValues.R > 30)) || ((formValues.EnglishOption === 'IELTS' && (formValues.R < 0 || formValues.R > 9))));
- const isListeningError = formValues.L && ((formValues.EnglishOption === 'TOEFL' && (formValues.L < 0 || formValues.L > 30)) || ((formValues.EnglishOption === 'IELTS' && (formValues.L < 0 || formValues.L > 9))));
- const isSpeakingError = formValues.S && ((formValues.EnglishOption === 'TOEFL' && (formValues.S < 0 || formValues.S > 30)) || ((formValues.EnglishOption === 'IELTS' && (formValues.S < 0 || formValues.S > 9))));
- const isWritingError = formValues.W && ((formValues.EnglishOption === 'TOEFL' && (formValues.W < 0 || formValues.W > 30)) || ((formValues.EnglishOption === 'IELTS' && (formValues.W < 0 || formValues.W > 9))));
- const isGRETotalError = formValues.GRETotal && (formValues.GRETotal < 260 || formValues.GRETotal > 340);
- const isGREVError = formValues.V && (formValues.V < 130 || formValues.V > 170);
- const isGREQError = formValues.Q && (formValues.Q < 130 || formValues.Q > 170);
- const isGREAWError = formValues.AW && (formValues.AW < 0 || formValues.AW > 6);
+function isOutsideRange(value, minimum, maximum) {
+ return hasValue(value) && (Number(value) < minimum || Number(value) > maximum);
+}
- const disableNumberUpDown = {
- "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
- display: "none",
- },
- "& input[type=number]": {
- MozAppearance: "textfield",
- },
- };
+function OptionField({
+ endAdornment,
+ helperText,
+ label,
+ name,
+ onChange,
+ options,
+ readOnly = false,
+ required = false,
+ value,
+ }) {
+ return (
+
+
+ {params.InputProps.endAdornment}
+ {endAdornment}
+
+ ),
+ } : params.InputProps}
+ />
+ }
+ value={hasValue(value) ? options.find((option) => option.value === value) ?? null : null}
+ onChange={(event, newValue) => onChange(event, newValue?.value, name)}
+ />
+ );
+}
- const navigate = useNavigate();
- const isError = () => {
- return !formValues.Gender || !formValues.CurrentDegree || !formValues.ApplicationYear || !formValues.Major || !formValues.GPA || !formValues.Ranking || (isGRETotalRequired && !formValues.GRETotal) || (isGREVRequired && !formValues.V) || (isGREQRequired && !formValues.Q) || (isGREAWRequired && !formValues.AW) || isGPAError || isEnglishTotalError || isReadingError || isListeningError || isSpeakingError || isWritingError || isGRETotalError || isGREVError || isGREQError || isGREAWError;
- }
+function NumberField({error, helperText, label, name, onChange, required = false, value, InputProps}) {
+ return (
+
+ );
+}
+function BasicInfo({formValues, handleNext, handleChange, actionType, loaderData}) {
+ const navigate = useNavigate();
const smallPage = useSmallPage();
+ const finalOptions = list2Options(loaderData.programs);
+ const requiredGreValues = [formValues.GRETotal, formValues.V, formValues.Q, formValues.AW];
+ const isGreRequired = requiredGreValues.some(hasValue);
+ const englishMaximum = formValues.EnglishOption === 'TOEFL' ? 30 : 9;
+ const englishErrors = Object.fromEntries(englishScoreFields.map(([name]) => (
+ [name, isOutsideRange(formValues[name], 0, englishMaximum)]
+ )));
+ const greErrors = Object.fromEntries(greScoreFields.map(([name, , minimum, maximum]) => (
+ [name, isOutsideRange(formValues[name], minimum, maximum)]
+ )));
+ const isGpaError = isOutsideRange(formValues.GPA, 0, 4);
+ const isEnglishTotalError = isOutsideRange(
+ formValues.EnglishTotal,
+ 0,
+ formValues.EnglishOption === 'TOEFL' ? 120 : 9
+ );
+ const isGreTotalError = isOutsideRange(formValues.GRETotal, 260, 340);
+ const hasRequiredValue = ['Gender', 'CurrentDegree', 'ApplicationYear', 'Major', 'GPA', 'Ranking']
+ .every((name) => hasValue(formValues[name]));
+ const hasIncompleteGre = isGreRequired && requiredGreValues.some((value) => !hasValue(value));
+ const hasError = !hasRequiredValue || hasIncompleteGre || isGpaError || isEnglishTotalError ||
+ Object.values(englishErrors).some(Boolean) || isGreTotalError || Object.values(greErrors).some(Boolean);
return (
-
- 申请人基本信息
-
-
-
-
-
-
- }
- value={formValues.Gender ? genderOptions.find((gender) => {
- return gender.value === formValues.Gender;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "Gender")
- }
- }
- />
+
+
+
+
-
-
-
- }
- value={formValues.CurrentDegree ? currentDegreeOptions.find((degree) => {
- return degree.value === formValues.CurrentDegree;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "CurrentDegree")
- }
- }
- />
+
+
-
-
+
-
- {params.InputProps.endAdornment}
-
-
-
-
- ),
- }}
- required
- />
- }
- value={formValues.ApplicationYear ? applicationYearOptions.find((year) => {
- return year.value === formValues.ApplicationYear;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "ApplicationYear")
- }
+ required
+ endAdornment={
+
+
+
}
/>
-
-
-
- }
- value={formValues.Major ? majorOptions.find((major) => {
- return major.value === formValues.Major;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "Major")
- }
- }
- />
+
+
-
-
- 学业成绩
-
-
-
-
-
+
+
+
+ {handleChange(event)}}
- type="number"
- sx={disableNumberUpDown}
- error={isGPAError}
- helperText={isGPAError ? "GPA应在0-4之间" : null}
InputProps={{
endAdornment: (
-
-
-
- }
- options={rankPercentOptions}
- value={formValues.Ranking ? rankPercentOptions.find((option) => {
- return option.value === formValues.Ranking;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "Ranking")
- }
- }
- />
+
+
-
-
- 英语成绩
-
-
-
-
- {
- setEnglishOption(value);
- }}
- options={englishOptions}
- renderInput={(params) =>
-
- }
- value={formValues.EnglishOption ? englishOptions.find((option) => {
- return option.value === formValues.EnglishOption;
- }) : null}
- onChange={
- (event, newInputValue) => {
- handleChange(event, newInputValue?.value, "EnglishOption")
- }
- }
- />
+
+
+
+
+
- {englishOption.length > 0 ?
- <>
-
- {handleChange(event)}}
- type="number"
- // required
- error={isEnglishTotalError}
- helperText={isEnglishTotalError ? (formValues.EnglishOption === 'TOEFL' ? "TOEFL总分应在0-120之间" : "IELTS总分应在0-9之间") : null}
- sx={disableNumberUpDown}
- />
-
-
- {handleChange(event)}}
- type="number"
- // required
- error={isReadingError}
- helperText={isReadingError ? (formValues.EnglishOption === 'TOEFL' ? "TOEFL阅读分应在0-30之间" : "IELTS阅读分应在0-9之间") : null}
- sx={disableNumberUpDown}
- />
-
-
- {handleChange(event)}}
- type="number"
- // required
- error={isListeningError}
- helperText={isListeningError ? (formValues.EnglishOption === 'TOEFL' ? "TOEFL听力分应在0-30之间" : "IELTS听力分应在0-9之间") : null}
- sx={disableNumberUpDown}
- />
-
-
- {handleChange(event)}}
- type="number"
- // required
- error={isSpeakingError}
- helperText={isSpeakingError ? (formValues.EnglishOption === 'TOEFL' ? "TOEFL口语分应在0-30之间" : "IELTS口语分应在0-9之间") : null}
- sx={disableNumberUpDown}
- />
-
-
- {handleChange(event)}}
- type="number"
- // required
- error={isWritingError}
- helperText={isWritingError ? (formValues.EnglishOption === 'TOEFL' ? "TOEFL写作分应在0-30之间" : "IELTS写作分应在0-9之间") : null}
- sx={disableNumberUpDown}
+ {formValues.EnglishOption ? <>
+
+
+
+ {englishScoreFields.map(([name, label]) => (
+
+
- : null
- }
+ ))}
+ : null}
-
-
- GRE成绩
-
-
-
-
-
+
+
+
+ {
- handleChange(event);
- if (event.target.value || formValues.V || formValues.Q || formValues.AW) {
- setGREStatus(true);
- } else {
- setGREStatus(false);
- }
- }}
- type="number"
- sx={disableNumberUpDown}
- error={isGRETotalError}
- helperText={isGRETotalError ? "GRE总分应在260-340之间" : null}
- required={isGRETotalRequired}
- />
-
-
- {
- handleChange(event);
- if (event.target.value || formValues.GRETotal || formValues.Q || formValues.AW) {
- setGREStatus(true);
- } else {
- setGREStatus(false);
- }
- }}
- type="number"
- sx={disableNumberUpDown}
- required={isGREVRequired}
- error={isGREVError}
- helperText={isGREVError ? "GRE语文分应在130-170之间" : null}
- />
-
-
- {
- handleChange(event);
- if (event.target.value || formValues.AW || formValues.V || formValues.GRETotal) {
- setGREStatus(true);
- } else {
- setGREStatus(false);
- }
- }}
- type="number"
- sx={disableNumberUpDown}
- required={isGREQRequired}
- error={isGREQError}
- helperText={isGREQError ? "GRE数学分应在130-170之间" : null}
- />
-
-
- {
- handleChange(event);
- if (event.target.value || formValues.V || formValues.Q || formValues.GRETotal) {
- setGREStatus(true);
- } else {
- setGREStatus(false);
- }
- }}
- type="number"
- sx={disableNumberUpDown}
- required={isGREAWRequired}
- error={isGREAWError}
- helperText={isGREAWError ? "GRE写作分应在0-6之间" : null}
+ value={formValues.GRETotal}
+ onChange={handleChange}
+ error={isGreTotalError}
+ helperText="GRE总分应在260-340之间"
+ required={isGreRequired}
/>
+ {greScoreFields.map(([name, label]) => (
+
+
+
+ ))}
-
-
- 最终去向
-
-
-
-
-
- 如果未找到项目，请点此前往添加项目信息}
- FormHelperTextProps={{component: 'div'}}
- />
- }
+
+
+
+
+ {
- return option.value === formValues.Final;
- }) : null}
- onChange={(event, newInputValue) => {
- handleChange(event, newInputValue?.value, "Final")
- }}
+ value={formValues.Final}
+ onChange={handleChange}
+ helperText={
+ 如果未找到项目，请点此前往添加项目信息
+ }
/>
-
-
-
- )
+ );
}
-export default BasicInfo
\ No newline at end of file
+export default BasicInfo
diff --git a/src/Components/Modify/Applicant/FormComponent/SoftBackground.jsx b/src/Components/Modify/Applicant/FormComponent/SoftBackground.jsx
index 3e0c75ae..25c7b4ee 100644
--- a/src/Components/Modify/Applicant/FormComponent/SoftBackground.jsx
+++ b/src/Components/Modify/Applicant/FormComponent/SoftBackground.jsx
@@ -1,121 +1,68 @@
-import {
- Box,
- Button,
- Checkbox,
- Divider,
- FormControl,
- IconButton,
- InputLabel,
- ListItemText,
- MenuItem,
- Paper,
- TextField
-} from "@mui/material";
-import Grid2 from "@mui/material/Unstable_Grid2";
-import React, {useRef, useState} from "react";
-import {
- authorOrderOptions,
- exchangeDurationOptions,
- exchangeUnivList,
- publicationStatusOptions,
- publicationTypeOptions,
- recommendationTypeOptions
-} from "../../../../Data/Schemas";
-import {Add} from "@mui/icons-material";
-import Select from "@mui/material/Select";
-import "../AddModifyApplicant.css";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import {useRef} from "react";
+import {Box, Button, Paper} from "@mui/material";
+import {grey} from "@mui/material/colors";
import {useNavigate} from "react-router-dom";
import {useSmallPage} from "../../../common";
-import {grey} from "@mui/material/colors";
+import {ApplicantMaterialsSection, CompetitionSection, createListController, ExchangeSection, ExperienceSection, PublicationSection, RecommendationSection} from "./SoftBackgroundSections";
+import "../AddModifyApplicant.css";
-function SoftBackground({formValues, handleBack, handleChange, loaderData}) {
+function SoftBackground({formValues, handleBack, handleChange}) {
const navigate = useNavigate();
-
- const [exchanges, setExchanges] = useState(formValues.Exchange ?? []);
- const handleAddExchange = () => {
- const newExchanges = [...exchanges, {University: "", Duration: "", Detail: ""}];
- setExchanges(newExchanges);
- handleChange(undefined, newExchanges, "Exchange");
- };
- const handleRemoveExchange = (index) => {
- const newExchanges = exchanges.filter((_, i) => i !== index);
- setExchanges(newExchanges);
- handleChange(undefined, newExchanges, "Exchange");
- };
- const handleExchangeChange = (index, event) => {
- const values = [...exchanges];
- values[index][event.target.name] = event.target.value;
- setExchanges(values);
- handleChange(undefined, values, "Exchange");
- };
-
- const [publications, setPublications] = useState(formValues.Publication ?? []);
- const handleAddPublication = () => {
- const newPublications = [...publications, {Type: "", Name: "", AuthorOrder: "", Status: "", Detail: ""}];
- setPublications(newPublications);
- handleChange(undefined, newPublications, "Publication");
- };
- const handleRemovePublication = (index) => {
- const newPublications = publications.filter((_, i) => i !== index);
- setPublications(newPublications);
- handleChange(undefined, newPublications, "Publication");
- };
- const handlePublicationChange = (index, event) => {
- const values = [...publications];
- values[index][event.target.name] = event.target.value;
- setPublications(values);
- handleChange(undefined, values, "Publication");
- };
-
- const [recommendations, setRecommendations] = useState(formValues.Recommendation ?? []);
- const handleAddRecommendation = () => {
- const newRecommendations = [...recommendations, {Type: [], Detail: ""}];
- setRecommendations(newRecommendations);
- handleChange(undefined, newRecommendations, "Recommendation");
- };
- const handleRemoveRecommendation = (index) => {
- const newRecommendations = recommendations.filter((_, i) => i !== index);
- setRecommendations(newRecommendations);
- handleChange(undefined, newRecommendations, "Recommendation");
- };
- const handleRecommendationChange = (index, event) => {
- const values = [...recommendations];
- values[index][event.target.name] = event.target.value;
- setRecommendations(values);
- handleChange(undefined, values, "Recommendation");
- };
- const recommendationTypeOptionsMap = recommendationTypeOptions.reduce((acc, option) => {
- acc[option.value] = option.label;
- return acc;
- }, {});
-
const smallPage = useSmallPage();
+ const cvInputRef = useRef(null);
+ const sopInputRef = useRef(null);
+ const exchangeController = createListController(
+ formValues.Exchange ?? [],
+ handleChange,
+ "Exchange",
+ () => ({University: "", Duration: "", Detail: ""})
+ );
+ const publicationController = createListController(
+ formValues.Publication ?? [],
+ handleChange,
+ "Publication",
+ () => ({Type: "", Name: "", AuthorOrder: "", Status: "", Detail: ""})
+ );
+ const recommendationController = createListController(
+ formValues.Recommendation ?? [],
+ handleChange,
+ "Recommendation",
+ () => ({Type: [], Detail: ""})
+ );
- const CVNodeRef = useRef(loaderData.cvPost?.Content);
- const SoPNodeRef = useRef(loaderData.sopPost?.Content);
- const onPDFUpload = (event, fileType) => {
- if (event.target.files.length > 0) {
- const file = event.target.files[0];
- if (file.size > 10 * 1024 * 1024) {
- alert("文件大小不能超过10MB!");
- return;
- }
- if (!(/^[\x00-\x7F]*$/.test(file.name))) {
- alert("文件名不能包含中文!");
- return;
- }
- if (file.type !== 'application/pdf') {
- alert("文件格式必须为PDF!");
- return;
- }
- handleChange(event, {
- Title: `Uploaded_${file.name}`,
- PostID: formValues[fileType]?.PostID,
- }, `${fileType}`);
+ function onPdfUpload(event, fileType) {
+ const file = event.target.files?.[0];
+ if (!file) {
+ return;
+ }
+ let errorMessage;
+ if (file.size > 10 * 1024 * 1024) {
+ errorMessage = "文件大小不能超过10MB!";
+ } else if (!(/^[\u0020-\u007e]*$/.test(file.name))) {
+ errorMessage = "文件名不能包含中文!";
+ } else if (file.type !== 'application/pdf') {
+ errorMessage = "文件格式必须为PDF!";
+ }
+ if (errorMessage) {
+ alert(errorMessage);
+ event.target.value = '';
+ return;
}
- };
+ handleChange(event, {
+ Title: `Uploaded_${file.name}`,
+ PostID: formValues[fileType]?.PostID,
+ }, fileType);
+ }
+
+ function onPdfRemove(fileType, inputRef) {
+ handleChange(undefined, {
+ Title: undefined,
+ PostID: formValues[fileType]?.PostID,
+ }, fileType);
+ if (inputRef.current) {
+ inputRef.current.value = '';
+ }
+ }
return (
-
- 3+1经历
-
-
- {exchanges.map((exchange, index) => (
-
-
-
-
- 交换学校
-
-
-
-
-
- 交换时长
-
-
-
-
- handleExchangeChange(index, event)}
- size="small"
- // multiline
- />
-
-
-
- handleRemoveExchange(index)}>
-
-
-
-
- ))}
-
-
-
-
-
-
-
- 科研经历
-
-
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
-
-
- 实习经历
-
-
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
- {
- handleChange(event)
- }}
- />
-
-
-
-
- 论文发表（包含在投）
-
-
- {publications.map((publication, index) => (
-
-
-
-
- 发表在
-
-
-
-
- handlePublicationChange(index, event)}
- size="small"
- required
- />
-
-
-
- 作者顺次
-
-
-
-
-
- 录用状态
-
-
-
-
- handlePublicationChange(index, event)}
- size="small"
- />
-
-
-
- handleRemovePublication(index)}>
-
-
-
-
- ))}
-
-
-
-
-
-
-
- 推荐信
-
-
- {recommendations.map((recommendation, index) => (
-
-
-
-
- 推荐信类型
-
-
-
-
- handleRecommendationChange(index, event)}
- size="small"
- />
-
-
-
- handleRemoveRecommendation(index)}>
-
-
-
-
- ))}
-
-
-
-
-
-
-
- 竞赛经历
-
-
-
-
- {
- handleChange(event)
- }}
- />
-
-
-
-
- 上传申请材料（仅支持PDF）
-
-
-
-
-
-
-
- {
- handleChange(undefined, {
- Title: undefined,
- PostID: formValues.CV.PostID ?? undefined
- }, 'CV');
- if (CVNodeRef.current) {
- CVNodeRef.current.value = null;
- }
- }}
- >
-
-
-
-
-
-
-
- {
- handleChange(undefined, {
- Title: undefined,
- PostID: formValues.SoP.PostID ?? undefined
- }, 'SoP');
- if (SoPNodeRef.current) {
- SoPNodeRef.current.value = null;
- }
- }}
- >
-
-
-
-
-
+
+
+
+
+
+
+
-
- )
+ );
}
-export default SoftBackground;
\ No newline at end of file
+export default SoftBackground;
diff --git a/src/Components/Modify/Applicant/FormComponent/SoftBackgroundSections.jsx b/src/Components/Modify/Applicant/FormComponent/SoftBackgroundSections.jsx
new file mode 100644
index 00000000..6443ac92
--- /dev/null
+++ b/src/Components/Modify/Applicant/FormComponent/SoftBackgroundSections.jsx
@@ -0,0 +1,405 @@
+import {
+ Button,
+ Checkbox,
+ FormControl,
+ IconButton,
+ InputLabel,
+ ListItemText,
+ MenuItem,
+ TextField
+} from "@mui/material";
+import Grid2 from "@mui/material/Grid";
+import Select from "@mui/material/Select";
+import {Add, CloudUpload, Delete} from "@mui/icons-material";
+import {
+ authorOrderOptions,
+ exchangeDurationOptions,
+ exchangeUnivList,
+ publicationStatusOptions,
+ publicationTypeOptions,
+ recommendationTypeOptions
+} from "../../../../Data/Schemas";
+import {FormSection, sectionGridSx} from "./ApplicantFormShared";
+
+const recommendationTypeOptionsMap = recommendationTypeOptions.reduce((options, option) => {
+ options[option.value] = option.label;
+ return options;
+}, {});
+
+function updateListItem(items, index, event) {
+ return items.map((item, itemIndex) => (
+ itemIndex === index ? {...item, [event.target.name]: event.target.value} : item
+ ));
+}
+
+export function createListController(items, handleChange, fieldName, createItem) {
+ return {
+ items,
+ add: () => handleChange(undefined, [...items, createItem()], fieldName),
+ remove: (index) => handleChange(undefined, items.filter((_, itemIndex) => itemIndex !== index), fieldName),
+ update: (index, event) => handleChange(undefined, updateListItem(items, index, event), fieldName),
+ };
+}
+
+function AddListButton({onClick}) {
+ return (
+
+
+
+
+
+ );
+}
+
+function RemoveListItemButton({onClick}) {
+ return (
+
+
+
+
+
+ );
+}
+
+export function ExchangeSection({controller}) {
+ return (
+
+ {controller.items.map((exchange, index) => (
+
+
+
+
+ 交换学校
+
+
+
+
+
+ 交换时长
+
+
+
+
+ controller.update(index, event)}
+ size="small"
+ />
+
+
+ controller.remove(index)}/>
+
+ ))}
+
+
+ );
+}
+
+export function ExperienceSection({formValues, handleChange, research = false}) {
+ const fieldType = research ? 'Research' : 'Intern';
+ const title = research ? '科研经历' : '实习经历';
+ const label = research ? '科研经历' : '实习经历';
+ const fields = [
+ [`Domestic${fieldType}Num`, `国内${label}段数`, 4, 'number'],
+ [`Domestic${fieldType}Detail`, '具体描述', 8],
+ [`International${fieldType}Num`, `海外${label}段数`, 4, 'number'],
+ [`International${fieldType}Detail`, '具体描述', 8],
+ ];
+ return (
+
+
+ {research ?
+
+ : null}
+ {fields.map(([name, fieldLabel, size, type]) => (
+
+
+
+ ))}
+
+
+ );
+}
+
+export function PublicationSection({controller}) {
+ return (
+
+ {controller.items.map((publication, index) => (
+
+
+
+
+ 发表在
+
+
+
+
+ controller.update(index, event)}
+ size="small"
+ required
+ />
+
+
+
+ 作者顺次
+
+
+
+
+
+ 录用状态
+
+
+
+
+ controller.update(index, event)}
+ size="small"
+ />
+
+
+ controller.remove(index)}/>
+
+ ))}
+
+
+ );
+}
+
+export function RecommendationSection({controller}) {
+ return (
+
+ {controller.items.map((recommendation, index) => (
+
+
+
+
+ 推荐信类型
+
+
+
+
+ controller.update(index, event)}
+ size="small"
+ />
+
+
+ controller.remove(index)}/>
+
+ ))}
+
+
+ );
+}
+
+export function CompetitionSection({competition, handleChange}) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function PdfUploadField({fileType, inputRef, label, onRemove, onUpload, value}) {
+ return (
+ <>
+
+
+
+
+ onRemove(fileType, inputRef)}
+ >
+
+
+
+
+ );
+}
+
+export function ApplicantMaterialsSection({cvInputRef, formValues, onPdfRemove, onPdfUpload, sopInputRef}) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/Components/Modify/Applicant/applicantFormData.js b/src/Components/Modify/Applicant/applicantFormData.js
new file mode 100644
index 00000000..7bea488b
--- /dev/null
+++ b/src/Components/Modify/Applicant/applicantFormData.js
@@ -0,0 +1,194 @@
+import {blobToBase64} from "../../../Data/Common";
+import {addModifyFile, removeFile} from "../../../Data/FileData";
+
+function hasValue(value) {
+ return value !== null && value !== undefined && value !== '';
+}
+
+function numberOr(value, fallback) {
+ return hasValue(value) ? Number(value) : fallback;
+}
+
+function compactObjectList(items = []) {
+ return items.filter(item => Object.values(item).some(hasValue));
+}
+
+function createEnglishProficiency(formValues) {
+ const {EnglishOption, EnglishTotal, R, W, L, S} = formValues;
+ if (!EnglishOption || ![EnglishTotal, R, W, L, S].every(hasValue)) {
+ return {};
+ }
+ return {
+ [EnglishOption]: {
+ Total: Number(EnglishTotal),
+ R: Number(R),
+ W: Number(W),
+ L: Number(L),
+ S: Number(S),
+ },
+ };
+}
+
+export function createApplicantRequestBody(formValues, actionType, applicantId) {
+ const {
+ Gender,
+ CurrentDegree,
+ ApplicationYear,
+ Major,
+ GPA,
+ Ranking,
+ ResearchFocus,
+ DomesticResearchNum,
+ DomesticResearchDetail,
+ InternationalResearchNum,
+ InternationalResearchDetail,
+ DomesticInternNum,
+ DomesticInternDetail,
+ InternationalInternNum,
+ InternationalInternDetail,
+ Competition,
+ Final,
+ Programs,
+ } = formValues;
+ const gre = {
+ Total: numberOr(formValues.GRETotal, 260),
+ V: numberOr(formValues.V, 130),
+ Q: numberOr(formValues.Q, 130),
+ AW: numberOr(formValues.AW, 0),
+ };
+ const exchange = compactObjectList(formValues.Exchange);
+ const publication = compactObjectList(formValues.Publication);
+ const recommendation = compactObjectList(formValues.Recommendation);
+ const isNewApplicant = actionType === 'new';
+
+ return {
+ newApplicant: isNewApplicant,
+ content: {
+ ApplicantID: applicantId,
+ Gender,
+ CurrentDegree,
+ ApplicationYear,
+ Major,
+ GPA: Number(GPA),
+ Ranking,
+ ...((gre.Total !== 260 || gre.V !== 130 || gre.Q !== 130 || gre.AW !== 0) && {GRE: gre}),
+ EnglishProficiency: createEnglishProficiency(formValues),
+ ...(exchange.length > 0 && {Exchange: exchange}),
+ ...(publication.length > 0 && {Publication: publication}),
+ Research: {
+ Focus: ResearchFocus ?? "",
+ Domestic: {
+ Num: numberOr(DomesticResearchNum, 0),
+ Detail: DomesticResearchDetail ?? "",
+ },
+ International: {
+ Num: numberOr(InternationalResearchNum, 0),
+ Detail: InternationalResearchDetail ?? "",
+ },
+ },
+ Internship: {
+ Domestic: {
+ Num: numberOr(DomesticInternNum, 0),
+ Detail: DomesticInternDetail ?? "",
+ },
+ International: {
+ Num: numberOr(InternationalInternNum, 0),
+ Detail: InternationalInternDetail ?? "",
+ },
+ },
+ ...(recommendation.length > 0 && {Recommendation: recommendation}),
+ ...(Competition !== undefined && {Competition}),
+ Programs: isNewApplicant ? {} : Programs,
+ Final: Final ?? "",
+ Posts: isNewApplicant ? [] : (formValues.Posts ?? []),
+ },
+ };
+}
+
+export function createInitialApplicantFormValues(applicant, cvPost, sopPost) {
+ if (!applicant) {
+ return {};
+ }
+ return {
+ Gender: applicant.Gender,
+ CurrentDegree: applicant.CurrentDegree,
+ ApplicationYear: applicant.ApplicationYear,
+ Major: applicant.Major,
+ GPA: applicant.GPA,
+ Ranking: applicant.Ranking,
+ V: applicant.GRE?.V,
+ Q: applicant.GRE?.Q,
+ AW: applicant.GRE?.AW,
+ GRETotal: applicant.GRE?.Total,
+ ...(applicant.EnglishProficiency?.TOEFL && {
+ EnglishOption: 'TOEFL',
+ EnglishTotal: applicant.EnglishProficiency.TOEFL.Total,
+ R: applicant.EnglishProficiency.TOEFL.R,
+ W: applicant.EnglishProficiency.TOEFL.W,
+ L: applicant.EnglishProficiency.TOEFL.L,
+ S: applicant.EnglishProficiency.TOEFL.S,
+ }),
+ ...(applicant.EnglishProficiency?.IELTS && {
+ EnglishOption: 'IELTS',
+ EnglishTotal: applicant.EnglishProficiency.IELTS.Total,
+ R: applicant.EnglishProficiency.IELTS.R,
+ W: applicant.EnglishProficiency.IELTS.W,
+ L: applicant.EnglishProficiency.IELTS.L,
+ S: applicant.EnglishProficiency.IELTS.S,
+ }),
+ ResearchFocus: applicant.Research?.Focus,
+ DomesticResearchNum: applicant.Research?.Domestic?.Num,
+ DomesticResearchDetail: applicant.Research?.Domestic?.Detail,
+ InternationalResearchNum: applicant.Research?.International?.Num,
+ InternationalResearchDetail: applicant.Research?.International?.Detail,
+ DomesticInternNum: applicant.Internship?.Domestic?.Num,
+ DomesticInternDetail: applicant.Internship?.Domestic?.Detail,
+ InternationalInternNum: applicant.Internship?.International?.Num,
+ InternationalInternDetail: applicant.Internship?.International?.Detail,
+ Competition: applicant.Competition,
+ Programs: applicant.Programs,
+ Exchange: applicant.Exchange,
+ Publication: applicant.Publication,
+ Recommendation: applicant.Recommendation,
+ Final: applicant.Final,
+ Posts: applicant.Posts,
+ CV: {
+ PostID: cvPost?.PostID,
+ Title: cvPost?.Title,
+ },
+ SoP: {
+ PostID: sopPost?.PostID,
+ Title: sopPost?.Title,
+ },
+ };
+}
+
+export async function syncApplicantFile({applicantId, fileType, formData, formValues, posts}) {
+ const postId = formValues[fileType]?.PostID;
+ const title = formValues[fileType]?.Title;
+ const hasStoredFile = posts.includes(postId);
+
+ if (hasStoredFile && !title) {
+ await removeFile(postId, applicantId);
+ return;
+ }
+
+ const file = formData.get(fileType);
+ if (!title || !file?.name) {
+ return;
+ }
+
+ const content = await blobToBase64(file);
+ if (hasStoredFile) {
+ await addModifyFile({
+ PostID: postId,
+ content: {Title: title, Content: content},
+ }, 'edit');
+ return;
+ }
+
+ await addModifyFile({
+ ApplicantID: applicantId,
+ content: {type: fileType, Title: title, Content: content},
+ }, 'new');
+}
diff --git a/src/Components/Modify/Post/AddModifyPost.jsx b/src/Components/Modify/Post/AddModifyPost.jsx
index aa5b1961..ec5dffd4 100644
--- a/src/Components/Modify/Post/AddModifyPost.jsx
+++ b/src/Components/Modify/Post/AddModifyPost.jsx
@@ -10,13 +10,11 @@ import {list2Options} from "../../../Data/Schemas";
export async function loader({params}) {
const postId = params?.postId;
const postObj = postId ? await getPostObject(postId) : null;
- // console.log("postObj", postObj)
const isAuth = await isAuthApplicant(postObj?.author);
if (!isAuth && postObj) {
await getApplicants(true);
const doubleCheck = await isAuthApplicant(postObj?.author);
if (!doubleCheck) {
- // We can guarantee that the user is not authorized to view the profile page.
throw new Error(`Sorry, you are not authorized to edit this post.`);
}
}
@@ -29,27 +27,22 @@ export async function action({request, params}) {
const formData = await request.formData();
const title = formData.get("Title");
const content = formData.get("Content");
- const ActionType = formData.get("ActionType");
- let requestBody = {
+ const actionType = formData.get("ActionType");
+ const requestBody = {
content: {
Title: title,
Content: content
}
}
- if (ActionType === 'new') {
+ if (actionType === 'new') {
requestBody.ApplicantID = formData.get('Author');
requestBody.content.type = 'Post';
- } else if (ActionType === 'edit') {
+ } else if (actionType === 'edit') {
requestBody.PostID = params.postId;
}
-
- try {
- await addModifyPost(requestBody, ActionType);
- return redirect("/posts");
- } catch (error) {
- console.error("Error in post action:", error);
- throw error;
- }
+
+ await addModifyPost(requestBody, actionType);
+ return redirect("/posts");
}
export default function AddModifyPost({type}) {
@@ -102,9 +95,9 @@ export default function AddModifyPost({type}) {
))}
-
@@ -114,4 +107,4 @@ export default function AddModifyPost({type}) {
)
-}
\ No newline at end of file
+}
diff --git a/src/Components/Modify/Program/AddModifyProgram.jsx b/src/Components/Modify/Program/AddModifyProgram.jsx
index b29616ea..15265282 100644
--- a/src/Components/Modify/Program/AddModifyProgram.jsx
+++ b/src/Components/Modify/Program/AddModifyProgram.jsx
@@ -1,66 +1,62 @@
import React, {useState} from 'react';
import "./AddModifyProgram.css";
-import {
- DescriptionTemplate,
- degreeOptions,
- majorOptions,
- univOptions
-} from "../../../Data/Schemas";
+import {degreeOptions, DescriptionTemplate, majorOptions, univOptions} from "../../../Data/Schemas";
import MarkDownEditor from "./MarkDownEditor/MarkDownEditor";
-import {useLoaderData, useNavigate, redirect, Form} from "react-router-dom";
+import {Form, redirect, useLoaderData, useNavigate} from "react-router-dom";
import {addModifyProgram} from "../../../Data/ProgramData";
-import {
- Button,
- ButtonGroup, Checkbox,
- FormControl, Input, ListItemText,
- MenuItem,
- Link as MuiLink,
- TextField,
- Typography, Tooltip
-} from "@mui/material";
+import {Button, ButtonGroup, Checkbox, FormControl, Input, Link as MuiLink, ListItemText, MenuItem, TextField, Tooltip, Typography} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faMarkdown} from "@fortawesome/free-brands-svg-icons";
import {HelpOutline} from "@mui/icons-material";
+const invalidProgramCharacters = ['@', '|', '/', '$', '\\', '?', '!'];
+
+function isProgramNameInvalid(programName) {
+ return typeof programName !== 'string' || invalidProgramCharacters.some(character => programName.includes(character));
+}
+
export async function action({request}) {
const formData = await request.formData();
- const ActionType = formData.get('ActionType');
- const University = formData.get('University');
- const Program = formData.get('Program');
- const ProgramID = `${Program}@${University}`;
+ const actionType = formData.get('ActionType');
+ const university = formData.get('University');
+ const program = formData.get('Program');
+ if (isProgramNameInvalid(program)) {
+ throw new Error("Program names cannot contain @, |, /, \\, ?, !, or $.");
+ }
+ const programId = `${program}@${university}`;
const targetApplicantMajor = formData.get('TargetApplicantMajor')?.split(',');
- const Region = formData.get('Region')?.split(',');
- const Degree = formData.get('Degree');
- const Description = formData.get('Description');
+ const region = formData.get('Region')?.split(',');
+ const degree = formData.get('Degree');
+ const description = formData.get('Description');
const requestBody = {
- 'newProgram': ActionType === 'new',
+ 'newProgram': actionType === 'new',
'content': {
- 'ProgramID': ProgramID,
- 'University': University,
- 'Program': Program,
- 'Region': Region,
- 'Degree': Degree,
+ ProgramID: programId,
+ University: university,
+ Program: program,
+ Region: region,
+ Degree: degree,
'TargetApplicantMajor': targetApplicantMajor,
- 'Description': Description,
+ Description: description,
'Applicants': []
}
};
await addModifyProgram(requestBody);
- return redirect(`/programs/${encodeURIComponent(ProgramID)}`)
+ return redirect(`/programs/${encodeURIComponent(programId)}`)
}
export default function AddModifyProgram({type}) {
const navigate = useNavigate();
const loaderData = useLoaderData();
const programContent = loaderData?.programContent;
- const AddMode = !programContent;
- const mode = AddMode ? '添加' : '修改';
- const [Description, setDescription] = useState(AddMode ? DescriptionTemplate : programContent.description);
+ const addMode = !programContent;
+ const mode = addMode ? '添加' : '修改';
+ const [Description, setDescription] = useState(addMode ? DescriptionTemplate : programContent.description);
const [univ, setUniv] = useState(univOptions.find((univ) => univ.value === programContent?.University) ?? null);
- const [major, setMajor] = useState(majorOptions.filter((m) => programContent?.TargetApplicantMajor.includes(m.value)) ?? []);
+ const [major, setMajor] = useState(majorOptions.filter((m) => programContent?.TargetApplicantMajor?.includes(m.value)) ?? []);
const [programName, setProgramName] = useState(programContent?.Program ?? '');
- // const programNameInvalid = ['@', '|', '/', '$', '\\', '?', '!'].some(char => programName.includes(char));
+ const programNameInvalid = isProgramNameInvalid(programName);
return (
)
}
-
diff --git a/src/Components/Modify/Record/AddModifyRecord.jsx b/src/Components/Modify/Record/AddModifyRecord.jsx
index 5ed394b1..3b73c5b1 100644
--- a/src/Components/Modify/Record/AddModifyRecord.jsx
+++ b/src/Components/Modify/Record/AddModifyRecord.jsx
@@ -1,113 +1,153 @@
+import {useMemo, useState} from "react";
+import {Box, Button, Link as MuiLink, Paper, TextField, Tooltip, Typography} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Grid2 from "@mui/material/Grid";
+import {grey} from "@mui/material/colors";
+import {HelpOutline} from "@mui/icons-material";
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+import {DatePicker} from "@mui/x-date-pickers";
+import {DemoContainer} from '@mui/x-date-pickers/internals/demo';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import dayjs from "dayjs";
+import {Form, redirect, useLoaderData, useLocation, useNavigate} from "react-router-dom";
import {getPrograms} from "../../../Data/ProgramData";
-import React, {useState} from "react";
import {addModifyRecord, getRecordByRecordIDs} from "../../../Data/RecordData";
-import {Box, Button, Input, Link as MuiLink, Paper, TextField, Tooltip, Typography} from "@mui/material";
-import {Form, redirect, useLoaderData, useLocation, useNavigate} from "react-router-dom";
-import Grid2 from "@mui/material/Unstable_Grid2";
-import Autocomplete from "@mui/material/Autocomplete";
import {applicationYearOptions, list2Options, recordSemesterOptions, recordStatusOptions} from "../../../Data/Schemas";
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import dayjs from "dayjs";
-import {DatePicker} from "@mui/x-date-pickers";
-import {getDisplayName, getMetaData} from "../../../Data/UserData";
+import {getDisplayName, getMetadata} from "../../../Data/UserData";
import {useSmallPage} from "../../common";
-import {HelpOutline} from "@mui/icons-material";
-import {grey} from "@mui/material/colors";
export async function loader({params}) {
const programs = await getPrograms();
- const paramsApplicantID = params?.applicantId;
- let applicantIDs = null;
- if (!paramsApplicantID) {
+ const paramsApplicantId = params?.applicantId;
+ if (!paramsApplicantId) {
const displayName = await getDisplayName();
- const metaData = await getMetaData(displayName);
- applicantIDs = metaData.ApplicantIDs;
- return {programs, applicantIDs};
- } else {
- const recordsDict = params.programId ? await getRecordByRecordIDs([`${paramsApplicantID}|${params.programId}`]) : null;
- const applicantIDs = [paramsApplicantID];
- return {programs, recordsDict, applicantIDs};
+ const metadata = await getMetadata(displayName);
+ return {programs, applicantIds: metadata?.ApplicantIDs ?? []};
}
+ const programId = params.programId ? decodeURIComponent(params.programId) : null;
+ const recordsDict = programId ? await getRecordByRecordIDs([`${paramsApplicantId}|${programId}`]) : null;
+ return {programs, recordsDict, applicantIds: [paramsApplicantId]};
}
-export async function action({request}) {
- const formData = await request.formData();
- const actionType = formData.get('ActionType');
- const applicantID = formData.get('ApplicantID');
- const programID = formData.get('ProgramID');
- const fromPath = formData.get('FromPath');
- const recordID = `${applicantID}|${programID}`;
- const year = formData.get('Year');
- const semester = formData.get('Semester');
- const status = formData.get('Status');
- const submit = formData.get('Submit');
- const interview = formData.get('Interview');
- const decision = formData.get('Decision');
- const detail = formData.get('Detail');
+
+function createRecordRequestBody(formData) {
+ const applicantId = formData.get('ApplicantID');
+ const programId = formData.get('ProgramID');
const final = formData.get('Final');
- const requestBody = {
- 'newRecord': actionType === 'new',
- 'content': {
- 'RecordID': recordID,
- 'ApplicantID': applicantID,
- 'ProgramID': programID,
- 'ProgramYear': Number(year),
- 'Semester': semester,
- 'Status': status,
- 'TimeLine': {
- 'Submit': submit.length > 0 ? submit : null,
- 'Interview': interview.length > 0 ? interview : null,
- 'Decision': decision.length > 0 ? decision : null,
- },
- 'Detail': detail,
- 'Final': final === 'false' ? false : final === 'true',
+ return {
+ applicantId,
+ fromPath: formData.get('FromPath'),
+ requestBody: {
+ newRecord: formData.get('ActionType') === 'new',
+ content: {
+ RecordID: `${applicantId}|${programId}`,
+ ApplicantID: applicantId,
+ ProgramID: programId,
+ ProgramYear: Number(formData.get('Year')),
+ Semester: formData.get('Semester'),
+ Status: formData.get('Status'),
+ TimeLine: {
+ Submit: formData.get('Submit') || null,
+ Interview: formData.get('Interview') || null,
+ Decision: formData.get('Decision') || null,
+ },
+ Detail: formData.get('Detail'),
+ Final: final === 'true',
+ }
}
- }
+ };
+}
+
+export async function action({request}) {
+ const formData = await request.formData();
+ const {applicantId, fromPath, requestBody} = createRecordRequestBody(formData);
await addModifyRecord(requestBody);
- if (fromPath) {
- return redirect(fromPath);
- } else {
- return redirect(`/profile/${applicantID}`);
- }
+ return redirect(fromPath || `/profile/${applicantId}`);
+}
+
+function RecordOptionField({
+ endAdornment,
+ helperText,
+ label,
+ onChange,
+ options,
+ readOnly = false,
+ value,
+ }) {
+ return (
+
+
+ {params.InputProps.endAdornment}
+ {endAdornment}
+
+ ),
+ } : params.InputProps}
+ />
+ }
+ value={value ? options.find((option) => option.value === value) ?? null : null}
+ onChange={(event, newValue) => onChange(newValue?.value ?? null)}
+ />
+ );
+}
+
+function TimelineDatePicker({label, name, value}) {
+ return (
+
+
+
+
+
+ );
}
export default function AddModifyRecord({type}) {
- const loaderData = useLoaderData();
- const programs = loaderData.programs;
- const applicantIDs = loaderData.applicantIDs;
- const recordsDict = loaderData.recordsDict;
+ const {programs, applicantIds, recordsDict} = useLoaderData();
const navigate = useNavigate();
-
const location = useLocation();
- const passedProgramID = location?.state?.programID;
- const fromPath = location?.state?.from;
- const passedApplicantID = location?.state?.applicantID;
-
- const programOptions = Object.values(programs).reduce((acc, programArray) => {
- programArray.forEach(program => {
- acc.push({label: program.ProgramID, value: program.ProgramID})
- });
- return acc;
- }, []);
-
- const applicantOptions = list2Options(applicantIDs);
-
- const record = recordsDict ? recordsDict[Object.keys(recordsDict)[0]] : null;
- const [programOption, setProgramOption] = useState(record ? record.ProgramID : passedProgramID ?? null);
- const [applicantOption, setApplicantOption] = useState(record ? record.ApplicantID : passedApplicantID ?? null);
- const [statusOption, setStatusOption] = useState(record ? record.Status : null);
- const [yearOption, setYearOption] = useState(record ? record.ProgramYear : null);
- const [semesterOption, setSemesterOption] = useState(record ? record.Semester : null);
- const mode = type === 'new' ? '添加' : '修改';
-
const smallPage = useSmallPage();
+ const record = recordsDict ? Object.values(recordsDict)[0] : null;
+ const programOptions = useMemo(() => Object.values(programs).flatMap(programArray => (
+ programArray.map(program => ({label: program.ProgramID, value: program.ProgramID}))
+ )), [programs]);
+ const applicantOptions = useMemo(() => list2Options(applicantIds), [applicantIds]);
+ const [programId, setProgramId] = useState(record?.ProgramID ?? location.state?.programID ?? null);
+ const [applicantId, setApplicantId] = useState(record?.ApplicantID ?? location.state?.applicantID ?? null);
+ const [status, setStatus] = useState(record?.Status ?? null);
+ const [year, setYear] = useState(record?.ProgramYear ?? null);
+ const [semester, setSemester] = useState(record?.Semester ?? null);
+ const selectedApplicantId = applicantOptions.length === 1 ? applicantOptions[0].value : applicantId;
+ const fromPath = location.state?.from ?? '';
+ const canSubmit = [selectedApplicantId, programId, status, year, semester].every(Boolean);
+ const mode = type === 'new' ? '添加' : '修改';
return (
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/Components/Post/CommentSection/CommentSection.css b/src/Components/Post/CommentSection/CommentSection.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/Components/Post/CommentSection/CommentSection.jsx b/src/Components/Post/CommentSection/CommentSection.jsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/Components/Post/PostContent/PostContent.jsx b/src/Components/Post/PostContent/PostContent.jsx
index 9ee782a9..f30f782b 100644
--- a/src/Components/Post/PostContent/PostContent.jsx
+++ b/src/Components/Post/PostContent/PostContent.jsx
@@ -1,54 +1,35 @@
-import {getPostObject, removePost} from "../../../Data/PostData";
+import {getPostObject, removeContent} from "../../../Data/PostData";
import {Form, Link, Outlet, redirect, useLoaderData} from "react-router-dom";
import ReactMarkdown from "react-markdown";
-import {
- Box,
- Avatar,
- Button,
- Dialog,
- DialogActions,
- DialogTitle,
- IconButton,
- Input,
- Tooltip,
- Typography, Paper
-} from "@mui/material";
+import {Avatar, Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Input, Paper, Tooltip, Typography} from "@mui/material";
import {Delete, Edit, Refresh} from "@mui/icons-material";
import React, {useState} from "react";
import {BoldTypography, useSmallPage} from "../../common";
import {isAuthApplicant} from "../../../Data/ApplicantData";
import "./PostContent.css"
-import {getMetaData, getAvatar} from "../../../Data/UserData";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import {getAvatar, getMetadata} from "../../../Data/UserData";
+import Grid2 from "@mui/material/Grid";
+import {utcToLocal} from "../../../Data/Common";
export async function loader({params}) {
const postId = params.postId;
- try {
- const postObj = await getPostObject(postId);
+ const postObj = await getPostObject(postId);
- const authorId = postObj?.author;
- const editable = authorId ? await isAuthApplicant(authorId) : false;
+ 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;
- }
+ 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};
}
export async function action({request, params}) {
const postId = params.postId;
const formData = await request.formData();
- const author = formData.get('Author');
const ActionType = formData.get('ActionType');
- if (ActionType === 'Refresh') {
- await getPostObject(postId, true);
- return {urlPostId: postId};
- } else if (ActionType === 'Delete') {
- await removePost(postId, author);
+ if (ActionType === 'Delete') {
+ await removeContent(postId);
return redirect("/posts");
}
return {urlPostId: postId};
@@ -76,7 +57,7 @@ export default function PostContent() {
-
+
-
- 创建于: {postObj.created_at}
+
+ 创建于: {utcToLocal(postObj.created_at, true)}
-
- 最后修改于: {postObj.updated_at}
+
+ 最后修改于: {utcToLocal(postObj.updated_at ?? postObj.created_at, true)}
@@ -144,5 +135,5 @@ export default function PostContent() {
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/Components/Post/PostPage.jsx b/src/Components/Post/PostPage.jsx
index d1ad9aee..0a981a7d 100644
--- a/src/Components/Post/PostPage.jsx
+++ b/src/Components/Post/PostPage.jsx
@@ -1,36 +1,21 @@
import {getPosts} from "../../Data/PostData";
-import {Form, Link, Outlet, useLoaderData} from "react-router-dom";
+import {Link, Outlet, useLoaderData} from "react-router-dom";
import {CollapseSideBar} from "../common";
-import {
- Button,
- Divider,
- List,
- ListItemButton,
- ListItemText,
- Paper,
- Tooltip,
- useTheme
-} from "@mui/material";
+import {Button, Divider, List, ListItemButton, ListItemText, Paper, Tooltip, useTheme} from "@mui/material";
import {grey} from "@mui/material/colors";
-import {Add, Refresh} from "@mui/icons-material";
+import {Add} from "@mui/icons-material";
import "./PostPage.css"
import React, {Fragment} from "react";
import SearchBar from "../ProgramPage/SideBar/SearchBar/SearchBar";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import Grid2 from "@mui/material/Grid";
export async function loader({request}) {
const url = new URL(request.url);
const searchStr = url.searchParams.get("searchStr");
- let posts = await getPosts(false, {searchStr});
- // console.log(posts);
+ const posts = await getPosts({searchStr});
return {posts, searchStr};
}
-// TODO: Now post don't have cache system, so actually we can remove this... (also the refresh button)
-export async function action() {
- return await getPosts(true);
-}
-
export default function PostPage() {
const loaderData = useLoaderData();
const theme = useTheme();
@@ -48,31 +33,15 @@ export default function PostPage() {
}
}}>
-
-
-
-
-
-
-
+
+
+
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/Components/Profile/Profile.jsx b/src/Components/Profile/Profile.jsx
index a4dce393..7db1aa4d 100644
--- a/src/Components/Profile/Profile.jsx
+++ b/src/Components/Profile/Profile.jsx
@@ -3,23 +3,16 @@ import React from "react";
import {Outlet, redirect, useLoaderData} from "react-router-dom";
import {ProfileSideBar} from "./ProfileSideBar/ProfileSideBar";
import {grey} from "@mui/material/colors";
-import {
- getAvatar,
- getDisplayName,
- getMetaData,
- toggleAnonymous,
- updateContact,
- uploadAvatar
-} from "../../Data/UserData";
+import {getAvatar, getDisplayName, getMetadata, toggleAnonymous, updateContact, uploadAvatar} from "../../Data/UserData";
import localforage from "localforage";
import "./Profile.css"
export async function loader() {
const displayName = await getDisplayName();
- const metaData = await getMetaData();
- const avatarUrl = await getAvatar(metaData?.Avatar);
+ const metadata = await getMetadata();
+ const avatarUrl = await getAvatar(metadata?.Avatar);
const user = await localforage.getItem('user');
- return {displayName, metaData, avatarUrl, user};
+ return {displayName, metadata, avatarUrl, user};
}
export async function action({request}) {
@@ -28,19 +21,19 @@ export async function action({request}) {
if (actionType === 'EditAvatar') {
const avatar = formData.get('avatar');
await uploadAvatar(avatar);
- return redirect(window.location.href);
+ return redirect(request.url);
} else if (actionType === 'ToggleAnonymous') {
await toggleAnonymous()
return redirect('/profile');
} else if (actionType === 'EditContact') {
const contact = formData.get('contact');
await updateContact(contact);
- return redirect(window.location.href);
+ return redirect(request.url);
} else if (actionType === 'Refresh') {
const displayName = await getDisplayName(true);
- const metaData = await getMetaData(displayName, true);
- await getAvatar(metaData?.Avatar, displayName, true);
- return redirect(window.location.href);
+ const metadata = await getMetadata(displayName, true);
+ await getAvatar(metadata?.Avatar, displayName, true);
+ return redirect(request.url);
}
}
@@ -60,4 +53,4 @@ export default function Profile() {
)
-}
\ No newline at end of file
+}
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantHeader.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantHeader.jsx
new file mode 100644
index 00000000..606a8aa7
--- /dev/null
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantHeader.jsx
@@ -0,0 +1,377 @@
+import {useEffect, useState} from "react";
+import {
+ Avatar,
+ Badge,
+ Button,
+ ButtonGroup,
+ Chip,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ IconButton,
+ Slider,
+ TextField,
+ Tooltip,
+ Typography
+} from "@mui/material";
+import {
+ Delete,
+ Download,
+ Edit,
+ HomeRounded,
+ LinkedIn,
+ Link as LinkIcon,
+ Mail,
+ Refresh
+} from "@mui/icons-material";
+import FemaleIcon from '@mui/icons-material/Female';
+import MaleIcon from '@mui/icons-material/Male';
+import TransgenderIcon from '@mui/icons-material/Transgender';
+import {faQq, faWeixin} from "@fortawesome/free-brands-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import Grid2 from "@mui/material/Grid";
+import {Form, Link} from "react-router-dom";
+import {isAuthApplicant} from "../../../Data/ApplicantData";
+import {getFileContent} from "../../../Data/FileData";
+import {
+ currentDegreeMapping,
+ EnglishExamMapping,
+ rankPercentSliderValueMapping,
+ SliderValueRankStringMapping
+} from "../../../Data/Schemas";
+import {BoldTypography} from "../../common";
+import {BaseItemBlock, ContentCenteredGrid} from "./ProfileApplicantShared";
+
+const contactIcons = {
+ "QQ": ,
+ "WeChat": ,
+ "LinkedIn": ,
+ "HomePage": ,
+ "OtherLink": ,
+ "Email":
+}
+
+function GenderIcon({gender}) {
+ switch (gender) {
+ case 'Male':
+ return ;
+ case 'Female':
+ return ;
+ case 'Others':
+ return ;
+ default:
+ return null;
+ }
+}
+
+function ControlButtonGroup({applicantId, records = {}, postLength = 0, editable}) {
+ const [open, setOpen] = useState(false);
+ const [confirmText, setConfirmText] = useState('');
+ const hasDependencies = Object.keys(records).length + postLength > 0;
+
+ return (
+ <>
+
+ {editable ? <>
+
+
+
+
+
+
+ setOpen(true)} color='error'>
+
+
+
+ : null}
+
+
+ )
+}
+
+export function BasicInfoBlock({avatarUrl, contact = {}, applicant, records, editable}) {
+ const [isAuth, setIsAuth] = useState(false);
+ useEffect(() => {
+ let mounted = true;
+ isAuthApplicant(applicant.ApplicantID).then((authorized) => {
+ if (mounted) {
+ setIsAuth(authorized);
+ }
+ });
+ return () => {
+ mounted = false;
+ };
+ }, [applicant.ApplicantID]);
+
+ async function onDownload(postId) {
+ if (!postId) {
+ return;
+ }
+ const fileType = postId.startsWith('CV') ? "CV" : "SoP";
+ const link = document.createElement("a");
+ link.download = `${applicant.ApplicantID}_${fileType}.pdf`;
+ link.href = await getFileContent(postId);
+ link.click();
+ }
+
+ const contactEntries = Object.entries(contact);
+ const cvPostId = applicant?.Posts?.find(post => post.startsWith('CV'));
+ const sopPostId = applicant?.Posts?.find(post => post.startsWith('SoP'));
+
+ return (
+
+
+
+ }
+ anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
+ overlap='circular'
+ color="primary"
+ >
+
+
+
+
+
+
+ {applicant.ApplicantID.replace("@", " ")}
+
+
+
+
+ {`${applicant.Major} ${currentDegreeMapping[applicant.CurrentDegree] ?? applicant.CurrentDegree}`}
+
+
+
+
+
+
+
+ 联系方式:
+ {contactEntries.length ?
+
+ {contactEntries.map(([key, value]) => {
+ const Icon = contactIcons[key];
+ if (value === "") return null;
+ return (
+
+ {
+ await navigator.clipboard.writeText(value);
+ alert(`已复制${value}到剪贴板！`);
+ }}
+ >
+ {Icon}
+
+
+ )
+ })}
+ : "暂无"}
+
+
+ 申请材料:
+
+
+
+
+
+
+ 最终去向:
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function GradeBar({ranking, gpa}) {
+ const sliderValue = rankPercentSliderValueMapping[ranking] ?? 30;
+ const marks = [
+ {
+ value: 2,
+ label: '1.7',
+ }, {
+ value: sliderValue,
+ label: gpa,
+ },
+ ]
+ if (sliderValue !== 95) {
+ marks.push({
+ value: 98,
+ label: '4.0',
+ })
+ }
+ return (
+
+
+ 申请时最高学位GPA以及对应学院/专业排名：
+
+
+ SliderValueRankStringMapping[value]}
+ valueLabelFormat={(value) => SliderValueRankStringMapping[value]}
+ valueLabelDisplay="on"
+ marks={marks}
+ className='RankingSlider'
+ />
+
+
+ );
+}
+
+function GREBlock({gre}) {
+ const displayGre = gre ?? {
+ "Total": "-",
+ "V": "-",
+ "Q": "-",
+ "AW": "-"
+ };
+
+ return (
+
+
+ GRE
+ {displayGre.Total}
+
+ {Object.entries(displayGre).map(([key, value]) => {
+ if (key === 'Total') {
+ return null;
+ }
+ return (
+
+ {EnglishExamMapping.GRE[key] ?? key}
+ {value}
+
+ )
+ })}
+
+
+ );
+}
+
+function EnglishExamBlock({englishProficiency}) {
+ const displayEnglishProficiency = englishProficiency && Object.keys(englishProficiency).length > 0 ?
+ englishProficiency : {
+ "语言成绩": {
+ "Total": "-",
+ "S": "-",
+ "R": "-",
+ "L": "-",
+ "W": "-"
+ }
+ };
+
+ return (
+ <>
+ {Object.entries(displayEnglishProficiency).map(([examType, grade]) => {
+ return (
+
+
+ {examType}
+ {grade.Total}
+
+ {Object.entries(grade).map(([key, value]) => {
+ if (key === 'Total') {
+ return null;
+ }
+ return (
+
+
+ {EnglishExamMapping[examType]?.[key] ?? key}
+
+ {value}
+
+ )
+ })}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
index 408aa913..e3da63ba 100644
--- a/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
@@ -1,65 +1,14 @@
+import {Paper} from "@mui/material";
+import {grey} from "@mui/material/colors";
+import Grid2 from "@mui/material/Grid";
+import {redirect, useLoaderData} from "react-router-dom";
+import {getApplicant, getApplicants, isAuthApplicant, removeApplicant} from "../../../Data/ApplicantData";
import {getRecordByApplicant, removeRecord} from "../../../Data/RecordData";
-import {Form, redirect, useLoaderData, useNavigate} from "react-router-dom";
-import {
- Avatar, Badge, Box, Button, Card, Chip, IconButton,
- Dialog, DialogActions, DialogContent,
- DialogContentText, DialogTitle, List, ListItem,
- ListItemIcon, ListItemText, TextField,
- Paper, Slider, styled, Typography, Divider, Tooltip, Input, ButtonGroup,
-} from "@mui/material";
-import {Add, Delete, Download, Edit, Refresh} from "@mui/icons-material";
+import {getAvatar, getDisplayName, getMetadata} from "../../../Data/UserData";
+import {BasicInfoBlock} from "./ProfileApplicantHeader";
+import {RecordBlock} from "./ProfileApplicantRecords";
+import {CompetitionBlock, ExchangeBlock, InternshipBlock, PublicationBlock, RecommendationBlock, ResearchBlock} from "./ProfileApplicantSections";
import "./ProfileApplicantPage.css";
-import {Link} from 'react-router-dom';
-import {
- getApplicant, getApplicants,
- isAuthApplicant,
- removeApplicant
-} from "../../../Data/ApplicantData";
-import Grid2 from "@mui/material/Unstable_Grid2";
-import {
- authorOrderMapping,
- currentDegreeMapping,
- EnglishExamMapping,
- exchangeDurationMapping,
- exchangeUnivFullNameMapping,
- publicationStatusMapping,
- publicationTypeMapping,
- rankPercentSliderValueMapping,
- recommendationTypeMapping,
- RecordStatusPalette,
- SliderValueRankStringMapping
-} from "../../../Data/Schemas";
-import React, {Fragment, useEffect, useState} from "react";
-
-import MaleIcon from '@mui/icons-material/Male';
-import FemaleIcon from '@mui/icons-material/Female';
-import TransgenderIcon from '@mui/icons-material/Transgender';
-import SchoolIcon from '@mui/icons-material/School';
-import WorkIcon from '@mui/icons-material/Work';
-import BiotechIcon from '@mui/icons-material/Biotech';
-import ArticleIcon from '@mui/icons-material/Article';
-import EmailIcon from '@mui/icons-material/Email';
-import ShutterSpeedIcon from '@mui/icons-material/ShutterSpeed';
-import {getAvatar, getDisplayName, getMetaData} from "../../../Data/UserData";
-import {grey} from "@mui/material/colors";
-import {faQq, faWeixin} from "@fortawesome/free-brands-svg-icons";
-import {HomeRounded, LinkedIn, Link as LinkIcon, Mail} from "@mui/icons-material";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {BoldTypography} from "../../common";
-import {getFileContent} from "../../../Data/FileData";
-
-const contactIcons = {
- "QQ": ,
- "WeChat": ,
- "LinkedIn": ,
- "HomePage": ,
- "OtherLink": ,
- "Email":
-}
export async function loader({params}) {
const applicantId = params.applicantId;
@@ -68,36 +17,30 @@ export async function loader({params}) {
await getApplicants(true);
const doubleCheck = await isAuthApplicant(applicantId);
if (!doubleCheck) {
- // We can guarantee that the user is not authorized to view the profile page.
throw new Error(`Sorry, you are not authorized to view the profile page of ${applicantId}.`);
}
}
- try {
- const applicant = await getApplicant(applicantId);
- const displayName = applicant.ApplicantID.split('@')[0];
- const records = await getRecordByApplicant(applicantId);
- const metaData = await getMetaData(displayName);
- const contact = metaData.Contact;
- const avatarUrl = await getAvatar(metaData?.Avatar, displayName);
- return {avatarUrl, contact, applicant, records};
- } catch (e) {
- throw e;
- }
+ return loadApplicantProfile(applicantId);
}
export async function DataPointsLoader({params}) {
- const applicantId = params.applicantId;
- try {
- const applicant = await getApplicant(applicantId);
- const displayName = applicant.ApplicantID.split('@')[0];
- const records = await getRecordByApplicant(applicantId);
- const metaData = await getMetaData(displayName);
- const contact = metaData?.Contact;
- const avatarUrl = await getAvatar(metaData?.Avatar, displayName);
- return {avatarUrl, contact, applicant, records};
- } catch (e) {
- throw e;
- }
+ return loadApplicantProfile(params.applicantId);
+}
+
+async function loadApplicantProfile(applicantId) {
+ const applicant = await getApplicant(applicantId);
+ const displayName = applicant.ApplicantID.split('@')[0];
+ const records = await getRecordByApplicant(applicantId);
+ const metadata = await getMetadata(displayName);
+ const contact = metadata?.Contact ?? {};
+ const avatarUrl = await getAvatar(metadata?.Avatar, displayName);
+ return {avatarUrl, contact, applicant, records};
+}
+
+async function refreshApplicantProfile(applicantId, displayName) {
+ await getRecordByApplicant(applicantId, true);
+ const metadata = await getMetadata(displayName, true);
+ await getAvatar(metadata?.Avatar, displayName, true);
}
export async function action({params, request}) {
@@ -107,16 +50,15 @@ export async function action({params, request}) {
if (actionType === 'DeleteApplicant') {
await removeApplicant(applicantId);
return redirect('/profile');
- } else if (actionType === 'DeleteRecord') {
+ }
+ if (actionType === 'DeleteRecord') {
const recordId = formData.get('RecordID');
await removeRecord(recordId);
return redirect(`/profile/${applicantId}`);
- } else if (actionType === 'Refresh') {
+ }
+ if (actionType === 'Refresh') {
const displayName = await getDisplayName(true);
- await getApplicant(applicantId, true);
- await getRecordByApplicant(applicantId, true);
- const metaData = await getMetaData(displayName, true);
- await getAvatar(metaData?.Avatar, displayName, true);
+ await refreshApplicantProfile(applicantId, displayName);
return redirect(`/profile/${applicantId}`);
}
}
@@ -126,68 +68,11 @@ export async function DataPointsAction({params, request}) {
const actionType = formData.get('ActionType');
const applicantId = params.applicantId;
if (actionType === 'Refresh') {
- const displayName = applicantId.split("@")[0];
- await getApplicant(applicantId, true);
- await getRecordByApplicant(applicantId, true);
- const metaData = await getMetaData(displayName, true);
- await getAvatar(metaData?.Avatar, displayName, true);
+ await refreshApplicantProfile(applicantId, applicantId.split("@")[0]);
return redirect(`/datapoints/applicant/${applicantId}`);
}
}
-const ContentCenteredGrid = styled(Grid2)(() => ({
- display: 'flex',
- alignItems: 'center',
-}));
-
-function BaseItemBlock({children, className, checkpointProps, spacing = 0, elevation = 2}) {
- return (
-
-
-
- {children}
-
-
-
- )
-}
-
-function BaseListItem({Icon, primary, secondary}) {
- return (
-
-
- {Icon}
-
- theme.palette.mode === 'dark' ? "#fff" : "#000",
- }}>
- {primary}
-
- }
- secondary={
-
- {typeof secondary === 'string' ?
-
- {secondary}
- :
- Object.entries(secondary).map(([key, value]) => {
- return (
-
- {`${key}：${value}`}
-
- )
- })
- }
-
- }
- />
-
-
- )
-}
-
export function ProfileApplicantPage({editable = false}) {
const {avatarUrl, contact, applicant, records} = useLoaderData();
return (
@@ -203,587 +88,13 @@ export function ProfileApplicantPage({editable = false}) {
>
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
-
-function GenderIcon({gender}) {
- switch (gender) {
- case 'Male':
- return ;
- case 'Female':
- return ;
- case 'Others':
- return ;
- default:
- return null;
- }
-}
-
-function ControlButtonGroup({applicantId, records, postLength, editable}) {
- const [open, setOpen] = useState(false);
- const handleOpen = () => {
- setOpen(true);
- }
- const handleClose = () => {
- setOpen(false);
- }
- const [confirmText, setConfirmText] = useState('');
- return (
- <>
-
- {editable ? <>
-
-
-
-
-
-
-
-
-
-
- : null}
-
-
- )
-
-}
-
-function BasicInfoBlock({avatarUrl, contact, applicant, records, editable}) {
- const [isAuth, setIsAuth] = useState(false);
- useEffect(() => {
- isAuthApplicant(applicant.ApplicantID).then(setIsAuth);
- }, [applicant.ApplicantID]);
-
- async function onDownload(postId) {
- const file_type = postId.startsWith('CV') ? "CV" : "SoP";
- const link = document.createElement("a");
- link.download = `${applicant.ApplicantID}_${file_type}.pdf`;
- link.href = await getFileContent(postId);
- link.click();
- }
-
- return (
-
-
-
- }
- anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
- overlap='circular'
- color="primary"
- >
-
-
-
-
-
-
- {applicant.ApplicantID.replace("@", " ")}
-
-
-
-
- {`${applicant.Major} ${currentDegreeMapping[applicant.CurrentDegree]}`}
-
-
-
-
-
-
-
- 联系方式:
- {Object.entries(contact).length ?
-
- {Object.entries(contact).map(([key, value]) => {
- const Icon = contactIcons[key];
- if (value === "") return null;
- return (
-
- {
- await navigator.clipboard.writeText(value);
- alert(`已复制${value}到剪贴板！`);
- }}
- >
- {Icon}
-
-
- )
- })}
- : "暂无"}
-
-
- 申请材料:
-
-
-
-
-
-
- 最终去向:
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-function GradeBar({ranking, GPA}) {
- const valuetext = (value) => {
- return SliderValueRankStringMapping[value];
- }
- const sliderValue = rankPercentSliderValueMapping[ranking];
- const marks = [
- {
- value: 2,
- label: '1.7',
- }, {
- value: sliderValue,
- label: GPA,
- },
- ]
- if (sliderValue !== 95) {
- marks.push({
- value: 98,
- label: '4.0',
- })
- }
- return (
-
-
- 申请时最高学位GPA以及对应学院/专业排名：
-
-
-
-
-
- )
-}
-
-function GREBlock({GRE}) {
- if (!GRE) {
- GRE = {
- "Total": "-",
- "V": "-",
- "Q": "-",
- "AW": "-"
- }
- }
- return (
-
-
- GRE
- {GRE.Total}
-
- {Object.entries(GRE).map(([key, value]) => {
- if (key === 'Total') {
- return null;
- }
- return (
-
- {EnglishExamMapping["GRE"][key]}
- {value}
-
- )
- })}
-
-
-
- )
-}
-
-function EnglishExamBlock({EnglishProficiency}) {
- if (!EnglishProficiency || Object.keys(EnglishProficiency).length === 0) {
- EnglishProficiency = {
- "语言成绩": {
- "Total": "-",
- "S": "-",
- "R": "-",
- "L": "-",
- "W": "-"
- }
- }
- }
- return (
- <>
- {Object.entries(EnglishProficiency).map(([examType, grade]) => {
- return (
-
-
- {examType}
- {grade.Total}
-
- {Object.entries(grade).map(([key, value]) => {
- if (key === 'Total') {
- return null;
- }
- return (
-
- {EnglishExamMapping[examType][key]}
- {value}
-
- )
- })}
-
- )
- })}
-
- )
-
-}
-
-function ExchangeBlock({Exchanges}) {
- if (!Exchanges || Exchanges.length === 0) {
- Exchanges = [
- {
- "University": "暂无",
- "Duration": "暂无",
- "Detail": "暂无"
- }
- ]
- }
- return (
-
-
- 交换经历
-
-
- {Exchanges.map((exchange, index) => {
- return (
-
- }
- primary={exchangeUnivFullNameMapping[exchange.University] ?? "暂无"}
- secondary={{
- "交换时长": exchangeDurationMapping[exchange.Duration] ?? "暂无",
- "具体描述": exchange.Detail === '' ? '暂无' : exchange.Detail
- }}
- />
- {index !== Exchanges.length - 1 ? : null}
-
- )
- })}
-
-
- )
-}
-
-function ResearchBlock({Researches}) {
- return (
-
-
- 科研经历
- {Researches.Focus}
-
-
- }
- primary={`国内${Researches.Domestic.Num}段研究经历`}
- secondary={Researches.Domestic.Detail === '' ? '具体描述：暂无' : Researches.Domestic.Detail}
- />
-
- }
- primary={`国外${Researches.International.Num}段研究经历`}
- secondary={Researches.International.Detail === '' ? '具体描述：暂无' : Researches.International.Detail}
- />
-
-
- )
-}
-
-function InternshipBlock({Internships}) {
- return (
-
-
- 实习经历
-
-
- }
- primary={`国内${Internships.Domestic.Num}段实习经历`}
- secondary={Internships.Domestic.Detail === '' ? '具体描述：暂无' : Internships.Domestic.Detail}
- />
-
- }
- primary={`国外${Internships.International.Num}段实习经历`}
- secondary={Internships.International.Detail === '' ? '具体描述：暂无' : Internships.International.Detail}
- />
-
-
- )
-}
-
-function PublicationBlock({Publications}) {
- if (!Publications) {
- Publications = [
- {
- "Type": "暂无",
- "Name": "暂无",
- "AuthorOrder": "暂无",
- "Status": "暂无",
- "Detail": "暂无"
- }
- ]
- }
- return (
-
-
- 发表论文
-
-
- {Publications.map((publication, index) => {
- return (
-
- }
- primary={`${publication.Name} ${publicationTypeMapping[publication.Type] ?? ""}`}
- secondary={{
- "作者顺序": authorOrderMapping[publication.AuthorOrder] ?? "暂无",
- "状态": publicationStatusMapping[publication.Status] ?? "暂无",
- "具体描述": publication.Detail === '' ? '暂无' : publication.Detail
- }}
- />
- {index !== Publications.length - 1 ? : null}
-
- )
- })}
-
-
- )
-}
-
-function RecommendationBlock({Recommendations}) {
- if (!Recommendations) {
- Recommendations = [
- {
- "Type": ["暂无"],
- "Detail": "暂无"
- }
- ]
- }
- return (
-
-
- 推荐信
-
-
- {Recommendations.map((recommendation, index) => {
- let primary = recommendation.Type.map((type) => recommendationTypeMapping[type]).join('+');
- primary = primary === '' ? '暂无' : primary;
- return (
-
- }
- primary={primary}
- secondary={recommendation.Detail === '' ? '具体描述：暂无' : recommendation.Detail}
- />
- {index !== Recommendations.length - 1 ? : null}
-
- )
- })}
-
-
- )
-}
-
-function CompetitionBlock({Competitions}) {
- if (!Competitions) {
- Competitions = "具体描述：暂无";
- }
- return (
-
-
- 竞赛
-
-
- }
- primary="竞赛经历"
- secondary={Competitions === '' ? '具体描述：暂无' : Competitions}
- />
-
-
- )
-}
-
-function RecordBlock({Records, ApplicantID, editable}) {
- const [open, setOpen] = useState(false);
- const [deleteRecordID, setDeleteRecordID] = useState('');
- const handleOpen = (recordID) => {
- setOpen(true);
- setDeleteRecordID(recordID);
- }
- const handleClose = () => {
- setOpen(false);
- }
- const navigate = useNavigate();
-
- return (
-
-
- 申请记录
- {editable ?
-
- : null}
-
- {Object.values(Records).map((record, index) => {
- return (
-
-
- }
- primary={
-
- {record.ProgramID}
- {
- editable ?
-
-
-
-
-
-
-
- {
- handleOpen(record.RecordID)
- }} color='error'>
-
-
-
- : null
- }
-
- }
- secondary={{
- "申请季": record.ProgramYear + record.Semester,
- "提交时间": record.TimeLine?.Submit?.split('T')[0] ?? "暂无",
- "面试时间": record.TimeLine?.Interview?.split('T')[0] ?? '暂无',
- "通知时间": record.TimeLine?.Decision?.split('T')[0] ?? '暂无',
- "补充说明": record.Detail === '' ? '暂无' : record.Detail
- }}
- />
-
-
- )
- })}
-
-
- )
-}
-
-
-
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantRecords.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantRecords.jsx
new file mode 100644
index 00000000..a726a2f6
--- /dev/null
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantRecords.jsx
@@ -0,0 +1,121 @@
+import {useState} from "react";
+import {
+ Box,
+ Button,
+ ButtonGroup,
+ Card,
+ Chip,
+ Dialog,
+ DialogActions,
+ DialogTitle,
+ IconButton,
+ Input,
+ Tooltip
+} from "@mui/material";
+import {Add, Delete, Edit} from "@mui/icons-material";
+import Grid2 from "@mui/material/Grid";
+import {Form, Link, useNavigate} from "react-router-dom";
+import {RecordStatusPalette} from "../../../Data/Schemas";
+import {BoldTypography} from "../../common";
+import {BaseItemBlock, BaseListItem, ContentCenteredGrid} from "./ProfileApplicantShared";
+
+export function RecordBlock({records = {}, applicantId, editable}) {
+ const [open, setOpen] = useState(false);
+ const [deleteRecordId, setDeleteRecordId] = useState('');
+ const navigate = useNavigate();
+
+ function handleOpen(recordId) {
+ setOpen(true);
+ setDeleteRecordId(recordId);
+ }
+
+ return (
+
+
+ 申请记录
+ {editable ?
+
+ : null}
+
+ {Object.values(records).map((record) => {
+ return (
+
+
+ }
+ primary={
+
+ {record.ProgramID}
+ {editable ?
+
+
+
+
+
+
+
+ handleOpen(record.RecordID)} color='error'>
+
+
+
+ : null}
+
+ }
+ secondary={{
+ "申请季": `${record.ProgramYear ?? ""}${record.Semester ?? ""}`,
+ "提交时间": record.TimeLine?.Submit?.split('T')[0] ?? "暂无",
+ "面试时间": record.TimeLine?.Interview?.split('T')[0] ?? '暂无',
+ "通知时间": record.TimeLine?.Decision?.split('T')[0] ?? '暂无',
+ "补充说明": record.Detail || '暂无'
+ }}
+ />
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantSections.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantSections.jsx
new file mode 100644
index 00000000..09a7e109
--- /dev/null
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantSections.jsx
@@ -0,0 +1,184 @@
+import {Fragment} from "react";
+import {Divider, List, Typography} from "@mui/material";
+import ArticleIcon from '@mui/icons-material/Article';
+import BiotechIcon from '@mui/icons-material/Biotech';
+import EmailIcon from '@mui/icons-material/Email';
+import SchoolIcon from '@mui/icons-material/School';
+import ShutterSpeedIcon from '@mui/icons-material/ShutterSpeed';
+import WorkIcon from '@mui/icons-material/Work';
+import {
+ authorOrderMapping,
+ exchangeDurationMapping,
+ exchangeUnivFullNameMapping,
+ publicationStatusMapping,
+ publicationTypeMapping,
+ recommendationTypeMapping
+} from "../../../Data/Schemas";
+import {BoldTypography} from "../../common";
+import {BaseItemBlock, BaseListItem, ContentCenteredGrid} from "./ProfileApplicantShared";
+
+export function ExchangeBlock({exchanges}) {
+ const displayExchanges = exchanges?.length > 0 ? exchanges : [{
+ "University": "暂无",
+ "Duration": "暂无",
+ "Detail": "暂无"
+ }];
+ return (
+
+
+ 交换经历
+
+
+ {displayExchanges.map((exchange, index) => {
+ return (
+
+ }
+ primary={exchangeUnivFullNameMapping[exchange.University] ?? "暂无"}
+ secondary={{
+ "交换时长": exchangeDurationMapping[exchange.Duration] ?? "暂无",
+ "具体描述": exchange.Detail || '暂无'
+ }}
+ />
+ {index !== displayExchanges.length - 1 ? : null}
+
+ )
+ })}
+
+
+ )
+}
+
+export function ResearchBlock({research}) {
+ const domestic = research?.Domestic ?? {};
+ const international = research?.International ?? {};
+ return (
+
+
+ 科研经历
+ {research?.Focus || "暂无"}
+
+
+ }
+ primary={`国内${domestic.Num ?? 0}段研究经历`}
+ secondary={domestic.Detail || '具体描述：暂无'}
+ />
+
+ }
+ primary={`国外${international.Num ?? 0}段研究经历`}
+ secondary={international.Detail || '具体描述：暂无'}
+ />
+
+
+ )
+}
+
+export function InternshipBlock({internships}) {
+ const domestic = internships?.Domestic ?? {};
+ const international = internships?.International ?? {};
+ return (
+
+
+ 实习经历
+
+
+ }
+ primary={`国内${domestic.Num ?? 0}段实习经历`}
+ secondary={domestic.Detail || '具体描述：暂无'}
+ />
+
+ }
+ primary={`国外${international.Num ?? 0}段实习经历`}
+ secondary={international.Detail || '具体描述：暂无'}
+ />
+
+
+ )
+}
+
+export function PublicationBlock({publications}) {
+ const displayPublications = publications?.length > 0 ? publications : [{
+ "Type": "暂无",
+ "Name": "暂无",
+ "AuthorOrder": "暂无",
+ "Status": "暂无",
+ "Detail": "暂无"
+ }];
+ return (
+
+
+ 发表论文
+
+
+ {displayPublications.map((publication, index) => {
+ const publicationType = publicationTypeMapping[publication.Type] ?? "";
+ return (
+
+ }
+ primary={`${publication.Name ?? "暂无"} ${publicationType}`.trim()}
+ secondary={{
+ "作者顺序": authorOrderMapping[publication.AuthorOrder] ?? "暂无",
+ "状态": publicationStatusMapping[publication.Status] ?? "暂无",
+ "具体描述": publication.Detail || '暂无'
+ }}
+ />
+ {index !== displayPublications.length - 1 ? : null}
+
+ )
+ })}
+
+
+ )
+}
+
+export function RecommendationBlock({recommendations}) {
+ const displayRecommendations = recommendations?.length > 0 ? recommendations : [{
+ "Type": ["暂无"],
+ "Detail": "暂无"
+ }];
+ return (
+
+
+ 推荐信
+
+
+ {displayRecommendations.map((recommendation, index) => {
+ const types = Array.isArray(recommendation.Type) ? recommendation.Type : [];
+ const primary = types.map((type) => recommendationTypeMapping[type] ?? type).join('+') || '暂无';
+ return (
+
+ }
+ primary={primary}
+ secondary={recommendation.Detail || '具体描述：暂无'}
+ />
+ {index !== displayRecommendations.length - 1 ? : null}
+
+ )
+ })}
+
+
+ )
+}
+
+export function CompetitionBlock({competition}) {
+ return (
+
+
+ 竞赛
+
+
+ }
+ primary="竞赛经历"
+ secondary={competition || '具体描述：暂无'}
+ />
+
+
+ )
+}
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantShared.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantShared.jsx
new file mode 100644
index 00000000..79dacb58
--- /dev/null
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantShared.jsx
@@ -0,0 +1,55 @@
+import {Box, ListItem, ListItemIcon, ListItemText, Paper, styled, Typography} from "@mui/material";
+import Grid2 from "@mui/material/Grid";
+import {BoldTypography} from "../../common";
+
+export const ContentCenteredGrid = styled(Grid2)(() => ({
+ display: 'flex',
+ alignItems: 'center',
+}));
+
+export function BaseItemBlock({children, className, checkpointProps, spacing = 0, elevation = 2}) {
+ return (
+
+
+
+ {children}
+
+
+
+ )
+}
+
+export function BaseListItem({Icon, primary, secondary}) {
+ return (
+
+
+ {Icon}
+
+ theme.palette.mode === 'dark' ? "#fff" : "#000",
+ }}>
+ {primary}
+
+ }
+ secondary={
+
+ {typeof secondary === 'string' ?
+
+ {secondary}
+ :
+ Object.entries(secondary ?? {}).map(([key, value]) => {
+ return (
+
+ {`${key}：${value}`}
+
+ )
+ })
+ }
+
+ }
+ />
+
+ )
+}
diff --git a/src/Components/Profile/ProfileSideBar/ProfileSideBar.jsx b/src/Components/Profile/ProfileSideBar/ProfileSideBar.jsx
index aaa3ac95..ad8740d0 100644
--- a/src/Components/Profile/ProfileSideBar/ProfileSideBar.jsx
+++ b/src/Components/Profile/ProfileSideBar/ProfileSideBar.jsx
@@ -23,27 +23,25 @@ import "./ProfileSideBar.css";
import {Form, Link} from "react-router-dom";
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
-import {ConnectWithoutContact, Edit, Refresh, HomeRounded, LinkedIn, Link as LinkIcon, Mail} from "@mui/icons-material";
+import {ConnectWithoutContact, Edit, HomeRounded, Link as LinkIcon, LinkedIn, Mail, Refresh} from "@mui/icons-material";
import {blue, grey} from "@mui/material/colors";
import {CollapseSideBar} from "../../common";
-import React, {useEffect, useState} from "react";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import React, {useRef, useState} from "react";
+import Grid2 from "@mui/material/Grid";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faQq, faWeixin} from "@fortawesome/free-brands-svg-icons";
export function ProfileSideBar({loaderData}) {
- const applicants = loaderData.metaData.ApplicantIDs;
+ const applicants = loaderData.metadata.ApplicantIDs;
const avatar = loaderData.avatarUrl;
const displayName = loaderData.displayName;
const user = loaderData.user;
- const userContact = loaderData.metaData.Contact;
- const [anonymous, setAnonymous] = useState(displayName !== user);
+ const userContact = loaderData.metadata.Contact ?? {};
+ const avatarFormRef = useRef(null);
+ const anonymous = displayName !== user;
const [anonymousOpen, setAnonymousOpen] = useState(false);
const [editContactOpen, setEditContactOpen] = useState(false);
const [contact, setContact] = useState(userContact);
- useEffect(() => {
- setAnonymous(displayName !== user);
- }, [displayName, user])
return (
+
- )
+ );
}
function ContactField({field, label, icon, contact, setContact}) {
return (
<>
-
+
{icon}
-
+
{
- setContact(() => {
+ setContact((currentContact) => {
if (e.target.value.length > 0) {
- return {...contact, [field]: e.target.value};
- } else {
- const newContact = {...contact};
- delete newContact[field];
- return newContact;
+ return {...currentContact, [field]: e.target.value};
}
+ const newContact = {...currentContact};
+ delete newContact[field];
+ return newContact;
});
}}
/>
);
-}
\ No newline at end of file
+}
diff --git a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
index a1cd2e82..b3b2762b 100644
--- a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
+++ b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
@@ -1,11 +1,11 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import './ProgramContent.css'
-import {Form, Link, useLoaderData, useNavigate, redirect, Outlet} from "react-router-dom";
+import {Form, Link, Outlet, redirect, useLoaderData, useNavigate} from "react-router-dom";
import {getProgramContent, getProgramDesc} from "../../../Data/ProgramData";
-import {getMetaData, collectProgram, uncollectProgram} from '../../../Data/UserData';
+import {collectProgram, getMetadata, uncollectProgram} from '../../../Data/UserData';
import {Box, IconButton, Paper, Tooltip, Typography} from "@mui/material";
-import {AddRounded, EditRounded, RefreshRounded, CloseRounded} from "@mui/icons-material";
+import {AddRounded, CloseRounded, EditRounded, RefreshRounded} from "@mui/icons-material";
import remarkGfm from 'remark-gfm'
import {getRecordByProgram} from "../../../Data/RecordData";
import {DataGrid} from "../../DataPoints/DataPoints";
@@ -14,42 +14,37 @@ import StarButton from "./StarButton"
export async function loader({params}) {
const programId = decodeURIComponent(params.programId);
- let records = await getRecordByProgram(programId);
- records = Object.values(records);
- try {
- const programContent = await getProgramContent(programId);
- const metaData = await getMetaData()
- return {programContent, records, metaData};
- } catch (e) {
- throw e;
- }
+ const records = Object.values(await getRecordByProgram(programId));
+ const programContent = await getProgramContent(programId);
+ const metadata = await getMetadata()
+ return {programContent, records, metadata};
}
export async function action({params, request}) {
const formData = await request.formData();
- const ActionType = formData.get("ActionType");
- const programId = params.programId;
- if (ActionType === "Refresh") {
+ const actionType = formData.get("ActionType");
+ const programId = decodeURIComponent(params.programId);
+ if (actionType === "Refresh") {
await getProgramDesc(programId, true);
- return await getRecordByProgram(programId, true);
+ return getRecordByProgram(programId, true);
}
- if (ActionType === "Star") {
+ if (actionType === "Star") {
await collectProgram(programId);
- return redirect(window.location.href);
+ return redirect(request.url);
}
- if (ActionType === "UnStar") {
+ if (actionType === "UnStar") {
await uncollectProgram(programId);
- return redirect(window.location.href);
+ return redirect(request.url);
}
}
-function ProgramContent({editable = true, inDialog=false}) {
- let {programContent, records, metaData} = useLoaderData();
+function ProgramContent({editable = true, inDialog = false}) {
+ const {programContent, records, metadata} = useLoaderData();
const navigate = useNavigate();
- records = records.map(record => {
- record['Season'] = record.ProgramYear + " " + record.Semester;
- return record;
- });
+ const recordsWithSeason = records.map(record => ({
+ ...record,
+ Season: record.ProgramYear + " " + record.Semester,
+ }));
return (
<>
@@ -58,11 +53,11 @@ function ProgramContent({editable = true, inDialog=false}) {
{editable &&
-
-
-
+
+
+
}
-
+
-
-
@@ -95,16 +90,16 @@ function ProgramContent({editable = true, inDialog=false}) {
{programContent.description}
-
- {editable &&
-
- {
+const StarButton = ({programID, metadata}) => {
const theme = useTheme()
const darkMode = theme.palette.mode === "dark"
- const starred = metaData.ProgramCollection && metaData.ProgramCollection.includes(programID)
+ const starred = metadata.ProgramCollection && metadata.ProgramCollection.includes(programID)
const color = darkMode ? "#ff9f0a" : "#ff9500"
- return
diff --git a/src/Components/ProgramPage/ProgramPage.jsx b/src/Components/ProgramPage/ProgramPage.jsx
index 9ed80364..c34b2377 100644
--- a/src/Components/ProgramPage/ProgramPage.jsx
+++ b/src/Components/ProgramPage/ProgramPage.jsx
@@ -1,14 +1,10 @@
import SideBar from "./SideBar/SideBar";
-import {Outlet, useLoaderData} from "react-router-dom";
+import {Outlet, redirect, useLoaderData} from "react-router-dom";
import {getPrograms} from "../../Data/ProgramData";
import './ProgramPage.css';
import {Paper, useTheme} from "@mui/material";
import {grey} from "@mui/material/colors";
-import ReactMarkdown from "react-markdown";
-import MDPath from "../../Data/MarkDown/ProgramIndex.md";
-import {useEffect, useState} from "react";
-import "./ProgramPage.css";
-import {loadMarkDown} from "../../Data/Common";
+import {collectProgram, getMetadata, uncollectProgram} from "../../Data/UserData";
export async function loader({request}) {
const url = new URL(request.url);
@@ -16,12 +12,24 @@ export async function loader({request}) {
const d = url.searchParams.get('d');
const m = url.searchParams.get('m');
const r = url.searchParams.get('r');
- const programs = await getPrograms(false, {u: u, d: d, m: m, r: r});
- return {programs, u, d, m, r};
+ const programs = await getPrograms(false, {u, d, m, r});
+ const metadata = await getMetadata()
+ return {programs, u, d, m, r, metadata};
}
-export async function action() {
- return await getPrograms(true);
+export async function action({request}) {
+ const formData = await request.formData();
+ const actionType = formData.get("ActionType");
+ const programId = formData.get("ProgramID");
+ if (actionType === "Star") {
+ await collectProgram(programId);
+ return redirect(request.url);
+ }
+ if (actionType === "UnStar") {
+ await uncollectProgram(programId);
+ return redirect(request.url);
+ }
+ return getPrograms(true);
}
export default function ProgramPage() {
@@ -41,22 +49,3 @@ export default function ProgramPage() {
)
}
-
-export async function ProgramIndexLoader() {
- const content = await loadMarkDown(MDPath);
- return {content};
-}
-
-export function ProgramIndex() {
- const [content, setContent] = useState("");
- useEffect(() => {
- fetch(MDPath)
- .then((response) => response.text())
- .then((text) => setContent(text));
- }, []);
- return (
-
- {content}
-
- )
-}
\ No newline at end of file
diff --git a/src/Components/ProgramPage/SideBar/SearchBar/SearchBar.jsx b/src/Components/ProgramPage/SideBar/SearchBar/SearchBar.jsx
index b6001e22..cefcfd35 100644
--- a/src/Components/ProgramPage/SideBar/SearchBar/SearchBar.jsx
+++ b/src/Components/ProgramPage/SideBar/SearchBar/SearchBar.jsx
@@ -1,57 +1,41 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
import "./SearchBar.css"
import {useSearchParams} from "react-router-dom";
import Select from "@mui/material/Select";
-import {
- Box,
- Checkbox,
- Divider, FormControl,
- InputBase,
- InputLabel,
- ListItemText,
- MenuItem,
- OutlinedInput, Paper, useTheme
-} from "@mui/material";
+import {Box, Checkbox, Divider, FormControl, InputBase, InputLabel, ListItemText, MenuItem, OutlinedInput, Paper, useTheme} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
-import {majorList, degreeList, regionList, regionFlagMapping} from "../../../../Data/Schemas";
+import {degreeList, majorList, regionFlagMapping, regionList} from "../../../../Data/Schemas";
import {grey} from "@mui/material/colors";
export default function SearchBar({query, pageName}) {
+ return ;
+}
+
+function SearchBarForm({query, pageName}) {
const theme = useTheme();
const darkMode = theme.palette.mode === 'dark';
const [searchParams, setSearchParams] = useSearchParams();
- const [timeoutId, setTimeoutId] = useState(null);
- useEffect(() => {
- if (pageName === 'program' || pageName === 'favories') {
- document.getElementById('u').value = query.u;
- document.getElementById('d').value = query.d?.split(',');
- document.getElementById('m').value = query.m?.split(',');
- document.getElementById('r').value = query.r?.split(',');
- } else if (pageName === 'post') {
- document.getElementById('searchStr').value = query.searchStr;
- }
- }, [pageName, query, searchParams, setSearchParams]);
+ const timeoutRef = useRef(null);
+ const [filters, setFilters] = useState(() => createFilters(query));
+
+ useEffect(() => () => clearTimeout(timeoutRef.current), []);
const handleFilterChange = (e) => {
const newSearchParams = new URLSearchParams(searchParams);
+ const name = e.target.name;
const value = e.target.value;
+ setFilters((currentFilters) => ({...currentFilters, [name]: value}));
if (value === '' || value.length === 0) {
- newSearchParams.delete(e.target.name);
+ newSearchParams.delete(name);
} else {
- newSearchParams.set(e.target.name, value);
+ newSearchParams.set(name, value);
}
- if (timeoutId) clearTimeout(timeoutId);
- const id = setTimeout(() => {
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => {
setSearchParams(newSearchParams, {replace: true});
}, 500);
- // setSearchParams(newSearchParams, {replace: true});
- setTimeoutId(id);
};
- const defaultDegree = degreeList.filter(x => query.d?.split(',').includes(x));
- const defaultMajor = majorList.filter(x => query.m?.split(',').includes(x));
- const defaultRegion = regionList.filter(x => query.r?.split(',').includes(x));
-
return (
: }
@@ -93,7 +77,7 @@ export default function SearchBar({query, pageName}) {
label='Select Degree'
id='d'
name='d'
- value={defaultDegree}
+ value={filters.d}
handleFilterChange={handleFilterChange}
options={degreeList}
OptionItem={CheckBoxOptionItem}
@@ -102,7 +86,7 @@ export default function SearchBar({query, pageName}) {
label='Select Major'
id='m'
name='m'
- value={defaultMajor}
+ value={filters.m}
handleFilterChange={handleFilterChange}
options={majorList}
OptionItem={CheckBoxOptionItem}
@@ -111,7 +95,7 @@ export default function SearchBar({query, pageName}) {
label='Select Region'
id='r'
name='r'
- value={defaultRegion}
+ value={filters.r}
handleFilterChange={handleFilterChange}
options={regionList}
OptionItem={FlagOptionContent}
@@ -121,6 +105,20 @@ export default function SearchBar({query, pageName}) {
)
}
+function createFilters(query) {
+ return {
+ u: query.u ?? '',
+ d: splitFilter(query.d),
+ m: splitFilter(query.m),
+ r: splitFilter(query.r),
+ searchStr: query.searchStr ?? '',
+ };
+}
+
+function splitFilter(value) {
+ return typeof value === 'string' ? value.split(',').filter(Boolean) : value ?? [];
+}
+
function Filter({label, id, name, value, handleFilterChange, options, OptionItem: OptionContent}) {
return (
{options.map((opt) => (
)
@@ -179,4 +177,4 @@ function FlagOptionContent({optionValue}) {
}}
/>
)
-}
\ No newline at end of file
+}
diff --git a/src/Components/ProgramPage/SideBar/SideBar.jsx b/src/Components/ProgramPage/SideBar/SideBar.jsx
index 2897dc41..8c0c8b24 100644
--- a/src/Components/ProgramPage/SideBar/SideBar.jsx
+++ b/src/Components/ProgramPage/SideBar/SideBar.jsx
@@ -3,27 +3,19 @@ import {Form, Link} from "react-router-dom";
import "./SideBar.css";
import SearchBar from "./SearchBar/SearchBar";
import {univAbbrFullNameMapping} from "../../../Data/Common";
-import {
- Box,
- Button,
- Collapse,
- Divider,
- List,
- ListItemButton,
- ListItemText,
- Paper, Tooltip, Typography,
- useTheme
-} from "@mui/material";
+import {Box, Button, Collapse, Divider, List, ListItemButton, ListItemText, Paper, Tooltip, Typography, useTheme} from "@mui/material";
import {Add, ExpandMore, NavigateNext, Refresh} from "@mui/icons-material";
import {blue, grey} from "@mui/material/colors";
import {CollapseSideBar} from "../../common";
import {regionFlagMapping} from "../../../Data/Schemas";
-import Grid2 from "@mui/material/Unstable_Grid2";
+import StarButton from "../ProgramContent/StarButton";
+
+const MetadataContext = React.createContext();
export default function SideBar({loaderData}) {
const univProgramList = loaderData.programs;
return (
- <>
+
-
-
+
+
-
-
+
+
-
-
+
+
-
- )
+
+ );
}
export function UnivProgramList({univProgramList, ButtonComponent = ProgramButton}) {
@@ -120,7 +120,7 @@ export function ProgramList({univProgram, selectProgram, setSelectProgram, Butto
{isFolded ? : }
+
{univName}
{flags}
@@ -154,6 +154,7 @@ export function ProgramList({univProgram, selectProgram, setSelectProgram, Butto
export function ProgramButton({program, selectProgram, setSelectProgram}) {
const theme = useTheme();
const darkMode = theme.palette.mode === 'dark';
+ const metadata = React.useContext(MetadataContext);
return (
+
)
}
@@ -187,4 +189,4 @@ export function getQuery(loaderData) {
m: loaderData.m,
r: loaderData.r
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/TopBar/NavBar/NavBar.jsx b/src/Components/TopBar/NavBar/NavBar.jsx
index 20a12201..31eb3e65 100644
--- a/src/Components/TopBar/NavBar/NavBar.jsx
+++ b/src/Components/TopBar/NavBar/NavBar.jsx
@@ -1,7 +1,7 @@
import React from "react";
import "./NavBar.css";
-import {useLocation, Link} from "react-router-dom";
-import {Tabs, Tab} from "@mui/material";
+import {Link, useLocation} from "react-router-dom";
+import {Tab, Tabs} from "@mui/material";
import {useUser} from "../../../Data/UserData";
function useRouteMatch(patterns) {
@@ -40,9 +40,6 @@ export default function NavBar() {
}, {
name: "常见问题",
path: "/FAQ",
- }, {
- name: "关于我们",
- path: "/about-us",
}
]
const routeMatch = useRouteMatch(navItems.map((item) => item.path));
@@ -59,14 +56,13 @@ export default function NavBar() {
allowScrollButtonsMobile
role="navigation"
>
- {navItems.map((item, index): React.ReactNode => (
+ {navItems.map((item, index) => (
))}
diff --git a/src/Components/TopBar/StatusBlock/StatusBlock.jsx b/src/Components/TopBar/StatusBlock/StatusBlock.jsx
index 1bae5572..405e14af 100644
--- a/src/Components/TopBar/StatusBlock/StatusBlock.jsx
+++ b/src/Components/TopBar/StatusBlock/StatusBlock.jsx
@@ -1,25 +1,25 @@
import {Form, Link, useLoaderData, useNavigate} from "react-router-dom";
import "./StatusBlock.css";
import React, {useContext, useEffect} from "react";
-import localforage from "localforage";
-import {getAvatar, getDisplayName, getMetaData, logout, useUser} from "../../../Data/UserData";
+import {getAvatar, getDisplayName, getMetadata, logout, useUser} from "../../../Data/UserData";
import {Avatar, Box, IconButton, ListItemIcon, Menu, MenuItem, Tooltip, Typography, useTheme} from "@mui/material";
-import {AccountBoxRounded, StarRounded, LockResetRounded, ExitToAppRounded} from "@mui/icons-material";
+import {AccountBoxRounded, ExitToAppRounded, LockResetRounded, StarRounded} from "@mui/icons-material";
import {blue} from "@mui/material/colors";
import {ThemeContext} from "../../../index";
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import {emptyCache} from "../../../Data/Common";
+import {startCoreCacheSync} from "../../../Data/CoreCacheSync";
export async function loader() {
const displayName = await getDisplayName();
- const metaData = await getMetaData(displayName);
- const avatarUrl = await getAvatar(metaData?.Avatar, displayName);
+ const metadata = await getMetadata(displayName);
+ const avatarUrl = await getAvatar(metadata?.Avatar, displayName);
return {displayName, avatarUrl};
}
export async function action() {
- return await logout();
+ return logout();
}
export function StatusBlock() {
@@ -47,7 +47,12 @@ export function StatusBlock() {
}
}, [user, navigate]);
- localforage.setItem('theme', theme.palette.mode).then()
+ useEffect(() => {
+ if (!user) {
+ return undefined;
+ }
+ return startCoreCacheSync();
+ }, [user]);
return (
@@ -119,4 +124,4 @@ export function StatusBlock() {
: null}
);
-}
\ No newline at end of file
+}
diff --git a/src/Components/TopBar/TopBar.jsx b/src/Components/TopBar/TopBar.jsx
index 20ab45ca..4b4a5efe 100644
--- a/src/Components/TopBar/TopBar.jsx
+++ b/src/Components/TopBar/TopBar.jsx
@@ -5,10 +5,10 @@ import NavBar from "./NavBar/NavBar";
import {useNavigate} from "react-router-dom";
import {AppBar, SvgIcon, Toolbar, useTheme} from "@mui/material";
import {grey} from "@mui/material/colors";
-import {ReactComponent as LightIcon} from '../icons/header.svg';
-import {ReactComponent as DarkIcon} from '../icons/header-dark.svg';
-import {ReactComponent as LightShortIcon} from '../icons/light.svg';
-import {ReactComponent as DarkShortIcon} from '../icons/dark.svg';
+import LightIcon from '../icons/header.svg?react';
+import DarkIcon from '../icons/header-dark.svg?react';
+import LightShortIcon from '../icons/light.svg?react';
+import DarkShortIcon from '../icons/dark.svg?react';
import {useUser} from "../../Data/UserData";
import {useSmallPage} from "../common";
@@ -54,4 +54,4 @@ function TopBar() {
);
}
-export default TopBar;
\ No newline at end of file
+export default TopBar;
diff --git a/src/Components/WorldMap/display.js b/src/Components/WorldMap/display.js
index 6718f21a..da24a2cd 100644
--- a/src/Components/WorldMap/display.js
+++ b/src/Components/WorldMap/display.js
@@ -17,10 +17,11 @@ let proportion = null;
let flights = [];
let lastTimestamp = Date.now();
-let img = new Image();
+const img = new Image();
img.src = String(plane_svg);
let nextGenTime = Date.now();
let force = false;
+let forceTimeoutId = null;
// Settings
@@ -44,8 +45,6 @@ function drawMap(static_container, mode) {
projection = d3.geoNaturalEarth1()
.fitSize([width, height], cachedData)
- // .fitExtent([[-width / 20, 0], [width, height]], cachedData)
- // .center([0, -5])
shanghai_projected = projection(shanghai);
@@ -75,20 +74,20 @@ function cubicBezierLength(p0, cp1, cp2, p, t = 1) {
return 0;
}
const base3 = (t, p1, p2, p3, p4) => {
- let t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
+ const t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
return t * t2 - 3 * p1 + 3 * p2;
};
t = t > 1 ? 1 : t < 0 ? 0 : t;
- let t2 = t / 2;
- let Tvalues = [-.1252, .1252, -.3678, .3678, -.5873, .5873, -.7699, .7699, -.9041, .9041, -.9816, .9816];
- let Cvalues = [0.2491, 0.2491, 0.2335, 0.2335, 0.2032, 0.2032, 0.1601, 0.1601, 0.1069, 0.1069, 0.0472, 0.0472];
+ const t2 = t / 2;
+ const Tvalues = [-.1252, .1252, -.3678, .3678, -.5873, .5873, -.7699, .7699, -.9041, .9041, -.9816, .9816];
+ const Cvalues = [0.2491, 0.2491, 0.2335, 0.2335, 0.2032, 0.2032, 0.1601, 0.1601, 0.1069, 0.1069, 0.0472, 0.0472];
- let n = Tvalues.length;
+ const n = Tvalues.length;
let sum = 0;
for (let i = 0; i < n; i++) {
- let ct = t2 * Tvalues[i] + t2,
+ const ct = t2 * Tvalues[i] + t2,
xbase = base3(ct, p0[0], cp1[0], cp2[0], p[0]),
ybase = base3(ct, p0[1], cp1[1], cp2[1], p[1]),
comb = xbase * xbase + ybase * ybase;
@@ -192,7 +191,7 @@ function genNewFlight() {
return;
}
nextGenTime = lastTimestamp + 2000 + Math.random() * 4000;
- let flight = {};
+ const flight = {};
flight.progress = 0;
const new_flight = UnivList[Math.floor(Math.random() * UnivList.length)];
flight.latitude = new_flight.latitude;
@@ -242,7 +241,7 @@ function darkModeRedraw() {
ctx.beginPath();
ctx.arc(x, y, univ.size, 0, 2 * Math.PI);
- let gradient = ctx.createRadialGradient(x, y, 0, x, y, univ.size);
+ const gradient = ctx.createRadialGradient(x, y, 0, x, y, univ.size);
gradient.addColorStop(1.0, 'rgba(255, 171, 46, 0.00155)');
gradient.addColorStop(0.8, 'rgba(255, 171, 46, 0.12185)');
gradient.addColorStop(0.6, 'rgba(255, 171, 46, 0.35375)');
@@ -269,8 +268,8 @@ function redraw(mode) {
animationId = requestAnimationFrame(redraw.bind(null, mode));
}
-function init_canvas(container) {
- let devicePixelRatio = window.devicePixelRatio || 1;
+function initCanvas(container) {
+ const devicePixelRatio = window.devicePixelRatio || 1;
container.width = width * devicePixelRatio;
container.height = height * devicePixelRatio;
container.style.width = `${width}px`;
@@ -278,39 +277,43 @@ function init_canvas(container) {
container.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
}
-export function init_map(static_container, dynamic_container, with_width, with_height, mode) {
+export function initMap(staticContainer, dynamicContainer, mapWidth, mapHeight, mode) {
if (animationId !== null) {
cancelAnimationFrame(animationId);
}
- canvas = dynamic_container;
- const resizeObserver = new ResizeObserver(async entries => {
- const containerEntry = entries.find(entry => entry.target === canvas);
- if (containerEntry) {
- drawMap(static_container, mode);
- redraw(mode);
- }
- });
- resizeObserver.observe(canvas);
-
- width = with_width;
- height = with_height;
+ canvas = dynamicContainer;
+ width = mapWidth;
+ height = mapHeight;
proportion = width / 1700;
- init_canvas(static_container);
- init_canvas(dynamic_container);
+ initCanvas(staticContainer);
+ initCanvas(dynamicContainer);
ctx = canvas.getContext("2d");
- drawMap(static_container, mode);
+ drawMap(staticContainer, mode);
redraw(mode);
+
+ return () => {
+ if (canvas === dynamicContainer) {
+ cancelAnimationFrame(animationId);
+ clearTimeout(forceTimeoutId);
+ animationId = null;
+ forceTimeoutId = null;
+ force = false;
+ canvas = null;
+ ctx = null;
+ }
+ };
}
export function clickHandler(e) {
- const {x, y} = document.getElementById("dynamicCanvas").getBoundingClientRect();
- const clickX = e.x - x;
- const clickY = e.y - y;
+ const {left, top} = e.currentTarget.getBoundingClientRect();
+ const clickX = e.clientX - left;
+ const clickY = e.clientY - top;
if ((shanghai_projected[0] - clickX) ** 2 + (shanghai_projected[1] - clickY) ** 2 < (10 * proportion) ** 2) {
force = true;
}
- setTimeout(() => {
+ clearTimeout(forceTimeoutId);
+ forceTimeoutId = setTimeout(() => {
force = false
}, 2000);
}
diff --git a/src/Components/common.jsx b/src/Components/common.jsx
index 26fd48cd..0ce7d446 100644
--- a/src/Components/common.jsx
+++ b/src/Components/common.jsx
@@ -1,24 +1,14 @@
import {useNavigation} from "react-router-dom";
import React, {useRef, useState} from "react";
-import {
- Backdrop,
- Box,
- Button,
- CircularProgress, Fab,
- styled,
- SwipeableDrawer, Tooltip,
- Typography,
- useMediaQuery
-} from "@mui/material";
+import {Backdrop, Box, Button, CircularProgress, Fab, styled, SwipeableDrawer, Tooltip, Typography, useMediaQuery} from "@mui/material";
import {ChevronRight} from "@mui/icons-material";
import Draggable from "react-draggable";
-export function LoadingBackdrop() {
+export function LoadingBackdrop({forceOpen = false} = {}) {
const navigation = useNavigation()
- const loading = navigation.state !== 'idle';
- // const loading = navigation.state === 'loading';
+ const loading = forceOpen || navigation.state !== 'idle';
return (
-
+
)
@@ -91,11 +81,11 @@ export function CollapseSideBar({children, sx}) {
export function DraggableFAB({Icon, DragThreshold, ActionType, ButtonClassName, color, onClick, style, tooltipTitle}) {
const nodeRef = useRef(null);
-
+ const buttonRef = useRef(null);
const dragStartPositionXYRef = useRef({x: 0, y: 0});
return (
<>
-
+
{
@@ -107,7 +97,7 @@ export function DraggableFAB({Icon, DragThreshold, ActionType, ButtonClassName,
const wasDragged = Math.abs(data.x - x) > THRESHOLD || Math.abs(data.y - y) > THRESHOLD;
if (!wasDragged) {
event.preventDefault();
- document.querySelector(`.${ButtonClassName}`).click()
+ buttonRef.current?.click();
}
}}
>
@@ -119,6 +109,7 @@ export function DraggableFAB({Icon, DragThreshold, ActionType, ButtonClassName,