cleanup
This commit is contained in:
parent
ddd5d160a4
commit
f87b1d5d10
@ -1,62 +1,48 @@
|
|||||||
import React, { useContext, /* useEffect,*/ useRef, useState } from 'react';
|
import React, { useContext, useRef, useState } from 'react';
|
||||||
import { useLocation, matchPath } from 'react-router-dom';
|
import { useLocation, matchPath } from 'react-router-dom';
|
||||||
import { GamesContext } from '../../context/games';
|
import { GamesContext } from '../../context/games';
|
||||||
//import { useLocationChange } from '../../hook/Location';
|
|
||||||
|
|
||||||
export default function Message2Opponent({ dispatchGames }) {
|
export default function Message2Opponent({ dispatchGames }) {
|
||||||
const games = useContext(GamesContext);
|
const games = useContext(GamesContext);
|
||||||
const [message2opponent, setMessage2opponent] = useState('');
|
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const timeoutIdRef = useRef(null);
|
const [value, setValue] = useState('');
|
||||||
|
const syncTimeoutRef = useRef(null);
|
||||||
|
|
||||||
if (timeoutIdRef.current === null) {
|
if (syncTimeoutRef.current === null) { // <<--- Absorb external value if there is no scheduled sync
|
||||||
// sync: internal <- external
|
|
||||||
// Sync external and internsl states only in abnsence of a delay timer
|
|
||||||
console.log("check message", message2opponent);
|
|
||||||
if (matchPath('/games/new', pathname)) {
|
if (matchPath('/games/new', pathname)) {
|
||||||
if (message2opponent !== games.newGame.message2opponent)
|
if (value !== games.newGame.message2opponent)
|
||||||
setMessage2opponent(games.newGame.message2opponent);
|
setValue(games.newGame.message2opponent);
|
||||||
|
} else if (value !== '') {
|
||||||
|
setValue('');
|
||||||
}
|
}
|
||||||
else
|
|
||||||
if (message2opponent !== '') {
|
|
||||||
setMessage2opponent('');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('timeout.current', timeoutIdRef.current)
|
|
||||||
/* --- */
|
/* --- */
|
||||||
|
|
||||||
|
const sync = (message2opponent) => {
|
||||||
|
syncTimeoutRef.current = null;
|
||||||
|
|
||||||
const delayedSync = (message2opponent) => {
|
|
||||||
timeoutIdRef.current = null;
|
|
||||||
|
|
||||||
// sync: internl -> external
|
|
||||||
if (matchPath('/games/new', pathname))
|
if (matchPath('/games/new', pathname))
|
||||||
return dispatchGames({ type: 'nextNewGame', message2opponent });
|
return dispatchGames({ type: 'nextNewGame', message2opponent });
|
||||||
|
|
||||||
console.warn('unknown path');
|
console.warn('unknown path');
|
||||||
}
|
}
|
||||||
|
|
||||||
const onChange = (value) => {
|
const update = (value) => {
|
||||||
setMessage2opponent(value);
|
setValue(value);
|
||||||
|
|
||||||
if (timeoutIdRef.current)
|
if (syncTimeoutRef.current)
|
||||||
clearTimeout(timeoutIdRef.current); // cancel previous sync
|
clearTimeout(syncTimeoutRef.current); // <<--- Cancel previous sync
|
||||||
|
|
||||||
timeoutIdRef.current = setTimeout(() => delayedSync(value), 500);
|
syncTimeoutRef.current = setTimeout(() => sync(value), 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//var gpathname;
|
|
||||||
//useLocationChange(({ pathname }) => {
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input className='Message2Opponent'
|
<input className='Message2Opponent'
|
||||||
placeholder='Message to opponent'
|
placeholder='Message to opponent'
|
||||||
value={message2opponent}
|
value={value}
|
||||||
maxLength={150}
|
maxLength={150}
|
||||||
onChange={e => onChange(e.target.value)}
|
onChange={e => update(e.target.value)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user