forked from reactplay/react-play
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PlayMeta.jsx
87 lines (81 loc) · 2.48 KB
/
PlayMeta.jsx
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { useEffect, useState, Suspense } from "react";
import { Helmet } from "react-helmet";
import * as plays from "plays";
import { useParams } from "react-router-dom";
import { submit } from "common/services/request";
import Loader from "common/spinner/spinner";
import { toSanitized, toTitleCase, toTitleCaseTrimmed } from "common/services/string";
import { FetchPlaysBySlugAndUser } from "common/services/request/query/fetch-plays";
import { PageNotFound } from "common";
function PlayMeta() {
const [loading, setLoading] = useState(true);
const [play, setPlay] = useState({});
const [isError, setIsError] = useState(false);
let { playname, username } = useParams(); // return the parameter of url
const [metaImage, setMetaImage] = useState();
useEffect(() => {
submit(FetchPlaysBySlugAndUser(decodeURI(playname), decodeURI(username)))
.then((res) => {
const play_obj = res[0];
play_obj.title_name = toTitleCaseTrimmed(play_obj.name);
setPlay(play_obj);
setMetaImage(play_obj.cover);
setLoading(false);
})
.catch((err) => {
setIsError(true);
setLoading(false);
});
}, [playname, username]);
if (loading) {
return <Loader />;
}
if (isError || !play) {
return <PageNotFound />;
}
const renderPlayComponent = () => {
const Comp =
plays[play.component || toSanitized(play.title_name)] ;
return <Comp {...play} />;
};
return (
<>
<Helmet>
<meta name="description" content={play.description} />
<meta property="og:title" content={play.name} />
<meta property="og:description" content={play.description} />
{metaImage && (
<meta
property="og:image"
content={metaImage}
data-react-helmet="true"
/>
)}
<meta
property="og:image:alt"
content={play.description}
data-react-helmet="true"
/>
<meta
name="twitter:title"
content={play.name}
data-react-helmet="true"
/>
<meta
name="twitter:description"
content={play.description}
data-react-helmet="true"
/>
{metaImage && (
<meta
name="twitter:image"
content={metaImage}
data-react-helmet="true"
/>
)}
</Helmet>
<Suspense fallback={<Loader />}>{renderPlayComponent()}</Suspense>
</>
);
}
export default PlayMeta;