...

1 files changed, 95 insertions, 0 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
new file mode 100644
index 00000000..a2ae72cf
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import clsx from "clsx";
+import { Link } from "react-router-dom";
+
+import { HttpTimelinePostInfo } from "@/http/timeline";
+
+import UserAvatar from "../common/user/UserAvatar";
+import TimelineLine from "./TimelineLine";
+import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog";
+
+export interface TimelinePostViewProps {
+  post: HttpTimelinePostInfo;
+  current?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
+  const { post, className, style } = props;
+  const current = props.current === true;
+
+  const [
+    operationMaskVisible,
+    setOperationMaskVisible,
+  ] = React.useState<boolean>(false);
+  const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
+
+  // TODO: Load content.
+
+  return (
+    <div
+      className={clsx("timeline-item", current && "current", className)}
+      style={style}
+    >
+      <TimelineLine center="node" current={current} />
+      <div className="timeline-item-card">
+        {post.editable ? (
+          <i
+            className="bi-chevron-down text-info icon-button float-right"
+            onClick={(e) => {
+              setOperationMaskVisible(true);
+              e.stopPropagation();
+            }}
+          />
+        ) : null}
+        <div className="timeline-item-header">
+          <span className="mr-2">
+            <span>
+              <Link to={"/users/" + props.post.author.username}>
+                <UserAvatar
+                  username={post.author.username}
+                  className="timeline-avatar mr-1"
+                />
+              </Link>
+              <small className="text-dark mr-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">{/** TODO: Load content. */}</div>
+        {operationMaskVisible ? (
+          <div
+            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
+            onClick={() => {
+              setOperationMaskVisible(false);
+            }}
+          >
+            <i
+              className="bi-trash text-danger icon-button large"
+              onClick={(e) => {
+                setDeleteDialog(true);
+                e.stopPropagation();
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+      {deleteDialog ? (
+        <TimelinePostDeleteConfirmDialog
+          onClose={() => {
+            setDeleteDialog(false);
+            setOperationMaskVisible(false);
+          }}
+          onConfirm={() => {
+            // TODO: Implement this!
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default TimelinePostView;