From 755a1200fa87b37850ee7cc9fa066f3c22be5138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= Date: Sun, 1 Sep 2024 19:38:49 -0300 Subject: [PATCH] fix (full-stack/react-fastapi): duplicated calls --- .../src/view/MedicationItem.jsx | 1 - full-stack/5-react-fastapi/src/App.jsx | 6 +-- full-stack/5-react-fastapi/src/Users.jsx | 36 ----------------- full-stack/5-react-fastapi/src/main.jsx | 4 +- .../src/redux/MedicationRedux.jsx | 39 +++++++++++++++++++ .../5-react-fastapi/src/redux/UserRedux.jsx | 33 ++++++++++++++++ .../5-react-fastapi/src/view/UserItem.jsx | 32 +++++++++++++++ 7 files changed, 107 insertions(+), 44 deletions(-) delete mode 100644 full-stack/5-react-fastapi/src/Users.jsx create mode 100644 full-stack/5-react-fastapi/src/redux/MedicationRedux.jsx create mode 100644 full-stack/5-react-fastapi/src/redux/UserRedux.jsx create mode 100644 full-stack/5-react-fastapi/src/view/UserItem.jsx 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 ( - - - - {users.map(user => ( - - - - - - ))} - -
NameE-mailBirthday
{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 ( + <> + + + + + + + +
NameE-mailBirthday
{name}{email_id}{birthday}
+ +
+ + + ) +}