Refactored Timo to use XState

packages/jotai/src/App.jsx

@@ -13,7 +13,6 @@ import Router from './components/Router';
 const routes = [
     { path: '/', name: 'Entries' },
     { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
     { path: '/new', name: 'NewEntry' },
     { path: '/profile', name: 'Profile' }
 ];

packages/mobx/src/App.jsx

@@ -16,7 +16,6 @@ import Profile from './routes/Profile/Profile';
 const routes = [
     { path: '/', name: 'Entries' },
     { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
     { path: '/new', name: 'NewEntry' },
     { path: '/profile', name: 'Profile' }
 ];

packages/react/src/App.jsx

@@ -13,7 +13,6 @@ import Profile from './routes/Profile/Profile';
 const routes = [
     { path: '/', name: 'Entries' },
     { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
     { path: '/new', name: 'NewEntry' },
     { path: '/profile', name: 'Profile' }
 ];

packages/tanstack-query/src/App.jsx

@@ -17,7 +17,6 @@ import Profile from './routes/Profile/Profile';
 const routes = [
     { path: '/', name: 'Entries' },
     { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
     { path: '/new', name: 'NewEntry' },
     { path: '/profile', name: 'Profile' }
 ];

packages/valtio/src/App.jsx

@@ -16,7 +16,6 @@ import Profile from './routes/Profile/Profile';
 const routes = [
     { path: '/', name: 'Entries' },
     { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
     { path: '/new', name: 'NewEntry' },
     { path: '/profile', name: 'Profile' }
 ];

packages/xstate/package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xstate/react": "^4.1.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "xstate": "^5.18.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",

packages/xstate/src/App.jsx

@@ -1,67 +1,47 @@
-import Router from '@timo/common/components/Router';
-import UserContextProvider from '@timo/common/context/UserContextProvider';
 import Container from '@timo/common/components/Container';
-import Title from '@timo/common/components/Title';
-import TopBarWithUser from '@timo/common/contextualComponents/TopBarWithUser';
-import ProtectedRoute from '@timo/common/contextualComponents/ProtectedRoute';
 
 import Login from './routes/Login/Login';
 import Entries from './routes/Entries/Entries';
 import NewEntry from './routes/NewEntry/NewEntry';
 import Profile from './routes/Profile/Profile';
-
-const routes = [
-    { path: '/', name: 'Entries' },
-    { path: '/login', name: 'Login' },
-    { path: '/register', name: 'Register' },
-    { path: '/new', name: 'NewEntry' },
-    { path: '/profile', name: 'Profile' }
-];
+import TopBarWithUser from './contextualComponents/TopBarWithUser';
+import MachineContextProvider from './context/MachineContext';
+import Router from './components/Router';
 
 const App = () => (
-    <UserContextProvider>
-        <Router routes={routes}>
-            {(routeName, history) => {
+    <MachineContextProvider>
+        <Router>
+            {(routeName) => {
                 let pageComponent = null;
                 switch (routeName) {
-                case 'Login':
-                    pageComponent = <Login history={history} />;
+                case 'login':
+                    pageComponent = <Login />;
                     break;
-                case 'NewEntry':
+                case 'newEntry':
                     pageComponent = (
-                        <ProtectedRoute history={history}>
-                            <NewEntry history={history} />
-                        </ProtectedRoute>
+                        <NewEntry />
                     );
                     break;
-                case 'Entries':
+                case 'entries':
                     pageComponent = (
-                        <ProtectedRoute history={history}>
-                            <Entries history={history} />
-                        </ProtectedRoute>
+                        <Entries />
                     );
                     break;
-                case 'Profile':
+                case 'profile':
                     pageComponent = (
-                        <ProtectedRoute history={history}>
-                            <Profile />
-                        </ProtectedRoute>
+                        <Profile />
                     );
                     break;
-                default:
-                    pageComponent = (
-                        <Title>Page not found</Title>
-                    );
                 }
                 return (
                     <Container>
-                        <TopBarWithUser history={history} />
+                        <TopBarWithUser />
                         {pageComponent}
                     </Container>
                 );
             }}
         </Router>
-    </UserContextProvider>
+    </MachineContextProvider>
 );
 
 export default App;

packages/xstate/src/components/Router.jsx

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import useRootMachineState from '../hooks/useRootMachineState';
+
+const Router = ({ children }) => {
+    const state = useRootMachineState(state => state.value);
+    const route = state?.authenticated || state?.unauthenticated;
+    if (route && route !== 'unknown') {
+        return children(route);
+    }
+    return null;
+};
+
+Router.propTypes = {
+    children: PropTypes.func.isRequired
+};
+
+export default Router;

packages/xstate/src/components/Timer.jsx

@@ -0,0 +1,17 @@
+import styles from '@timo/common/components/Timer/Timer.module.css';
+import useChildMachineState from '../hooks/useChildMachineState';
+
+const Timer = () => {
+    const timerValue = useChildMachineState('newEntry', state => state.context.timerValue);
+
+    // Format duration to HH:MM:SS
+    const formattedValue = new Date(timerValue * 1000).toISOString().slice(11, 19);
+
+    return (
+        <div className={styles.timer}>
+            {formattedValue}
+        </div>
+    );
+};
+
+export default Timer;

packages/xstate/src/context/MachineContext.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { createActor } from 'xstate';
+import { createContext } from 'react';
+import root from '../machines/root';
+
+const rootActor = createActor(root, { systemId: 'root' });
+rootActor.start();
+
+export const MachineContext = createContext();
+
+const MachineContextProvider = ({ children }) => {
+    return (
+        <MachineContext.Provider value={rootActor}>
+            {children}
+        </MachineContext.Provider>
+    );
+};
+
+MachineContextProvider.propTypes = {
+    children: PropTypes.node.isRequired
+};
+
+export default MachineContextProvider;

packages/xstate/src/contextualComponents/TopBarWithUser.jsx

@@ -0,0 +1,21 @@
+import TopBar from '@timo/common/components/TopBar';
+import useRootMachine from '../hooks/useRootMachine';
+import useRootMachineState from '../hooks/useRootMachineState';
+
+const TopBarWithUser = () => {
+    const rootMachine = useRootMachine();
+    const userData = useRootMachineState(state => state.context.userData);
+
+    return (
+        <TopBar
+            avatar={{
+                character: userData?.avatar_character,
+                background: userData?.avatar_background
+            }}
+            onIconClick={() => rootMachine.send({ type: 'pushRoute', route: 'entries' })}
+            onAvatarClick={() => rootMachine.send({ type: 'pushRoute', route: 'profile' })}
+        />
+    );
+};
+
+export default TopBarWithUser;

packages/xstate/src/hooks/useChildMachine.js

@@ -0,0 +1,9 @@
+import { useSelector } from '@xstate/react';
+import useRootMachine from './useRootMachine';
+
+const useChildMachine = (childId) => {
+    const rootMachine = useRootMachine();
+    return useSelector(rootMachine, (state) => state.children[childId]);
+};
+
+export default useChildMachine;

packages/xstate/src/hooks/useChildMachineState.js

@@ -0,0 +1,9 @@
+import { useSelector } from '@xstate/react';
+import useChildMachine from './useChildMachine';
+
+const useChildMachineState = (childId, selector) => {
+    const machine = useChildMachine(childId);
+    return useSelector(machine, selector);
+};
+
+export default useChildMachineState;

packages/xstate/src/hooks/useRootMachine.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { MachineContext } from '../context/MachineContext';
+
+const useRootMachine = () => {
+    return useContext(MachineContext);
+};
+
+export default useRootMachine;

packages/xstate/src/hooks/useRootMachineState.js

@@ -0,0 +1,9 @@
+import { useSelector } from '@xstate/react';
+import useRootMachine from './useRootMachine';
+
+const useRootMachineState = (selector) => {
+    const rootMachine = useRootMachine();
+    return useSelector(rootMachine, selector);
+};
+
+export default useRootMachineState;

packages/xstate/src/machines/changePassword.js

@@ -0,0 +1,55 @@
+import { setup, assign, fromPromise } from 'xstate';
+import { updatePassword } from '@timo/common/api';
+
+const changePasswordMachine = setup({
+    actors: {
+        updatePassword: fromPromise(async ({ input }) => updatePassword(input))
+    }
+}).createMachine({
+    id: 'changePassword',
+    initial: 'idle',
+    context: ({ input }) => ({
+        username: input.username,
+        statusMessage: null
+    }),
+    states: {
+        'idle': {
+            on: {
+                'save': {
+                    target: 'saving'
+                }
+            }
+        },
+        'saving': {
+            entry: [
+                assign({
+                    statusMessage: 'Saving...'
+                })
+            ],
+            invoke: [
+                {
+                    src: 'updatePassword',
+                    input: ({ context, event }) => ({
+                        username: context.username,
+                        password: event.password,
+                        newPassword: event.newPassword
+                    }),
+                    onDone: {
+                        target: 'idle',
+                        actions: assign({
+                            statusMessage: 'Password updated'
+                        })
+                    },
+                    onError: {
+                        target: 'idle',
+                        actions: assign({
+                            statusMessage: ({ event }) => event.error.message
+                        })
+                    }
+                }
+            ]
+        }
+    }
+});
+
+export default changePasswordMachine;