FrontEnd/src/pages/timeline/view/ImagePostView.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { useEffect, useState } from "react";
import classNames from "classnames";

import {
  HttpTimelinePostInfo,
  getHttpTimelineClient,
} from "~src/http/timeline";

import "./ImagePostView.css";

interface ImagePostViewProps {
  post?: HttpTimelinePostInfo;
  className?: string;
}

export default function ImagePostView({ post, className }: ImagePostViewProps) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (post) {
      setUrl(
        getHttpTimelineClient().generatePostDataUrl(
          post.timelineOwnerV2,
          post.timelineNameV2,
          post.id,
        ),
      );
    } else {
      setUrl(null);
    }
  }, [post]);

  return (
    <div className={classNames("timeline-view-image-container", className)}>
      <img src={url ?? undefined} className="timeline-view-image" />
    </div>
  );
}