Merge pull request #159 from YGO-SKC/v1.2.8

V1.2.8: Various QOL Updates

.env.development

@@ -1,5 +1,5 @@
 REACT_APP_API_HOST=http://localhost:9999
-# REACT_APP_HEART_API_HOST=http://localhost:80
-REACT_APP_HEART_API_HOST=https://heart-api.com
+REACT_APP_HEART_API_HOST=http://localhost:80
+# REACT_APP_HEART_API_HOST=https://heart-api.com
 REACT_APP_CLIENT_ID='React App - localhost'
 REACT_APP_VERSION=$npm_package_version

.env.development_remote

@@ -1,4 +1,4 @@
-REACT_APP_API_HOST=https://dev.skc-ygo-api.com
+REACT_APP_API_HOST=https://skc-ygo-api.com
 REACT_APP_HEART_API_HOST=https://heart-api.com
 REACT_APP_CLIENT_ID='React App - Dev'
 REACT_APP_VERSION=$npm_package_version

.github/settings.yml

@@ -14,7 +14,7 @@ repository:
   has_downloads: false
 
   # Updates the default branch for this repository.
-  default_branch: v1.2.6
+  default_branch: v1.2.8
 
   # Either `true` to allow squash-merging pull requests, or `false` to prevent
   # squash-merging.

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"singleQuote": true,
+	"useTabs": true,
+	"jsxSingleQuote": true,
+	"printWidth": 180,
+	"semi": false
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Website to help duelists. ",
   "main": "index.js",
   "author": "",
@@ -33,6 +33,7 @@
     "build:production": "env-cmd -f ./.env.production react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "checkAWS:cloudfrontSKC": "aws cloudfront list-distributions | jq '.DistributionList.Items[] | select(.Aliases.Items | contains([\"thesupremekingscastle.com\"])) |  {id: .Id, aliases: .Aliases}'",
     "uploadAWS:production": "npm run build:production; aws s3 rm s3://yugiohsite/ --recursive; aws s3 sync build s3://yugiohsite/ --cache-control max-age=3600; aws cloudfront create-invalidation --distribution-id ${YGO_CLOUDFRONT_PROD} --paths '/*'",
     "uploadAWS:development": "npm run build:development_remote; aws s3 rm s3://yugiohsitedev/ --recursive; aws s3 sync build s3://yugiohsitedev/ --cache-control max-age=3600; aws cloudfront create-invalidation --distribution-id ${YGO_CLOUDFRONT_DEV} --paths '/*'"
   },
@@ -53,6 +54,7 @@
     "@types/react-helmet": "6.1.4",
     "@types/react-router-dom": "5.3.2",
     "@types/styled-components": "5.1.15",
+    "@types/underscore": "^1.11.3",
     "env-cmd": "10.1.0",
     "immer": "9.0.6",
     "react-scripts": "4.0.3",

public/index.html

@@ -14,7 +14,6 @@
 		<link rel="dns-prefetch" href="https://images.thesupremekingscastle.com">
 		<link rel="dns-prefetch" href="%REACT_APP_API_HOST%">
 
