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

Worked on the add button + backend

Browse Source
This commit is contained in:
Daniel
2022-04-22 16:43:22 +04:30
parent f39baae69b
commit 9e72a0a2a7
11 changed files with 4093 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webmarker/src/App.js
+11 -23
View File
@@ -1,16 +1,22 @@
import { useEffect, useState } from 'react';
import './App.css';
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);
function exitAdding() {
setIsAdding(!isAdding)
}
useEffect(() => {
async function fetchData() {
const res = await fetch('/get');
const resJSON = await res.json();
console.log(resJSON)
setData(resJSON);
const Data = resJSON.sort((a, b) => { return b-a });
setData(Data);
}
fetchData();
@@ -21,31 +27,13 @@ function App() {
<div className="head">
<input className="search" type="search" placeholder="Search bookmarks"/>
<button className="search-btn"><span className="material-icons-outlined md-36">search</span></button>
<button className="add-btn"><span className="material-icons-outlined md-36">add</span></button>
<button className="add-btn"><span className="material-icons-outlined md-36" onClick={() => setIsAdding(true)}>add</span></button>
<button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
</div>
<List data={data} />
{isAdding ? <AddModal onExit={exitAdding} /> : null}
</div>
);
}
export default App;
// fetch("/post", {
// // Adding method type
// method: "POST",
// // Adding body or contents to send
// body: JSON.stringify({
// name: "foo",
// title: "bar",
// link: liveinternet.ru,
// tag: Red
// }),
// // Adding headers to the request
// headers: {
// "Content-type": "application/json; charset=UTF-8"
// }
// });
webmarker/src/componets/AddModal.js
+75
View File
@@ -0,0 +1,75 @@
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() {
if(name != '' && 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 {
alert('Please fill all fields...');
}
}
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"><span className="material-icons-outlined md-36">upload</span></button>
<button className="cancel-btn">Cancel</button>
</div>
</div>
</div>
)
}
export default AddModal
webmarker/src/componets/List.js
+14 -9
View File
@@ -1,6 +1,6 @@
const List = ({data}) => {
console.log(data)
import '../styles/List.css';
const List = ({data}) => {
return (
<table className="table">
<thead>
@@ -14,13 +14,18 @@ const List = ({data}) => {
</thead>
<tbody>
{data.map((e, i) => {
return <tr key={i}>
<td>{i + 1}</td>
<td>{e.name}</td>
<td>{e.title}</td>
<td>{e.link}</td>
<td>{e.tag}</td>
</tr>
try {
const url = new URL(e.link)
return <tr key={i}>
<td>{i + 1}</td>
<td>{e.name}</td>
<td>{e.title}</td>
<td><a href={e.link}>{url.hostname}</a></td>
<td>{e.tag}</td>
</tr>
} catch (e) {
console.log(e)
}
})}
</tbody>
</table>
webmarker/src/index.js
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/index.css';
import App from './App';
ReactDOM.render(
webmarker/src/App.css → webmarker/src/styles/App.css
+2 -24
View File
@@ -12,25 +12,23 @@
.search {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
font-size: 1.5rem;
padding-left: 10px;
width: 40%;
}
.search-btn {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: #1f2c38b6;
}
.settings-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
}
.add-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
margin-left: auto;
@@ -42,23 +40,3 @@ textarea:focus, input:focus{
}
.material-icons-outlined.md-36 { font-size: 36px; }
.table {
width: 100%;
text-align: left;
padding-top: 20px;
}
.table td {
font-size: 1.3rem;
padding: 5px;
}
.table th {
font-size: 1.6rem;
padding: 5px;
}
.table tbody tr:nth-of-type(2n-1) {
background-color:#273949;
}
webmarker/src/styles/List.css
+29
View File
@@ -0,0 +1,29 @@
.table {
width: 100%;
text-align: left;
padding-top: 20px;
}
.table td {
font-size: 1.3rem;
padding: 5px;
}
.table th {
font-size: 1.6rem;
padding: 5px;
}
.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;
}
webmarker/src/styles/Modal.css
+56
View File
@@ -0,0 +1,56 @@
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(49, 64, 73, 0.781);
width: 100vw;
height: 100vh;
}
.box {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; position: absolute;
top: 20%;
left: 20%;
background-color: #1b2e3f;
width: 60%;
height: 60%;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
}
.box h2 {
margin-top: -1px;
text-align: center;
}
.modal-content {
padding: 20px;
}
.modal-input {
border-radius: 10px;
padding: 10px;
font-size: 1.3rem;
width: 100%;
}
.upload-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
margin-top: 60px;
display: block;
margin-left: auto;
margin-right: auto;
}
.cancel-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
margin-top: 25px;
display: block;
margin-left: auto;
margin-right: auto;
}
webmarker/src/index.css → webmarker/src/styles/index.css
View File