text: import React, { useState, useEffect, useCallback, useRef } from 'react';
  import ReactGA from 'react-ga';
  import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
  import { useLocation, useHistory, Redirect } from 'react-router-dom';
  import Pagination from 'react-js-pagination';
  import Spotify from 'spotify-web-api-js';
  import { trackPromise, usePromiseTracker } from 'react-promise-tracker';
  
  import { refreshToken } from '../Auth/Auth';
  import { useMediaQuery } from 'react-responsive';
  
  import Redirects from '../Common/Redirects';
  import Search from '../Search/Search';
  import SideToggle from '../Common/SideToggle';
  import TrackCards from '../Track/TrackCards';
  import TrackTable from '../Track/TrackTable';
  import HeaderBar from '../Common/HeaderBar';
  import LoadingSpinner from '../Common/LoadingSpinner';
  import { Helmet } from 'react-helmet';
  import NoContent from '../Common/NoContent';
  
  const spotifyWebApi = new Spotify();
  
  function AlbumTracks() {
  	const query = new URLSearchParams(useLocation().search);
  	const history = useHistory();
  	const limit = 12;
  
  	const { promiseInProgress } = usePromiseTracker();
  
  	const albumId = query.get('id');
  	const [ toggled, setToggled ] = useState('nothing');
  	const toggleButton = useRef(null);
  	const table = useRef(null);
  
  	const [ authToken, setAuthToken ] = useState(localStorage.getItem('authToken'));
  	const [ albumName, setAlbumName ] = useState('');
  	const [ albumTracks, setAlbumTracks ] = useState([]);
  	const [ page, setPage ] = useState(parseInt(query.get('page')));
  	const [ offset, setOffset ] = useState(limit * (page - 1));
  	const [ totalItems, setTotalItems ] = useState(0);
  
  	const colapseTable = useMediaQuery({ maxWidth: 700 });
  	const decreasePagination = useMediaQuery({ maxWidth: 500 });
  
  	const getAlbumTracks = (tracks) => {
  		trackPromise(
  			spotifyWebApi.getTracks(tracks).then(
  				function(data) {
  					// console.log(data);
  					setAlbumTracks(data.tracks);
  					setAlbumName(data.tracks.length > 0 ? data.tracks[0].album.name : '');
  				},
  				function(err) {
  					console.log(err);
  
  					if (err.status === 401) refreshToken((new_token) => setAuthToken(new_token));
  				}
  			)
  		);
  	};
  
  	const getData = useCallback(
  		() => {
  			spotifyWebApi.setAccessToken(authToken);
  
  			trackPromise(
  				spotifyWebApi
  					.getAlbumTracks(albumId, {
  						limit: limit,
  						offset: offset
  					})
  					.then(
  						function(data) {
  							// console.log(data);
  							setTotalItems(data.total);
  							getAlbumTracks(
  								data.items.map((item) => {
  									return item.id;
  								})
  							);
  						},
  						function(err) {
  							console.log(err);
  
  							if (err.status === 401) refreshToken((new_token) => setAuthToken(new_token));
  						}
  					)
  			);
  		},
  		[ albumId, authToken, offset ]
  	);
  
  	const switchPage = (ev) => {
  		history.push(`/album_tracks?id=${albumId}&page=${Number.isInteger(ev) ? ev : 1}`);
  	};
  
  	useEffect(
  		() => {
  			setPage(parseInt(query.get('page')));
  		},
  		[ query ]
  	);
  
  	useEffect(
  		() => {
  			if (authToken) {
  				getData();
  				setOffset(limit * (page - 1));
  			}
  		},
  		[ authToken, page, getData ]
  	);
  
  	useEffect(() => {
  		if (table.current) table.current.scrollTo(0, 0);
  	});
  
  	useEffect(() => {
  		ReactGA.pageview('/album_tracks');
  	});
  
  	if (!authToken) return <Redirect to="/" />;
  
  	return (
  		<React.Fragment>
  			<Helmet>
  				<title>{`${albumName.length > 0 ? albumName : 'Album'} tracks - Ascoldata`}</title>
  			</Helmet>
  			<HeaderBar />
  			<div id="corporum">
  				<section
  					className="content-section table-content"
  					ref={table}
  					onClick={() => {
  						if (toggled.localeCompare('toggled') === 0) toggleButton.current.click();
  					}}
  				>
  					<LoadingSpinner />
  					{!promiseInProgress &&
  					albumTracks.length > 0 && (
  						<React.Fragment>
  							{colapseTable ? (
  								<TrackCards results={albumTracks} />
  							) : (
  								<TrackTable results={albumTracks} maxHeight={albumTracks.length / limit * 100} />
  							)}
  							<Pagination
  								activePage={page}
  								itemsCountPerPage={limit}
  								totalItemsCount={totalItems}
  								pageRangeDisplayed={decreasePagination ? 3 : 8}
  								onChange={switchPage}
  							/>
  						</React.Fragment>
  					)}
  					{!promiseInProgress &&
  					albumTracks.length === 0 && <NoContent mainText="Album doesn't have any tracks..." />}
  				</section>
  				<section className={`sidebar-section slide-in-right sidebar-${toggled}`} />
  				<div className={`side-content slide-in-right sidebar-${toggled}`}>
  					<Tabs defaultIndex={1}>
  						<TabList>
  							<Tab>Search</Tab>
  							<Tab>Go to</Tab>
  						</TabList>
  
  						<TabPanel>
  							<Search />
  						</TabPanel>
  						<TabPanel>
  							<Redirects exclude="" />
  						</TabPanel>
  					</Tabs>
  				</div>
  				<SideToggle
  					ref={toggleButton}
  					toggleFunc={(state) => {
  						setToggled(state);
  					}}
  				/>
  			</div>
  		</React.Fragment>
  	);
  }
  
  export default AlbumTracks;
  