fix: handle errors for subsequent getServerSideProps calls (#273)

* feat: add faq section * chore: allow users edit their avatar * chore: fixed merge conflicts * chore: fix build errors * feat: add list view to stems page * feat: allowed users see projects they collaborated on * feat: add interep login * fix: pull latest changes * feat: improve stemqueue zk-vote process * feat: implement redis caching for stems and nft * fix: fix pull request issues * fix: remove interep logic and packages * feat: add redis client and use with /projects endpoint * chore: relocate util files into lib dir * chore: update dbConnect * chore: cleanup * feat: use redis for projects/ route, cleanup * fix: revert style changes and keep stem queue tab * chore: relocate component files * chore: rename file * fix: typo * chore: rename dbConnect() * feat: add caching for /projects/* /stems/* * feat: add redis caching to /stems and /nfts * chore: cleanup * chore: typo * chore: cleanup * feat: remove voting-group/ * chore: cleanup * feat: DRY up code working with Redis and MongoDB * feat: use helper methods for Redis/MongoDB * fix: error handling for bad serverside calls * fix: button icon spacing --------- Co-authored-by: Destiny Aigbe <aigbedestinyic@gmail.com>
drewcook · Apr 14, 2023 · 88f48ce · 88f48ce
1 parent 6bc3e1d
commit 88f48ce
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 46 deletions.
diff --git a/components/ProjectDetails.tsx b/components/ProjectDetails.tsx
@@ -184,7 +184,7 @@ const ProjectDetails = (props: ProjectDetailsProps): JSX.Element | null => {
 			if (!downloading) setDownloading(true)
 			setDownloadingMsg('Stems downloaded and compressed, please select a location to save them')
 			// After the stems zip is downloaded, prompt the user to chose a save file location
-			saveAs(content, `PEStems_${details.name}_${Date.now()}.zip`)
+			saveAs(content, `ArborStems_${details.name}_${Date.now()}.zip`)
 			setDownloading(false)
 			setDownloadingMsg('')
 			setSuccessOpen(true)

diff --git a/components/StemPlayer.styles.ts b/components/StemPlayer.styles.ts
@@ -43,15 +43,16 @@ const styles = {
 		display: 'inline-block',
 		verticalAlign: 'middle',
 	},
-	forkBtn: {
-		backgroundColor: '#1B2021',
-		color: '#FFFFFF',
-		textTransform: 'uppercase',
-		fontWeight: 800,
-		'&:hover': {
-			backgroundColor: '#1B2021',
-		},
-	},
+	// forkBtn: {
+	// 	backgroundColor: '#fff',
+	// 	color: '#ccc',
+	// 	textTransform: 'uppercase',
+	// 	fontWeight: 800,
+	// 	'&:hover': {
+	// 		backgroundColor: '#1B2021',
+	// 	},
+	// 	cursor: 'not-allowed',
+	// },
 	playback: {
 		backgroundColor: '#f4f4f4',
 		py: 3,

diff --git a/components/StemPlayer.tsx b/components/StemPlayer.tsx
@@ -119,11 +119,11 @@ const StemPlayer = (props: StemPlayerProps): JSX.Element => {
 							</Typography>
 						</Typography>
 					</Grid>
-					<Grid item xs={2} sx={{ textAlign: 'right' }}>
+					{/* <Grid item xs={2} sx={{ textAlign: 'right' }}>
 						<Button variant="outlined" size="small" sx={styles.forkBtn} disabled>
 							Fork
 						</Button>
-					</Grid>
+					</Grid> */}
 				</Grid>
 			</Box>
 			<Box sx={styles.playback}>

