Added backend+database support

.gitignore

@@ -1,23 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+webmarker/node_modules
+webmarker/..pnp
+webmarker/.pnp.js
+webmarker/coverage
+webmarker/build
+webmarker/.DS_Store
+webmarker/.env.local
+webmarker/.env.development.local
+webmarker/.env.test.local
+webmarker/.env.production.local
+webmarker/npm-debug.log*
+webmarker/yarn-debug.log*
+webmarker/yarn-error.log*
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+webmarker_backend/node_modules
+webmarker_backend/..pnp
+webmarker_backend/.pnp.js
+webmarker_backend/coverage
+webmarker_backend/build
+webmarker_backend/.DS_Store
+webmarker_backend/.env.local
+webmarker_backend/.env.development.local
+webmarker_backend/.env.test.local
+webmarker_backend/.env.production.local
+webmarker_backend/npm-debug.log*
+webmarker_backend/yarn-debug.log*
+webmarker_backend/yarn-error.log*

webmarker/package.json

@@ -34,5 +34,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:3001/"
 }

webmarker/src/App.css

@@ -1,4 +1,5 @@
 .App {
+  min-height: 96vh;
   padding: 2vh;
   background-color: #1f2c38;
   color: white;
@@ -43,6 +44,7 @@ textarea:focus, input:focus{
 .material-icons-outlined.md-36 { font-size: 36px; }
 
 .table {
+  width: 100%;
   text-align: left;
   padding-top: 20px;
 }
@@ -56,3 +58,7 @@ textarea:focus, input:focus{
   font-size: 1.6rem;
   padding: 5px;
 }
+
+.table tbody tr:nth-of-type(2n-1) {
+  background-color:#273949;
+}

webmarker/src/App.js

@@ -7,9 +7,9 @@ function App() {
 
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch('https://api.github.com/users');
+      const res = await fetch('/get');
       const resJSON = await res.json();
-      // data.sort((b, a) => new Date(b.Date) - new Date(a.Date)) // Sort by date
+      console.log(resJSON)
       setData(resJSON);
     }
 
@@ -30,3 +30,22 @@ function App() {
 }
 
 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/List.js

@@ -9,15 +9,17 @@ const List = ({data}) => {
                 <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.login}</td>
-                <td>{e.node_id}</td>
-                <td>{e.html_url}</td>
+                <td>{e.name}</td>
+                <td>{e.title}</td>
+                <td>{e.link}</td>
+                <td>{e.tag}</td>
             </tr>
         })}
         </tbody>

webmarker_backend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "webmarker_backend",
+  "version": "1.0.0",
+  "description": "The backend",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.17.3",
+    "mongodb": "^4.5.0"
+  }
+}

webmarker_backend/server.js

@@ -0,0 +1,64 @@
+const express = require('express');
+const app = express();
+const { MongoClient } = require('mongodb');
+const port = process.env.PORT || 3001;
+
+const uri = "mongodb://localhost:27017";
+
+const client = new MongoClient(uri);
+
+app.use(express.json());
+
+app.get('/get', async (req, res) => {
+  const data = await getDoc();
+  res.send(data);
+});
+
+app.post('/post', (req, res) => {
+  // insertDoc(req.body);
+  console.log(req.body)
+});
+
+async function insertDoc(doc) {
+  try {
+    await client.connect();
+
+    const database = client.db("sample_db");
+    const list = database.collection("list");
+    const result = await list.insertOne(doc);
+
+    console.log('DONE');
+  } 
+  
+  catch(err) {
+    console.log(err);
+  }
+  
+  finally {
+    await client.close();
+  }
+}
+
+async function getDoc() {
+  try {
+    await client.connect();
+
+    const database = client.db("sample_db");
+    const list = database.collection("list");
+    const result = await list.find({}).toArray();
+
+    return result;
+  }
+  
+  catch(err) {
+    console.log(err);
+  }
+  
+  finally {
+    await client.close();
+  }
+}
+
+app.listen(port, () => {
+  console.log(`Success! running on port ${port}.`);
+});