can now use custom path

This commit is contained in:
unurled 2022-09-05 18:41:06 +02:00
parent eb9d276ac4
commit 3f4c835bd1
3 changed files with 78 additions and 17 deletions

View file

@ -16,6 +16,10 @@
<label for="longUrl">Long Url</label> <label for="longUrl">Long Url</label>
<input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="longUrl" placeholder="www.example.com/very-long-url/and/totally/hard-to-remember" name="longUrl"> <input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="longUrl" placeholder="www.example.com/very-long-url/and/totally/hard-to-remember" name="longUrl">
</div> </div>
<div id="customPathDiv">
<label for="customPath">custom Path</label>
<input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="customPath" placeholder="cool_path" name="customPath">
</div>
<div class="form-button"> <div class="form-button">
<button type="submit" class="btn-submit hover:bg-red-700 focus:bg-red-700" id="btnSubmit"> <button type="submit" class="btn-submit hover:bg-red-700 focus:bg-red-700" id="btnSubmit">
Submit Submit
@ -28,6 +32,14 @@
<p id="longUrl"></p> <p id="longUrl"></p>
<a id="shortUrl" class="text-emerald-500" href=""></a> <a id="shortUrl" class="text-emerald-500" href=""></a>
</div> </div>
<div id="edit">
<br>
<br>
<p class="text-emerald-500">New Url for the site </p>
<a class="text-emerald-500" href="" id="oldLongUrl"></a>
<br>
<a class="text-emerald-500" href="" id="oldShortUrl"></a>
</div>
<script type="module" src="public/js/app.js"></script> <script type="module" src="public/js/app.js"></script>
</body> </body>
</html> </html>

View file

@ -24,6 +24,16 @@ async function submitForm(e, form) {
document.getElementById("shortUrl").innerHTML = response.shortUrl document.getElementById("shortUrl").innerHTML = response.shortUrl
document.getElementById("shortUrl").href = response.shortUrl document.getElementById("shortUrl").href = response.shortUrl
document.getElementById("longUrl").innerHTML = "Long Url: " + response.longUrl document.getElementById("longUrl").innerHTML = "Long Url: " + response.longUrl
if (response.edit) {
console.log("Already have this path, editing.")
}
if (response.old) {
document.getElementById("edit").style.visibility = "visible"
document.getElementById("oldLongUrl").innerHTML = response.old.longUrl
document.getElementById("oldLongUrl").href = response.old.longUrl
document.getElementById("oldShortUrl").innerHTML = response.old.shortUrl
document.getElementById("oldShortUrl").href = response.old.shortUrl
}
} }
else else
alert(`An error occured.`); alert(`An error occured.`);
@ -44,8 +54,11 @@ function buildJsonFormData(form) {
} }
return jsonFormData; return jsonFormData;
} }
/*--/Functions--*/ /*--/Functions--*/
document.getElementById("edit").style.visibility = 'hidden'
/*--Event Listeners--*/ /*--Event Listeners--*/
const sampleForm = document.querySelector("#form"); const sampleForm = document.querySelector("#form");
if(sampleForm) { if(sampleForm) {

View file

@ -37,10 +37,11 @@ function validUrl(url) {
router.post('/shorten', async (req, res) => { router.post('/shorten', async (req, res) => {
const { const {
longUrl longUrl, customPath
} = req.body // destructure the longUrl from req.body.longUrl } = req.body // destructure the longUrl from req.body.longUrl
// check base url if valid using the validUrl.isUri method console.log(longUrl, customPath)
// check base url if valid using the validUrl method
if (!validUrl(baseUrl)) { if (!validUrl(baseUrl)) {
console.log("Invalid url " + baseUrl) console.log("Invalid url " + baseUrl)
@ -50,7 +51,7 @@ router.post('/shorten', async (req, res) => {
// if valid, we create the url code // if valid, we create the url code
const urlCode = shortid.generate() const urlCode = shortid.generate()
// check long url if valid using the validUrl.isUri method // check long url if valid using the validUrl method
if (validUrl(longUrl)) { if (validUrl(longUrl)) {
try { try {
/* The findOne() provides a match to only the subset of the documents /* The findOne() provides a match to only the subset of the documents
@ -63,22 +64,57 @@ router.post('/shorten', async (req, res) => {
// url exist and return the response // url exist and return the response
if (url) { if (url) {
console.log("Return " + url) let json = url.toJSON()
res.json(url) console.log("Return " + JSON.stringify(json))
res.json(json)
} else { } else {
// join the generated short code the the base url try {
const shortUrl = baseUrl + '/' + urlCode let doc = await Url.findOne({
'urlCode': customPath
})
if (doc) {
let json
//json["edit"] = true
console.log("Found custom path")
// invoking the Url model and saving to the DB const shortUrl = baseUrl + '/' + customPath
url = new Url({
longUrl, url = new Url({
shortUrl, longUrl,
urlCode, shortUrl,
date: new Date() urlCode: customPath,
}) date: new Date()
await url.save() })
console.log("Return " + url) json = url.toJSON()
res.json(url) await url.save()
let old = await Url.findOneAndUpdate({ urlCode: customPath },
{ urlCode: urlCode, shortUrl: baseUrl + '/' + urlCode },
{ returnDocument: 'after' })
json["old"] = old.toJSON()
res.json(json)
} else {
console.log("Not found custom path")
// join the generated short code the the base url
const shortUrl = baseUrl + '/' + customPath
// invoking the Url model and saving to the DB
url = new Url({
longUrl,
shortUrl,
urlCode: customPath,
date: new Date()
})
await url.save()
console.log("Return " + url)
res.json(url)
}
} catch (err) {
console.log(err)
res.status(500).json('Server Error')
}
} }
} }
// exception handler // exception handler