Add a greeting populated by the backend

This is to support the ability to have something easy to change
on the backend during the quick start

Author: mikesir87

backend/src/index.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const app = express();
 const db = require('./persistence');
+const getGreeting = require('./routes/getGreeting');
 const getItems = require('./routes/getItems');
 const addItem = require('./routes/addItem');
 const updateItem = require('./routes/updateItem');
@@ -9,6 +10,7 @@ const deleteItem = require('./routes/deleteItem');
 app.use(express.json());
 app.use(express.static(__dirname + '/static'));
 
+app.get('/api/greeting', getGreeting);
 app.get('/api/items', getItems);
 app.post('/api/items', addItem);
 app.put('/api/items/:id', updateItem);

backend/src/routes/getGreeting.js

@@ -0,0 +1,7 @@
+const GREETING = 'Hello world!';
+
+module.exports = async (req, res) => {
+    res.send({
+        greeting: GREETING,
+    });
+};

client/src/App.jsx

@@ -2,12 +2,14 @@ import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import { TodoListCard } from './components/TodoListCard';
+import { Greeting } from './components/Greeting';
 
 function App() {
     return (
         <Container>
             <Row>
                 <Col md={{ offset: 3, span: 6 }}>
+                    <Greeting />
                     <TodoListCard />
                 </Col>
             </Row>

client/src/components/Greeting.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export function Greeting() {
+    const [greeting, setGreeting] = useState(null);
+
+    useEffect(() => {
+        fetch('/api/greeting')
+            .then((res) => res.json())
+            .then((data) => setGreeting(data.greeting));
+    }, [setGreeting]);
+
+    if (!greeting) return null;
+
+    return <h1 className="text-center mb-5">{greeting}</h1>;
+}