85 lines
2.4 KiB
Plaintext
85 lines
2.4 KiB
Plaintext
import React, { useState } from 'react';
|
|
import { useAppDispatch, useAppSelector } from '../app/hooks';
|
|
import {
|
|
shortenUrl,
|
|
selectShortUrl,
|
|
selectUrlStatus,
|
|
selectUrlError,
|
|
clearShortUrl,
|
|
} from '../features/url/urlSlice';
|
|
|
|
const Home: React.FC = () => {
|
|
// Component-level state
|
|
const [longUrl, setLongUrl] = useState('');
|
|
|
|
// Redux 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' && longUrl.trim() !== '') {
|
|
dispatch(shortenUrl(longUrl));
|
|
}
|
|
};
|
|
|
|
const handleCopy = () => {
|
|
if (shortUrl) {
|
|
navigator.clipboard.writeText(shortUrl);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-purple-100 px-4">
|
|
<div className="text-center space-y-6 max-w-md w-full">
|
|
<h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="Enter your long URL here"
|
|
value={longUrl}
|
|
onChange={(e) => setLongUrl(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="w-full 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' && error && (
|
|
<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; |