Skip to content

Instantly share code, notes, and snippets.

@khades
Created July 7, 2019 12:12
Show Gist options
  • Save khades/eb71e951f19058e78839745f42f38fcd to your computer and use it in GitHub Desktop.
Save khades/eb71e951f19058e78839745f42f38fcd to your computer and use it in GitHub Desktop.
// So you have such component
const component = () => {
const [robotFaceDirection, setRobotFaceDirection] = useState<number>(0);
const [robotPositionX, setRobotPositionX] = useState<number>(0);
const [robotPositionY, setRobotPositionY] = useState<number>(0);
const handleOnInputXChange = (event: any) => {
const value = event.currentTarget.value;
setRobotPositionX(Number(value));
};
const handleOnInputYChange = (event: any) => {
const value = event.currentTarget.value;
setRobotPositionY(Number(value));
};
const handleSelectedFace = (value: any) => {
setRobotFaceDirection(Number(value));
};
const handlePlaceCommand = () => {
onPlaceRobotPost(robotPositionX, robotPositionY, robotFaceDirection);
};
// Some Return there.
}
// Problem with that, you have no access to state to check its value
// BUT you can decouple that logic above from render with hook
const useRobotPosition = () => {
const component = () => {
const [robotFaceDirection, setRobotFaceDirection] = useState<number>(0);
const [robotPositionX, setRobotPositionX] = useState<number>(0);
const [robotPositionY, setRobotPositionY] = useState<number>(0);
const handleOnInputXChange = (event: any) => {
const value = event.currentTarget.value;
setRobotPositionX(Number(value));
};
const handleOnInputYChange = (event: any) => {
const value = event.currentTarget.value;
setRobotPositionY(Number(value));
};
const handleSelectedFace = (value: any) => {
setRobotFaceDirection(Number(value));
};
const handlePlaceCommand = () => {
onPlaceRobotPost(robotPositionX, robotPositionY, robotFaceDirection);
};
return { robotFaceDirection, robotPositionX, robotPositionY, //etc, whatever you need}
}
}
// As hook returns state you can just get the state and test it, https://github.com/testing-library/react-hooks-testing-library
// In render component instead of having all that states you just use hook
const { robotFaceDirection, robotPositionX, robotPositionY, //etc, whatever you need } = useRobotPosition()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment