Added backend+database support
This commit is contained in:
Daniel
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Daniel
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
Generated
+27322
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "webmarker",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^12.1.4",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "5.0.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"proxy": "http://localhost:3001/"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>Web Marker</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"short_name": "Web Marker",
|
||||
"name": "A bookmark manager",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,64 @@
|
||||
.App {
|
||||
min-height: 96vh;
|
||||
padding: 2vh;
|
||||
background-color: #1f2c38;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
padding: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
import List from './componets/List';
|
||||
|
||||
function App() {
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const res = await fetch('/get');
|
||||
const resJSON = await res.json();
|
||||
console.log(resJSON)
|
||||
setData(resJSON);
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="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="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
|
||||
</div>
|
||||
<List data={data} />
|
||||
</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"
|
||||
// }
|
||||
// });
|
||||
@@ -0,0 +1,30 @@
|
||||
const List = ({data}) => {
|
||||
console.log(data)
|
||||
|
||||
return (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Title</th>
|
||||
<th>Link</th>
|
||||
<th>Tag</th>
|
||||
</tr>
|
||||
</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>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
Reference in New Issue
Block a user