{date}
-
{formatDuration(getTotalDuration(dayEntries))}
+
{formatDuration(dayEntriesDuration)}
- {/* Entries are descending after being grouped, reverse them */}
- {dayEntries.toReversed().map((entry) => (
+ {dayEntries.map((entry) => (
{
end_time={entry.end_time}
onEdit={handleEdit}
onDelete={handleDelete}
- status={entryStatusMessage.id === entry.id ? entryStatusMessage.message : null}
+ status={itemStatusMessage[entry.id]}
/>
))}
@@ -151,8 +98,4 @@ const Entries = ({ history }) => {
);
};
-Entries.propTypes = {
- history: PropTypes.object.isRequired
-};
-
export default Entries;
diff --git a/packages/xstate/src/routes/Login/Login.jsx b/packages/xstate/src/routes/Login/Login.jsx
index 9113a93..bfdafd0 100644
--- a/packages/xstate/src/routes/Login/Login.jsx
+++ b/packages/xstate/src/routes/Login/Login.jsx
@@ -1,22 +1,15 @@
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { login, register } from '@timo/common/api';
-import useUser from '@timo/common/hooks/useUser';
import Input from '@timo/common/components/Input';
import Button, { ButtonVariants } from '@timo/common/components/Button';
import Title from '@timo/common/components/Title';
import StatusMessage from '@timo/common/components/StatusMessage';
-import styles from './Login.module.css';
+import useChildMachine from '../../hooks/useChildMachine';
+import useChildMachineState from '../../hooks/useChildMachineState';
-const Login = ({ history }) => {
- const user = useUser();
- const [statusMessage, setStatusMessage] = useState(null);
+import styles from './Login.module.css';
- useEffect(() => {
- if (user.status === 'authenticated') {
- history.replace('./');
- }
- }, [history, user]);
+const Login = () => {
+ const statusMessage = useChildMachineState('login', (state) => state.context.statusMessage);
+ const loginMachine = useChildMachine('login');
const handleFormSubmit = (e) => {
e.preventDefault();
@@ -26,23 +19,19 @@ const Login = ({ history }) => {
const username = formData.get('username');
const password = formData.get('password');
- setStatusMessage('Loading...');
-
if (action == 'login') {
- login({ username, password }).then((response) => {
- user.setAuthenticatedUser(response);
- history.replace('./');
- }).catch((error) => {
- setStatusMessage(error.message);
+ loginMachine.send({
+ type: 'login',
+ username,
+ password
});
}
if (action == 'register') {
- register({ username, password }).then((response) => {
- user.setAuthenticatedUser(response);
- history.replace('./');
- }).catch((error) => {
- setStatusMessage(error.message);
+ loginMachine.send({
+ type: 'register',
+ username,
+ password
});
}
};
@@ -63,10 +52,4 @@ const Login = ({ history }) => {
);
};
-Login.propTypes = {
- history: PropTypes.shape({
- replace: PropTypes.func.isRequired
- }).isRequired
-};
-
export default Login;
\ No newline at end of file
diff --git a/packages/xstate/src/routes/NewEntry/NewEntry.jsx b/packages/xstate/src/routes/NewEntry/NewEntry.jsx
index 27da0d6..548b2be 100644
--- a/packages/xstate/src/routes/NewEntry/NewEntry.jsx
+++ b/packages/xstate/src/routes/NewEntry/NewEntry.jsx
@@ -1,110 +1,76 @@
-import { useEffect, useState } from 'react';
-import { createEntry } from '@timo/common/api';
-import Timer from '@timo/common/components/Timer';
import Title from '@timo/common/components/Title';
import Input from '@timo/common/components/Input';
import Button, { ButtonVariants } from '@timo/common/components/Button';
import StatusMessage from '@timo/common/components/StatusMessage';
+import useChildMachine from '../../hooks/useChildMachine';
+import useChildMachineState from '../../hooks/useChildMachineState';
+import Timer from '../../components/Timer';
import styles from './NewEntry.module.css';
-const TimerState = {
- ACTIVE: 'active',
- PAUSED: 'paused',
- STOPPED: 'stopped'
-};
-
const NewEntry = () => {
- const [duration, setDuration] = useState(0);
- const [timerState, setTimerState] = useState(TimerState.STOPPED);
- const [description, setDescription] = useState('');
- const [statusMessage, setStatusMessage] = useState('');
-
- const handleStartClick = () => {
- if (description.length === 0) {
- setStatusMessage('Description is required');
- } else {
- setTimerState(TimerState.ACTIVE);
- setStatusMessage('');
- }
- };
-
- const handleStopClick = () => {
- setTimerState(TimerState.STOPPED);
- };
-
- const handlePauseClick = () => {
- setTimerState(TimerState.PAUSED);
- };
+ const timerState = useChildMachineState('newEntry', state => state.value);
+ const statusMessage = useChildMachineState('newEntry', state => state.context.statusMessage);
+ const newEntryMachine = useChildMachine('newEntry');
- const handleDescriptionChange = (e) => {
- setDescription(e.target.value);
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ const action = e.nativeEvent.submitter.value;
+ const formData = new FormData(e.target);
+ newEntryMachine.send({
+ type: action,
+ description: formData.get('description')
+ });
};
- useEffect(() => {
- if (timerState === TimerState.STOPPED && duration > 0) {
- setDuration(0);
- const endTimestamp = Math.floor(Date.now() / 1000);
- createEntry({
- description,
- start_time: `@${endTimestamp - duration}`,
- end_time: `@${endTimestamp}`
- }).then(() => {
- setStatusMessage('Time logged successfully');
- }).catch((error) => {
- setStatusMessage(error.message);
- });
- }
- });
-
return (
<>