Skip to content

Commit

Permalink
Update App.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chanomhub
Chanomhub authored Mar 24, 2024
1 parent a838076 commit e28928c
Showing 1 changed file with 144 additions and 87 deletions.
231 changes: 144 additions & 87 deletions scr/Windows-Linux-Mac/scr/frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,119 +4,176 @@ import fs from 'fs';
import path from 'path';

interface Data {
title: string;
jetpack_featured_media_url: string;
title: string;
jetpack_featured_media_url: string;
content: string; // Added property for content
}

const App: React.FC = () => {
const [data, setData] = useState<Data[]>([]);
const [page, setPage] = useState<number>(1);
const [links, setLinks] = useState<string[]>([]); // State to hold links

useEffect(() => {
fetchFirstPageData();
}, []);

const fetchFirstPageData = async () => {
try {
const response = await fetch('https://api.chanomhub.xyz/fetch-data?page=1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const firstPageData = await response.json();
setData(firstPageData);
} catch (error) {
console.error('Error fetching first page data:', error);
const handleImageClick = (index: number) => {
const itemLinks = data[index].links;
if (itemLinks.length > 0) {
const randomIndex = Math.floor(Math.random() * itemLinks.length);
const randomLink = itemLinks[randomIndex];
window.open(randomLink, '_blank'); // Open in a new tab
}
};
const getRandomLink = (content: string) => {
useEffect(() => {
fetchFirstPageData();
}, []);
const extractLinks = (content: string) => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(content, 'text/html');
const links = Array.from(htmlDoc.getElementsByClassName('link'));
if (links.length > 0) {
const randomIndex = Math.floor(Math.random() * links.length);
return links[randomIndex].getAttribute('href') || '';
} else {
return '#'; // หรือลิงก์เริ่มต้นอื่น ๆ ที่คุณต้องการ
}
};
const doc = parser.parseFromString(content, 'text/html');
const linkElements = doc.querySelectorAll('.link');
return Array.from(linkElements).map(el => el.getAttribute('href') || '');
}

const fetchFirstPageData = async () => {
try {
const response = await fetch('https://api.chanomhub.xyz/fetch-data?page=1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const firstPageData = await response.json();
setData(firstPageData);
} catch (error) {
console.error('Error fetching first page data:', error);
}
};



const fetchData = async (newPage: number) => {
try {
const response = await fetch('https://api.chanomhub.xyz/fetch-data?page=' + newPage);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const pageData = await response.json();
setData(pageData);
} catch (error) {
console.error('Error fetching data for page', newPage, ':', error);
}
};
const fetchData = async (newPage: number) => {
try {
const response = await fetch('https://api.chanomhub.xyz/fetch-data?page=' + newPage, {

});

if (!response.ok) {
throw new Error('Network response was not ok');
}
const pageData = await response.json();
setData(pageData);
} catch (error) {
console.error('Error fetching data for page', newPage, ':', error);
}
};



const handlePageChange = (newPage: number) => {
setPage(newPage);
fetchData(newPage);
};
const handlePageChange = (newPage: number) => {
setPage(newPage);
fetchData(newPage);
};

const saveImage = async (url: string) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
const saveImage = async (url: string) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const imageData = await response.arrayBuffer();
const imageFileName = url.split('/').pop() || 'image.jpg';
const imagePath = path.join(__dirname, 'images', imageFileName);
fs.writeFileSync(imagePath, Buffer.from(imageData));
} catch (error) {
console.error('Error saving image:', error);
}
};

useEffect(() => {
const fetchAndProcessData = async () => {
try {
const response = await fetch(/* ... */); // Your existing fetch logic
const pageData = await response.json();

// Extract links from content
const updatedData = pageData.map((item) => ({
...item,
links: extractLinks(item.content)
}));

setData(updatedData);
} catch (error) {
// ... (Your error handling)
}
const imageData = await response.arrayBuffer();
const imageFileName = url.split('/').pop() || 'image.jpg';
const imagePath = path.join(__dirname, 'images', imageFileName);
fs.writeFileSync(imagePath, Buffer.from(imageData));
} catch (error) {
console.error('Error saving image:', error);
}
};
};

useEffect(() => {
data.forEach(item => {
saveImage(item.jetpack_featured_media_url);
});
}, [data]);
fetchAndProcessData();
}, [page]);

return (
<div className="container">
<div className='Header'>
<h1>Chaomhub</h1>
/*
return (
<div className="container">
<div className='Header'>
<h1>Chaomhub</h1>
</div>
<div className="pagination">
<button onClick={() => handlePageChange(page - 1)} disabled={page === 1}>
Previous Page
</button>
<button onClick={() => handlePageChange(page + 1)}>Next Page</button>
</div>
<div className="faces-container">
{data.length > 0 ? (
data.map((item, index) => (
<div className="row" key={index}>
<div className='block'>
<picture>
<img src={item.jetpack_featured_media_url} className='images'/>
</picture>
</div>
<div className="pagination">
<button onClick={() => handlePageChange(page - 1)} disabled={page === 1}>
Previous Page
</button>
<button onClick={() => handlePageChange(page + 1)}>Next Page</button>
<div className='title'>
<p>{item.title}</p>
</div>
</div>
))
) : (
<div>Loading....</div>
)}
</div>
</div>
);
}; */

return (
<div className="container">
{/* ... your existing JSX */}
<div className='Header'>
<h1>Chaomhub</h1>
<div className="faces-container">
{data.length > 0 ? (
data.map((item, index) => (
{data.length > 0 ? (
data.map((item, index) => (
<div className="row" key={index}>
<div className='block'>
<picture>
<a href={getRandomLink(item.content)} target="_blank" rel="noopener noreferrer">
<img src={item.jetpack_featured_media_url} className='images' alt="Featured"/>
</a>
</picture>
</div>
<div className='title'>
<p>{item.title}</p>
</div>
{/* ... */}
<div className='block'>
<picture>
<img
src={item.jetpack_featured_media_url}
className='images'
onClick={() => handleImageClick(index)} // Add click handler
/>
</picture>
</div>
{/* ... */}
<div className='title'>
<p>{item.title}</p>
</div>
))
) : (
<div>Loading....</div>
)}
</div>

))
) : (
<div>Loading....</div>
)}
</div>
</div>
);
};

export default App;

0 comments on commit e28928c

Please sign in to comment.