fix (full-stack/react-fastapi): duplicated calls

frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationItem.jsx

@@ -2,7 +2,6 @@ import { useReducer } from 'react'
 import { medicationModel, medicationReducer } from '../redux/MedicationRedux'
 
 export default function MedicationItem() {
-
   const [medication, medicationDispatch] = useReducer(medicationReducer, medicationModel)
 
   const { name, description, image, dose, unity, quantity, frequency } = medication

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

@@ -3,11 +3,9 @@ import user1 from './assets/user1.svg'
 import user2 from './assets/user2.svg'
 import umbrellas from '/umbrellas.jpg'
 import './App.css'
-import Users from './Users'
+import UserItem from './view/UserItem.jsx'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
       <div>
@@ -20,7 +18,7 @@ function App() {
       </div>
       <h1>Users Report</h1>
 
-      <Users />
+      <UserItem />
     </>
   )
 }

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

@@ -4,7 +4,5 @@ import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <App />
 )

full-stack/5-react-fastapi/src/redux/MedicationRedux.jsx

@@ -0,0 +1,39 @@
+export const medicationModel = {
+  name: 'Velocirest',
+  description: 'Description of dosage and frequency of use of Velocirest.',
+  image: '/src/assets/medication1.svg',
+  dose: 200,
+  unity: 'mg',
+  quantity: 1,
+  frequency: 'day',
+  weeklyDose: calculateWeekly(200, 1, 'day')
+}
+
+function calculateWeekly(dose, quantity, frequency) {
+  const frequencyTimes = {
+    '8 hours': 21,
+    'day': 7,
+    'week': 1
+  }
+
+  return dose * quantity * frequencyTimes[frequency]
+}
+
+export function medicationReducer(medication, action) {
+  const { dose, quantity, frequency } = medication
+
+  let newQuantity = quantity
+
+  console.log('=== action')
+  console.log(action)
+
+  switch (action.type) {
+    case 'increase_quantity': newQuantity++; break
+    case 'decrease_quantity': newQuantity--; break
+  }
+
+  return { ...medication,
+           quantity: newQuantity,
+           weeklyDose: calculateWeekly(dose, newQuantity, frequency) }
+}
+

full-stack/5-react-fastapi/src/redux/UserRedux.jsx

@@ -0,0 +1,33 @@
+export const userModel = {
+  name: '',
+  email_id: '',
+  birthday: ''
+}
+
+let userSet = []
+let userPosition = 0
+
+export async function fetchUsers() {
+  const response = await fetch("http://localhost:8000/users")
+  userSet = await response.json()
+}
+
+export function userReducer(user, action) {
+  let newUser = user
+
+  switch (action.type) {
+    case 'first_user':
+      userPosition = 0
+      break 
+    case 'next_user':
+      if (userPosition < userSet.length - 1)
+        userPosition++
+      break
+  }
+
+  if (userPosition < userSet.length)
+    newUser = userSet[userPosition]
+
+  return newUser
+}
+

full-stack/5-react-fastapi/src/view/UserItem.jsx

@@ -0,0 +1,32 @@
+import { useReducer, useEffect } from 'react'
+import { userModel, userReducer, fetchUsers } from '../redux/UserRedux'
+
+export default function Users() {
+  const [user, userDispatch] = useReducer(userReducer, userModel)
+
+  useEffect(() => {
+    fetchUsers()
+  }, [])
+
+  const { name, email_id, birthday } = user
+
+  return (
+    <>
+    <table>
+      <tr><th>Name</th><th>E-mail</th><th>Birthday</th></tr>
+      <tr key={email_id}>
+        <td><b>{name}</b></td>
+        <td>{email_id}</td>
+        <td>{birthday}</td>
+      </tr>
+    </table>
+    <button type="button" onClick={() => userDispatch({ type: 'first_user' })}>
+      First user
+    </button>
+    <br />
+    <button type="button" onClick={() => userDispatch({ type: 'next_user' })}>
+      Next user
+    </button>
+    </>
+  )
+}