blendedstate framework, textbox load/reset #18

rebels2638 · Mar 6, 2022 · 0f2dab5 · 0f2dab5
1 parent 939098d
commit 0f2dab5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 39 deletions.
diff --git a/Components/Utility/CustomTextBox.js b/Components/Utility/CustomTextBox.js
@@ -5,55 +5,40 @@ import {
 	StyleSheet
 } from "react-native";
 
-import { setKeyPair, setDefault, selectID } from "../../Redux/Features/dataSlice.js";
+import { setKeyPair, setDefault, selectID, selectBlendedID, consumeBlend } from "../../Redux/Features/dataSlice.js";
 import { useDispatch, useSelector } from "react-redux";
 
 import ScoutingColors from "../../Config/ScoutingColors";
 
 export default function CustomTextBox(props) {
 	const dispatch = useDispatch();
-
 	const [text, setText] = useState("");
-	// Fixes issue #36
-	// https://github.com/PatheticMustan/ScoutingApp2019/issues/36#issuecomment-667728272
-	const [watchdog, bark] = useState("");
-
+
 	// set default value
 	dispatch(setDefault([props.id, ""]));
 
 	// get value from store
 	const reduxText = useSelector(selectID(props.id));
+
+	// state issues with loading/resets.    context:
+	// https://github.com/PatheticMustan/ScoutingApp2019/issues/36#issuecomment-667728272
+	// https://github.com/rebels2638/ScoutingApp2022/issues/18
+	const blendedText = useSelector(selectBlendedID(props.id));
 
+	if (blendedText !== null) {
+		setText(blendedText);
+		dispatch(consumeBlend(props.id))
+	}
+
+	// keep redux text updated after a 500ms delay of not editing
 	useEffect(() => {
 		const interval = setInterval(() => {
-			/** #36 and solution:
-			 * CONTEXT:
-			 * every second, we want to check if the user typed.
-			 * if they DID type, text should be different. We can check with (text !== reduxText)
-			 * 
-			 * PROBLEM:
-			 * now the problem is we can't update text with reduxText, since it thinks the user typed.
-			 * 
-			 * SOLUTION:
-			 * A way to fix this is to have a different state (watchdog) tracking specifically if reduxText changed.
-			 * reduxText only updates when the textbox updates it, or during loadMatch!
-			 * watchdog only updates when the textbox updates it.
-			 * So we can kinda subtract the two. Now, we can check if loadMatch happened!
-			 * We can check this with (watchdog !== reduxText)
-			 **/
-			if (watchdog !== reduxText) {
-				setText(reduxText);
-			} else {
-				if (reduxText !== text) {
-					bark(text);
-					dispatch(setKeyPair([props.id, text]));
-				}
-			}
+			if (reduxText !== text) dispatch(setKeyPair([props.id, text]));
 		}, 500);
 
 		// basically componentWillUnmount but this time it's for React hooks
 		return () => clearInterval(interval);
-	}, [reduxText, text]);
+	}, [text]);
 
 	return (
 		<View style={{
@@ -66,7 +51,6 @@ export default function CustomTextBox(props) {
 				numberOfLines={props.multi ? props.lines : 1}
 				editable
 				placeholder={props.placeholder || ""}
-				value={text}
 				style={{
 					flex: 1,
 					padding: 10,
@@ -76,6 +60,7 @@ export default function CustomTextBox(props) {
 					borderRadius: (props.borderRadius ? props.borderRadius : props.height / 5)
 				}}
 				{...props.options}
+				value={text}
 				onChangeText={text => setText(text)}
 			/>
 		</View>

diff --git a/Redux/Features/dataSlice.js b/Redux/Features/dataSlice.js
@@ -4,6 +4,8 @@ export const dataSlice = createSlice({
 	name: "dataSlice",
 	initialState: {
 		keyPairValues: {},
+		default: {},
+		blendedState: {} // https://github.com/rebels2638/ScoutingApp2022/issues/18
 	},
 	reducers: {
 		setKeyPair: (state, action) => {
@@ -28,13 +30,22 @@ export const dataSlice = createSlice({
 			if (!(key in state.keyPairValues)) {
 				state.keyPairValues[key] = value;
 			}
+
+			state.default[key] = value;
+
+			if (!(key in state.blendedState)) {
+				state.blendedState[key] = null;
+			}
 		},
 
 		loadMatch: (state, action) => {
 			// should only be used when clicking on a match in Past Matches
-			console.log("A match has been loaded.");
 			// import that bad boy
+			console.log("A match has been loaded.");
 			state.keyPairValues = action.payload;
+
+			// NOTE: loadMatch does not have a whitelist
+			state.blendedState = action.payload;
 		},
 
 		freshStart: (state) => {
@@ -51,14 +62,26 @@ export const dataSlice = createSlice({
 
 			for (let key in state.keyPairValues) {
 				if (!whitelist.includes(key)) {
-					delete state.keyPairValues[key];
+					state.keyPairValues[key] = state.default[key];
+					state.blendedState[key] = state.default[key];
 				}
 			}
+		},
+
+		// https://open.spotify.com/track/3m9lnuSYZmHsopPycNnGqM
+		// hehehe consume CON SUME consumi
+		consumeBlend: (state, action) => {
+			// key should be a string
+			const key = action.payload;
+
+			if (typeof key !== "string") console.log(`WARNING! Expected key, instead got ${typeof key}.`);
+
+			state.blendedState[key] = null;
 		}
 	},
 });
 
-export const { setKeyPair, setDefault, loadMatch, freshStart } = dataSlice.actions;
+export const { setKeyPair, setDefault, loadMatch, freshStart, consumeBlend } = dataSlice.actions;
 window.skp = dataSlice.actions.setKeyPair;
 
 // The function below is called a selector and allows us to select a value from
@@ -67,5 +90,6 @@ window.skp = dataSlice.actions.setKeyPair;
 export const selectData = state => state.data.keyPairValues;
 // yeah these are big brain hours
 export const selectID = id => state => state.data.keyPairValues[id];
+export const selectBlendedID = id => state => state.data.blendedState[id];
 
 export default dataSlice.reducer;
diff --git a/Redux/Features/matchSlice.js b/Redux/Features/matchSlice.js
@@ -9,13 +9,10 @@ export const matchSlice = createSlice({
 		writeMatch: (state, action) => {
 			// action is in format
 			// [key, payload]
-			// Tracer: ESCOURT THE PAYLOAD!
-
 			const [matchKey, kpv] = action.payload;
 
 			if (!(typeof matchKey === "string"))					console.log(`WARNING! Expected key to be string, instead got ${typeof matchKey}.`);
-			if (!(kpv instanceof Array))							console.log(`WARNING! Expected match to be object, instead got ${typeof kpv}.`);
-			if (!Object.values(kpv).every(v => v instanceof Array))	console.log(`WARNING! Expected each item to be an array, instead got ${typeof kpv[0]}.`);
+			if (!(kpv instanceof Object))							console.log(`WARNING! Expected match to be an object, instead got ${typeof kpv}.`);
 
 			const mki = state.matches.findIndex(v => v && (v[0] === matchKey));
 
@@ -32,12 +29,12 @@ export const matchSlice = createSlice({
 
 		importMatches: (state, action) => {
 			// should only be used when the app starts
-			console.log("MATCHES HAVE BEEN IMPORTED!!!");
 			// import that bad boy
 			state.matches = action.payload;
 		},
 
 		resetMatches: (state) => {
+			// resets ALL the matches
 			state.matches = [];
 		}
 	},