From 6d22676cdafe9d9b72286ed9f0103dfe4ee0e42a Mon Sep 17 00:00:00 2001 From: Kris Ranganathan Date: Tue, 21 May 2024 18:36:34 -0600 Subject: [PATCH 1/3] first version --- .../Telemetry-Teaser/src/App.tsx | 51 +++++++++++++++++-- .../src/components/batteryInput/index.tsx | 3 +- .../src/components/speedInput/index.tsx | 3 +- .../src/components/weatherInput/index.tsx | 5 +- 4 files changed, 53 insertions(+), 9 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 488bc934..bc7f7dc8 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,12 +1,39 @@ +import { useState, useEffect, useRef } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; const App = () => { + const [speed, setSpeed] = useState(null); + const [battery, setBattery] = useState(null); + const [weather, setWeather] = useState(50); + const [range, setRange] = useState(null); + const [messages, setMessages] = useState([]); + const calculateRange = () => { - return; - } + setRange(null); + if (checkErrors()) return; + + // s = speed, b = battery percentage w = weather + // if s=1, b=2, w=50 then range=57.9992 + let s = speed, b = battery, w = weather; + let range = -((s * s * b) / 2500) + 4 * b + w; + console.log(range, "Code is running here"); + setRange(range); + }; + + const checkErrors = () => { + let messages = []; + + if (speed == null) messages.push("Speed is required"); + if (battery == null) messages.push("Battery is required"); + if (speed < 0 || speed > 90) messages.push("The speed should be within a range of 0 and 90"); + if (battery < 0 || battery > 100) messages.push("The battery percentage should be within a range of 0 and 100"); + + setMessages(messages); + return messages.length !== 0; + }; return (
@@ -14,11 +41,25 @@ const App = () => {
- - + +
- + +
+ +
+ +
+ +
+ {range && `The predicted range of the Eylsia is ${range} km.`} + {messages && + messages.map((message, index) => +
  • {message}
    • + )}
    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..a3bcae30 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 @@ -const BatteryInput = () => { +const BatteryInput = ({ value, setValue }) => { return (
    @@ -8,6 +8,7 @@ const BatteryInput = () => { name="battery" type="number" placeholder="Battery" + onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} />
    ); 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..13d9d60e 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 @@ -const SpeedInput = () => { +const SpeedInput = ({ value, setValue }) => { return ( <>
    @@ -9,6 +9,7 @@ const SpeedInput = () => { name="speed" type="number" placeholder="Speed" + onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} />
    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..0c1a45b7 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,4 @@ -const WeatherInput = () => { +const WeatherInput = ({ value, setValue }) => { return ( <> Cloud @@ -8,7 +8,8 @@ const WeatherInput = () => { type="range" min="0" max="100" - value="50" + value={value} + onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} /> Sun From f6ff1a07c34835cd06c2104a311f1fd032229503 Mon Sep 17 00:00:00 2001 From: Kris Ranganathan Date: Tue, 21 May 2024 19:27:49 -0600 Subject: [PATCH 2/3] fixed display range when changing inputs --- .../Telemetry-Teaser/src/App.tsx | 41 +++++++++++++------ .../src/components/batteryInput/index.tsx | 9 +++- .../src/components/speedInput/index.tsx | 9 +++- .../src/components/weatherInput/index.tsx | 9 +++- 4 files changed, 50 insertions(+), 18 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 bc7f7dc8..33e4c38d 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,5 @@ -import { useState, useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; + import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; import SpeedInput from "~/components/speedInput"; @@ -17,7 +18,9 @@ const App = () => { // s = speed, b = battery percentage w = weather // if s=1, b=2, w=50 then range=57.9992 - let s = speed, b = battery, w = weather; + let s = speed, + b = battery, + w = weather; let range = -((s * s * b) / 2500) + 4 * b + w; console.log(range, "Code is running here"); setRange(range); @@ -28,8 +31,12 @@ const App = () => { if (speed == null) messages.push("Speed is required"); if (battery == null) messages.push("Battery is required"); - if (speed < 0 || speed > 90) messages.push("The speed should be within a range of 0 and 90"); - if (battery < 0 || battery > 100) messages.push("The battery percentage should be within a range of 0 and 100"); + if (speed < 0 || speed > 90) + messages.push("The speed should be within a range of 0 and 90"); + if (battery < 0 || battery > 100) + messages.push( + "The battery percentage should be within a range of 0 and 100", + ); setMessages(messages); return messages.length !== 0; @@ -41,15 +48,27 @@ const App = () => {
    - - + +
    - +
    -
    -
    @@ -57,9 +76,7 @@ const App = () => {
    {range && `The predicted range of the Eylsia is ${range} km.`} {messages && - messages.map((message, index) => -
  • {message}
    • - )} + messages.map((message, index) =>
  • {message}
    • )}
    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 a3bcae30..dc78b6b6 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 @@ -const BatteryInput = ({ value, setValue }) => { +const BatteryInput = ({ value, setValue, setRange }) => { return (
    @@ -8,7 +8,12 @@ const BatteryInput = ({ value, setValue }) => { name="battery" type="number" placeholder="Battery" - onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} + onChange={(e) => { + setRange(null); + e.target.value !== "" + ? setValue(parseInt(e.target.value)) + : setValue(null); + }} />
    ); 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 13d9d60e..baba8c21 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 @@ -const SpeedInput = ({ value, setValue }) => { +const SpeedInput = ({ value, setValue, setRange }) => { return ( <>
    @@ -9,7 +9,12 @@ const SpeedInput = ({ value, setValue }) => { name="speed" type="number" placeholder="Speed" - onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} + onChange={(e) => { + setRange(null); + e.target.value !== "" + ? setValue(parseInt(e.target.value)) + : setValue(null); + }} />
    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 0c1a45b7..ad25eacd 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,4 @@ -const WeatherInput = ({ value, setValue }) => { +const WeatherInput = ({ value, setValue, setRange }) => { return ( <> Cloud @@ -9,7 +9,12 @@ const WeatherInput = ({ value, setValue }) => { min="0" max="100" value={value} - onChange={(e) => e.target.value !== "" ? setValue(parseInt(e.target.value)) : setValue(null)} + onChange={(e) => { + setRange(null); + e.target.value !== "" + ? setValue(parseInt(e.target.value)) + : setValue(null); + }} /> Sun From 62396a6608dbdaa2544d9e70cecc9f4a1dcc5824 Mon Sep 17 00:00:00 2001 From: Kris Ranganathan Date: Fri, 24 May 2024 23:56:50 -0600 Subject: [PATCH 3/3] using useReducer hook instead --- .../Telemetry-Teaser/src/App.tsx | 71 +++++++++++-------- .../src/components/batteryInput/index.tsx | 9 ++- .../src/components/messages/index.tsx | 14 ++++ .../src/components/speedInput/index.tsx | 9 ++- .../src/components/weatherInput/index.tsx | 11 ++- 5 files changed, 68 insertions(+), 46 deletions(-) create mode 100644 Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/messages/index.tsx 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 33e4c38d..4ef3dd7e 100644 --- a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx @@ -1,43 +1,60 @@ -import { useEffect, useRef, useState } from "react"; +import { useReducer, useState } from "react"; import BatteryInput from "~/components/batteryInput"; import Header from "~/components/header"; +import Messages from "~/components/messages"; import SpeedInput from "~/components/speedInput"; import WeatherInput from "~/components/weatherInput"; const App = () => { - const [speed, setSpeed] = useState(null); - const [battery, setBattery] = useState(null); - const [weather, setWeather] = useState(50); - const [range, setRange] = useState(null); + const initialState = { + speed: null, + battery: null, + weather: 50, + range: null, + }; + + const reducer = (state, action) => { + switch (action.type) { + case "setSpeed": + return { ...state, speed: action.payload, range: null }; + case "setBattery": + return { ...state, battery: action.payload, range: null }; + case "setWeather": + return { ...state, weather: action.payload, range: null }; + case "setRange": + return { ...state, range: action.payload }; + default: + throw "Unknown type error"; + } + }; + + const [state, dispatch] = useReducer(reducer, initialState); const [messages, setMessages] = useState([]); const calculateRange = () => { - setRange(null); if (checkErrors()) return; // s = speed, b = battery percentage w = weather // if s=1, b=2, w=50 then range=57.9992 - let s = speed, - b = battery, - w = weather; + let s = state.speed, + b = state.battery, + w = state.weather; let range = -((s * s * b) / 2500) + 4 * b + w; - console.log(range, "Code is running here"); - setRange(range); + dispatch({ type: "setRange", payload: range }); }; const checkErrors = () => { let messages = []; - if (speed == null) messages.push("Speed is required"); - if (battery == null) messages.push("Battery is required"); - if (speed < 0 || speed > 90) + if (state.speed == null) messages.push("Speed is required"); + if (state.battery == null) messages.push("Battery is required"); + if (state.speed < 0 || state.speed > 90) messages.push("The speed should be within a range of 0 and 90"); - if (battery < 0 || battery > 100) + if (state.battery < 0 || state.battery > 100) messages.push( "The battery percentage should be within a range of 0 and 100", ); - setMessages(messages); return messages.length !== 0; }; @@ -48,19 +65,11 @@ const App = () => {
    - - + +
    - +
    @@ -74,10 +83,12 @@ const App = () => {
    - {range && `The predicted range of the Eylsia is ${range} km.`} - {messages && - messages.map((message, index) =>
  • {message}
    • )} + {state.range && + `The predicted range of the Eylsia is ${state.range} km.`}
    + {/* {messages && + messages.map((message, index) =>
  • {message}
    • )} */} + {messages.length !== 0 && } 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 dc78b6b6..bf235148 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 @@ -const BatteryInput = ({ value, setValue, setRange }) => { +const BatteryInput = ({ dispatch }) => { return (
    @@ -9,10 +9,9 @@ const BatteryInput = ({ value, setValue, setRange }) => { type="number" placeholder="Battery" onChange={(e) => { - setRange(null); - e.target.value !== "" - ? setValue(parseInt(e.target.value)) - : setValue(null); + const batteryValue = + e.target.value !== "" ? parseInt(e.target.value) : null; + dispatch({ type: "setBattery", payload: batteryValue }); }} />
    diff --git a/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/messages/index.tsx b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/messages/index.tsx new file mode 100644 index 00000000..e856b479 --- /dev/null +++ b/Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/messages/index.tsx @@ -0,0 +1,14 @@ +const Messages = ({ messages }) => { + return ( +
    + Errors: + {messages.map((message, index) => ( +
  • + {message} +
    • + ))} +
    + ); +}; + +export default Messages; 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 baba8c21..9dc57799 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 @@ -const SpeedInput = ({ value, setValue, setRange }) => { +const SpeedInput = ({ dispatch }) => { return ( <>
    @@ -10,10 +10,9 @@ const SpeedInput = ({ value, setValue, setRange }) => { type="number" placeholder="Speed" onChange={(e) => { - setRange(null); - e.target.value !== "" - ? setValue(parseInt(e.target.value)) - : setValue(null); + const speedValue = + e.target.value !== "" ? parseInt(e.target.value) : null; + dispatch({ type: "setSpeed", payload: speedValue }); }} />
    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 ad25eacd..1067eb6f 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,4 @@ -const WeatherInput = ({ value, setValue, setRange }) => { +const WeatherInput = ({ state, dispatch }) => { return ( <> Cloud @@ -8,12 +8,11 @@ const WeatherInput = ({ value, setValue, setRange }) => { type="range" min="0" max="100" - value={value} + value={state.weather} onChange={(e) => { - setRange(null); - e.target.value !== "" - ? setValue(parseInt(e.target.value)) - : setValue(null); + const weatherValue = + e.target.value !== "" ? parseInt(e.target.value) : null; + dispatch({ type: "setWeather", payload: weatherValue }); }} /> Sun