[site/twitter-embeds]: add checks for deleted/not-found tweets
This commit is contained in:
khalilcodes
parent
2fe9d5487e
commit
22fbbe3ad5
|
|
@ -1,10 +1,14 @@
|
||||||
import { useEffect, useState, useRef } from "react";
|
import { useEffect, useState, useRef } from "react";
|
||||||
|
|
||||||
const twitterWidgetJs = "https://platform.twitter.com/widgets.js";
|
const twitterWidgetJs = "https://platform.twitter.com/widgets.js";
|
||||||
|
const message = "Loading tweet..."
|
||||||
|
|
||||||
export default function TwitterEmbed({ url }) {
|
export default function TwitterEmbed({ url }) {
|
||||||
let ref = useRef(null)
|
let ref = useRef(null)
|
||||||
const [isLoading, setLoading] = useState(true)
|
const [state, setState] = useState({
|
||||||
|
isLoading: true,
|
||||||
|
message: message
|
||||||
|
})
|
||||||
|
|
||||||
const tweetId = url.split("status/").pop()
|
const tweetId = url.split("status/").pop()
|
||||||
|
|
||||||
|
|
@ -29,8 +33,9 @@ export default function TwitterEmbed({ url }) {
|
||||||
const renderTweet = () => {
|
const renderTweet = () => {
|
||||||
window.twttr.widgets.createTweet(tweetId, ref.current, {
|
window.twttr.widgets.createTweet(tweetId, ref.current, {
|
||||||
theme: "dark"
|
theme: "dark"
|
||||||
}).then(() => {
|
}).then((el) => {
|
||||||
setLoading(false)
|
if (el) return setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
return setState(prev => ({ ...prev, message: "Sorry, this tweet could not be found." }))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,45 +46,51 @@ export default function TwitterEmbed({ url }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
setLoading(true);
|
setState(prev => ({ ...prev, isLoading: true }));
|
||||||
};
|
};
|
||||||
},[]);
|
},[]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isLoading && <div className="relative my-4 w-full sm:max-w-lg bg-neutral-900 drop-shadow-md rounded-lg dark:text-gray-300">
|
{state.isLoading && (
|
||||||
<div className="absolute flex flex-col gap-2 items-center justify-center bg-slate-700/70 w-full h-full rounded-lg top-0 left-0 z-10">
|
<div className="relative my-4 w-full sm:max-w-lg bg-neutral-900 drop-shadow-md rounded-lg ">
|
||||||
<svg
|
<div className="absolute flex flex-col items-center justify-center bg-slate-700/60 w-full h-full rounded-lg top-0 left-0 z-10">
|
||||||
role="img"
|
<svg
|
||||||
viewBox="0 0 24 24"
|
role="img"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
viewBox="0 0 24 24"
|
||||||
className="w-10"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="w-10"
|
||||||
|
>
|
||||||
|
<title>Twitter</title>
|
||||||
|
<path
|
||||||
|
fill="#1DA1F2"
|
||||||
|
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p className="text-gray-300 font-bold my-2">{state.message}</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`p-3 space-y-4 ${
|
||||||
|
state.isLoading && state.message === message && "animate-pulse"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<title>Twitter</title>
|
<div className="flex items-center">
|
||||||
<path
|
<div className="mr-2 h-10 w-10 rounded-full bg-slate-700" />
|
||||||
fill="#1DA1F2"
|
<div className="w-1/3 h-4 bg-slate-700"></div>
|
||||||
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
|
</div>
|
||||||
/>
|
<div className="space-y-2">
|
||||||
</svg>
|
<div className="w-2/3 h-3 bg-slate-700"></div>
|
||||||
Loading tweet...
|
<div className="w-2/3 h-3 bg-slate-700"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-3 space-y-4">
|
<div className="w-2/3 h-20 rounded bg-slate-700"></div>
|
||||||
<div className="flex items-center">
|
<div className="flex space-x-4">
|
||||||
<div className="animate-pulse mr-2 h-10 w-10 rounded-full bg-slate-700" />
|
<div className="w-1/4 h-3 bg-slate-700"></div>
|
||||||
<div className="animate-pulse w-1/3 h-4 bg-slate-700"></div>
|
<div className="w-1/4 h-3 bg-slate-700"></div>
|
||||||
</div>
|
<div className="w-1/4 h-3 bg-slate-700"></div>
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<div className="animate-pulse w-2/3 h-3 bg-slate-700"></div>
|
|
||||||
<div className="animate-pulse w-2/3 h-3 bg-slate-700"></div>
|
|
||||||
</div>
|
|
||||||
<div className="animate-pulse w-2/3 h-20 rounded bg-slate-700"></div>
|
|
||||||
<div className="flex space-x-4">
|
|
||||||
<div className="animate-pulse w-1/4 h-3 bg-slate-700"></div>
|
|
||||||
<div className="animate-pulse w-1/4 h-3 bg-slate-700"></div>
|
|
||||||
<div className="animate-pulse w-1/4 h-3 bg-slate-700"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>}
|
)}
|
||||||
<div className="twitter-tweet" ref={ref} />
|
<div className="twitter-tweet" ref={ref} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue