Compare commits
3 commits
Author | SHA1 | Date | |
---|---|---|---|
|
dbfe8c2dc9 | ||
2b2545d348 | |||
698a631abb |
5 changed files with 96 additions and 47 deletions
|
@ -7,7 +7,7 @@
|
|||
# https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
|
||||
|
||||
project = "shortenit"
|
||||
copyright = "2024, Elia el Lazkani"
|
||||
copyright = "2025, Elia el Lazkani"
|
||||
author = "Elia el Lazkani"
|
||||
release = "0.0.0"
|
||||
|
||||
|
|
4
frontend/package-lock.json
generated
4
frontend/package-lock.json
generated
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"name": "shortenit",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "frontend",
|
||||
"name": "shortenit",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
|
|
|
@ -35,23 +35,66 @@ export default function URLShortener() {
|
|||
const api_url = `${config.url}${api_endpoint}`;
|
||||
|
||||
// Send the POST request to the backend
|
||||
await axios
|
||||
.post(api_url , {
|
||||
url: url
|
||||
})
|
||||
.then((response) => {
|
||||
if (response) {
|
||||
const shortUrl: string = response.data.url;
|
||||
setShortenedUrl(shortUrl);
|
||||
setShowInput(true);
|
||||
}
|
||||
const response = await axios.post(api_url , {url: url})
|
||||
if (response.data.url) {
|
||||
const shortUrl: string = response.data.url;
|
||||
setShortenedUrl(shortUrl);
|
||||
setShowInput(true);
|
||||
toast.success("URL Shortened Successfully", {
|
||||
position: "top-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
className: "custom-toast",
|
||||
});
|
||||
} else {
|
||||
toast.error("Something went wrong while shortening the URL", {
|
||||
position: "top-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
className: "custom-toast",
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setShowInput(false);
|
||||
}, 10000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}, 900000);
|
||||
} catch (error : any) {
|
||||
if (error.response) {
|
||||
const errorMessage : string = error.response.data.msg || "An error occurred. Please try again.";
|
||||
toast.error(errorMessage, {
|
||||
position: "top-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
className: "custom-toast",
|
||||
});
|
||||
} else {
|
||||
toast.error("Network error. Please check your connection and try again.", {
|
||||
position: "top-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
className: "custom-toast",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -76,39 +119,42 @@ export default function URLShortener() {
|
|||
}
|
||||
}
|
||||
return (
|
||||
<div className="URLShortener-component">
|
||||
<div className="left-side">
|
||||
<h1>Paste the URL</h1>
|
||||
<form className="url-input" onSubmit={ShortenIt}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="www.example.com"
|
||||
aria-label="URL input field"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<button type="submit">Shorten It</button>
|
||||
</form>
|
||||
<>
|
||||
<div className="URLShortener-component">
|
||||
<div className="left-side">
|
||||
<h1>Paste the URL</h1>
|
||||
<form className="url-input" onSubmit={ShortenIt}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://www.example.com"
|
||||
aria-label="URL input field"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<button type="submit">Shorten It</button>
|
||||
</form>
|
||||
|
||||
{shortenedUrl && showInput && (
|
||||
<div className="url-input shortened">
|
||||
<input type="text" readOnly value={shortenedUrl} />
|
||||
<button onClick={copyURL}>Copy</button>
|
||||
{shortenedUrl && showInput && (
|
||||
<div className="url-input shortened">
|
||||
<input type="text" readOnly value={shortenedUrl} />
|
||||
<button onClick={copyURL}>Copy</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="right-side">
|
||||
<div className="right-side-title">
|
||||
<h1>Shorten It</h1>
|
||||
</div>
|
||||
<div className="right-side-content">
|
||||
<p>
|
||||
Shortenit is a free and open-source URL shortening service designed
|
||||
for simplicity and efficiency.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="right-side">
|
||||
<div className="right-side-title">
|
||||
<h1>Shorten It</h1>
|
||||
</div>
|
||||
<div className="right-side-content">
|
||||
<p>
|
||||
Shortenit is a free and open-source URL shortening service designed
|
||||
for simplicity and efficiency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
.footer {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
height: 100px;
|
||||
background-color: var(--color-secondary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -80,7 +80,7 @@ class SiteHandler:
|
|||
data = self.shortenit_load_format(data)
|
||||
except Exception as e:
|
||||
self.logger.error(e)
|
||||
return {}, 400
|
||||
return {"msg" : "Invalid URL format"}, 400
|
||||
self.logger.error(e)
|
||||
abort(400)
|
||||
try:
|
||||
|
|
Loading…
Reference in a new issue