Skip to content

Instantly share code, notes, and snippets.

@aislanmaia
Last active July 20, 2022 19:00
Show Gist options
  • Save aislanmaia/8b716b3411fa5b1b3195b199b7e9a73f to your computer and use it in GitHub Desktop.
Save aislanmaia/8b716b3411fa5b1b3195b199b7e9a73f to your computer and use it in GitHub Desktop.
Example for how to enable hot-reload with xstate and use-machine libraries and an example project.
import React, { useContext } from "react";
import Dashboard from "./Dashboard";
import Login from "./Login";
import AppContext from "./AppContext";
export default () => {
const { machine, error } = useContext(AppContext);
console.log("executing App component...");
return (
<div className="w5">
teste
<div className="mb2">{error}</div>
{machine.state.matches("loggedIn") ? (
<Dashboard />
) : (
<Login />
)}
</div>
);
};
import React, { useState } from "react";
import { useMachine } from "use-machine";
import { assign } from "xstate/lib/actions";
import machineConfig from "./machine";
const AppContext = React.createContext({
machine: {},
authState: "login",
logout: () => {},
user: {}
});
export const AppProvider = props => {
console.log("executing AppProvider...")
const machine = useMachine(machineConfig, {
actions: {
sideEffect: () => console.log("sideEffect"),
setUser: (_ctx, evt) => setUser({ username: evt.username }),
unsetUser: (_ctx, evt) => setUser({})
}
});
const [user, setUser] = useState({});
const [error, /*setError*/] = useState(undefined);
// passed into the childs
const logout = e => {
e.preventDefault();
machine.send({ type: "LOGOUT" });
};
return (
<AppContext.Provider value={{ machine, user, logout, error }}>
{props.children}
</AppContext.Provider>
);
};
export default AppContext
import React, {useContext} from 'react'
import AppContext from './AppContext'
export default props => {
const {user, logout} = useContext(AppContext)
return (
<>
<h1>Hello user {user.username}</h1>
<button onClick={e => logout(e)}>
Logout
</button>
</>
)
}
import React from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from "./App";
import { AppProvider } from "./AppContext";
import * as serviceWorker from "./serviceWorker";
const render = (Component) => ReactDOM.render(
<AppProvider>
<App />
</AppProvider>
, document.getElementById("root")
);
render(App)
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default
render(NextApp)
})
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
import React, { useState, useContext } from "react";
import AppContext from "./AppContext";
export default props => {
const { machine } = useContext(AppContext);
const [inputName, setInputName] = useState("");
const handleInputName = event => {
setInputName(event.target.value);
};
const login = event => {
event.preventDefault();
machine.send("SUBMIT");
setTimeout(
() =>
inputName
? machine.send({ type: "SUCCESS", username: inputName })
: machine.send({
type: "FAIL",
error: "Uh oh, you must enter your name!"
}),
2000
);
};
return (
<form onSubmit={e => login(e)}>
<label htmlFor="inputName">
<span>Your name:</span>
<input
id="inputName"
name="inputName"
type="text"
value={inputName}
onChange={handleInputName}
/>
</label>
<input
type="submit"
value={machine.state.matches("loading") ? "Logging in..." : "Login"}
disabled={machine.state.matches("loading") ? true : false}
/>
</form>
</>
);
};
export default {
initial: "loggedOut",
/*context: {
user: {}
},*/
states: {
loggedOut: {
on: {
SUBMIT: "loading",
}
},
loading: {
on: {
SUCCESS: "loggedIn",
FAIL: "loggedOut"
}
},
loggedIn: {
onEntry: ["setUser"],
onExit: ["unsetUser"],
on: {
LOGOUT: "loggedOut"
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment