Merge branch '1.7.0' into release

.env-cmdrc.json

@@ -1,19 +1,19 @@
 {
 	"dev": {
 		"REACT_APP_API_HOST": "http://localhost:9999",
-		"REACT_APP_SKC_SUGGESTION_HOST": "http://ec2-3-20-117-123.us-east-2.compute.amazonaws.com:9000",
+		"REACT_APP_SKC_SUGGESTION_HOST": "http://localhost:90",
 		"REACT_APP_HEART_API_HOST": "http://localhost:80",
 		"REACT_APP_CLIENT_ID": "React App - localhost"
 	},
 	"remote-dev": {
 		"REACT_APP_API_HOST": "https://skc-ygo-api.com",
-		"REACT_APP_SKC_SUGGESTION_HOST": "http://ec2-3-20-117-123.us-east-2.compute.amazonaws.com:9000",
+		"REACT_APP_SKC_SUGGESTION_HOST": "https://suggestions.skc-ygo-api.com",
 		"REACT_APP_HEART_API_HOST": "https://heart-api.com",
 		"REACT_APP_CLIENT_ID": "React App - Dev"
 	},
 	"prod": {
 		"REACT_APP_API_HOST": "https://skc-ygo-api.com",
-		"REACT_APP_SKC_SUGGESTION_HOST": "http://ec2-3-20-117-123.us-east-2.compute.amazonaws.com:9000",
+		"REACT_APP_SKC_SUGGESTION_HOST": "https://suggestions.skc-ygo-api.com",
 		"REACT_APP_HEART_API_HOST": "https://heart-api.com",
 		"REACT_APP_CLIENT_ID": "React App - Prod"
 	}

package.json

@@ -39,7 +39,7 @@
 		"build": "webpack --mode production --env dev",
 		"build:development_remote": "webpack --mode production --env remote-dev",
 		"build:production": "webpack --mode production --env prod",
-		"test": "react-scripts test",
+		"test": "react-scripts test --coverage --watchAll",
 		"ci:test": "react-scripts test --ci --coverage --watchAll=false",
 		"mutation": "stryker run config/stryker.conf.json",
 		"checkAWS:cloudfrontSKC": "aws cloudfront list-distributions | jq '.DistributionList.Items[] | select(.Aliases.Items | contains([\"thesupremekingscastle.com\"])) |  {id: .Id, aliases: .Aliases}'",

public/index.html

@@ -220,15 +220,40 @@
 			}
 
 			.group {
-				padding: 1.2rem !important;
-				border-radius: 1rem;
+				padding: 1.25rem !important;
+				border-radius: 2rem;
 				background: #f5f5f5;
 			}
 
+			.group-dark {
+				padding: 1.25rem !important;
+				border-radius: 2rem;
+				background: rgba(0, 0, 0, 0.7);
+			}
+
+			.group-with-outline {
+				padding: 1.25rem !important;
+				border-radius: 2rem;
+				background: rgba(0, 0, 0, 0);
+				border: 3px solid rgba(217, 217, 214, 0.5);
+			}
+
+			.group-with-outline-brown {
+				padding: 1.25rem !important;
+				border-radius: 2rem;
+				background: rgba(0, 0, 0, 0);
+				border: 3px solid #e9d3c2;
+			}
+
 			.rounded-skeleton {
 				border-radius: 1rem;
 			}
 
