doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add proxy, idk if its a good idea

Browse Source
This commit is contained in:
smolgrrr 2023-10-31 11:33:47 +11:00
parent 4631431874
commit 449f6b4bf5
1 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
client/src/components/Modals/LinkPreview.tsx
View File

@ -2,50 +2,54 @@ import { getLinkPreview } from 'link-preview-js';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
//Need to move this all server side const LinkModal = ({ url }: { url: string }) => {
const LinkModal = ({ url }: { url: string}) => { const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
useEffect(() => { useEffect(() => {
getLinkPreview(url) const proxyUrl = 'https://api.allorigins.win/raw?url=';
getLinkPreview(url)
.then((preview) => setLinkPreview(preview as LinkPreview)) .then((preview) => setLinkPreview(preview as LinkPreview))
.catch((error) => console.error(error)); .catch(error => {
console.error("Error fetching original URL, trying with proxy:", error);
return getLinkPreview(proxyUrl + url);
})
.then((preview) => setLinkPreview(preview as LinkPreview))
.catch((error) => console.error("Error fetching URL with proxy:", error));
}, [url]); }, [url]);
if (!linkPreview) { if (!linkPreview) {
return <a className="hover:underline" href={url}>{url}</a>; // or some loading state return <a className='hover:underline' href={url}>{url}</a>; // or some loading state
} }
return ( return (
<div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800"> <div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
<a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className=""> <a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
<img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/> <img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg" />
<div className="font-semibold text-xs text-gray-300"> <div className="font-semibold text-xs text-gray-300">
{linkPreview.title} {linkPreview.title}
</div> </div>
</a> </a>
</div> </div>
); );
}; };
interface LinkPreview { interface LinkPreview {
url: string; url: string;
title: string; title: string;
siteName?: string; siteName?: string;
description?: string; description?: string;
mediaType: string; mediaType: string;
contentType?: string; contentType?: string;
images: string[]; images: string[];
videos: { videos: {
url?: string; url?: string;
secureUrl?: string; secureUrl?: string;
type?: string; type?: string;
width?: string; width?: string;
height?: string; height?: string;
[key: string]: any;
}[];
[key: string]: any; [key: string]: any;
} }[];
[key: string]: any;
}
export default LinkModal; export default LinkModal;