1 files changed, 151 insertions, 0 deletions
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
new file mode 100644
index 00000000..e8b32c71
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "http/timeline";
+
+import { pushAlert } from "@/services/alert";
+
+import UserAvatar from "../common/user/UserAvatar";
+import TimelineLine from "./TimelineLine";
+import TimelinePostContentView from "./TimelinePostContentView";
+import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog";
+import PostPropertyChangeDialog from "./PostPropertyChangeDialog";
+
+export interface TimelinePostViewProps {
+  post: HttpTimelinePostInfo;
+  current?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  cardStyle?: React.CSSProperties;
+  onChanged: (post: HttpTimelinePostInfo) => void;
+  onDeleted: () => void;
+}
+
+const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
+  const { post, className, style, cardStyle, onChanged, onDeleted } = props;
+  const current = props.current === true;
+
+  const { t } = useTranslation();
+
+  const [operationMaskVisible, setOperationMaskVisible] =
+    React.useState<boolean>(false);
+  const [dialog, setDialog] = React.useState<
+    "delete" | "changeproperty" | null
+  >(null);
+
+  const cardRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const cardIntersectionObserver = new IntersectionObserver(([e]) => {
+      if (e.intersectionRatio > 0) {
+        if (cardRef.current != null) {
+          cardRef.current.style.animationName = "timeline-post-enter";
+        }
+      }
+    });
+    if (cardRef.current) {
+      cardIntersectionObserver.observe(cardRef.current);
+    }
+
+    return () => {
+      cardIntersectionObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      id={`timeline-post-${post.id}`}
+      className={classnames("timeline-item", current && "current", className)}
+      style={style}
+    >
+      <TimelineLine center="node" current={current} />
+      <div ref={cardRef} className="timeline-item-card" style={cardStyle}>
+        {post.editable ? (
+          <i
+            className="bi-chevron-down text-info icon-button float-end"
+            onClick={(e) => {
+              setOperationMaskVisible(true);
+              e.stopPropagation();
+            }}
+          />
+        ) : null}
+        <div className="timeline-item-header">
+          <span className="me-2">
+            <span>
+              <Link to={"/users/" + props.post.author.username}>
+                <UserAvatar
+                  username={post.author.username}
+                  className="timeline-avatar me-1"
+                />
+              </Link>
+              <small className="text-dark me-2">{post.author.nickname}</small>
+              <small className="text-secondary white-space-no-wrap">
+                {new Date(post.time).toLocaleTimeString()}
+              </small>
+            </span>
+          </span>
+        </div>
+        <div className="timeline-content">
+          <TimelinePostContentView post={post} />
+        </div>
+        {operationMaskVisible ? (
+          <div
+            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-around align-items-center"
+            onClick={() => {
+              setOperationMaskVisible(false);
+            }}
+          >
+            <span
+              className="tl-color-primary"
+              onClick={(e) => {
+                setDialog("changeproperty");
+                e.stopPropagation();
+              }}
+            >
+              {t("changeProperty")}
+            </span>
+            <span
+              className="tl-color-danger"
+              onClick={(e) => {
+                setDialog("delete");
+                e.stopPropagation();
+              }}
+            >
+              {t("delete")}
+            </span>
+          </div>
+        ) : null}
+      </div>
+      {dialog === "delete" ? (
+        <TimelinePostDeleteConfirmDialog
+          onClose={() => {
+            setDialog(null);
+            setOperationMaskVisible(false);
+          }}
+          onConfirm={() => {
+            void getHttpTimelineClient()
+              .deletePost(post.timelineName, post.id)
+              .then(onDeleted, () => {
+                pushAlert({
+                  type: "danger",
+                  message: "timeline.deletePostFailed",
+                });
+              });
+          }}
+        />
+      ) : dialog === "changeproperty" ? (
+        <PostPropertyChangeDialog
+          onClose={() => {
+            setDialog(null);
+            setOperationMaskVisible(false);
+          }}
+          post={post}
+          onSuccess={onChanged}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default TimelinePostView;