101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { useState, FormEvent, useEffect } from 'react';
|
|
import createStyles from '../styles/Create.module.css';
|
|
import styles from '../styles/Auth.module.css';
|
|
import { Link } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
import Navbar from './Navbar';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
function CreateLink() {
|
|
document.title = 'LinkLogger | Create Short Link';
|
|
|
|
const [link, setLink] = useState('');
|
|
const [url, setURL] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isCopied, setIsCopied] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const navigate = useNavigate();
|
|
|
|
// Get /api/users/me to make sure the user is logged in, and
|
|
// to get the username for rendering on screen
|
|
useEffect(() => {
|
|
axios
|
|
.get('/api/users/me')
|
|
.then((res) => {
|
|
if (res.status != 200) {
|
|
navigate('/login');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
navigate('/login');
|
|
});
|
|
}, []);
|
|
|
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
try {
|
|
const res = await axios.post('/api/links', { url });
|
|
if (res.status === 200) {
|
|
setLink(res.data.link);
|
|
}
|
|
} catch (error) {
|
|
setError('STRANGE');
|
|
}
|
|
};
|
|
|
|
const copyLink = () => {
|
|
navigator.clipboard.writeText(`${window.location.origin}/c/${link}`);
|
|
setIsCopied(true);
|
|
// Wait 5 seconds, then set isCopied back to false
|
|
setTimeout(() => {
|
|
setIsCopied(false);
|
|
}, 5000);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<div className={styles.container}>
|
|
<h1>Create a new short link by entering the long URL below</h1>
|
|
<p className={error ? styles.errorVisible : styles.errorHidden}>
|
|
{error}
|
|
</p>
|
|
<hr></hr>
|
|
<form onSubmit={handleSubmit}>
|
|
<input
|
|
className={createStyles.createInput}
|
|
type="text"
|
|
placeholder="Full URL"
|
|
value={url}
|
|
onChange={(e) => setURL(e.target.value)}
|
|
required
|
|
/>
|
|
{link.length === 0 ? (
|
|
<button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Creating...' : 'Create'}
|
|
</button>
|
|
) : (
|
|
<button type="button" onClick={copyLink}>
|
|
{isCopied ? (
|
|
<em>Copied!</em>
|
|
) : (
|
|
`Click to copy: ${window.location.origin}/c/${link}`
|
|
)}
|
|
</button>
|
|
)}
|
|
</form>
|
|
<hr></hr>
|
|
<p className={styles.footnote}>
|
|
<Link to="/dashboard" className={styles.footnoteLink}>
|
|
Click here
|
|
</Link>{' '}
|
|
to visit your dashboard.
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default CreateLink;
|