90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useAppDispatch, useAppSelector } from '../app/hooks';
|
|
import { copyToClipboard } from '../utils/clipboard';
|
|
import {
|
|
shortenUrl,
|
|
selectShortUrl,
|
|
selectUrlStatus,
|
|
selectUrlError,
|
|
clearShortUrl,
|
|
} from '../features/url/urlSlice';
|
|
|
|
const Home: React.FC = () => {
|
|
/* component level state */
|
|
const [url, setUrl] = useState('');
|
|
|
|
/* global state */
|
|
const dispatch = useAppDispatch();
|
|
|
|
const shortUrl = useAppSelector(selectShortUrl);
|
|
const status = useAppSelector(selectUrlStatus);
|
|
const error = useAppSelector(selectUrlError);
|
|
|
|
/* methods */
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' && url.trim() !== '') {
|
|
dispatch(shortenUrl(url));
|
|
}
|
|
};
|
|
|
|
const handleCopy = () => {
|
|
if (shortUrl) {
|
|
copyToClipboard(shortUrl)
|
|
.then(() => console.log('Copied!'))
|
|
.catch((err) => console.error('Copy failed', err));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-purple-100">
|
|
<div className="text-center space-y-6">
|
|
<h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="https://example.com/my-long-url"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="w-80 p-3 rounded-md text-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
|
|
/>
|
|
|
|
{/* Loading State */}
|
|
{status === 'loading' && (
|
|
<p className="text-gray-600 text-sm">Shortening your URL...</p>
|
|
)}
|
|
|
|
{/* Error Message */}
|
|
{status === 'failed' && (
|
|
<p className="text-red-600 text-sm">{error}</p>
|
|
)}
|
|
|
|
{/* Short URL Display */}
|
|
{status === 'succeeded' && shortUrl && (
|
|
<div className="space-y-2">
|
|
<p className="text-green-700 font-medium text-lg">
|
|
Your short URL:
|
|
<a
|
|
href={shortUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline ml-2"
|
|
>
|
|
{shortUrl}
|
|
</a>
|
|
</p>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition">
|
|
Copy to Clipboard
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|
|
|