Services

export const useTodoService = ({ baseUrl, todoId }) => {
		const [loading, setLoading] = useState(false);
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    const fetch = async () => {
        setLoading(true);
        try {
            const d = await asJson(`${baseUrl}/todos/${todoId}`);
            setData(d);
        } catch (e) {
            setError(e);
        }

        setLoading(false);
    };

    return [
        { loading, data, error },
        { fetch },
    ];
};

Naming convention

• Services as hooks should always return a record { error, data, loading } state and API to perform operations with this service (fetch, update, refetch, etc)
• Name of the state updater for the state should always start from set and follow by the name of the state. i.e. data + setData, error + setError
• It should follow all the conventions and rules from React as well (name should start with use, etc)

Controllers

export const useModalController = () => {
    const [isOpen, setIsOpen] = useState(false);

    const closeDialog = () => {
        setIsOpen(false);
    };

    const openDialog = () => {
        setIsOpen(true);
    };

    return [isOpen, { closeDialog, openDialog }];
};

Naming convention

• Controllers as hooks should always return a pair: state and API to perform operations on this state.
• Name of the state updater for the state should always start from set and follow by the name of the state. i.e. isOpen + setIsOpen
• It should follow all the conventions and rules from React as well (name should start with use, etc)

Usage

import { useModalController } from './controllers';

const App = () => {
    const [isModalOpen, { openModal, closeModal }] = useModalController(false);

    return (
        <>
            <Button onClick={openModal}>Open Modal</Button>
            {isModalOpen && (
                <Modal
                    onClose={closeModal}
                    heading="yo!"
                    actions={[{ text: 'Close', onClick: closeModal }]}
                >
                    content
                </Modal>
            )}
        </>
    );
};