update (full-stack): react and fastapi updates

full-stack/1-postgresql/README.md

@@ -1,3 +1,6 @@
+# PostgreSQL
+https://www.postgresql.org
+
 # PostgreSQL on Ubuntu
 
 These are Ubuntu instructions. They may vary on Windows and Mac.

full-stack/4-react/src/App.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import gertie from './assets/Gertie_the_Dinosaur_poster.jpg'
-import rawrDinosaur from '/rawr-dinosaur.svg'
+import gertie from './assets/gertie.jpg'
+import rawrDinosaur from '/rawr-dino.svg'
 import './App.css'
 
 function App() {

full-stack/5-react-fastapi/src/App.css

@@ -5,26 +5,32 @@
   text-align: center;
 }
 
-.dinosaur {
-  height: 12em;
+.citizen {
+  height: 24em;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
 }
-.dinosaur.gertie {
-  height: 32em;
+.citizen.users {
+  height: 8em;
 }
-.dinosaur:hover {
+.citizen:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
-.dinosaur.gertie:hover {
+.citizen.users:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
-.card {
-  padding: 2em;
+table {
+  margin: 0 auto;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tr {
+  border-bottom: 1px solid #ddd;
 }
 
-.read-the-docs {
-  color: #888;
+td {
+  padding: 0.5em;
 }

full-stack/5-react-fastapi/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import gertie from './assets/Gertie_the_Dinosaur_poster.jpg'
-import rawrDinosaur from '/rawr-dinosaur.svg'
+import user1 from './assets/user1.svg'
+import user2 from './assets/user2.svg'
+import umbrellas from '/umbrellas.jpg'
 import './App.css'
 import Users from './Users'
 
@@ -10,26 +11,16 @@ function App() {
   return (
     <>
       <div>
-        <a href="https://openclipart.org/detail/234369/rawr-dinosaur" target="_blank">
-          <img src={rawrDinosaur} className="dinosaur" alt="Rawr Dinosaur" />
-        </a>
-        <a href="https://en.wikipedia.org/wiki/Gertie_the_Dinosaur" target="_blank">
-          <img src={gertie} className="dinosaur gertie" alt="Gertie the Dinosaur" />
+        <a href="https://pixabay.com/photos/umbrellas-people-wall-road-rain-7868179/" target="_blank">
+          <img src={umbrellas} className="citizen" alt="Citizen Logo" />
         </a>
+        <hr />
+        <img src={user1} className="citizen users" alt="Users" />
+        <img src={user2} className="citizen users" alt="Users" />
       </div>
+      <h1>Users Report</h1>
+
       <Users />
-      <h1>Gertie the Dinosaur</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }

full-stack/5-react-fastapi/src/Users.jsx

@@ -5,26 +5,32 @@ const UsersContext = React.createContext({
 })
 
 function Users() {
-  console.log('=== Users')
   const [users, setUsers] = useState([])
+
   const fetchUsers = async () => {
     const response = await fetch("http://localhost:8000/users")
     const responseUsers = await response.json()
     console.log(responseUsers)
     setUsers(responseUsers)
   }
+
   useEffect(() => {
     fetchUsers()
   }, [])
+
   return (
-    <UsersContext.Provider value={{users, fetchUsers}}>
-      {users.map(user => (
-        <div key={user.email_id}>
-          <h3>{user.name}</h3>
-          <p>{user.birthday}</p>
-        </div>
-      ))}
-    </UsersContext.Provider>
+    <table>
+      <tr><th>Name</th><th>E-mail</th><th>Birthday</th></tr>
+      <UsersContext.Provider value={{users, fetchUsers}}>
+        {users.map(user => (
+          <tr key={user.email_id}>
+            <td><b>{user.name}</b></td>
+            <td>{user.email_id}</td>
+            <td>{user.birthday}</td>
+          </tr>
+        ))}
+      </UsersContext.Provider>
+    </table>
   )
 }