95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import { useContext, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
|
import { useStaff } from "@nice/client";
|
|
import {
|
|
CheckCircleFilled,
|
|
CheckCircleOutlined,
|
|
CloseCircleFilled,
|
|
CloseCircleOutlined,
|
|
EditFilled,
|
|
EditTwoTone,
|
|
LoginOutlined,
|
|
} from "@ant-design/icons";
|
|
|
|
export default function CourseOperationBtns() {
|
|
const { id } = useParams();
|
|
const { isAuthenticated, user, hasSomePermissions, hasEveryPermissions } =
|
|
useAuth();
|
|
const navigate = useNavigate();
|
|
const { course, canEdit, userIsLearning } = useContext(CourseDetailContext);
|
|
const { update } = useStaff();
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const toggleLearning = async () => {
|
|
if (!userIsLearning) {
|
|
await update.mutateAsync({
|
|
where: { id: user?.id },
|
|
data: {
|
|
learningPosts: {
|
|
connect: { id: course.id },
|
|
},
|
|
},
|
|
});
|
|
} else {
|
|
await update.mutateAsync({
|
|
where: { id: user?.id },
|
|
data: {
|
|
learningPosts: {
|
|
disconnect: {
|
|
id: course.id,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
{isAuthenticated && (
|
|
<div
|
|
onClick={toggleLearning}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
className={`flex px-1 py-0.5 gap-1 hover:cursor-pointer transition-all ${
|
|
userIsLearning
|
|
? isHovered
|
|
? "text-red-500 border-red-500 rounded-md "
|
|
: "text-green-500 "
|
|
: "text-primary "
|
|
}`}>
|
|
{userIsLearning ? (
|
|
isHovered ? (
|
|
<CloseCircleOutlined />
|
|
) : (
|
|
<CheckCircleOutlined />
|
|
)
|
|
) : (
|
|
<LoginOutlined />
|
|
)}
|
|
<span>
|
|
{userIsLearning
|
|
? isHovered
|
|
? "退出学习"
|
|
: "正在学习"
|
|
: "加入学习"}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{canEdit && (
|
|
<div
|
|
className="flex gap-1 px-1 py-0.5 text-primary hover:cursor-pointer"
|
|
onClick={() => {
|
|
const url = course?.id
|
|
? `/course/${course?.id}/editor`
|
|
: "/course/editor";
|
|
navigate(url);
|
|
}}>
|
|
<EditTwoTone></EditTwoTone>
|
|
{"编辑课程"}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|