-		<script async src="https://platform.twitter.com/widgets.js"></script>
 		<style>
 			html
 			{

src/Routes.tsx

@@ -17,8 +17,7 @@ const About = lazy( () => import( './components/about/About') )
 const HttpErr = lazy( () => import('./components/util/exception/HttpErr') )
 
 
-const NAME_maps_ROUTE : { [key: string]: string } =
-{
+const NAME_maps_ROUTE : { [key: string]: string } = {
 	'Home': '/',
 	'BanList': '/ban_list',
 	'About': '/about',
@@ -27,9 +26,12 @@ const NAME_maps_ROUTE : { [key: string]: string } =
 	'ProductBrowse': '/browse/product',
 	'ProductInformation': '/product/:productId',
 
-	'400': '/bad_request',
-	'500': '/server_err',
-	'503': '/service_unavailable'
+	'400': '/bad-request',
+	'408': '/request-timeout',
+	'422': '/unprocessable-entity',
+	'404-Server': '/not-found',
+	'500': '/server-err',
+	'503': '/service-unavailable'
 }
 
 
@@ -67,16 +69,25 @@ export default function SKCSiteRoutes()
 					{ /* Routes specifically for errs */ }
 					<Route
 						path={NAME_maps_ROUTE[400]}
-						element={ <HttpErr httpErr={400}/> } />
+						element={ <HttpErr httpErr={'400'}/> } />
+					<Route
+						path={NAME_maps_ROUTE[408]}
+						element={ <HttpErr httpErr={'408'}/> } />
+					<Route
+						path={NAME_maps_ROUTE[422]}
+						element={ <HttpErr httpErr={'422'}/> } />
 					<Route
 						path={NAME_maps_ROUTE[500]}
-						element={ <HttpErr httpErr={500}/> } />
+						element={ <HttpErr httpErr={'500'}/> } />
 					<Route
 						path={NAME_maps_ROUTE[503]}
-						element={ <HttpErr httpErr={503}/> } />
+						element={ <HttpErr httpErr={'503'}/> } />
+					<Route
+						path={NAME_maps_ROUTE['404-Server']}
+						element={ <HttpErr httpErr={'404-Server'}/> } />
 					<Route
 						path={'/*'}
-						element={ <HttpErr httpErr={404}/> } />
+						element={ <HttpErr httpErr={'404-Client'}/> } />
 				</Routes>
 			</Suspense>
 		</Router>

src/components/Browse.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, lazy } from 'react'
 import startCase from 'lodash.startcase'
 import Autocomplete from '@material-ui/lab/Autocomplete'
-import { Chip, InputBase, IconButton } from '@material-ui/core'
+import { Chip, InputBase, IconButton, Typography } from '@material-ui/core'
 import { Helmet } from 'react-helmet'
 
 import SearchIcon from '@material-ui/icons/Search'
+import Section from './util/Section'
 
 import Breadcrumb from './util/Breadcrumb'
 import { MainContentContainer } from './MainContent'
@@ -18,9 +19,9 @@ import NAME_maps_ENDPOINT from '../helper/DownstreamServices'
 import {LightTranslucentDivider, DarkTranslucentDivider} from './util/Divider'
 import {StickyBox} from './util/StyledContainers'
 
-import {RenderGroup, SearchSuggestionTypography} from './util/Search'
+import RenderGroup, {SearchSuggestionTypography} from './util/search/Search'
 
-import {LeftBoxSectionTypography, LeftBoxSectionHeaderTypography, RightBoxPaper, LeftBoxPaper, RightBoxHeaderTypography, RightBoxSubHeaderTypography, RightBoxHeaderContainer} from './util/grid/OneThirdTwoThirdsGrid'
+import {RightBoxPaper, LeftBoxPaper, RightBoxHeaderTypography, RightBoxSubHeaderTypography, RightBoxHeaderContainer} from './util/grid/OneThirdTwoThirdsGrid'
 
 const CardDisplayGrid = lazy( () => import('./util/grid/CardDisplayGrid'))
 
@@ -177,9 +178,11 @@ export default function Browse()
 					<StickyBox>
 						<LeftBoxPaper style={{ backgroundImage: 'linear-gradient(315deg, #7f5a83 0%, #0d324d 74%)' }} >
 
-							<LeftBoxSectionHeaderTypography variant='h6' >
+							<Typography
+								style={{color: 'white'}}
+								variant='h4' >
 								Current Criteria
-							</LeftBoxSectionHeaderTypography>
+							</Typography>
 
 							<div style={{minHeight: '1.5rem', marginBottom: '1rem'}} >
 								{selectedCriteriaChips}
@@ -233,41 +236,47 @@ export default function Browse()
 
 							<LightTranslucentDivider />
 
-							<LeftBoxSectionHeaderTypography variant='h6' >
+							<Typography
+								style={{color: 'white'}}
+								variant='h5' >
 								Results
-							</LeftBoxSectionHeaderTypography>
-							<LeftBoxSectionTypography variant='body1' >
+							</Typography>
+							<Typography
+								style={{color: 'white'}}
+								variant='body1' >
 								Total: {numResults}
-							</LeftBoxSectionTypography>
-							<LeftBoxSectionTypography variant='body1' >
+							</Typography>
+							<Typography
+								style={{color: 'white'}}
+								variant='body1' >
 								Displaying: {numResultsDisplayed}
-							</LeftBoxSectionTypography>
+							</Typography>
 
 						</LeftBoxPaper>
 					</StickyBox>
 				}
 				twoThirdComponent={
-					<RightBoxPaper>
-						<RightBoxHeaderContainer >
-							<RightBoxHeaderTypography variant='h4' >
-								Browse Results
-							</RightBoxHeaderTypography>
-							<RightBoxSubHeaderTypography variant='h5' >
-								Sorted Alphabetically
-							</RightBoxSubHeaderTypography>
-							<DarkTranslucentDivider />
-						</RightBoxHeaderContainer>
-
-						<CardDisplayGrid
-							cardJsonResults={jsonResults}
-							numResultsDisplayed={numResultsDisplayed}
-							numItemsToLoadWhenNeeded={numItemsToLoadWhenNeeded}
-							loadMoreCallback={loadMore}
-							isLoadMoreOptionVisible={isLoadMoreVisible}
-							numResults={numResults}
-							isDataLoaded={isCardBrowseDataLoaded}
-							/>
-					</RightBoxPaper>
+					<Section
+						sectionName='Browse Results'
+						sectionContent={
+							<div
+								className='section-content' >
+								<RightBoxSubHeaderTypography variant='h5' >
+									Results Are Sorted Alphabetically
+								</RightBoxSubHeaderTypography>
+
+								<CardDisplayGrid
+									cardJsonResults={jsonResults}
+									numResultsDisplayed={numResultsDisplayed}
+									numItemsToLoadWhenNeeded={numItemsToLoadWhenNeeded}
+									loadMoreCallback={loadMore}
+									isLoadMoreOptionVisible={isLoadMoreVisible}
+									numResults={numResults}
+									isDataLoaded={isCardBrowseDataLoaded}
+								/>
+							</div>
+						}>
+					</Section>
 				}
 			/>
 		</MainContentContainer>

