update (frameworks/react): Reducer with two Components

santanche · Aug 30, 2024 · 6ba1c5a · 6ba1c5a
1 parent 7f47db2
commit 6ba1c5a
Show file tree

Hide file tree

Showing 26 changed files with 4,959 additions and 3,934 deletions.
diff --git a/frameworks/react/6-2-hook-state-object/src/MedicationItem.jsx b/frameworks/react/6-2-hook-state-object/src/MedicationItem.jsx
@@ -24,5 +24,5 @@ export default function MedicationItem() {
         Increase quantity
       </button>
     </div>
-  );
+  )
 }
diff --git a/frameworks/react/6-3-hook-effect-object/src/MedicationItem.jsx b/frameworks/react/6-3-hook-effect-object/src/MedicationItem.jsx
@@ -46,5 +46,5 @@ export default function MedicationItem() {
         Increase quantity
       </button>
     </div>
-  );
+  )
 }
diff --git a/frameworks/react/6-4-hook-reducer/src/MedicationItem.jsx b/frameworks/react/6-4-hook-reducer/src/MedicationItem.jsx
@@ -55,5 +55,5 @@ export default function MedicationItem() {
         Decrease quantity
       </button>
     </div>
-  );
+  )
 }
diff --git a/frameworks/react/6-5-hook-context/src/MedicationChange.jsx b/frameworks/react/6-5-hook-context/src/MedicationChange.jsx
diff --git a/frameworks/react/6-5-hook-context/src/MedicationItem.jsx b/frameworks/react/6-5-hook-context/src/MedicationItem.jsx
diff --git a/frameworks/react/6-5-hook-context/src/assets/medication2.svg b/frameworks/react/6-5-hook-context/src/assets/medication2.svg
diff --git a/frameworks/react/6-5-hook-context/src/main.jsx b/frameworks/react/6-5-hook-context/src/main.jsx
diff --git a/frameworks/react/6-5-hook-context/index.html → ...react/6-5-hook-reducer-2-async/index.html b/frameworks/react/6-5-hook-context/index.html → ...react/6-5-hook-reducer-2-async/index.html
diff --git a/.../react/6-5-hook-context/package-lock.json → ...-5-hook-reducer-2-async/package-lock.json b/.../react/6-5-hook-context/package-lock.json → ...-5-hook-reducer-2-async/package-lock.json
diff --git a/...works/react/6-5-hook-context/package.json → ...act/6-5-hook-reducer-2-async/package.json b/...works/react/6-5-hook-context/package.json → ...act/6-5-hook-reducer-2-async/package.json
diff --git a/...5-hook-context/src/assets/medication1.svg → ...educer-2-async/src/assets/medication1.svg b/...5-hook-context/src/assets/medication1.svg → ...educer-2-async/src/assets/medication1.svg
diff --git a/frameworks/react/6-5-hook-reducer-2-async/src/main.jsx b/frameworks/react/6-5-hook-reducer-2-async/src/main.jsx
@@ -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>
+)
diff --git a/frameworks/react/6-5-hook-reducer-2-async/src/redux/MedicationRedux.jsx b/frameworks/react/6-5-hook-reducer-2-async/src/redux/MedicationRedux.jsx
@@ -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) }
+}
+
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
@@ -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>
+  )
+}
diff --git a/frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationTrack.jsx b/frameworks/react/6-5-hook-reducer-2-async/src/view/MedicationTrack.jsx
@@ -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>
+  )
+}
diff --git a/...rks/react/6-5-hook-context/vite.config.js → ...t/6-5-hook-reducer-2-async/vite.config.js b/...rks/react/6-5-hook-context/vite.config.js → ...t/6-5-hook-reducer-2-async/vite.config.js
diff --git a/frameworks/react/6-6-hook-reducer-2-sync/index.html b/frameworks/react/6-6-hook-reducer-2-sync/index.html
@@ -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>