Example structuring store in one file

effector-store-structure.js

import { createStore, createEvent, createEffect } from 'effector';

import { $problemId } from './problem';
import { createApiStore } from 'utils/store';
import { submitApi, runCodeApi } from 'api';
import { batchCombine } from 'utils/effector';

/**
 * EVENTS, EFFECTS
 * ----------------------------------------------------------------------------
 */
const aChangeCode = createEvent('change code');
const aChangeInput = createEvent('change input');
const eSubmitCode = createEffect('submit code').use(() =>
{
	const problemId = $problemId.getState();
	const code = $code.getState();
	return submitApi({ problemId, code });
});

const eRunCode = createEffect('run code').use(() =>
{
	const input = $input.getState();
	const code = $code.getState();
	return runCodeApi({ input, code });
});

/**
 * STORES
 * ----------------------------------------------------------------------------
 */
const $code = createStore('');
const $input = createStore('');

// FIXME: renamte to submitResponse
const { $codeResponse, $codeResponseError } =
	createApiStore(
	{
		name: 'codeResponse',
		e: eSubmitCode,
	});

const { $runResponse } = createApiStore(
	{
		name: 'runResponse',
		e: eRunCode
	});

/**
 * COMPUTED
 * -----------------------------------------------------------------------------
 */
const $$wa = $codeResponse.map(testcases =>
	(testcases ?? []).some(({ verdict }) => verdict === 'WA'));

const $$editor = batchCombine(
{
	code: $code,
});

const $$runResponse = $runResponse.map(r =>
({
	time: r?.rExecutionTime,
	output: r?.output,
	memory: r?.memory,
}));

const $$editorPanel = batchCombine(
{
	wa: $$wa,
	response: $codeResponse,
	error: $codeResponseError,
	runResponse: $$runResponse,
	input: $input
});

const $$editorControls = batchCombine(
{
	runPending: eRunCode.pending,
	submitPending: eSubmitCode.pending,
});

/**
 * BINDING
 * -----------------------------------------------------------------------------
 */
$code.on(aChangeCode, (_, val) => val);
$input.on(aChangeInput, (_, val) => val);

/**
 * EXPORTS
 * -----------------------------------------------------------------------------
 */
export { aChangeCode, aChangeInput, eSubmitCode, eRunCode };
export { $$editor, $$editorPanel, $$editorControls };