Champs page#68

src/App/App.tsx

@@ -1,8 +1,10 @@
 import { Container } from '@material-ui/core'
 import { FC } from 'react'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { ChampInfo } from '../ChampInfo/ChampInfo'
 import { ComparePage } from '../ComparePage/ComparePage'
 import { ConfigPage } from '../ConfigPage/ConfigPage'
+import { DisplayChampsPage } from '../DisplayChampsPage/DisplayChampsPage'
 import { DisplayUsersPage } from '../DisplayUsersPage/DisplayUsersPage'
 import { Footer } from '../Footer/Footer'
 import { GlobalContextProvider } from '../GlobalContext'
@@ -20,7 +22,7 @@ const App: FC = () => {
 		<GlobalContextProvider>
 			<BrowserRouter>
 				<Nav />
-				<Container maxWidth="sm" className="app">
+				<Container maxWidth={false} className="app">
 					{/* Content outside of <Switch> renders on every page */}
 					<Switch>
 						<Route path="/" exact>
@@ -47,6 +49,12 @@ const App: FC = () => {
 						<Route path="/compare" exact>
 							<ComparePage />
 						</Route>
+						<Route path="/champs" exact>
+							<DisplayChampsPage />
+						</Route>
+						<Route path="/champInfo/:champId" exact>
+							<ChampInfo />
+						</Route>
 						<Route path="/">
 							<PageNotFoundPage />
 						</Route>

src/ChampDisplay/ChampDisplay.tsx

@@ -0,0 +1,54 @@
+import { Container, Link, makeStyles, Theme } from '@material-ui/core'
+import React, { FC } from 'react'
+import { theme } from '../theme'
+import { IChampDisplay } from '../types/IChampDisplay'
+import { Link as RouterLink } from 'react-router-dom'
+
+interface ChampDisplayProps {
+	champInfo: IChampDisplay
+}
+
+const useStyles = makeStyles({
+	champDisplayContainer: (theme: Theme) => ({
+		display: 'flex',
+		flexDirection: 'column',
+		textAlign: 'center',
+		justifyContent: 'center',
+		marginTop: theme.spacing(3),
+		color: 'white',
+	}),
+})
+
+export const ChampDisplay: FC<ChampDisplayProps> = ({ champInfo: champ }) => {
+	const classes = useStyles(theme)
+	const imgUrl = `http://ddragon.leagueoflegends.com/cdn/${champ.version}/img/sprite/${champ.image.sprite}`
+
+	const newTitle = champ.title[0]
+		.toUpperCase()
+		.concat(champ.title.substring(1))
+	return (
+		<Container className={classes.champDisplayContainer}>
+			<Link
+				component={RouterLink}
+				to={`/champInfo/${champ.id}`}
+				rel="noopener noreferrer"
+				role="link"
+			>
+				<Container
+					style={{
+						width: 48,
+						height: 48,
+						backgroundPositionX: -champ.image.x,
+						backgroundPositionY: -champ.image.y,
+						backgroundImage: `url(${imgUrl})`,
+						transform: 'scale(1.5) translate(0px, -10px)',
+					}}
+				>
+					<div />
+				</Container>
+			</Link>
+			<Container>{champ.name}</Container>
+			<Container>{newTitle}</Container>
+		</Container>
+	)
+}

src/ChampInfo/ChampInfo.tsx

@@ -0,0 +1,47 @@
+import { Container, makeStyles, Theme } from '@material-ui/core'
+import React, { FC, useCallback, useContext, useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { GlobalContext } from '../GlobalContext'
+import { theme } from '../theme'
+import { IChampInfo } from '../types/IChampInfo'
+
+interface IChampRouteProps {
+	champId: string
+}
+
+const useStyles = makeStyles({
+	champInfoContainer: (theme: Theme) => ({
+		display: 'flex',
+		flexDirection: 'column',
+		textAlign: 'center',
+		justifyContent: 'center',
+		color: 'white',
+	}),
+})
+
+export const ChampInfo: FC<any> = () => {
+	const classes = useStyles(theme)
+	const props = useParams<IChampRouteProps>()
+	const { api, setTitle } = useContext(GlobalContext) // for page title and API access
+	const [champ, setChamp] = useState<IChampInfo>()
+
+	const fireGetChampInfo = useCallback(async () => {
+		setChamp(await api.getChampInfo(props.champId))
+	}, [api])
+
+	useEffect(() => {
+		setTitle(props.champId)
+		fireGetChampInfo()
+		console.log(champ)
+	}, [setTitle, fireGetChampInfo])
+
+	if (!champ) {
+		return <></>
+	}
+
+	return (
+		<Container className={classes.champInfoContainer}>
+			{champ.lore}
+		</Container>
+	)
+}

src/ComparePage/ComparePage.tsx

@@ -123,9 +123,9 @@ const ComparePage: FC = () => {
 
 	return (
 		// Search Section: Layout; 2 Selects for user lists, 1 Select for # of games
-		<Container>
+		<Container maxWidth="md">
 			{/* Search Section */}
-			<Container className={classes.searchContainer}>
+			<Container maxWidth="sm" className={classes.searchContainer}>
 				<Typography>Games:</Typography>
 				<Select
 					onChange={gamesHandleChange}

src/DisplayChampsPage/DisplayChampsPage.tsx

@@ -0,0 +1,59 @@
+import { Container, Grid, makeStyles, Theme } from '@material-ui/core'
+import React, { FC, useCallback, useContext, useEffect, useState } from 'react'
+import { ChampDisplay } from '../ChampDisplay/ChampDisplay'
+import { GlobalContext } from '../GlobalContext'
+import { theme } from '../theme'
+
+const useStyles = makeStyles({
+	errorContainer: (theme: Theme) => ({
+		display: 'flex',
+		justifyContent: 'center',
+		marginTop: theme.spacing(3),
+	}),
+	champsContainer: (theme: Theme) => ({
+		marginTop: theme.spacing(3),
+	}),
+})
+
+// get version from https://ddragon.leagueoflegends.com/api/versions.json
+// store first value as latest version
+// Make Individual champ displays
+// Make API method to get all champs based on version
+// all champs json http://ddragon.leagueoflegends.com/cdn/12.1.1/data/en_US/champion.json
+// add latest version to sprite sheet url ex http://ddragon.leagueoflegends.com/cdn/12.1.1/img/sprite/champion0.png
+// Get champ data from http://ddragon.leagueoflegends.com/cdn/12.1.1/data/en_US/champion/Aatrox.json (sub in champ name)
+// Get champ sprite sheet image position from champ data
+
+export const DisplayChampsPage: FC = () => {
+	const classes = useStyles(theme)
+	const { api, setTitle } = useContext(GlobalContext) // for page title and API access
+	const [champs, setChamps] = useState<any[]>([])
+
+	const fireGetChamps = useCallback(async () => {
+		setChamps(await api.getAllChamps())
+	}, [api])
+
+	useEffect(() => {
+		setTitle('Champions')
+		fireGetChamps()
+	}, [setTitle, fireGetChamps])
+	return (
+		<Container maxWidth={false} className={classes.champsContainer}>
+			<Grid container spacing={5}>
+				{champs.map((champ) => (
+					<Grid
+						key={champ.id}
+						item
+						xs={12}
+						sm={6}
+						md={4}
+						lg={3}
+						xl={2}
+					>
+						<ChampDisplay champInfo={champ} />
+					</Grid>
+				))}
+			</Grid>
+		</Container>
+	)
+}

src/Nav/Nav.test.tsx

@@ -48,6 +48,7 @@ describe('Nav component', () => {
 			'/search',
 			'/users',
 			'/compare',
+			'/champs',
 		]
 		const expectedLinkTexts = [
 			'Home',
@@ -56,6 +57,7 @@ describe('Nav component', () => {
 			'Search Users',
 			'All Users',
 			'Compare Users',
+			'Champions',
 		]
 
 		beforeEach(() => {

src/Nav/Nav.tsx

@@ -153,13 +153,28 @@ const Nav: FC = () => {
 						}}
 					>
 						<Link
-							href="/compare"
+							component={RouterLink}
+							to="/compare"
 							rel="noopener noreferrer"
 							role="link"
 						>
 							Compare Users
 						</Link>
 					</MenuItem>
+					<MenuItem
+						onClick={() => {
+							handleClose()
+						}}
+					>
+						<Link
+							component={RouterLink}
+							to="/champs"
+							rel="noopener noreferrer"
+							role="link"
+						>
+							Champions
+						</Link>
+					</MenuItem>
 				</Menu>
 				<Typography
 					aria-roledescription="title of page"

src/services/ApiService.ts

@@ -4,7 +4,7 @@ import {
 	HTTP_POST,
 	NO_CACHE,
 } from '../constants'
-import { IUser, IUserStats } from '../types'
+import { IChampInfo, IUser, IUserStats } from '../types'
 
 /**
  * This service encapsulates API communication in a centralized location
@@ -212,6 +212,74 @@ class ApiService {
 			})
 	}
 
+	/**
+	 * Use the fetch API over HTTP to hit the get user stats endpoint
+	 *
+	 * @returns Promise that resolves latest version string; otherwise, Promise that resolves to empty string
+	 */
+	getLatestDragonVersion(): Promise<string> {
+		let versionUrl = 'https://ddragon.leagueoflegends.com/api/versions.json'
+		return fetch(versionUrl, {
+			cache: NO_CACHE,
+			method: HTTP_GET,
+		})
+			.then((resp) => resp.json())
+			.then((allVersions) => allVersions[0])
+			.catch((err) => {
+				this.handleError(err)
+
+				return Promise.resolve('')
+			})
+	}
+
+	/**
+	 * Use the fetch API over HTTP to hit the get user stats endpoint
+	 *
+	 * @returns Promise that resolves all champs objects; otherwise, Promise that resolves to empty array
+	 */
+	async getAllChamps(): Promise<any[]> {
+		let version = await this.getLatestDragonVersion()
+		let versionUrl = `http://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion.json`
+		return fetch(versionUrl, {
+			cache: NO_CACHE,
+			method: HTTP_GET,
+		})
+			.then((resp) => resp.json())
+			.then((allChamps) => {
+				return Object.keys(allChamps.data).map((champName) => {
+					return allChamps.data[champName]
+				})
+			})
+			.catch((err) => {
+				this.handleError(err)
+
+				return Promise.resolve([])
+			})
+	}
+
+	/**
+	 * Use the fetch API over HTTP to hit the get user stats endpoint
+	 *
+	 * @returns Promise that resolves champ info; otherwise, Promise that resolves to empty object
+	 */
+	async getChampInfo(champId: string): Promise<IChampInfo> {
+		let version = await this.getLatestDragonVersion()
+		let versionUrl = `http://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion/${champId}.json`
+		return fetch(versionUrl, {
+			cache: NO_CACHE,
+			method: HTTP_GET,
+		})
+			.then((resp) => resp.json())
+			.then((champInfo) => {
+				return champInfo.data[champId]
+			})
+			.catch((err) => {
+				this.handleError(err)
+
+				return Promise.resolve({})
+			})
+	}
+
 	private handleError(err: Error) {
 		console.error(err)
 		alert(`There was a problem -\n\n${err.message}`)

src/types/IChampDisplay.ts

@@ -0,0 +1,14 @@
+import { IChampImage } from './IChampImage'
+
+export interface IChampDisplay {
+	version: string
+	id: string
+	key: string
+	name: string
+	title: string
+	blurb: string
+	info: []
+	image: IChampImage
+	tags: []
+	partype: string
+}

src/types/IChampImage.ts

@@ -0,0 +1,9 @@
+export interface IChampImage {
+	full: string
+	sprite: string
+	group: string
+	x: number
+	y: number
+	w: number
+	h: number
+}