Differential D10824 Diff 31795 web/cashtab/src/components/Wallet/TokenList.js

Changeset View

Standalone View

web/cashtab/src/components/Wallet/TokenList.js

	import React from 'react';			import React, { useState } from 'react';
	import PropTypes from 'prop-types';			import PropTypes from 'prop-types';
	import TokenListItem from './TokenListItem';			import TokenListItem from './TokenListItem';
	import { Link } from 'react-router-dom';			import { Link } from 'react-router-dom';
	import { formatBalance } from '@utils/formatting';			import { formatBalance } from '@utils/formatting';
				import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

	const TokenList = ({ tokens }) => {			const TokenList = ({ tokens }) => {
				const [sortedTokenList, setSortedTokenList] = useState([...tokens]);
				// remaining steps are:
				// set the latest sorted list with setLocalStorage to stringified list
				// getLocalStorage and parse it
				// if localDataArray exists, map it, if not use the default token list

				const reorder = (list, startIndex, endIndex) => {
				const result = Array.from(list);
				const [removed] = result.splice(startIndex, 1);
				result.splice(endIndex, 0, removed);
				return result;
				};

				const handleDragEnd = result => {
				setSortedTokenList(
				reorder(
				sortedTokenList,
				result.source.index,
				result.destination.index,
				),
				);
				console.log(sortedTokenList);
				};

	return (			return (
	<div>			<DragDropContext onDragEnd={handleDragEnd}>
	{tokens.map(token => (			<Droppable droppableId="droppable">
	<Link key={token.tokenId} to={`/send-token/${token.tokenId}`}>			{(provided, snapshot) => (
				<div ref={provided.innerRef}>
				{sortedTokenList.map((token, index) => (
				<Draggable
				draggableId={token.tokenId}
				key={token.tokenId}
				index={index}
				>
				{(provided, snapshot) => (
				<div
				ref={provided.innerRef}
				{...provided.draggableProps}
				{...provided.dragHandleProps}
				>
				<Link
				key={token.tokenId}
				to={`/send-token/${token.tokenId}`}
				>
	<TokenListItem			<TokenListItem
	ticker={token.info.tokenTicker}			ticker={token.info.tokenTicker}
	tokenId={token.tokenId}			tokenId={token.tokenId}
	balance={formatBalance(token.balance)}			balance={formatBalance(
				token.balance,
				)}
	/>			/>
	</Link>			</Link>
				</div>
				)}
				</Draggable>
	))}			))}
				{provided.placeholder}
	</div>			</div>
				)}
				</Droppable>
				</DragDropContext>
	);			);
	};			};

	TokenList.propTypes = {			TokenList.propTypes = {
	tokens: PropTypes.array,			tokens: PropTypes.array,
	};			};

	export default TokenList;			export default TokenList;