-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update (frameworks/react): Reducer with two Components
- Loading branch information
Showing
26 changed files
with
4,959 additions
and
3,934 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,5 +24,5 @@ export default function MedicationItem() { | |
Increase quantity | ||
</button> | ||
</div> | ||
); | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -46,5 +46,5 @@ export default function MedicationItem() { | |
Increase quantity | ||
</button> | ||
</div> | ||
); | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -55,5 +55,5 @@ export default function MedicationItem() { | |
Decrease quantity | ||
</button> | ||
</div> | ||
); | ||
) | ||
} |
17 changes: 0 additions & 17 deletions
17
frameworks/react/6-5-hook-context/src/MedicationChange.jsx
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
3,895 changes: 0 additions & 3,895 deletions
3,895
frameworks/react/6-5-hook-context/src/assets/medication2.svg
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import ReactDOM from 'react-dom/client' | ||
import MedicationItem from './view/MedicationItem.jsx' | ||
import MedicationTrack from './view/MedicationTrack.jsx' | ||
|
||
const root = ReactDOM.createRoot(document.getElementById('root')) | ||
root.render( | ||
<div style={{ display: 'flex' }}> | ||
<MedicationItem /> | ||
<MedicationTrack /> | ||
</div> | ||
) |
36 changes: 36 additions & 0 deletions
36
frameworks/react/6-5-hook-reducer-2-async/src/redux/MedicationRedux.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
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 | ||
|
||
switch (action.type) { | ||
case 'increase_quantity': newQuantity++; break | ||
case 'decrease_quantity': newQuantity--; break | ||
} | ||
|
||
return { ...medication, | ||
quantity: newQuantity, | ||
weeklyDose: calculateWeekly(dose, newQuantity, frequency) } | ||
} | ||
|
26 changes: 26 additions & 0 deletions
26
frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
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 | ||
|
||
return ( | ||
<div style={{ width: '300px', background: 'lightgray' }}> | ||
<img src={image} width="50px" /> | ||
<h1>{name}</h1> | ||
<p>{description}</p> | ||
<p><b>dose:</b> {dose} {unity}</p> | ||
<p><b>frequency:</b> {quantity} / {frequency}</p> | ||
<button type="button" onClick={() => medicationDispatch({ type: 'increase_quantity' })}> | ||
Increase quantity | ||
</button> | ||
<br /> | ||
<button type="button" onClick={() => medicationDispatch({ type: 'decrease_quantity' })}> | ||
Decrease quantity | ||
</button> | ||
</div> | ||
) | ||
} |
17 changes: 17 additions & 0 deletions
17
frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationTrack.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { useReducer } from 'react' | ||
import { medicationModel, medicationReducer } from '../redux/MedicationRedux' | ||
|
||
export default function MedicationTrack() { | ||
|
||
const [medication, medicationDispatch] = useReducer(medicationReducer, medicationModel) | ||
|
||
const { name, unity, weeklyDose } = medication | ||
|
||
return ( | ||
<div style={{ width: '300px', border: '1px solid darkgray', textAlign: 'center' }}> | ||
<h1>Medication Track</h1> | ||
<h2>{name}</h2> | ||
<p><b>weekly dose:</b> {weeklyDose} {unity}</p> | ||
</div> | ||
) | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script src="src/main.jsx" type="module"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.