update

src/components/ModalPhoneNumpad/index.jsx

@@ -22,37 +22,14 @@ const ModalPhoneNumpad = ({
 
 	const [inputValue, setInputValue] = useState('');
 	const [call_history, setCall_history] = useState([]);
-
+	const [numberSelectHistory, setNumberSelectHistory] = useState(0);
 	useEffect(() => {
-		// setCall_history(JSON.parse(localStorage.getItem('call_history')) || []);
-	}, []);
-
-	// useEffect(() => {
-	// 	let call_history_storage = JSON.parse(localStorage.getItem('call_history'));
-	// 	if (call_history_storage.length !== call_history.length) {
-	// 		setCall_history(call_history_storage);
-	// 		localStorage.setItem('call_history', JSON.stringify(call_history));
-	// 	}
-	// }, [call_history]);
-
-	const addNumberStorage = ({ number }) => {
-		// let stringNumber = number.toString() || '';
-		// 	let storageNumbers =
-		// 		// (localStorage.getItem('call_history') &&
-		// 		// 	JSON.parse(localStorage.getItem('call_history'))) ||
-		// 		// [];
-		// 		// console.log(
-		// 		// 	stringNumber,
-		// 		// 	null === localStorage.getItem('call_history'),
-		// 		// 	typeof [],
-		// 		// );
-		// 	localStorage.setItem('call_history', [
-		// 		stringNumber,
-		// 		,
-		// 	]);
-		// 	setCall_history([number, ...call_history]);
-		// 	}
-	};
+		let currentCalls = localStorage.getItem('callhistory')
+			? JSON.parse(localStorage.getItem('callhistory'))
+			: false;
+		if (currentCalls) setCall_history(currentCalls);
+	}, [localStorage.getItem('callhistory'), inputValue]);
+
 	useEffect(() => {
 		if (!modalState.bool) setInputValue('');
 	}, [modalState.bool]);
@@ -90,10 +67,55 @@ const ModalPhoneNumpad = ({
 		}
 	};
 
+	const history = ({ type }) => {
+		console.log('type', type);
+		if (phoneModal && (modalState.bool ? false : true)) {
+			if (
+				(type === 'up' && numberSelectHistory < call_history.length) ||
+				numberSelectHistory === 'zero'
+			) {
+				setNumberSelectHistory(
+					numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,
+				);
+			}
+			if (type === 'down' && numberSelectHistory > 0) {
+				setNumberSelectHistory(
+					numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
+				);
+			}
+		}
+	};
+
+	useEffect(() => {
+		if (phoneModal && (modalState.bool ? false : true)) {
+			let selectedNumber;
+			if (numberSelectHistory == 0) {
+				setInputValue('');
+			}
+			selectedNumber = call_history.slice(numberSelectHistory * -1)[0]
+				? call_history.slice(numberSelectHistory * -1)[0]
+				: false;
+			if (numberSelectHistory === 0) {
+				selectedNumber = '';
+				setNumberSelectHistory('zero');
+			}
+			if (numberSelectHistory === 'zero') {
+				selectedNumber = '';
+				setNumberSelectHistory('zero');
+			}
+			if (selectedNumber) {
+				setInputValue(selectedNumber);
+			}
+		}
+	}, [numberSelectHistory]);
+
+	console.log('numberSelectHistory', numberSelectHistory);
+
 	document.onkeydown = function (e) {
 		if (phoneModal && modalState.bool ? false : true) {
 			e = e || window.event;
-			if (e.ctrlKey && e.keyCode === 86) {
+			let actualKeyCode = e.keyCode;
+			if (e.ctrlKey && actualKeyCode === 86) {
 				navigator.clipboard
 					.readText()
 					.then((text) => {
@@ -109,8 +131,8 @@ const ModalPhoneNumpad = ({
 	const gameState = {
 		toggleCP: (e) => {
 			if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
-				boxDialer.initialized(inputValue);
-				addNumberStorage({ number: inputValue });
+				// boxDialer.initialized(inputValue);
+				callButton();
 			} else if (
 				phoneModal &&
 				(modalState.bool ? false : true) &&
@@ -128,12 +150,14 @@ const ModalPhoneNumpad = ({
 				(modalState.bool ? false : true) &&
 				e.key === 'Backspace'
 			) {
-			}
+			} else if (
+				(phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) ||
+				e.keyCode == 40
+			)
+				history({ type: e.keyCode === 38 ? 'up' : 'down' });
 		},
 	};
 
-	// ArrowDown;
-	// ArrowUp
 	const handleKeyUp = useCallback(
 		(event) => {
 			gameState.toggleCP(event);
@@ -150,11 +174,18 @@ const ModalPhoneNumpad = ({
 	}, [handleKeyUp]);
 
 	const callButton = () => {
-		addNumberStorage({ number: inputValue });
+		// inset if ----------
+
+		if (Boolean(inputValue.toString().length)) {
+			console.log(inputValue, 'inputValue');
+			let newCallsStringify = JSON.stringify([...call_history, inputValue]);
+			localStorage.setItem('callhistory', newCallsStringify);
+		}
+
+		// -------------------
 
 		if (dynamicValue === 'connected') {
 			// let call_history = localStorage.getItem('call_history');
-			// console.log(call_history, 'call_history');
 			boxDialer.initialized(inputValue);
 		} else {
 			toast.error('Please wait', {

src/lib/boxDIaler.js

@@ -219,13 +219,13 @@ export class BoxDialer {
 		let uiStates = {
 			stack_i_new_call:
 				this.callDirection === 'in' ? 'connectingIncoming' : 'connected',
+
 			call_connected: 'connected',
 			call_m_stream_audio_remote_added: 'connected',
 			call_i_ao_request: 'connectingOutgoing',
 			stack_m_permission_accepted:
 				this.callDirection === 'in' ? 'incoming' : 'outgoing',
 		};
-
 		return sipState && uiStates[sipState] ? uiStates[sipState] : '';
 	}