You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.5 KiB
42 lines
1.5 KiB
import React, { useCallback } from "react";
|
|
import type { FunctionComponent } from "react";
|
|
import { useLdo, useResource, useSubject } from "@ldo/solid-react";
|
|
import { PostShShapeType } from "../.ldo/post.shapeTypes";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { PostedBy } from "./PostedBy";
|
|
|
|
export const Post: FunctionComponent<{ uri: string }> = ({ uri }) => {
|
|
const navigate = useNavigate();
|
|
const mediaResource = useResource(`${uri}index.ttl`);
|
|
const post = useSubject(PostShShapeType, mediaResource.uri);
|
|
const { getResource } = useLdo();
|
|
const deletePost = useCallback(async () => {
|
|
const postContainer = getResource(uri);
|
|
const result = await postContainer.delete();
|
|
if (result.isError) {
|
|
alert(result.message);
|
|
}
|
|
}, [uri]);
|
|
|
|
if (mediaResource.isReading()) {
|
|
return <p>Loading Post...</p>;
|
|
} else if (mediaResource.status.isError) {
|
|
return <p>Error: {mediaResource.status.message}</p>;
|
|
} else if (mediaResource.isAbsent()) {
|
|
return <p>Post does not exist.</p>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{post.publisher?.["@id"] && <PostedBy webId={post.publisher["@id"]} />}
|
|
<div
|
|
onClick={() => navigate(`/media/${encodeURIComponent(uri)}`)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
{post.articleBody && <p>{post.articleBody}</p>}
|
|
{post.image && <img src={post.image["@id"]} style={{ height: 300 }} />}
|
|
</div>
|
|
<button onClick={deletePost}>Delete Post</button>
|
|
</div>
|
|
);
|
|
};
|
|
|