use pg connection pool, init demo

Author: nadav867

client/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Home from './containers/Home';
-import Test from './containers/Test';
+import Test from './containers/Demo';
 import Navbar from './components/Navbar';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 import './App.css';
@@ -12,7 +12,7 @@ function App() {
         <Navbar />
         <Switch>
           <Route exact path="/" component={Home} />
-          <Route path="/test" component={Test} />
+          <Route path="/demo" component={Test} />
         </Switch>
       </BrowserRouter>
     </div>

client/src/components/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar = () => {
       className="navbar"
     >
       <Link to="/">Home</Link>
-      <Link to="/test">Test React Router</Link>
+      <Link to="/demo">Demo</Link>
     </div>
   );
 };

client/src/containers/Test.tsx renamed to client/src/containers/Demo.tsx

@@ -2,12 +2,10 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 
 const Test = () => {
-  const [testMsg, setTestMsg] = useState<string>('');
-
   useEffect(() => {
     (async () => {
-      const res = await axios.get('/api/test');
-      setTestMsg(res.data.msg);
+      const res = await axios.get('/api/demo');
+      console.log(res.data);
     })();
   }, []);
 
@@ -22,9 +20,7 @@ const Test = () => {
         fontSize: '2rem',
         fontWeight: 'bold'
       }}
-    >
-      {`${testMsg} ${process.env.REACT_APP_TEST_ENV}`}
-    </div>
+    ></div>
   );
 };
 

docker-compose-dev.yml

@@ -15,6 +15,8 @@ services:
       - ./database/data:/var/lib/postgresql/data
       - ./database/initdb.sql:/docker-entrypoint-initdb.d/init.sql
     container_name: postgres_db
+  ##############
+  ## SERVER ##
   server:
     build:
       context: ./server
@@ -54,6 +56,7 @@ services:
     links:
       - server
     stdin_open: true
+    restart: always
     container_name: client
 networks:
   webapp:

server/src/index.ts

@@ -9,34 +9,32 @@ app.use(express.json());
 app.use(cors());
 
 // postgres configuration
-const Client = pg.Client;
+const Pool = pg.Pool;
 
-const client = new Client({
+const pool = new Pool({
   user: process.env.POSTGRES_USER,
   password: process.env.POSTGRES_PASSWORD,
   host: process.env.POSTGRES_HOST,
   database: process.env.POSTGRES_DB,
   port: 5432
 });
 
-client
-  .connect()
-  .then(() => {
-    console.log('connected succecfuly');
-  })
-  .then(() =>
-    client.query('select Todo from Todolist', (err, res) => {
-      if (err) console.log(err);
-      console.log(res);
-    })
-  );
-
 app.get('/api/start', (req, res) => {
   res.json({ msg: 'Start building your Postgres-Express-React Application' });
 });
 
-app.get('/api/test', (req, res) => {
-  res.json({ msg: 'This is a react-router test' });
+app.get('/api/demo', (req, res) => {
+  pool
+    .connect()
+    .then((client) => {
+      console.log('connected succecfuly');
+      client.query('select Todo,Completed from Todolist', (err, queryRes) => {
+        if (err) throw err;
+        res.json({ data: queryRes?.rows });
+        client.release();
+      });
+    })
+    .catch((err) => console.log(err));
 });
 
 const PORT = process.env.PORT || 5500;