src/components/banlist/BanListDates.js

@@ -5,7 +5,6 @@ import { Button, Grid, Accordion, AccordionSummary, AccordionDetails, Typography
 
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import DateRangeRoundedIcon from '@material-ui/icons/DateRangeRounded'
-import {LeftBoxSectionHeaderTypography} from '../util/grid/OneThirdTwoThirdsGrid'
 
 import { getDateString } from '../../helper/Dates'
 
@@ -71,10 +70,11 @@ export const BanListDates = memo( ( { banListStartDates, setSelectedBanList } )
 
 	return(
 		<div >
-			<LeftBoxSectionHeaderTypography
-				variant='h6' >
+			<Typography
+				style={{color: 'white'}}
+				variant='h4' >
 				Date Range
-			</LeftBoxSectionHeaderTypography>
+			</Typography>
 			<DatesAccordion elevation={0} >
 				<BanDatesExpansionSummary
 					expandIcon={<ExpandMoreIcon />} >

src/components/banlist/BanListStats.js

@@ -1,11 +1,10 @@
 import React, { memo, useState, useEffect, useCallback } from 'react'
 import Styled from 'styled-components'
 
-import { List, ListItemText, Collapse, ListItem } from '@material-ui/core'
+import { List, ListItemText, Collapse, ListItem, Typography } from '@material-ui/core'
 
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
-import {LeftBoxSectionHeaderTypography} from '../util/grid/OneThirdTwoThirdsGrid'
 
 
 const ListStatItem = Styled(ListItem)`
@@ -167,10 +166,11 @@ const BanListStats = memo( ( { totalCardsInSelectedList, selectedBanList
 
 	return(
 		<div >
-			<LeftBoxSectionHeaderTypography
-				variant='h6' >
+			<Typography
+				style={{color: 'white'}}
+				variant='h4' >
 				Summary
-			</LeftBoxSectionHeaderTypography>
+			</Typography>
 
 			<StatList style={{ width: '100%', maxWidth: '400px' }}
 				component="nav"

src/components/card/YGOCard.js → src/components/card/YGOCard.tsx

@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import { FC, memo } from 'react'
 
 import { Typography, Paper } from '@material-ui/core'
 import { Skeleton } from '@material-ui/lab'
@@ -21,8 +21,24 @@ const CardContentComponent = Styled(Paper)`
 	}
 `
 
+type YGOCardType = {
+	cardName: string,
+	cardColor: string,
+	cardEffect: string,
+	monsterType: string,
+	cardAttribute?: string,
+	monsterAtk?: string,
+	monsterDef?: string,
+	monsterAssociation?: string,
+	cardID: string,
+	fullDetails: boolean,
+	effectMaxLineHeight?: number,
+	isLoading?: boolean,
+	className?: string
+}
 
-const YGOCard = memo(( {cardName, cardColor, cardEffect, monsterType, cardAttribute, monsterAtk, monsterDef, monsterAssociation, cardID, fullDetails, effectMaxLineHeight, isLoading, className }) =>
+
+const YGOCard:FC<YGOCardType> = memo(( {cardName, cardColor, cardEffect, monsterType, cardAttribute, monsterAtk, monsterDef, monsterAssociation, cardID, fullDetails, effectMaxLineHeight, isLoading, className }) =>
 {
 	if (isLoading)
 	{