+			.rounded-skeleton-light {
+				border-radius: 1rem;
+				background-color: rgba(255, 255, 255, 0.3) !important;
+			}
+
 			.light-translucent-divider {
 				margin: auto;
 				margin-top: 1.25rem;

src/components/banlist/content/diff/CardsWithDifferentStatus.tsx

@@ -15,8 +15,6 @@ const CardsWithDifferentStatus: FC<_CardsWithDifferentStatus> = memo(
 	({ newStatusName, cards, numCards, isLoadingData }) => {
 		const [cardsWithNewStatus, setCardsWithNewStatus] = useState<JSX.Element[]>([])
 
-		const parentClassName = `cards-with-different-status-parent-${newStatusName.toLowerCase().replace(' ', '-')}`
-
 		useEffect(() => {
 			setCardsWithNewStatus(
 				cards.map((newStatus: SKCCardsPreviousBanListStatus) => {
@@ -54,7 +52,7 @@ const CardsWithDifferentStatus: FC<_CardsWithDifferentStatus> = memo(
 		}, [cards])
 
 		return (
-			<div className={`${parentClassName} cards-with-different-status-parent`}>
+			<div className='cards-with-different-status-parent'>
 				<Typography variant='h4'>
 					Newly {newStatusName} ({numCards})
 				</Typography>

src/components/card/YGOCardWithQuantity.tsx

@@ -7,14 +7,14 @@ import '../../css/card/ygo-card-with-quantity.css'
 
 const YGOCardWithQuantity: FC<{
 	card: SKCCard
-	quantity: number
-}> = ({ card, quantity }) => {
+	occurrences: number
+}> = ({ card, occurrences }) => {
 	return (
 		<div className='light-shadow ygo-card-with-quantity-parent' onClick={() => window.location.assign(`/card/${card.cardID}`)}>
 			<div className='header'>
 				<CardImageRounded cardImg={`https://images.thesupremekingscastle.com/cards/tn/${card.cardID}.jpg`} />
 				<div className='quantity-text-container'>
-					<Chip className='quantity-chip' key={card.cardID} label={`X ${quantity}`} />
+					<Chip className='quantity-chip' key={card.cardID} label={`X ${occurrences}`} />
 				</div>
 			</div>
 

src/components/card/card-information/CardBanListInformation.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState, FunctionComponent } from 'react'
+import { Typography } from '@mui/material'
+
 import '../../../css/card-information-styles.css'
 
 import { Dates } from '../../../helper/Dates'
 import { Hint } from '../../util/Hints'
 
 import createTable from '../../util/TableHelpers'
-import Section from '../../util/Section'
 
 type args = {
 	isLoading: boolean
@@ -32,23 +33,16 @@ const CardBanListInformation: FunctionComponent<args> = ({ isLoading, hasInfo, b
 	}, [banListInfo])
 
 	return (
-		<Section
-			shadow=''
-			sectionHeaderBackground='ban-list'
-			sectionName='Ban Lists'
-			margin='no'
-			sectionContent={
-				<div className={'section-content card-info-container'}>
-					{!isLoading && hasInfo ? (
-						banListTable
-					) : (
-						<Hint backgroundColor='rgba(0, 0, 0, 0.7)' textColor='white'>
-							{'Not Found In Any Ban List'}
-						</Hint>
-					)}
-				</div>
-			}
-		/>
+		<div className='group'>
+			<Typography variant='h4'>Ban Lists</Typography>
+			{!isLoading && hasInfo ? (
+				banListTable
+			) : (
+				<Hint backgroundColor='rgba(0, 0, 0, 0.7)' textColor='white'>
+					{'Not Found In Any Ban List'}
+				</Hint>
+			)}
+		</div>
 	)
 }
 

src/components/card/card-information/CardInformationRelatedContent.tsx

@@ -1,5 +1,4 @@
 import { FC, lazy, memo } from 'react'
-import { Typography } from '@mui/material'
 import Grid2 from '@mui/material/Unstable_Grid2'
 
 import Section from '../../util/Section'
@@ -22,17 +21,13 @@ const CardInformationRelatedContent: FC<CardInformationRelatedContentType> = mem
 	({ card, cardColor, isLoading, productInfo, banListInfo, cardID }) => {
 		return (
 			<div>
-				<CardSuggestions cardID={card.cardID} cardColor={card.cardColor} cardName={card.cardName} />
+				<CardSuggestions cardID={card.cardID} cardColor={card.cardColor} />
 
 				<Section
 					sectionHeaderBackground={cardColor !== undefined ? (cardColor?.replace(/Pendulum-/gi, '') as cardColor) : ''}
 					sectionName='Explore'
 					sectionContent={
 						<div className='section-content'>
-							<Typography variant='h5'>
-								Related Content For <i>{card.cardName}</i>
-							</Typography>
-
 							<Grid2 container spacing={3}>
 								<Grid2 xs={12} sm={12} md={12} lg={6} xl={6}>
 									<CardProductInformation isLoading={isLoading} hasInfo={productInfo.length === 0 ? false : true} cardID={cardID} productInfo={productInfo} />

src/components/card/card-information/CardProductInformation.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState, FunctionComponent } from 'react'
+import { useEffect, useState, FC } from 'react'
+import { Typography } from '@mui/material'
+
 import '../../../css/card-information-styles.css'
 
 import { Dates } from '../../../helper/Dates'
 import { Hint } from '../../util/Hints'
 import createTable from '../../util/TableHelpers'
-import Section from '../../util/Section'
 
 type args = {
 	isLoading: boolean
@@ -13,7 +14,7 @@ type args = {
 	productInfo: ProductInfo[]
 }
 
-const CardProductInformation: FunctionComponent<args> = ({ isLoading, hasInfo, productInfo, cardID }) => {
+const CardProductInformation: FC<args> = ({ isLoading, hasInfo, productInfo, cardID }) => {
 	const [productTable, setProductTable] = useState<JSX.Element | undefined>(undefined)
 
 	useEffect(() => {
@@ -40,23 +41,16 @@ const CardProductInformation: FunctionComponent<args> = ({ isLoading, hasInfo, p
 	}, [productInfo, cardID])
 
 	return (
-		<Section
-			shadow=''
-			sectionHeaderBackground='product'
-			sectionName='Products'
-			margin='tight'
-			sectionContent={
-				<div className={'section-content card-info-container'}>
-					{!isLoading && hasInfo ? (
-						productTable
-					) : (
-						<Hint backgroundColor='rgba(0, 0, 0, 0.7)' textColor='white'>
-							{'Not Found In Any Product'}
-						</Hint>
-					)}
-				</div>
-			}
-		/>
+		<div className='group'>
+			<Typography variant='h4'>YGO Products</Typography>
+			{!isLoading && hasInfo ? (
+				productTable
+			) : (
+				<Hint backgroundColor='rgba(0, 0, 0, 0.7)' textColor='white'>
+					{'Not Found In Any Product'}
+				</Hint>
+			)}
+		</div>
 	)
 }
 

src/components/card/card-information/CardSuggestions.tsx

@@ -7,37 +7,52 @@ import YGOCardWithQuantity from '../YGOCardWithQuantity'
 import FetchHandler from '../../../helper/FetchHandler'
 import DownstreamServices from '../../../helper/DownstreamServices'
 import { Hint } from '../../util/Hints'
+import GenericNonBreakingErr from '../../util/exception/GenericNonBreakingErr'
 
 type _CardSuggestion = {
 	cardID: string
-	cardName: string
 	cardColor: cardColor
 }
 
 const CardSuggestions: FC<_CardSuggestion> = memo(
-	({ cardID, cardColor, cardName }) => {
-		const [suggestions, setSuggestions] = useState<JSX.Element[]>([])
+	({ cardID, cardColor }) => {
+		const [materialSuggestions, setMaterialSuggestions] = useState<JSX.Element[]>([])
+		const [referenceSuggestions, setReferenceSuggestions] = useState<JSX.Element[]>([])
 		const [isLoadingSuggestions, setIsLoadingSuggestions] = useState<boolean>(true)
+		const [hasError, setHasError] = useState<boolean>(false)
 
 		useEffect(() => {
 			FetchHandler.handleFetch(
 				`${DownstreamServices.SKC_SUGGESTION_HOST_NAME}/api/v1/suggestions/card/${cardID}`,
-				(json: MaterialSuggestionOutput) => {
-					if (json.namedMaterials === null) {
-						setIsLoadingSuggestions(false)
-					} else {
-						const suggestionOutput = json.namedMaterials.map((cardData: SKCCard) => {
-							return <YGOCardWithQuantity key={cardData.cardID} card={cardData} quantity={1} />
+				(json: CardSuggestionOutput) => {
+					let materials: JSX.Element[] = []
+					let references: JSX.Element[] = []
+
+					if (json.namedMaterials !== null) {
+						materials = json.namedMaterials.map((reference: CardReference) => {
+							return <YGOCardWithQuantity key={reference.card.cardID} card={reference.card} occurrences={reference.occurrences} />
 						})
+					}
 
-						startTransition(() => {
-							setSuggestions(suggestionOutput)
-							setIsLoadingSuggestions(false)
+					if (json.namedReferences !== null) {
+						references = json.namedReferences.map((reference: CardReference) => {
+							return <YGOCardWithQuantity key={reference.card.cardID} card={reference.card} occurrences={reference.occurrences} />
 						})
 					}
+
+					startTransition(() => {
+						setMaterialSuggestions(materials)
+						setReferenceSuggestions(references)
+						setIsLoadingSuggestions(false)
+					})
 				},
 				false
-			)?.catch((_err) => {})
+			)?.catch((_err) => {
+				startTransition(() => {
+					setIsLoadingSuggestions(false)
+					setHasError(true)
+				})
+			})
 		}, [cardID])
 
 		return (
@@ -46,18 +61,37 @@ const CardSuggestions: FC<_CardSuggestion> = memo(
 					sectionHeaderBackground={cardColor !== undefined ? (cardColor?.replace(/Pendulum-/gi, '') as cardColor) : ''}
 					sectionName='Suggestions'
 					sectionContent={
-						isLoadingSuggestions ? (
-							<div className='section-content'>
-								<Skeleton className='rounded-skeleton' variant='rectangular' width='100%' height='250px' />
-							</div>
-						) : (
-							<div className='section-content'>
-								<Typography variant='h5'>
-									<i>{cardName}</i> Materials - Direct References
-								</Typography>
-								{suggestions.length === 0 ? <Hint>Nothing here 🤔</Hint> : <div style={{ display: 'flex', overflowX: 'auto', paddingBottom: '.3rem' }}>{suggestions}</div>}
-							</div>
-						)
+						<div className='section-content'>
+							{isLoadingSuggestions && <Skeleton className='rounded-skeleton' variant='rectangular' width='100%' height='380px' />}
+							{!isLoadingSuggestions && !hasError && (
+								<div>
+									<div className='group-with-outline'>
+										<Typography variant='h4'>Named Summoning Materials</Typography>
+										{materialSuggestions.length === 0 ? (
+											<Hint>Nothing here 🤔</Hint>
+										) : (
+											<div style={{ display: 'flex', overflowX: 'auto', paddingBottom: '.3rem' }}>{materialSuggestions}</div>
+										)}
+									</div>
+
+									<br />
+
+									<div className='group-with-outline'>
+										<Typography variant='h4'>Named References</Typography>
+										{referenceSuggestions.length === 0 ? (
+											<Hint>Nothing here 🤔</Hint>
+										) : (
+											<div style={{ display: 'flex', overflowX: 'auto', paddingBottom: '.3rem' }}>{referenceSuggestions}</div>
+										)}
+									</div>
+								</div>
+							)}
+							{!isLoadingSuggestions && hasError && (
+								<div>
+									<GenericNonBreakingErr errExplanation={'🤯 Suggestion Engine Is Offline 🤯'} />
+								</div>
+							)}
+						</div>
 					}
 				/>
 			</div>

src/components/product/ProductStatPie.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react'
 const ProductStatPie: FC<{ data: any[]; statName: string; isDataLoaded: boolean }> = ({ data, statName, isDataLoaded }) => {
 	const margin = 10
 	return (
-		<div style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)', width: '90%', margin: 'auto', padding: '1rem', borderRadius: '2rem', marginBottom: '1rem' }}>
+		<div className='group-dark' style={{ width: '90%', margin: 'auto', marginBottom: '1rem' }}>
 			<Typography style={{ color: 'white' }} variant='h2' align='center'>
 				{statName}
 			</Typography>
@@ -46,7 +46,7 @@ const ProductStatPie: FC<{ data: any[]; statName: string; isDataLoaded: boolean
 						]}
 					/>
 				) : (
-					<Skeleton variant='rectangular' height='100%' width='100%' style={{ backgroundColor: 'rgba(0255, 255, 255, 0.11)' }} />
+					<Skeleton className='rounded-skeleton-light' variant='rectangular' height='100%' width='100%' />
 				)}
 			</div>
 		</div>

src/components/util/event/UpcomingTCGProducts.tsx

@@ -35,7 +35,7 @@ const UpcomingTCGProducts = () => {
 	}, [events])
 
 	return (
-		<div className='event-container-end'>
+		<div className='event-container-end group-with-outline-brown'>
 			<img src={'/assets/yugioh-tcg-official-logo.png'} />
 			<div className='event-header-container search-icon-container'>
 				<Typography className='event-header' variant='h4'>