From c473ef9517aebc1597e273b37355f479b3244159 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:24:40 -0600 Subject: [PATCH 01/21] Added calculate button to App.tsx with Tailwind styling --- .../Telemetry-Teaser/src/App.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 488bc934..9efae99f 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -20,6 +20,15 @@ const App = () => {
+ + {/*make the button*/} +
+ +
From d5c160cd7150ce893a72855ea640b6879ad1ee8e Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:30:11 -0600 Subject: [PATCH 02/21] created state variables to st ore input values --- .../Telemetry-Teaser/src/App.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 9efae99f..c9cea26e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -2,9 +2,18 @@ import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; +import React, { useState } from "react"; const App = () => { + const[speed, setSpeed] = useState(0); + const[battery, setBattery] = useState(0); + const[weather, setWeather] = useState(0); + const[range, setRange] = useState(0); + const calculateRange = () => { + //range = -(s * s * b / 2500) + (4 * b) + w + //Where s = speed, b = battery percentage w = weather + return; } @@ -29,6 +38,7 @@ const App = () => { > Calculate + From fe251dccad7c7d3797c01b068159e1c37b14c7bd Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 18:37:22 -0600 Subject: [PATCH 03/21] Implemented the calculateRange function --- .../Telemetry-Teaser/src/App.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index c9cea26e..291574cc 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -6,14 +6,16 @@ import React, { useState } from "react"; const App = () => { const[speed, setSpeed] = useState(0); - const[battery, setBattery] = useState(0); + const[battery, setBattery] = useState(100); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); - + const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather - + const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; + + setRange(calculatedRange); return; } From c6044754324135b7cc6e48434b9018dca8523c49 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:10:59 -0600 Subject: [PATCH 04/21] working on making the speed button q --- .../Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 291574cc..c9e2b7a0 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -10,11 +10,14 @@ const App = () => { const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); + // Error messages + const [speedError, setSpeedError] = useState(""); + const [batteryError, setBatteryError] = useState(""); + const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; - setRange(calculatedRange); return; } @@ -25,7 +28,7 @@ const App = () => {
- + setSpeed(e.target.value)}/>
From 9e20d156a055e82f5021211831e7a177a994cd33 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:15:43 -0600 Subject: [PATCH 05/21] made both battery and speed required --- .../Telemetry-Teaser/src/App.tsx | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index c9e2b7a0..f41bb66e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -5,15 +5,31 @@ import WeatherInput from "~/components/weatherInput"; import React, { useState } from "react"; const App = () => { - const[speed, setSpeed] = useState(0); + const[speed, setSpeed] = useState(0); const[battery, setBattery] = useState(100); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); // Error messages - const [speedError, setSpeedError] = useState(""); - const [batteryError, setBatteryError] = useState(""); + const [speedError, setSpeedError] = useState("") + const [batteryError, setBatteryError] = useState("") + const validInputs = () =>{ + let valid = true; + + //reset battery and speed + setSpeedError(""); + setBatteryError(""); + + //check the input + if(speed === null){ + valid = false; + setSpeedError("Speed is required"); + }else if(battery === null){ + valid = false; + setSpeedError("Battery is required"); + } + } const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather @@ -28,8 +44,8 @@ const App = () => {
- setSpeed(e.target.value)}/> - + setSpeed(Number(e.target.value))}/> + setSpeed(Number(e.target.value))}/>
From 242b7668618b0ead33782877ce19542cb647c4c1 Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 19:55:23 -0600 Subject: [PATCH 06/21] working on the third step --- .../Telemetry-Teaser/src/App.tsx | 45 +++++++++++++++---- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index f41bb66e..e4f9037c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -5,8 +5,8 @@ import WeatherInput from "~/components/weatherInput"; import React, { useState } from "react"; const App = () => { - const[speed, setSpeed] = useState(0); - const[battery, setBattery] = useState(100); + const[speed, setSpeed] = useState(""); + const[battery, setBattery] = useState(""); const[weather, setWeather] = useState(0); const[range, setRange] = useState(0); @@ -14,6 +14,16 @@ const App = () => { const [speedError, setSpeedError] = useState("") const [batteryError, setBatteryError] = useState("") + //to avoid the type errors: + const handleSpeedChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSpeed(value === "" ? "" : Number(value)) + } + const handleBatteryChange = (e: React.ChangeEvent) => { + const value = e.target.value; + // Allow empty input, or convert to a number + setBattery(value === "" ? "" : Number(value)); + }; const validInputs = () =>{ let valid = true; @@ -22,19 +32,34 @@ const App = () => { setBatteryError(""); //check the input - if(speed === null){ + if(speed === ""){ valid = false; setSpeedError("Speed is required"); - }else if(battery === null){ + return valid; + }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){ + valid = false; + setSpeedError("The speed should be with the range of 0 to 90"); + } + + if(battery === ""){ valid = false; setSpeedError("Battery is required"); + return valid; } + else if (typeof battery === "number" && (battery < 0 || battery > 100)) { + valid = false; + setSpeedError("The battery percentage should be within the range of 0 to 100"); + } + return valid; } const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather - const calculatedRange = -(speed * speed * battery / 2500) + (4 * battery) + weather; - setRange(calculatedRange); + if(validInputs()){ //only calculates if the inputs are valid + const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; + setRange(calculatedRange); + } + return; } @@ -44,8 +69,12 @@ const App = () => {
- setSpeed(Number(e.target.value))}/> - setSpeed(Number(e.target.value))}/> + + {speedError &&
{speedError}
} {/* speed error message */} + + + {batteryError &&
{batteryError}
} {/* Battery error message */} +
From bc3ae53da9526ae761aef9c1a11ec005be7a370b Mon Sep 17 00:00:00 2001 From: zainab_majid Date: Tue, 1 Oct 2024 20:19:50 -0600 Subject: [PATCH 07/21] displaying the result --- .../Telemetry-Teaser/src/App.tsx | 17 +++++++++++++---- .../src/components/batteryInput/index.tsx | 10 +++++++++- .../src/components/speedInput/index.tsx | 11 ++++++++++- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index e4f9037c..949fff4c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -18,11 +18,15 @@ const App = () => { const handleSpeedChange = (e: React.ChangeEvent) => { const value = e.target.value; setSpeed(value === "" ? "" : Number(value)) + console.log("Speed:", value); // Add this line + } const handleBatteryChange = (e: React.ChangeEvent) => { const value = e.target.value; // Allow empty input, or convert to a number setBattery(value === "" ? "" : Number(value)); + console.log("Battery:", value); // Add this line + }; const validInputs = () =>{ let valid = true; @@ -35,16 +39,14 @@ const App = () => { if(speed === ""){ valid = false; setSpeedError("Speed is required"); - return valid; }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){ valid = false; - setSpeedError("The speed should be with the range of 0 to 90"); + setSpeedError("The speed should be within the range of 0 to 90"); } if(battery === ""){ valid = false; setSpeedError("Battery is required"); - return valid; } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { valid = false; @@ -58,6 +60,8 @@ const App = () => { if(validInputs()){ //only calculates if the inputs are valid const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; setRange(calculatedRange); + }else { + setRange(-1); // Reset range if inputs are invalid } return; @@ -87,8 +91,13 @@ const App = () => { className="bg-blue-500 text-white font-bold py-2 px-4 rounded w-48" > Calculate + {range !== -1 && ( +
+

The predicted range of the Eylsia is {range.toFixed(2)} km.

+
+ )}
- +
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx index ca4586c0..33fb5777 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx @@ -1,4 +1,9 @@ -const BatteryInput = () => { +interface BatteryInputProps { + value: number | string; // Expecting a string for the input value + onChange: (e: React.ChangeEvent) => void; // Function to handle changes +} + +const BatteryInput: React.FC = ({ value, onChange }) => { return (
@@ -8,6 +13,9 @@ const BatteryInput = () => { name="battery" type="number" placeholder="Battery" + value={value} + onChange={onChange} + required />
); diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx index aa381c14..f321857d 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx @@ -1,4 +1,10 @@ -const SpeedInput = () => { +// Define the props type +interface SpeedInputProps { + value: number | string; // Expecting a string for the input value + onChange: (e: React.ChangeEvent) => void; // Function to handle changes +} + +const SpeedInput: React.FC = ({ value, onChange }) => { return ( <>
@@ -9,6 +15,9 @@ const SpeedInput = () => { name="speed" type="number" placeholder="Speed" + value={value} + onChange={onChange} + required />
From 9f06700eff56b3e0ee7be2550396f8430f5aff04 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 5 Oct 2024 14:18:59 -0600 Subject: [PATCH 08/21] centered the butto n --- .DS_Store | Bin 0 -> 6148 bytes Recruit-Training/.DS_Store | Bin 0 -> 6148 bytes .../Telemetry-Teaser/src/App.tsx | 21 ++++++++++-------- 3 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 .DS_Store create mode 100644 Recruit-Training/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..bf2d4bb85669df167135e571ad097d37a258436f GIT binary patch literal 6148 zcmeHKU5nE|6uq+>ZR(;#Q1nFz_*%8@in90;yOm`h{9v;vqEeG4tijot(xlsmQpl_N zV|?_V_+Na|GanV3Dk6xuG8gWgo0)rVW=_dWhlp5jlHDW|`lQIGgW$rB6jf4)e5?sYmLuiG(?Vo&+LIHJ zm6{uy0l(dD4}wdx+18y-xY^yFcf#5BX15dG+PXcTxBZJ(Z`|Da7Ef zz5)O}bZbMb{xm2~Xfd)_8^j2V87k0FnZ05#Lq~sT^CFA2K|?2IFCWalnb{i(({D%p zP^S}%47%1S;1pO^VBI_h>ioa|^ZWlY$vrs*oC5!q0?g~j{T`NN&(@X2sk1hOzk(}M od9^`JL1T|&9jK%DGF%(RLKOfbi?u=Yz}z1JErV;E0)JJ3ulrk?jQ{`u literal 0 HcmV?d00001 diff --git a/Recruit-Training/.DS_Store b/Recruit-Training/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7d417eab9d299d8a23bbaeb745e5de2d521aa4a9 GIT binary patch literal 6148 zcmeHKO>fgc5S?uUb*PYX;G-ZRS>hTXv=yl0;+porwXVtmP_SdGSU9^?>@-4ABwv9a z!;yc||I$m?!)4%4SZEh6%u8XGsz{6h4+);U?S zBP&3`IVANcqm&-e-ki4^a11yG{x$~m-n~cL*t5qJ)6e@i!(JZHkaDW9pZ8(MuqEr^ zt3vgXLM4dSrDGfV_>2YCl`%mVrjW??fQ!6d8^*L=z|(XRa_0r zFdn?oy?v#M4J&Sk1bp&H7xz%Dh+aGVOciR5u#D_+#gFwgl76Xg5LCipe2?d%^VXqj%gk#*deu2f>pa~~oFCW7GvamN4!M~3D zKD(0$47%1a;24-@VA*tA`uyMh{r!JB$n_ipj)8xQ0nylrc0w%4o~?6>(`T&@eGk>5 o{c3|8g2o=lZ0MtS4a$N!UmL){Vr>v35ceU#G`Pkw@JAUq2W>~V;Q#;t literal 0 HcmV?d00001 diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 949fff4c..6bc59d5a 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -8,7 +8,8 @@ const App = () => { const[speed, setSpeed] = useState(""); const[battery, setBattery] = useState(""); const[weather, setWeather] = useState(0); - const[range, setRange] = useState(0); + + let range = -1; // Error messages const [speedError, setSpeedError] = useState("") @@ -59,12 +60,13 @@ const App = () => { //Where s = speed, b = battery percentage w = weather if(validInputs()){ //only calculates if the inputs are valid const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; - setRange(calculatedRange); + range = calculatedRange; + }else { - setRange(-1); // Reset range if inputs are invalid + range = -1; // Reset range if inputs are invalid } - - return; + console.log(range); + return range; } return ( @@ -86,16 +88,17 @@ const App = () => { {/*make the button*/}
- - {range !== -1 && ( + {range === -1 ? + null :
-

The predicted range of the Eylsia is {range.toFixed(2)} km.

+

The predicted range of the Eylsia is {range} km.

- )} + }
From 9f81b1046e7f276b33755bfc91a86389e74816dd Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 5 Oct 2024 14:36:08 -0600 Subject: [PATCH 09/21] wrapped my functions in useCallback --- .../Telemetry-Teaser/src/App.tsx | 63 ++++++++++--------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 6bc59d5a..bf2bda0e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -2,34 +2,35 @@ import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; -import React, { useState } from "react"; +import React, { useState, useCallback } from "react"; const App = () => { - const[speed, setSpeed] = useState(""); - const[battery, setBattery] = useState(""); - const[weather, setWeather] = useState(0); + const [speed, setSpeed] = useState(""); + const [battery, setBattery] = useState(""); + const [weather, setWeather] = useState(0); + const [range, setRange] = useState(-1); - let range = -1; - // Error messages + // Error messages const [speedError, setSpeedError] = useState("") const [batteryError, setBatteryError] = useState("") //to avoid the type errors: - const handleSpeedChange = (e: React.ChangeEvent) => { + const handleSpeedChange = useCallback((e: React.ChangeEvent) => { const value = e.target.value; setSpeed(value === "" ? "" : Number(value)) console.log("Speed:", value); // Add this line - } - const handleBatteryChange = (e: React.ChangeEvent) => { + }, []) + + const handleBatteryChange = useCallback((e: React.ChangeEvent) => { const value = e.target.value; // Allow empty input, or convert to a number setBattery(value === "" ? "" : Number(value)); console.log("Battery:", value); // Add this line - }; - const validInputs = () =>{ + }, []); + const validInputs = () => { let valid = true; //reset battery and speed @@ -37,15 +38,15 @@ const App = () => { setBatteryError(""); //check the input - if(speed === ""){ + if (speed === "") { valid = false; setSpeedError("Speed is required"); - }else if(typeof speed === 'number' && (speed > 90 || speed < 0)){ + } else if (typeof speed === 'number' && (speed > 90 || speed < 0)) { valid = false; setSpeedError("The speed should be within the range of 0 to 90"); } - if(battery === ""){ + if (battery === "") { valid = false; setSpeedError("Battery is required"); } @@ -58,12 +59,12 @@ const App = () => { const calculateRange = () => { //range = -(s * s * b / 2500) + (4 * b) + w //Where s = speed, b = battery percentage w = weather - if(validInputs()){ //only calculates if the inputs are valid + if (validInputs()) { //only calculates if the inputs are valid const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; - range = calculatedRange; - - }else { - range = -1; // Reset range if inputs are invalid + setRange(calculatedRange); + + } else { + setRange(-1); // Reset range if inputs are invalid } console.log(range); return range; @@ -75,32 +76,32 @@ const App = () => {
- + {speedError &&
{speedError}
} {/* speed error message */} - + {batteryError &&
{batteryError}
} {/* Battery error message */} - +
- {/*make the button*/} + {/*make the button*/}
- {range === -1 ? + {range === -1 ? null : -
-

The predicted range of the Eylsia is {range} km.

-
- } +
+

The predicted range of the Eylsia is {range} km.

+
+ }
- +
From 7132b5651447a8617b3af4608ddf4a47e70fd371 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 5 Oct 2024 15:40:24 -0600 Subject: [PATCH 10/21] used a value to calculate range instead of useState --- .../Telemetry-Teaser/src/App.tsx | 66 +++++++++---------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index bf2bda0e..c2367a25 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -8,7 +8,7 @@ const App = () => { const [speed, setSpeed] = useState(""); const [battery, setBattery] = useState(""); const [weather, setWeather] = useState(0); - const [range, setRange] = useState(-1); + const [valid, setValid] = useState(false); // Error messages @@ -20,6 +20,9 @@ const App = () => { const value = e.target.value; setSpeed(value === "" ? "" : Number(value)) console.log("Speed:", value); // Add this line + if(value === ""){ + setValid(false) + } }, []) @@ -28,10 +31,11 @@ const App = () => { // Allow empty input, or convert to a number setBattery(value === "" ? "" : Number(value)); console.log("Battery:", value); // Add this line - + if(value===""){ + setValid(false) + } }, []); const validInputs = () => { - let valid = true; //reset battery and speed setSpeedError(""); @@ -39,37 +43,29 @@ const App = () => { //check the input if (speed === "") { - valid = false; + setValid(false); setSpeedError("Speed is required"); } else if (typeof speed === 'number' && (speed > 90 || speed < 0)) { - valid = false; + setValid(false); setSpeedError("The speed should be within the range of 0 to 90"); } if (battery === "") { - valid = false; + setValid(false); setSpeedError("Battery is required"); } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { - valid = false; + setValid(false); setSpeedError("The battery percentage should be within the range of 0 to 100"); } - return valid; - } - const calculateRange = () => { - //range = -(s * s * b / 2500) + (4 * b) + w - //Where s = speed, b = battery percentage w = weather - if (validInputs()) { //only calculates if the inputs are valid - const calculatedRange = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; - setRange(calculatedRange); - - } else { - setRange(-1); // Reset range if inputs are invalid - } - console.log(range); - return range; + + setValid(true); } + //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message + const range = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; + + return (
@@ -88,19 +84,21 @@ const App = () => {
{/*make the button*/} -
- - {range === -1 ? - null : -
-

The predicted range of the Eylsia is {range} km.

-
- } -
+
{/* Add text-center here */} + + {valid ? ( // Assuming 'valid' is a state that indicates whether the inputs are valid +
+

The predicted range of the Eylsia is {range} km.

+
+ ) : null} +
+
From e75bf5485750fede11d1dd422dbfbc0b97c9451e Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Tue, 8 Oct 2024 17:54:14 -0600 Subject: [PATCH 11/21] added the weather functionality --- .DS_Store | Bin 6148 -> 6148 bytes Recruit-Training/.DS_Store | Bin 6148 -> 6148 bytes .../Advanced-Recruit-Training/.DS_Store | Bin 0 -> 6148 bytes .../Telemetry-Teaser/src/App.tsx | 17 ++++++++++++++--- .../src/components/weatherInput/index.tsx | 10 ++++++++-- 5 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 Recruit-Training/Advanced-Recruit-Training/.DS_Store diff --git a/.DS_Store b/.DS_Store index bf2d4bb85669df167135e571ad097d37a258436f..3480f00abf04c78f5c51209386eabbcceba7d205 100644 GIT binary patch delta 19 acmZoMXffDugq6+6NJqiYWb-LjDj^uvGy$fanEjrCtN1p+c&-xM_Rfilg>WP_SzYEF5oTJ496!$yfR_ zJ@!xfJMdsbW~ zJx4+brO>A|T!?m#zmWm1-2>XEF~z!aKkAoKL=}AH>s%ejxr!0VugMPd*;g&F*f&H} z4jn^lD(O_$|F-<|-_4Jw)rnpIB0kBps_ykJMQf$Kdgrd^d28Og@S~cBbyQEPK~x@b zZ>UrrU)fQ7kfqa6=i#m@>L@GHQYU0dijcR5S&^veKuwCI(z&4-@O-HJm-D&rJ=%Ew>doj=J}%T3O#}&i1X}J{yn-_rzohANSQfb|J|LFo zxlad_p#aCEKa7Efz5)Q-aBG3hKZ%?pEd~}FgBXDblL|Dc!d@|iNrzwBxWHm#(4>>Fmk(iA7WRfB z^y-*j>TnW)LDxD490S)GSTWrWpa1)}-~X>Cxt?RdG4M|@AliH3-T;qe&(?*9 { const [speed, setSpeed] = useState(""); const [battery, setBattery] = useState(""); - const [weather, setWeather] = useState(0); + const [weather, setWeather] = useState(0); const [valid, setValid] = useState(false); @@ -35,6 +35,17 @@ const App = () => { setValid(false) } }, []); + + const handleWeatherChange = useCallback((e: React.ChangeEvent) => { + const value = e.target.value; + // Allow empty input, or convert to a number + setWeather(value === "" ? "" : Number(value)); + console.log("weather:", value); // Add this line + if(value===""){ + setValid(false) + } + }, []); + const validInputs = () => { //reset battery and speed @@ -63,7 +74,7 @@ const App = () => { } //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message - const range = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + weather; + const range = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + Number(weather); return ( @@ -80,7 +91,7 @@ const App = () => {
- +
{/*make the button*/} diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx index fd5ad35b..43353ea4 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx @@ -1,4 +1,9 @@ -const WeatherInput = () => { +interface WeatherInputProps { + value: number | string; // Expecting a string for the input value + onChange: (e: React.ChangeEvent) => void; // Function to handle changes +} + +const WeatherInput: React.FC = ({ value, onChange }) => { return ( <> Cloud @@ -8,7 +13,8 @@ const WeatherInput = () => { type="range" min="0" max="100" - value="50" + value={value} + onChange={onChange} /> Sun From 19e7d27741082e95c62cb1dd5b3f931e9617248e Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Tue, 8 Oct 2024 18:09:04 -0600 Subject: [PATCH 12/21] created a share interface for the battery, speed, and weather files --- .../Telemetry-Teaser/src/App.tsx | 81 ++++++++++--------- .../Telemetry-Teaser/src/InputProps.ts | 5 ++ .../src/components/batteryInput/index.tsx | 7 +- .../src/components/speedInput/index.tsx | 8 +- .../src/components/weatherInput/index.tsx | 8 +- 5 files changed, 56 insertions(+), 53 deletions(-) create mode 100644 Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index f602ff54..83214123 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -11,16 +11,12 @@ const App = () => { const [valid, setValid] = useState(false); - // Error messages - const [speedError, setSpeedError] = useState("") - const [batteryError, setBatteryError] = useState("") - //to avoid the type errors: const handleSpeedChange = useCallback((e: React.ChangeEvent) => { const value = e.target.value; setSpeed(value === "" ? "" : Number(value)) console.log("Speed:", value); // Add this line - if(value === ""){ + if (value === "") { setValid(false) } @@ -31,7 +27,7 @@ const App = () => { // Allow empty input, or convert to a number setBattery(value === "" ? "" : Number(value)); console.log("Battery:", value); // Add this line - if(value===""){ + if (value === "") { setValid(false) } }, []); @@ -41,38 +37,49 @@ const App = () => { // Allow empty input, or convert to a number setWeather(value === "" ? "" : Number(value)); console.log("weather:", value); // Add this line - if(value===""){ + if (value === "") { setValid(false) } }, []); - const validInputs = () => { + + const validInputs = (speed: string | number, battery: string | number): { speedError: string; batteryError: string; isValid: boolean } => { //reset battery and speed - setSpeedError(""); - setBatteryError(""); + let speedError = ""; + let batteryError = ""; + let isValid = true; //check the input if (speed === "") { - setValid(false); - setSpeedError("Speed is required"); - } else if (typeof speed === 'number' && (speed > 90 || speed < 0)) { - setValid(false); - setSpeedError("The speed should be within the range of 0 to 90"); + isValid = false; + speedError = "Speed is required"; + } else if (Number(speed) < 0 || Number(speed) > 90) { + isValid = false; + speedError = "The speed should be within the range of 0 to 90"; } if (battery === "") { - setValid(false); - setSpeedError("Battery is required"); + isValid = false; + batteryError = "Battery is required"; } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { - setValid(false); - setSpeedError("The battery percentage should be within the range of 0 to 100"); + isValid = false; + batteryError = "The battery percentage should be within the range of 0 to 100"; } - setValid(true); + setValid(isValid); + + return { speedError, batteryError, isValid }; } + const handleButtonClick = () => { + const { speedError, batteryError, isValid } = validInputs(speed, battery); + if (!isValid) { + console.error(speedError, batteryError); + return; + } + } //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message const range = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + Number(weather); @@ -84,31 +91,31 @@ const App = () => {
- {speedError &&
{speedError}
} {/* speed error message */} + {validInputs(speed, battery).speedError &&
{validInputs(speed, battery).speedError}
} {/* speed error message */} - {batteryError &&
{batteryError}
} {/* Battery error message */} + {validInputs(speed, battery).batteryError &&
{validInputs(speed, battery).batteryError}
} {/* Battery error message */}
- +
{/*make the button*/} -
{/* Add text-center here */} - - {valid ? ( // Assuming 'valid' is a state that indicates whether the inputs are valid -
-

The predicted range of the Eylsia is {range} km.

-
- ) : null} -
+
{/* Add text-center here */} + + {valid ? ( // Assuming 'valid' is a state that indicates whether the inputs are valid +
+

The predicted range of the Eylsia is {range.toFixed(2)} km.

+
+ ) : null} +
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts new file mode 100644 index 00000000..c241ab22 --- /dev/null +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts @@ -0,0 +1,5 @@ +// Define the props type +export interface InputProps { + value: number | string; // Expecting a string for the input value + onChange: (e: React.ChangeEvent) => void; // Function to handle changes + } \ No newline at end of file diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx index 33fb5777..d3b4d43a 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx @@ -1,9 +1,6 @@ -interface BatteryInputProps { - value: number | string; // Expecting a string for the input value - onChange: (e: React.ChangeEvent) => void; // Function to handle changes -} +import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; -const BatteryInput: React.FC = ({ value, onChange }) => { +const BatteryInput: React.FC = ({ value, onChange }) => { return (
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx index f321857d..f64c28fe 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx @@ -1,10 +1,6 @@ -// Define the props type -interface SpeedInputProps { - value: number | string; // Expecting a string for the input value - onChange: (e: React.ChangeEvent) => void; // Function to handle changes -} +import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; -const SpeedInput: React.FC = ({ value, onChange }) => { +const SpeedInput: React.FC = ({ value, onChange }) => { return ( <>
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx index 43353ea4..6bc076e6 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx @@ -1,9 +1,7 @@ -interface WeatherInputProps { - value: number | string; // Expecting a string for the input value - onChange: (e: React.ChangeEvent) => void; // Function to handle changes -} +import React from 'react'; +import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; -const WeatherInput: React.FC = ({ value, onChange }) => { +const WeatherInput: React.FC = ({ value, onChange }) => { return ( <> Cloud From 06b0ae83ee4e0346bdbfed63e017669bcc0cbfc1 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 12 Oct 2024 10:16:37 -0600 Subject: [PATCH 13/21] working on removing unecessary state variables --- .../Telemetry-Teaser/src/App.tsx | 141 +++++++++++------- 1 file changed, 86 insertions(+), 55 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 83214123..46df15eb 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,55 +1,67 @@ +import React, { useCallback, useMemo, useState } from "react"; + import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; -import React, { useState, useCallback } from "react"; const App = () => { const [speed, setSpeed] = useState(""); const [battery, setBattery] = useState(""); const [weather, setWeather] = useState(0); - const [valid, setValid] = useState(false); - + const [valid, setValid] = useState(true); + let range = 0; //to avoid the type errors: - const handleSpeedChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - setSpeed(value === "" ? "" : Number(value)) - console.log("Speed:", value); // Add this line - if (value === "") { - setValid(false) - } - - }, []) - - const handleBatteryChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - // Allow empty input, or convert to a number - setBattery(value === "" ? "" : Number(value)); - console.log("Battery:", value); // Add this line - if (value === "") { - setValid(false) - } - }, []); - - const handleWeatherChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - // Allow empty input, or convert to a number - setWeather(value === "" ? "" : Number(value)); - console.log("weather:", value); // Add this line - if (value === "") { - setValid(false) - } - }, []); + const handleSpeedChange = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value; + setSpeed(value === "" ? "" : Number(value)); + console.log("Speed:", value); // Add this line + if (value === "") { + setValid(false); + } + }, + [], + ); + const handleBatteryChange = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value; + // Allow empty input, or convert to a number + setBattery(value === "" ? "" : Number(value)); + console.log("Battery:", value); // Add this line + if (value === "") { + setValid(false); + } + }, + [], + ); - const validInputs = (speed: string | number, battery: string | number): { speedError: string; batteryError: string; isValid: boolean } => { + const handleWeatherChange = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value; + // Allow empty input, or convert to a number + setWeather(value === "" ? "" : Number(value)); + console.log("weather:", value); // Add this line + if (value === "") { + setValid(false); + } + }, + [], + ); + const validInputs = useMemo((): { + speedError: string; + batteryError: string; + isValid: boolean; + } => { //reset battery and speed let speedError = ""; let batteryError = ""; let isValid = true; + //use memo for this function : put the stuff inside the fxn inside the dependency array //check the input if (speed === "") { isValid = false; @@ -62,27 +74,40 @@ const App = () => { if (battery === "") { isValid = false; batteryError = "Battery is required"; - } - else if (typeof battery === "number" && (battery < 0 || battery > 100)) { + } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { isValid = false; - batteryError = "The battery percentage should be within the range of 0 to 100"; + batteryError = + "The battery percentage should be within the range of 0 to 100"; } - - setValid(isValid); - return { speedError, batteryError, isValid }; - } + }, [speed, battery, weather]); //recompute the answer if speed, battery, or weather change const handleButtonClick = () => { - const { speedError, batteryError, isValid } = validInputs(speed, battery); + // Use Type Assertion to specify that the queried element is an HTMLInputElement + /*const speedInput = + (document.querySelector('input[placeholder="Speed"]') as HTMLInputElement) + ?.value || ""; + const batteryInput = + ( + document.querySelector( + 'input[placeholder="Battery"]', + ) as HTMLInputElement + )?.value || "";*/ + + const { speedError, batteryError, isValid } = validInputs; + if (!isValid) { console.error(speedError, batteryError); return; } - } - //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message - const range = -(Number(speed) * Number(speed) * Number(battery) / 2500) + (4 * Number(battery)) + Number(weather); + //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message + range = + -((Number(speed) * Number(speed) * Number(battery)) / 2500) + + 4 * Number(battery) + + Number(weather); + console.log(`Calculated range: ${range.toFixed(2)} km`); + }; return (
@@ -91,33 +116,39 @@ const App = () => {
- {validInputs(speed, battery).speedError &&
{validInputs(speed, battery).speedError}
} {/* speed error message */} - + {validInputs.speedError && ( +
{validInputs.speedError}
+ )} + {/* speed error message */} - {validInputs(speed, battery).batteryError &&
{validInputs(speed, battery).batteryError}
} {/* Battery error message */} - + {validInputs.batteryError && ( +
{validInputs.batteryError}
+ )} + {/* Battery error message */}
{/*make the button*/} -
{/* Add text-center here */} +
+ {" "} + {/* Add text-center here */} - {valid ? ( // Assuming 'valid' is a state that indicates whether the inputs are valid + {valid && ( // Assuming 'valid' is a state that indicates whether the inputs are valid
-

The predicted range of the Eylsia is {range.toFixed(2)} km.

+

+ The predicted range of the Eylsia is {range.toFixed(2)} km. +

- ) : null} + )}
- -
From 9c4b8beb6a9b5b5af41483b28d7bb4dfbc9b3a16 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 12 Oct 2024 10:23:35 -0600 Subject: [PATCH 14/21] working on the handleButtonClick function --- .../Telemetry-Teaser/src/App.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 46df15eb..6d511734 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -107,6 +107,13 @@ const App = () => { Number(weather); console.log(`Calculated range: ${range.toFixed(2)} km`); + + // Directly manipulate the DOM to show the calculated range + document.getElementById( + "range-output", + )!.innerText = `The predicted range of the Eylsia is ${range.toFixed( + 2, + )} km.`; }; return ( @@ -141,13 +148,14 @@ const App = () => { > Calculate - {valid && ( // Assuming 'valid' is a state that indicates whether the inputs are valid +
+ {/*{valid && ( // Assuming 'valid' is a state that indicates whether the inputs are valid

The predicted range of the Eylsia is {range.toFixed(2)} km.

- )} + )}*/}
From fab9581343fa271db279ebbe6def689cdd50f5b6 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 12 Oct 2024 11:05:20 -0600 Subject: [PATCH 15/21] learning how to use useReducer --- .../Telemetry-Teaser/src/App.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 6d511734..3aa90682 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from "react"; +import React, { useReducer, useCallback, useMemo, useState } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; @@ -12,6 +12,11 @@ const App = () => { const [valid, setValid] = useState(true); let range = 0; + const ActionType = { + updateSpeed = "Update speed"; + updateBattery = "Update battery"; + updateSpeed = "Update speed"; + } //to avoid the type errors: const handleSpeedChange = useCallback( (e: React.ChangeEvent) => { @@ -19,6 +24,7 @@ const App = () => { setSpeed(value === "" ? "" : Number(value)); console.log("Speed:", value); // Add this line if (value === "") { + console.log("Speed:", value); // Add this line setValid(false); } }, @@ -50,7 +56,6 @@ const App = () => { }, [], ); - const validInputs = useMemo((): { speedError: string; batteryError: string; @@ -83,17 +88,6 @@ const App = () => { }, [speed, battery, weather]); //recompute the answer if speed, battery, or weather change const handleButtonClick = () => { - // Use Type Assertion to specify that the queried element is an HTMLInputElement - /*const speedInput = - (document.querySelector('input[placeholder="Speed"]') as HTMLInputElement) - ?.value || ""; - const batteryInput = - ( - document.querySelector( - 'input[placeholder="Battery"]', - ) as HTMLInputElement - )?.value || "";*/ - const { speedError, batteryError, isValid } = validInputs; if (!isValid) { @@ -115,7 +109,7 @@ const App = () => { 2, )} km.`; }; - +//useReducer return (
From 4de0ca523fef51581f1185de69d406c450c4dbfa Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 12 Oct 2024 11:57:18 -0600 Subject: [PATCH 16/21] worked on implementing useReducer --- .../Telemetry-Teaser/src/App.tsx | 150 +++++++++++++----- 1 file changed, 110 insertions(+), 40 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 3aa90682..cffd246f 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,32 +1,86 @@ -import React, { useReducer, useCallback, useMemo, useState } from "react"; +import { stat } from "node:fs"; +import React, { useCallback, useMemo, useReducer, useState } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; +// 1. Define the State interface +interface State { + speed: number | string; + battery: number | string; + weather: number | string; + valid: boolean; + changed: { + speed: boolean; + battery: boolean; + }; +} + +type ActionType = + | { type: "Update speed"; payload: number | string } + | { type: "Update battery"; payload: number | string } + | { type: "Update weather"; payload: number | string } + | { type: "Update valid"; payload: boolean } + | { type: "changed"; field: "speed" | "battery"; payload: boolean }; + +const initialState: State = { + speed: "", + battery: "", + weather: 0, + valid: true, + changed: { + speed: false, + battery: false, + }, +}; + +const reducer = (state: State, action: ActionType): State => { + switch (action.type) { + case "Update speed": + return { ...state, speed: action.payload }; + case "Update battery": + return { ...state, battery: action.payload }; + case "Update weather": + return { ...state, weather: action.payload }; + case "Update valid": + return { ...state, valid: action.payload }; + case "changed": + return { + ...state, + changed: { ...state.changed, [action.field]: action.payload }, + }; + default: + return state; + } +}; const App = () => { - const [speed, setSpeed] = useState(""); + const [state, dispatch] = useReducer(reducer, initialState); + /*const [speed, setSpeed] = useState(""); const [battery, setBattery] = useState(""); - const [weather, setWeather] = useState(0); - const [valid, setValid] = useState(true); + const [weather, setWeather] = useState(0);*/ + const { speed, battery, weather } = state; //initialize the state + //const [valid, setValid] = useState(true); let range = 0; - const ActionType = { - updateSpeed = "Update speed"; - updateBattery = "Update battery"; - updateSpeed = "Update speed"; - } //to avoid the type errors: const handleSpeedChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; - setSpeed(value === "" ? "" : Number(value)); + dispatch({ + type: "Update speed", + payload: value === "" ? "" : Number(value), + }); + //setSpeed(value === "" ? "" : Number(value)); + // Dispatch to update touched state when the input changes + dispatch({ + type: "changed", + field: "speed", // Correctly specify the field + payload: value === "", // Set to true if the value is an empty string + }); + console.log("Speed:", value); // Add this line - if (value === "") { - console.log("Speed:", value); // Add this line - setValid(false); - } }, [], ); @@ -35,10 +89,17 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; // Allow empty input, or convert to a number - setBattery(value === "" ? "" : Number(value)); + //setBattery(value === "" ? "" : Number(value)); + dispatch({ + type: "Update battery", + payload: value === "" ? "" : Number(value), + }); console.log("Battery:", value); // Add this line if (value === "") { - setValid(false); + dispatch({ + type: "Update valid", + payload: false, + }); } }, [], @@ -48,44 +109,53 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; // Allow empty input, or convert to a number - setWeather(value === "" ? "" : Number(value)); + dispatch({ + type: "Update weather", + payload: value === "" ? "" : Number(value), + }); console.log("weather:", value); // Add this line if (value === "") { - setValid(false); + dispatch({ + type: "Update valid", + payload: false, + }); } }, [], ); - const validInputs = useMemo((): { - speedError: string; - batteryError: string; - isValid: boolean; - } => { + const validInputs = useMemo(() => { //reset battery and speed let speedError = ""; let batteryError = ""; let isValid = true; - //use memo for this function : put the stuff inside the fxn inside the dependency array - //check the input - if (speed === "") { - isValid = false; - speedError = "Speed is required"; - } else if (Number(speed) < 0 || Number(speed) > 90) { - isValid = false; - speedError = "The speed should be within the range of 0 to 90"; + //check the chnaged fields + if (state.changed.speed) { + if (speed === "") { + isValid = false; + speedError = "Speed is required"; + } else if (Number(speed) < 0 || Number(speed) > 90) { + isValid = false; + speedError = "The speed should be within the range of 0 to 90"; + } } - if (battery === "") { - isValid = false; - batteryError = "Battery is required"; - } else if (typeof battery === "number" && (battery < 0 || battery > 100)) { - isValid = false; - batteryError = - "The battery percentage should be within the range of 0 to 100"; + if (state.changed.battery) { + if (battery === "") { + isValid = false; + batteryError = "Battery is required"; + } else if ( + typeof battery === "number" && + (battery < 0 || battery > 100) + ) { + isValid = false; + batteryError = + "The battery percentage should be within the range of 0 to 100"; + } } + return { speedError, batteryError, isValid }; - }, [speed, battery, weather]); //recompute the answer if speed, battery, or weather change + }, [state.changed, speed, battery]); //recompute the answer if speed, battery, or weather change const handleButtonClick = () => { const { speedError, batteryError, isValid } = validInputs; @@ -109,7 +179,7 @@ const App = () => { 2, )} km.`; }; -//useReducer + //useReducer return (
From 32eeb98c60549a8eaf88380dc7a0e0841eae988c Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Tue, 15 Oct 2024 18:42:52 -0600 Subject: [PATCH 17/21] working on fixing errors --- .../Telemetry-Teaser/src/App.tsx | 68 ++++++++----------- .../Telemetry-Teaser/src/InputProps.ts | 6 +- .../src/components/batteryInput/index.tsx | 2 +- .../src/components/speedInput/index.tsx | 2 +- .../src/components/weatherInput/index.tsx | 5 +- 5 files changed, 38 insertions(+), 45 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index cffd246f..3fbe5e6e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,5 +1,4 @@ -import { stat } from "node:fs"; -import React, { useCallback, useMemo, useReducer, useState } from "react"; +import React, { useCallback, useMemo, useReducer } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; @@ -11,7 +10,6 @@ interface State { speed: number | string; battery: number | string; weather: number | string; - valid: boolean; changed: { speed: boolean; battery: boolean; @@ -19,17 +17,19 @@ interface State { } type ActionType = - | { type: "Update speed"; payload: number | string } - | { type: "Update battery"; payload: number | string } - | { type: "Update weather"; payload: number | string } - | { type: "Update valid"; payload: boolean } - | { type: "changed"; field: "speed" | "battery"; payload: boolean }; + | { type: "UPDATE_SPEED"; payload: number | string } + | { type: "UPDATE_BATTERY"; payload: number | string } + | { type: "UPDATE_WEATHER"; payload: number | string } + | { + type: "CHANGED"; + field: "speed" | "battery" | "weather"; + payload: boolean; + }; const initialState: State = { speed: "", battery: "", weather: 0, - valid: true, changed: { speed: false, battery: false, @@ -38,15 +38,13 @@ const initialState: State = { const reducer = (state: State, action: ActionType): State => { switch (action.type) { - case "Update speed": + case "UPDATE_SPEED": return { ...state, speed: action.payload }; - case "Update battery": + case "UPDATE_BATTERY": return { ...state, battery: action.payload }; - case "Update weather": + case "UPDATE_WEATHER": return { ...state, weather: action.payload }; - case "Update valid": - return { ...state, valid: action.payload }; - case "changed": + case "CHANGED": return { ...state, changed: { ...state.changed, [action.field]: action.payload }, @@ -57,11 +55,7 @@ const reducer = (state: State, action: ActionType): State => { }; const App = () => { const [state, dispatch] = useReducer(reducer, initialState); - /*const [speed, setSpeed] = useState(""); - const [battery, setBattery] = useState(""); - const [weather, setWeather] = useState(0);*/ const { speed, battery, weather } = state; //initialize the state - //const [valid, setValid] = useState(true); let range = 0; //to avoid the type errors: @@ -69,13 +63,12 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; dispatch({ - type: "Update speed", + type: "UPDATE_SPEED", payload: value === "" ? "" : Number(value), }); - //setSpeed(value === "" ? "" : Number(value)); - // Dispatch to update touched state when the input changes + // Dispatch to update changed state when the input changes dispatch({ - type: "changed", + type: "CHANGED", field: "speed", // Correctly specify the field payload: value === "", // Set to true if the value is an empty string }); @@ -89,18 +82,17 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; // Allow empty input, or convert to a number - //setBattery(value === "" ? "" : Number(value)); dispatch({ - type: "Update battery", + type: "UPDATE_BATTERY", payload: value === "" ? "" : Number(value), }); console.log("Battery:", value); // Add this line - if (value === "") { - dispatch({ - type: "Update valid", - payload: false, - }); - } + // Dispatch to update changed state when the input changes + dispatch({ + type: "CHANGED", + field: "battery", // Correctly specify the field + payload: value === "", // Set to true if the value is an empty string + }); }, [], ); @@ -110,16 +102,16 @@ const App = () => { const value = e.target.value; // Allow empty input, or convert to a number dispatch({ - type: "Update weather", + type: "UPDATE_WEATHER", payload: value === "" ? "" : Number(value), }); console.log("weather:", value); // Add this line - if (value === "") { - dispatch({ - type: "Update valid", - payload: false, - }); - } + // Dispatch to update changed state when the input changes + dispatch({ + type: "CHANGED", + field: "weather", // Correctly specify the field + payload: value === "", // Set to true if the value is an empty string + }); }, [], ); diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts index c241ab22..f96d23da 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts @@ -1,5 +1,5 @@ // Define the props type export interface InputProps { - value: number | string; // Expecting a string for the input value - onChange: (e: React.ChangeEvent) => void; // Function to handle changes - } \ No newline at end of file + value: number | string; // Expecting a string for the input value + onChange: (e: React.ChangeEvent) => void; // Function to handle changes +} diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx index d3b4d43a..ca2f43a2 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx @@ -1,4 +1,4 @@ -import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; +import type { InputProps } from "./InputProps"; const BatteryInput: React.FC = ({ value, onChange }) => { return ( diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx index f64c28fe..dadf259d 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx @@ -1,4 +1,4 @@ -import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; +import type { InputProps } from "./InputProps"; const SpeedInput: React.FC = ({ value, onChange }) => { return ( diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx index 6bc076e6..51667f7e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx @@ -1,5 +1,6 @@ -import React from 'react'; -import { InputProps } from '/Users/macbook/Documents/Development-Resources/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/InputProps.ts'; +import React from "react"; + +import type { InputProps } from "./InputProps"; const WeatherInput: React.FC = ({ value, onChange }) => { return ( From d9786e1a38f5cbe635458383932e4a1e117fd611 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Tue, 15 Oct 2024 19:02:14 -0600 Subject: [PATCH 18/21] fixed the error of calling dispatch multiple times --- .../Telemetry-Teaser/src/App.tsx | 105 +++++++++++------- 1 file changed, 62 insertions(+), 43 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 3fbe5e6e..47732bce 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -13,18 +13,32 @@ interface State { changed: { speed: boolean; battery: boolean; + weather: boolean; }; } type ActionType = - | { type: "UPDATE_SPEED"; payload: number | string } - | { type: "UPDATE_BATTERY"; payload: number | string } - | { type: "UPDATE_WEATHER"; payload: number | string } | { - type: "CHANGED"; - field: "speed" | "battery" | "weather"; - payload: boolean; + type: "UPDATE_SPEED_AND_CHANGED"; // New combined action type + payload: { + speed: number | string; // Speed value + altered: boolean; // Indicates if the input was changed }; + } + | { + type: "UPDATE_BATTERY_AND_CHANGED"; // New combined action type + payload: { + battery: number | string; // battery value + altered: boolean; // Indicates if the input was changed + }; + } + | { + type: "UPDATE_WEATHER_AND_CHANGED"; // New combined action type + payload: { + weather: number | string; // battery value + altered: boolean; // Indicates if the input was changed + }; + }; const initialState: State = { speed: "", @@ -33,22 +47,39 @@ const initialState: State = { changed: { speed: false, battery: false, + weather: false }, }; const reducer = (state: State, action: ActionType): State => { switch (action.type) { - case "UPDATE_SPEED": - return { ...state, speed: action.payload }; - case "UPDATE_BATTERY": - return { ...state, battery: action.payload }; - case "UPDATE_WEATHER": - return { ...state, weather: action.payload }; - case "CHANGED": - return { + case "UPDATE_SPEED_AND_CHANGED": + return{ ...state, - changed: { ...state.changed, [action.field]: action.payload }, - }; + speed: action.payload.speed, + changed: { + ...state.changed, + speed: action.payload.altered + } + } + case "UPDATE_BATTERY_AND_CHANGED": + return{ + ...state, + battery: action.payload.battery, + changed: { + ...state.changed, + battery: action.payload.altered + } + } + case "UPDATE_WEATHER_AND_CHANGED": + return{ + ...state, + weather: action.payload.weather, + changed: { + ...state.changed, + weather: action.payload.altered + } + } default: return state; } @@ -63,14 +94,11 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; dispatch({ - type: "UPDATE_SPEED", - payload: value === "" ? "" : Number(value), - }); - // Dispatch to update changed state when the input changes - dispatch({ - type: "CHANGED", - field: "speed", // Correctly specify the field - payload: value === "", // Set to true if the value is an empty string + type:"UPDATE_SPEED_AND_CHANGED", + payload: { + speed: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number + altered: true, //the input changed so we chnage it to true + }, }); console.log("Speed:", value); // Add this line @@ -81,17 +109,12 @@ const App = () => { const handleBatteryChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; - // Allow empty input, or convert to a number dispatch({ - type: "UPDATE_BATTERY", - payload: value === "" ? "" : Number(value), - }); - console.log("Battery:", value); // Add this line - // Dispatch to update changed state when the input changes - dispatch({ - type: "CHANGED", - field: "battery", // Correctly specify the field - payload: value === "", // Set to true if the value is an empty string + type:"UPDATE_BATTERY_AND_CHANGED", + payload: { + battery: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number + altered: true, //the input changed so we chnage it to true + }, }); }, [], @@ -102,15 +125,11 @@ const App = () => { const value = e.target.value; // Allow empty input, or convert to a number dispatch({ - type: "UPDATE_WEATHER", - payload: value === "" ? "" : Number(value), - }); - console.log("weather:", value); // Add this line - // Dispatch to update changed state when the input changes - dispatch({ - type: "CHANGED", - field: "weather", // Correctly specify the field - payload: value === "", // Set to true if the value is an empty string + type:"UPDATE_WEATHER_AND_CHANGED", + payload: { + weather: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number + altered: true, //the input changed so we chnage it to true + }, }); }, [], From eebf8ddaeac8cbd3510b5cf6b492aa12cbb196cd Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 19 Oct 2024 11:35:51 -0600 Subject: [PATCH 19/21] changed handleClick function --- .../Telemetry-Teaser/src/App.tsx | 172 +++++++++++------- .../src/components/batteryInput/index.tsx | 2 +- .../src/components/speedInput/index.tsx | 2 +- .../src/components/weatherInput/index.tsx | 2 +- 4 files changed, 107 insertions(+), 71 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 47732bce..0f3546d0 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useReducer } from "react"; +import React, { useCallback, useMemo, useReducer, useRef } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; @@ -19,26 +19,26 @@ interface State { type ActionType = | { - type: "UPDATE_SPEED_AND_CHANGED"; // New combined action type - payload: { - speed: number | string; // Speed value - altered: boolean; // Indicates if the input was changed - }; - } + type: "UPDATE_SPEED_AND_CHANGED"; // New combined action type + payload: { + speed: number | string; // Speed value + altered: boolean; // Indicates if the input was changed + }; + } | { - type: "UPDATE_BATTERY_AND_CHANGED"; // New combined action type - payload: { - battery: number | string; // battery value - altered: boolean; // Indicates if the input was changed - }; - } + type: "UPDATE_BATTERY_AND_CHANGED"; // New combined action type + payload: { + battery: number | string; // battery value + altered: boolean; // Indicates if the input was changed + }; + } | { - type: "UPDATE_WEATHER_AND_CHANGED"; // New combined action type - payload: { - weather: number | string; // battery value - altered: boolean; // Indicates if the input was changed + type: "UPDATE_WEATHER_AND_CHANGED"; // New combined action type + payload: { + weather: number | string; // battery value + altered: boolean; // Indicates if the input was changed + }; }; - }; const initialState: State = { speed: "", @@ -47,39 +47,39 @@ const initialState: State = { changed: { speed: false, battery: false, - weather: false + weather: false, }, }; const reducer = (state: State, action: ActionType): State => { switch (action.type) { case "UPDATE_SPEED_AND_CHANGED": - return{ + return { ...state, speed: action.payload.speed, changed: { ...state.changed, - speed: action.payload.altered - } - } - case "UPDATE_BATTERY_AND_CHANGED": - return{ + speed: action.payload.altered, + }, + }; + case "UPDATE_BATTERY_AND_CHANGED": + return { ...state, battery: action.payload.battery, changed: { ...state.changed, - battery: action.payload.altered - } - } - case "UPDATE_WEATHER_AND_CHANGED": - return{ + battery: action.payload.altered, + }, + }; + case "UPDATE_WEATHER_AND_CHANGED": + return { ...state, weather: action.payload.weather, changed: { ...state.changed, - weather: action.payload.altered - } - } + weather: action.payload.altered, + }, + }; default: return state; } @@ -87,14 +87,14 @@ const reducer = (state: State, action: ActionType): State => { const App = () => { const [state, dispatch] = useReducer(reducer, initialState); const { speed, battery, weather } = state; //initialize the state - let range = 0; + const rangeRef = useRef(null); // Ref to hold the calculated range //to avoid the type errors: const handleSpeedChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; dispatch({ - type:"UPDATE_SPEED_AND_CHANGED", + type: "UPDATE_SPEED_AND_CHANGED", payload: { speed: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number altered: true, //the input changed so we chnage it to true @@ -110,7 +110,7 @@ const App = () => { (e: React.ChangeEvent) => { const value = e.target.value; dispatch({ - type:"UPDATE_BATTERY_AND_CHANGED", + type: "UPDATE_BATTERY_AND_CHANGED", payload: { battery: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number altered: true, //the input changed so we chnage it to true @@ -125,7 +125,7 @@ const App = () => { const value = e.target.value; // Allow empty input, or convert to a number dispatch({ - type:"UPDATE_WEATHER_AND_CHANGED", + type: "UPDATE_WEATHER_AND_CHANGED", payload: { weather: value === "" ? "" : Number(value), //empty input is allowed or the input is converted to a number altered: true, //the input changed so we chnage it to true @@ -134,63 +134,94 @@ const App = () => { }, [], ); + const validInputs = useMemo(() => { //reset battery and speed let speedError = ""; let batteryError = ""; let isValid = true; - //check the chnaged fields + //check the changed fields if (state.changed.speed) { - if (speed === "") { + if (state.speed === "") { isValid = false; speedError = "Speed is required"; - } else if (Number(speed) < 0 || Number(speed) > 90) { + } else if (Number(state.speed) < 0 || Number(state.speed) > 90) { isValid = false; speedError = "The speed should be within the range of 0 to 90"; } + } else if (state.speed === "") { + //when nothing has been entered yet + isValid = false; } if (state.changed.battery) { - if (battery === "") { + if (state.battery === "") { isValid = false; batteryError = "Battery is required"; } else if ( - typeof battery === "number" && - (battery < 0 || battery > 100) + typeof state.battery === "number" && + (state.battery < 0 || state.battery > 100) ) { isValid = false; batteryError = "The battery percentage should be within the range of 0 to 100"; } + } else if (state.battery === "") { + //when nothing has been entered yet + isValid = false; } return { speedError, batteryError, isValid }; - }, [state.changed, speed, battery]); //recompute the answer if speed, battery, or weather change + }, [state.changed, state.speed, state.battery]); //recompute the answer if speed or battery change - const handleButtonClick = () => { + /*const calculateRange = useMemo(() => { const { speedError, batteryError, isValid } = validInputs; if (!isValid) { console.error(speedError, batteryError); - return; + return null; + } + return ( + -( + (Number(state.speed) * Number(state.speed) * Number(state.battery)) / + 2500 + ) + + 4 * Number(state.battery) + + Number(state.weather) + ); + }, [validInputs.isValid, state.battery, state.speed, state.weather]); + + const handleClick = () => { + const range = calculateRange; // Get the calculated range + rangeRef.current = range; // Set the calculated range to the ref + console.log(rangeRef.current); + console.log(typeof rangeRef.current); + console.log(rangeRef.current !== null); + };*/ + + const handleClick = () => { + const { speedError, batteryError, isValid } = validInputs; + + // Perform the range calculation only when valid inputs are provided + if (!isValid) { + console.error(speedError, batteryError); + rangeRef.current = null; // Set rangeRef to null for invalid inputs + } else { + const range = + -( + (Number(state.speed) * Number(state.speed) * Number(state.battery)) / + 2500 + ) + + 4 * Number(state.battery) + + Number(state.weather); + + rangeRef.current = range; // Set the calculated range to the ref + console.log(range); + console.log(rangeRef.current !== null); + console.log(typeof rangeRef.current); } - //calculate range and then in the return function, call valid inputs. if it returns false, print null, else print confirmatin message - range = - -((Number(speed) * Number(speed) * Number(battery)) / 2500) + - 4 * Number(battery) + - Number(weather); - - console.log(`Calculated range: ${range.toFixed(2)} km`); - - // Directly manipulate the DOM to show the calculated range - document.getElementById( - "range-output", - )!.innerText = `The predicted range of the Eylsia is ${range.toFixed( - 2, - )} km.`; }; - //useReducer return (
@@ -218,19 +249,24 @@ const App = () => { {/* Add text-center here */} -
- {/*{valid && ( // Assuming 'valid' is a state that indicates whether the inputs are valid -
+
+ {rangeRef.current !== null && + typeof rangeRef.current === "number" ? (

- The predicted range of the Eylsia is {range.toFixed(2)} km. + The predicted range of the Eylsia is{" "} + {rangeRef.current.toFixed(2)} km. +

+ ) : ( +

+ Invalid inputs, cannot calculate range.

-
- )}*/} + )} +
diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx index ca2f43a2..d08ae47c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx @@ -1,4 +1,4 @@ -import type { InputProps } from "./InputProps"; +import type { InputProps } from "~/InputProps"; const BatteryInput: React.FC = ({ value, onChange }) => { return ( diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx index dadf259d..3e7f825c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx @@ -1,4 +1,4 @@ -import type { InputProps } from "./InputProps"; +import type { InputProps } from "~/InputProps"; const SpeedInput: React.FC = ({ value, onChange }) => { return ( diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx index 51667f7e..e913006c 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx @@ -1,6 +1,6 @@ import React from "react"; -import type { InputProps } from "./InputProps"; +import type { InputProps } from "~/InputProps"; const WeatherInput: React.FC = ({ value, onChange }) => { return ( From 86e9b37d025a7be4327607f8e24fd07e9cd68828 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 19 Oct 2024 11:48:47 -0600 Subject: [PATCH 20/21] had problems with displaying the range. use useState to force a re-render --- .../Telemetry-Teaser/src/App.tsx | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index 0f3546d0..a932e863 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,4 +1,10 @@ -import React, { useCallback, useMemo, useReducer, useRef } from "react"; +import React, { + useCallback, + useMemo, + useReducer, + useRef, + useState, +} from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; @@ -88,7 +94,7 @@ const App = () => { const [state, dispatch] = useReducer(reducer, initialState); const { speed, battery, weather } = state; //initialize the state - const rangeRef = useRef(null); // Ref to hold the calculated range + const [renderFlag, setRenderFlag] = useState(false); // State to trigger re-render //to avoid the type errors: const handleSpeedChange = useCallback( (e: React.ChangeEvent) => { @@ -200,27 +206,26 @@ const App = () => { console.log(rangeRef.current !== null); };*/ + const calculatedRangeRef = useRef(null); + const handleClick = () => { const { speedError, batteryError, isValid } = validInputs; - - // Perform the range calculation only when valid inputs are provided if (!isValid) { console.error(speedError, batteryError); - rangeRef.current = null; // Set rangeRef to null for invalid inputs + calculatedRangeRef.current = null; } else { - const range = + const calculatedRange = -( (Number(state.speed) * Number(state.speed) * Number(state.battery)) / 2500 ) + 4 * Number(state.battery) + Number(state.weather); - - rangeRef.current = range; // Set the calculated range to the ref - console.log(range); - console.log(rangeRef.current !== null); - console.log(typeof rangeRef.current); + + calculatedRangeRef.current = calculatedRange; // Update ref with calculated range + console.log("Calculated Range:", calculatedRangeRef.current); // Log immediately } + setRenderFlag((prev) => !prev); // Toggle the state to force a re-render }; return (
@@ -255,11 +260,11 @@ const App = () => { Calculate
- {rangeRef.current !== null && - typeof rangeRef.current === "number" ? ( + {calculatedRangeRef.current !== null && + typeof calculatedRangeRef.current === "number" ? (

The predicted range of the Eylsia is{" "} - {rangeRef.current.toFixed(2)} km. + {calculatedRangeRef.current.toFixed(2)} km.

) : (

From cb4ee1a5b44f88f790f6844fc7658ab9b71cc4f5 Mon Sep 17 00:00:00 2001 From: ZainabM872 Date: Sat, 19 Oct 2024 13:44:13 -0600 Subject: [PATCH 21/21] removed useRef and useState and calculated range using useMemo --- .../Telemetry-Teaser/src/App.tsx | 48 +++++++++++-------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx index a932e863..2ce4cc2b 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -91,10 +91,10 @@ const reducer = (state: State, action: ActionType): State => { } }; const App = () => { + const [displayRange, setSD] = useState(false); const [state, dispatch] = useReducer(reducer, initialState); const { speed, battery, weather } = state; //initialize the state - const [renderFlag, setRenderFlag] = useState(false); // State to trigger re-render //to avoid the type errors: const handleSpeedChange = useCallback( (e: React.ChangeEvent) => { @@ -106,7 +106,7 @@ const App = () => { altered: true, //the input changed so we chnage it to true }, }); - + setSD(false); console.log("Speed:", value); // Add this line }, [], @@ -122,6 +122,7 @@ const App = () => { altered: true, //the input changed so we chnage it to true }, }); + setSD(false); }, [], ); @@ -137,6 +138,7 @@ const App = () => { altered: true, //the input changed so we chnage it to true }, }); + setSD(false); }, [], ); @@ -206,27 +208,34 @@ const App = () => { console.log(rangeRef.current !== null); };*/ - const calculatedRangeRef = useRef(null); - - const handleClick = () => { - const { speedError, batteryError, isValid } = validInputs; - if (!isValid) { - console.error(speedError, batteryError); - calculatedRangeRef.current = null; - } else { - const calculatedRange = + const calculatedRange = useMemo(() => { + const { isValid } = validInputs; + if (isValid) + return ( -( (Number(state.speed) * Number(state.speed) * Number(state.battery)) / 2500 ) + 4 * Number(state.battery) + - Number(state.weather); + Number(state.weather) + ); + return null; + }, [ + validInputs.isValid, + state.speed, + state.battery, + state.weather, + displayRange, + ]); - calculatedRangeRef.current = calculatedRange; // Update ref with calculated range - console.log("Calculated Range:", calculatedRangeRef.current); // Log immediately + const handleClick = () => { + if (validInputs.isValid) { + setSD(true); // Show the range if inputs are valid + } else { + setSD(false); // Hide or show an error message if inputs are invalid } - setRenderFlag((prev) => !prev); // Toggle the state to force a re-render }; + return (

@@ -260,16 +269,13 @@ const App = () => { Calculate
- {calculatedRangeRef.current !== null && - typeof calculatedRangeRef.current === "number" ? ( + {displayRange && calculatedRange !== null ? (

The predicted range of the Eylsia is{" "} - {calculatedRangeRef.current.toFixed(2)} km. + {calculatedRange.toFixed(2)} km.

) : ( -

- Invalid inputs, cannot calculate range. -

+

)}