ItemCarousel.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState}  from 'react';
import Grid from '@material-ui/core/Grid';
import ItemCard from './ItemCard.js';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import IconButton from '@material-ui/core/IconButton';

//url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
export default function ItemCarousel (props) {
				const [left, setLeft] = useState(0);
				const [right, setRight] = useState(5);

				const goLeft = () => {
					setRight(right === 0 ? props.items.length-1 : right-1);
					setLeft(left === 0 ? props.items.length-1 : left-1);
				}
				
				const goRight = () => {
					setRight(right === props.items.length-1 ? 0 : right+1);
					setLeft(left === props.items.length-1 ? 0 : left+1);
				}

        return (
					<Grid
						item container
						direction="row"
						justify="center"
						alignItems="center"
						xs={12}
						spacing={3}
					>
						<IconButton onClick={goLeft}>
							<ArrowBackIcon/>
						</IconButton>
						{(left > right ?
								props.items.slice(left, props.items.length).concat(props.items.slice(0, right))
								: props.items.slice(left, right)
							).map((i) => {
							return <ItemCard
								src={i.src}
								action={i.action}
								name={i.name}
								description={i.description}/>
						})}
						<IconButton onClick={goRight}>
							<ArrowForwardIcon/>
						</IconButton>
					</Grid>
        )
}