diff --git a/frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationItem.jsx b/frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationItem.jsx
index f1dc351..8c92c10 100644
--- a/frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationItem.jsx
+++ b/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
diff --git a/full-stack/5-react-fastapi/src/App.jsx b/full-stack/5-react-fastapi/src/App.jsx
index be1ffa5..78b00db 100644
--- a/full-stack/5-react-fastapi/src/App.jsx
+++ b/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 (
<>
@@ -20,7 +18,7 @@ function App() {
Users Report
-
+
>
)
}
diff --git a/full-stack/5-react-fastapi/src/Users.jsx b/full-stack/5-react-fastapi/src/Users.jsx
deleted file mode 100644
index 8f8fd14..0000000
--- a/full-stack/5-react-fastapi/src/Users.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-const UsersContext = React.createContext({
- users: [], fetchUsers: () => {}
-})
-
-function Users() {
- const [users, setUsers] = useState([])
-
- const fetchUsers = async () => {
- const response = await fetch("http://localhost:8000/users")
- const responseUsers = await response.json()
- setUsers(responseUsers)
- }
-
- useEffect(() => {
- fetchUsers()
- }, [])
-
- return (
-
- Name | E-mail | Birthday |
-
- {users.map(user => (
-
- {user.name} |
- {user.email_id} |
- {user.birthday} |
-
- ))}
-
-
- )
-}
-
-export default Users
diff --git a/full-stack/5-react-fastapi/src/main.jsx b/full-stack/5-react-fastapi/src/main.jsx
index 89f91e5..5bbdc12 100644
--- a/full-stack/5-react-fastapi/src/main.jsx
+++ b/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(
-
-
- ,
+
)
diff --git a/full-stack/5-react-fastapi/src/redux/MedicationRedux.jsx b/full-stack/5-react-fastapi/src/redux/MedicationRedux.jsx
new file mode 100644
index 0000000..7beac37
--- /dev/null
+++ b/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) }
+}
+
diff --git a/full-stack/5-react-fastapi/src/redux/UserRedux.jsx b/full-stack/5-react-fastapi/src/redux/UserRedux.jsx
new file mode 100644
index 0000000..10ce900
--- /dev/null
+++ b/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
+}
+
diff --git a/full-stack/5-react-fastapi/src/view/UserItem.jsx b/full-stack/5-react-fastapi/src/view/UserItem.jsx
new file mode 100644
index 0000000..d7f5fa6
--- /dev/null
+++ b/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 (
+ <>
+
+ Name | E-mail | Birthday |
+
+ {name} |
+ {email_id} |
+ {birthday} |
+
+
+
+
+
+ >
+ )
+}