With Arranger

arranger.js

import React from 'react';
import { findDOMNode } from 'react-dom';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Radio from '@material-ui/core/Radio';
import clsx from 'clsx';
import { pipe, makeHandlers, makeEffect, makeState, makeRef } from 'arranger';

import { EditableText } from 'shared';
import { CONFIG_ACTIONS } from 'models/configuration';
import { makeStore, makeActions } from 'utils';

const useEnhancer = pipe(
    makeStore(state => ({
        configs: state.configuration.configs,
        lastAction: state.configuration.lastAction,
    })),
    makeActions(actions => ({
        updateConfiguration: actions.configuration.updateConfiguration,
    })),
    makeState('shouldOutline', 'setShouldOutline', false),
    makeRef('lastItem'),
    makeHandlers({
        handleSelect: props => id => {
            const items = props.configs.map(config =>
                config.id === id ? { ...config, isSelected: true } : { ...config, isSelected: false },
            );
            props.updateConfiguration({ type: CONFIG_ACTIONS.EDIT, items });
        },
        handleEdit: props => ({ name, id }) => {
            const items = props.configs.map(config => (config.id === id ? { ...config, name } : config));
            props.updateConfiguration({ type: CONFIG_ACTIONS.EDIT, items });
        },
    }),
    makeEffect(
        props => {
            if (props.lastAction === CONFIG_ACTIONS.ADD) {
                const node = findDOMNode(props.lastItem.current);
                node.scrollIntoView(true);
                props.setShouldOutline(true);
                setTimeout(() => {
                    props.setShouldOutline(false);
                }, 3000);
            }
        },
        ['configs', 'lastAction'],
    ),
);

function ConfigLists(props) {
    const { configs, handleSelect, handleEdit, lastItem, shouldOutline } = useEnhancer(props);
    return (
        <List>
            {configs.map((config, index, arr) => {
                const selected = config.isSelected;
                const isLastItem = index === arr.length - 1;
                return (
                    <ListItem
                        key={config.id}
                        onClick={() => handleSelect(config.id)}
                        className={clsx('listItem', {
                            active: selected,
                            outline: isLastItem && shouldOutline,
                        })}
                        {...(isLastItem ? { ref: lastItem } : {})}
                    >
                        <Radio checked={selected} />
                        <ListItemText
                            primary={
                                <EditableText
                                    value={config.name}
                                    onCommit={name => handleEdit({ name, id: config.id })}
                                />
                            }
                        />
                    </ListItem>
                );
            })}
        </List>
    );
}

export default ConfigLists;