97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
import { useState } from 'react';
|
|
import { nanoid } from 'nanoid'
|
|
import '../styles/Modal.css';
|
|
import config from '../config.json';
|
|
|
|
const AddModal = ({onExit, reFetch}) => {
|
|
const [name, setName] = useState('');
|
|
const [link, setLink] = useState('');
|
|
const [tag, setTag] = useState('');
|
|
|
|
function SetName(e) {
|
|
setName(e.target.value);
|
|
}
|
|
|
|
function SetLink(e) {
|
|
setLink(e.target.value);
|
|
}
|
|
|
|
function SetTag(e) {
|
|
setTag(e.target.value);
|
|
}
|
|
|
|
async function submitBookmark() {
|
|
function isValidHttpUrl(string) {
|
|
let url;
|
|
|
|
try {
|
|
url = new URL(string);
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
|
|
return url.protocol === "http:" || url.protocol === "https:";
|
|
}
|
|
|
|
if(name !== '' && isValidHttpUrl(link) && tag !== '') {
|
|
const address = config.api.address + ":" + config.api.port;
|
|
fetch(address + "/api", {
|
|
|
|
// Adding method type
|
|
method: "POST",
|
|
|
|
// Adding body or contents to send
|
|
body: JSON.stringify({
|
|
_id: nanoid(),
|
|
name: name,
|
|
title: null,
|
|
link: link,
|
|
tag: tag
|
|
}),
|
|
|
|
// Adding headers to the request
|
|
headers: {
|
|
"Content-type": "application/json; charset=UTF-8"
|
|
}
|
|
})
|
|
.then(res => res.text())
|
|
.then(message => {console.log(message)})
|
|
.then(() => reFetch());
|
|
|
|
onExit();
|
|
} else if(name !== '' && link !== '' && tag !== '') {
|
|
alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
|
|
}
|
|
|
|
else {
|
|
alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
|
|
}
|
|
}
|
|
|
|
function abort(e) {
|
|
if (e.target.className === "overlay" || e.target.className === "cancel-btn") {
|
|
onExit();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='overlay' onClick={abort}>
|
|
<div className='box'>
|
|
<div className='modal-content'>
|
|
<h2>Add Bookmark</h2>
|
|
<h3>Name:</h3>
|
|
<input onChange={SetName} className="modal-input" type="search" placeholder="e.g. Example Tutorial"/>
|
|
<h3>Link:</h3>
|
|
<input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
|
|
<h3>Tag:</h3>
|
|
<input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/>
|
|
<button onClick={submitBookmark} className="upload-btn">Upload </button>
|
|
<button className="cancel-btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AddModal
|