change endpoints to async/await

Author: nadav867

client/src/demo/Demo.tsx

@@ -38,7 +38,6 @@ const useStyles = makeStyles({
 const Demo = () => {
   const classes = useStyles();
   const [newTodo, setNewTodo] = useState<string>('');
-  const [isRequesting, setIsRequesting] = useState<boolean>(false);
   const [todos, setTodos] = useState<Todo[]>([]);
 
   useEffect(() => {
@@ -67,20 +66,18 @@ const Demo = () => {
 
   const onSubmitCreateTodo = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (newTodo && !isRequesting) {
-      setIsRequesting(true);
+    if (newTodo) {
       try {
         const res = await axios({
           method: 'POST',
           url: '/api/create_todo',
-          data: { todo: newTodo }
+          data: { todoContent: newTodo }
         });
-        if (res.status === 200) {
+        if (res.status === 201) {
           await getTodos();
         }
       } catch (err) {
-        setIsRequesting(false);
-        throw err;
+        console.error(err);
       } finally {
         setNewTodo('');
       }
@@ -92,54 +89,46 @@ const Demo = () => {
     value: string | boolean,
     column: string
   ) => {
-    if (!isRequesting) {
-      setIsRequesting(true);
-      try {
-        const response = await axios({
-          method: 'PUT',
-          url: '/api/update_todo',
-          params: { id },
-          data: { value, column }
-        });
-        return response;
-      } catch (err) {
-        throw err;
-      } finally {
-        setIsRequesting(false);
-      }
+    try {
+      const response = await axios({
+        method: 'PUT',
+        url: '/api/update_todo',
+        params: { id },
+        data: { value, column }
+      });
+      return response;
+    } catch (err) {
+      console.error(err);
     }
   };
 
   const onDeleteTodo = async (id: number) => {
-    if (!isRequesting) {
-      setIsRequesting(true);
-      try {
-        const res = await axios({
-          method: 'DELETE',
-          url: '/api/delete_todo',
-          params: { id },
-          data: {}
-        });
-        if (res.status === 200) {
-          const newTodos = todos.filter((todo) => todo.id !== id);
-          setTodos([...newTodos]);
-        }
-      } catch (err) {
-        console.error(err);
-      } finally {
-        setIsRequesting(false);
+    try {
+      const res = await axios({
+        method: 'DELETE',
+        url: '/api/delete_todo',
+        params: { id },
+        data: {}
+      });
+      if (res.status === 200) {
+        const newTodos = todos.filter((todo) => todo.id !== id);
+        setTodos([...newTodos]);
       }
+    } catch (err) {
+      console.error(err);
     }
   };
 
   const getTodos = async () => {
     try {
-      const res = await axios.get('/api/get_todos');
+      const res = await axios({
+        method: 'GET',
+        url: '/api/get_todos',
+        params: { orderBy: 'created_at', direction: 'desc' }
+      });
       setTodos(res.data.data);
     } catch (err) {
-      throw err;
-    } finally {
-      setIsRequesting(false);
+      console.error(err);
     }
   };
 
@@ -214,7 +203,7 @@ const Demo = () => {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {todos.map((todo) => {
+                  {todos?.map((todo) => {
                     return (
                       <TableRow
                         hover

server/src/api/routes/routes.ts

@@ -1,77 +1,47 @@
 import { Router } from 'express';
-import { pool } from '../db-config';
+import { pool as db } from '../db-config';
 
 export const router = Router();
 
 router.get('/get_todos', async (req, res) => {
-  pool
-    .connect()
-    .then((client) => {
-      client.query(
-        `SELECT * FROM Todolist ORDER BY created_at DESC`,
-        (err, queryRes) => {
-          if (err) {
-            console.log(err.stack);
-            res.status(500).send();
-          } else res.json({ data: queryRes.rows });
-          client.release();
-        }
-      );
-    })
-    .catch((err) => console.log(err));
+  const { orderBy, direction } = req.query;
+  try {
+    const sqlRes = await db.query(
+      `SELECT * FROM Todolist ORDER BY ${orderBy} ${direction}`
+    );
+    res.json({ data: sqlRes.rows });
+  } catch (err) {
+    throw err;
+  }
 });
 
 router.post('/create_todo', async (req, res) => {
-  const { todo } = req.body;
-  const sqlQuery = {
-    text: `INSERT INTO Todolist(todo) VALUES($1)`,
-    values: [todo]
-  };
-  pool
-    .connect()
-    .then((client) => {
-      client.query(sqlQuery, (err) => {
-        if (err) {
-          console.log(err.stack);
-          res.status(500).send();
-        } else res.status(200).send();
-        client.release();
-      });
-    })
-    .catch((err) => console.log(err));
+  const { todoContent } = req.body;
+  try {
+    await db.query(`INSERT INTO Todolist(todo) VALUES ($1)`, [todoContent]);
+    res.status(201).send();
+  } catch (err) {
+    throw err;
+  }
 });
 
-router.put('/update_todo', (req, res) => {
+router.put('/update_todo', async (req, res) => {
   const { id } = req.query;
   const { value, column } = req.body;
-  const sqlQuery = `UPDATE Todolist SET ${column} = ${value} WHERE id=${id}`;
-  pool
-    .connect()
-    .then((client) => {
-      client.query(sqlQuery, (err) => {
-        if (err) {
-          res.status(500).send();
-        } else res.status(200).send();
-        client.release();
-      });
-    })
-    .catch((err) => console.log(err));
+  try {
+    await db.query(`UPDATE Todolist SET ${column} = ${value} WHERE id=${id}`);
+    res.status(200).send();
+  } catch (err) {
+    throw err;
+  }
 });
 
-router.delete('/delete_todo/', (req, res) => {
+router.delete('/delete_todo/', async (req, res) => {
   const { id } = req.query;
-  const sqlQuery = `DELETE FROM Todolist WHERE id=${id}`;
-
-  pool
-    .connect()
-    .then((client) => {
-      client.query(sqlQuery, (err) => {
-        if (err) {
-          res.status(500).send();
-          console.log(err.stack);
-        } else res.status(200).send();
-      });
-      client.release();
-    })
-    .catch((err) => console.log(err));
+  try {
+    await db.query(`DELETE FROM Todolist WHERE id=${id}`);
+    res.status(200).send();
+  } catch (err) {
+    throw err;
+  }
 });