egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Directory allocation

Browse Source
This commit is contained in:
Daniel
2022-05-10 20:05:43 +04:30
parent 2511082f14
commit 9a0c383e0b
21 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+46
View File
@@ -0,0 +1,46 @@
import { useEffect, useState } from 'react';
import './styles/App.css';
import List from './componets/List';
import AddModal from './componets/AddModal';
function App() {
const [data, setData] = useState([]);
const [isAdding, setIsAdding] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
function exitAdding() {
setIsAdding(!isAdding)
}
function search(e) {
setSearchQuery(e.target.value);
}
const filteredData = data.filter((e) => {
return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
});
useEffect(() => {
async function fetchData() {
const res = await fetch('/get');
const resJSON = await res.json();
const Data = resJSON.sort((a, b) => { return b-a });
setData(Data);
}
fetchData();
}, [data]);
return (
<div className="App">
<div className="head">
<input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
<button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
</div>
<List data={filteredData} />
{isAdding ? <AddModal onExit={exitAdding} /> : null}
</div>
);
}
export default App;
src/componets/AddModal.js
+89
View File
@@ -0,0 +1,89 @@
import { useState } from 'react';
import '../styles/Modal.css';
const AddModal = ({onExit}) => {
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 != '') {
fetch("/post", {
// Adding method type
method: "POST",
// Adding body or contents to send
body: JSON.stringify({
name: name,
title: "foo",
link: link,
tag: tag
}),
// Adding headers to the request
headers: {
"Content-type": "application/json; charset=UTF-8"
}
});
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 &#xf093;</button>
<button className="cancel-btn">Cancel</button>
</div>
</div>
</div>
)
}
export default AddModal
src/componets/List.js
+54
View File
@@ -0,0 +1,54 @@
import '../styles/List.css';
const List = ({data}) => {
function deleteEntity(id) {
fetch("/delete", {
// Adding method type
method: "DELETE",
// Adding body or contents to send
body: JSON.stringify({id}),
// Adding headers to the request
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(res => res.text())
.then(message => {console.log(message)})
}
return (
<table className="table">
<thead>
<tr>
<th className='number'>#</th>
<th>Name</th>
<th>Title</th>
<th>Link</th>
<th>Tag</th>
</tr>
</thead>
<tbody>
{data.map((e, i) => {
try {
const url = new URL(e.link)
return <tr key={i}>
<td className='number'>{i + 1}</td>
<td>{e.name}</td>
<td>{e.title}</td>
<td><a href={e.link}>{url.hostname}</a></td>
<td>{e.tag}</td>
<td className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</td>
</tr>
} catch (e) {
console.log(e)
}
})}
</tbody>
</table>
)
}
export default List
src/index.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
src/styles/App.css
+51
View File
@@ -0,0 +1,51 @@
.App {
min-height: 96vh;
padding: 2vh;
background-color: #1f2c38;
color: white;
}
.head {
display: flex;
}
.search {
font-family: 'Font Awesome 5 Free';
font-size: 1.5rem;
padding-left: 10px;
border: none;
width: 50%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.settings-btn:active, .add-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.search:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.add-btn {
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1.5rem;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-left: auto;
margin-right: 10px;
transition: background-color 0.1s;
}
.add-btn:hover {
background-color: rgb(76, 117, 170);
}
textarea:focus, input:focus{
outline: none;
}
src/styles/List.css
+50
View File
@@ -0,0 +1,50 @@
.table {
width: 100%;
text-align: left;
padding-top: 20px;
border-spacing: 10px 10px;
}
.table td {
font-size: 1.3rem;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.table th {
font-size: 1.6rem;
}
.table tbody tr:nth-of-type(2n-1) {
background-color:#273949;
}
.table a {
text-decoration: none;
color: rgb(194, 193, 193);
font-size: 1rem;
}
.table a:hover {
text-decoration: underline;
}
.delete {
color: white;
cursor: pointer;
transition: background-color 0.1s;
font-family: 'Font Awesome 5 Free';
}
.delete:hover {
background-color: rgb(255, 123, 123);
}
.delete:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.number {
text-align: center;
}
src/styles/Modal.css
+85
View File
@@ -0,0 +1,85 @@
.overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(39, 60, 78, 0.781);
width: 100vw;
height: 100vh;
}
.box {
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
position: absolute;
top: 20%;
left: 20%;
background-color: #1b2e3f;
width: 60%;
height: 60%;
overflow-x: hidden;
overflow-y: auto;
}
.box h2 {
margin-top: -1px;
text-align: center;
}
.modal-content {
padding: 20px;
}
.modal-input {
font-size: 1.3rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.modal-input:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.upload-btn {
font-family: 'Font Awesome 5 Free';
font-size: 2rem;
padding: 10px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.upload-btn:hover {
background-color: rgb(76, 117, 170);
}
.cancel-btn {
padding: 5px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.cancel-btn:hover {
background-color: rgb(255, 123, 123);
}
.upload-btn:active, .cancel-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
src/styles/index.css
+8
View File
@@ -0,0 +1,8 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}