import React, {
useState, useCallback, useMemo
} from 'react';
import { refreshSource } from 'src/apiRequests';
import { List, Checkbox, Card } from 'antd';
import dataSourceLabelConfig from 'src/configs/dataSourceLabelConfig';
import { fromNow } from 'src/utils/dateTimeUtil';
import Icon from 'src/components/icons/Icon';
import classNames from 'classnames';
const renderItem = ({ handleSourceChecked, handleSourceRefresh }) => (source) => {
const { name: sourceName } = source;
const labelClassName = `source__label-name source__label-name-${sourceName.toLowerCase()}`;
return (
<List.Item className="source">
<Checkbox
disabled={source.name === 'radius'}
checked={source.isSelected}
onChange={() => handleSourceChecked(source)}
className="source__checkbox"
/>
<span className={classNames('source__label', labelClassName)}>
{dataSourceLabelConfig[sourceName] || sourceName.toUpperCase() }
</span>
<span className="source__label">{`${source.nodeCount} nodes`}</span>
<span className="source__label source__label-date">
{fromNow(source.updated)}
</span>
<button className="source__button" type="button" onClick={() => handleSourceRefresh(source)}>
<Icon className="source__icon" type="reload" width="20" height="20" />
</button>
</List.Item>
);
};
function UseSource() {
const [sources, setSources] = useState([]);
const handleSourceChecked = useCallback((checkedSource) => {
const newSources = sources.map((source) => {
if (source.name === checkedSource.name) {
return {
...source,
isSelected: !source.isSelected
};
}
return source;
});
setSources(newSources);
}, []);
const handleSourceRefresh = useCallback(async ({ name }) => {
const res = await refreshSource(name);
const newSources = sources.map((source) => {
if (source === name) {
return {
...source,
updated: res.update_at
};
}
return source;
});
setSources(newSources);
}, []);
const filterBySource = (data) => {
const filteredNodes = data.nodes
.filter(node => sources
.some(source => source.name === node.source && source.isSelected));
const filteredLinks = data.links
.filter(link => filteredNodes
.some(node => node.id === link.startID || node.id === link.endID));
const filteredData = { links: filteredLinks, nodes: filteredNodes };
return filteredData;
};
const renderSourceList = useMemo(() => {
const newSources = [...sources];
if (newSources.length) {
newSources.push({
name: 'radius',
isSelected: false,
updated: newSources[0].updated,
nodeCount: 0
});
}
return (
<Card title="Sources">
<List
size="small"
dataSource={newSources}
renderItem={renderItem({ handleSourceChecked, handleSourceRefresh })}
split={false}
/>
</Card>
);
}, [sources]); // TODO: Clean up the mock
return {
sources,
renderSourceList,
setSources,
handleSourceChecked,
handleSourceRefresh,
filterBySource
};
}
export default UseSource;[changeGameFavorite](state, { payload: gameId }) {
const games = state.games.map((gameInfo) => {
const game = { ...gameInfo };
if (game && game.id === gameId) {
game.favorite = !game.favorite;
}
return game;
});
return { ...state, games };
},