diff --git a/components/StemQueue.tsx b/components/StemQueue.tsx
@@ -395,7 +395,9 @@ const StemQueue = (props: StemQueueProps): JSX.Element => {
 						>
 							{voteIsLoading(idx) ? (
 								<>
-									<CircularProgress size={20} sx={styles.loadingIcon} color="inherit" /> {' Vote Pending'}
+									<CircularProgress size={20} sx={styles.loadingIcon} color="inherit" />
+									&nbsp;&nbsp;
+									{'Vote Pending'}
 								</>
 							) : (
 								'Cast Vote'

diff --git a/next.config.js b/next.config.js
@@ -40,7 +40,7 @@ const nextConfig = {
 			'ipfs.io', // Anything from IPFS directly
 			'dweb.link', // Anything from NFT.storage
 			'nft.storage',
-			'bafkreia7jo3bjr2mirr5h2okf5cjsgg6zkz7znhdboyikchoe6btqyy32u.ipfs.dweb.link', // Default PE Logo NFT Placeholder Image
+			'bafkreia7jo3bjr2mirr5h2okf5cjsgg6zkz7znhdboyikchoe6btqyy32u.ipfs.dweb.link', // Default Logo NFT Placeholder Image
 			'robohash.org', // User avatars
 			'gravatar.com',
 		],

diff --git a/pages/nfts/[id].tsx b/pages/nfts/[id].tsx
@@ -286,9 +286,16 @@ const NftDetailsPage: NextPage<NftDetailsPageProps> = props => {
 						</Grid>
 					</>
 				) : (
-					<Typography sx={styles.error} color="error">
-						Sorry, no details were found for this NFT.
-					</Typography>
+					<Box textAlign="center">
+						<Typography mb={4}>
+							Sorry, there are no details to show for this NFT. The ID being used may exist.
+						</Typography>
+						<Link href="/nfts">
+							<Button variant="contained" color="secondary">
+								Back To Arboretum
+							</Button>
+						</Link>
+					</Box>
 				)}
 				{successOpen && (
 					<Notification open={successOpen} msg={successMsg} type="success" onClose={onNotificationClose} />
@@ -302,22 +309,25 @@ const NftDetailsPage: NextPage<NftDetailsPageProps> = props => {
 NftDetailsPage.propTypes = propTypes
 
 export const getServerSideProps: GetServerSideProps = async context => {
-	// Get NFT details based off ID
+	// Get NFT details from ID
 	let nftId = context.query.id
 	if (typeof nftId === 'object') nftId = nftId[0].toLowerCase()
 	else nftId = nftId?.toLowerCase()
 
-	// Get NFT data from database
-	const res = await get(`/nfts/${nftId}`)
-	const data: any | null = res.success ? res.data : null
+	if (nftId !== '[object Blob]') {
+		const res = await get(`/nfts/${nftId}`)
+		const data: any | null = res.success ? res.data : null
 
-	return {
-		props: {
-			data,
-		},
+		return {
+			props: {
+				data,
+			},
+		}
 	}
+
+	// Fallback, typically if server returns a 404 or 400
+	return { props: { data: null } }
 }
 
 NftDetailsPage.propTypes = propTypes
-
 export default NftDetailsPage
diff --git a/pages/stems/[id].tsx b/pages/stems/[id].tsx
@@ -1,5 +1,5 @@
 import { /*Loop,*/ PauseRounded, PlayArrowRounded } from '@mui/icons-material'
-import { Box, Container, Divider, Fab, Typography } from '@mui/material'
+import { Box, Button, Container, Divider, Fab, Typography } from '@mui/material'
 import type { GetServerSideProps, NextPage } from 'next'
 // Because our stem player uses Web APIs for audio, we must ignore it for SSR to avoid errors
 import dynamic from 'next/dynamic'
@@ -146,24 +146,38 @@ const StemDetailsPage: NextPage<StemDetailsPageProps> = props => {
 						onStop={handleStop}
 					/>
 				) : (
-					<Typography sx={styles.error} color="error">
-						Sorry, no details were found for this stem.
-					</Typography>
+					<Box textAlign="center">
+						<Typography mb={4}>
+							Sorry, there are no details to show for this stem. The ID being used may exist.
+						</Typography>
+						<Link href="/stems">
+							<Button variant="contained" color="secondary">
+								Back To Stems
+							</Button>
+						</Link>
+					</Box>
 				)}
 			</Container>
 		</>
 	)
 }
 
 export const getServerSideProps: GetServerSideProps = async context => {
+	// Get stem details from ID
 	const stemId = context.query.id
-	const res = await get(`/stems/${stemId}`)
-	const data: StemDoc | null = res.success ? res.data : null
-	return {
-		props: {
-			data,
-		},
+
+	if (stemId !== '[object Blob]') {
+		const res = await get(`/stems/${stemId}`)
+		const data: StemDoc | null = res.success ? res.data : null
+		return {
+			props: {
+				data,
+			},
+		}
 	}
+
+	// Fallback, typically if server returns a 404 or 400
+	return { props: { data: null } }
 }
 
 export default StemDetailsPage
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
@@ -1,8 +1,9 @@
 /* eslint-disable prettier/prettier */
 import EditIcon from '@mui/icons-material/Edit'
-import { Box, Container, Divider, Grid, IconButton, Typography } from '@mui/material'
+import { Box, Button, Container, Divider, Grid, IconButton, Typography } from '@mui/material'
 import type { GetServerSideProps, NextPage } from 'next'
 import Head from 'next/head'
+import Link from 'next/link'
 import PropTypes from 'prop-types'
 import { useEffect, useState } from 'react'
 
@@ -319,9 +320,16 @@ const UserDetailsPage: NextPage<UserDetailsPageProps> = props => {
 						</Grid>
 					</>
 				) : (
-					<Typography sx={styles.error} color="error">
-						Sorry, no details were found for this user.
-					</Typography>
+					<Box textAlign="center">
+						<Typography mb={4}>
+							Sorry, there are no details to show for this user. The ID being used may exist.
+						</Typography>
+						<Link href="/">
+							<Button variant="contained" color="secondary">
+								Back To Home
+							</Button>
+						</Link>
+					</Box>
 				)}
 			</Container>
 		</>
@@ -331,15 +339,21 @@ const UserDetailsPage: NextPage<UserDetailsPageProps> = props => {
 UserDetailsPage.propTypes = propTypes
 
 export const getServerSideProps: GetServerSideProps = async context => {
-	// Get user object
+	// Get user details from ID
 	const userId = context.query.id
-	const userData = await getFullUserDetails(userId)
 
-	return {
-		props: {
-			data: userData,
-		},
+	if (userId !== '[object Blob]') {
+		const userData = await getFullUserDetails(userId)
+
+		return {
+			props: {
+				data: userData,
+			},
+		}
 	}
+
+	// Fallback, typically if server returns a 404 or 400
+	return { props: { data: null } }
 }
 
 export default UserDetailsPage
diff --git a/styles/Projects.styles.ts b/styles/Projects.styles.ts
@@ -252,6 +252,7 @@ export const detailsStyles = {
 		py: 3,
 		px: 2,
 		border: '3px solid #000',
+		borderTop: 'none',
 		borderBottomLeftRadius: '10px',
 		borderBottomRightRadius: '10px',
 	},