Milestone! Reactfire finally no longer necessary.

functions/package.json

@@ -13,7 +13,7 @@
 	},
 	"dependencies": {
 		"cors": "^2.8.5",
-		"firebase-admin": "^8.10.0",
+		"firebase-admin": "^9.4.2",
 		"firebase-functions": "^3.6.1",
 		"got": "^11.3.0",
 		"gravatar": "^1.8.0"

package.json

@@ -10,20 +10,19 @@
     "@testing-library/user-event": "^7.1.2",
     "@xstate/react": "^0.8.1",
     "firebase": "^7.15.5",
-    "firebase-admin": "^8.13.0",
+    "firebase-admin": "^9.4.2",
     "firebase-functions": "^3.7.0",
     "framer-motion": "^2.0.0-beta.77",
     "gravatar": "^1.8.1",
     "ky": "^0.20.0",
     "marked": "^1.2.5",
     "mini-debounce": "^1.0.8",
-    "react": "^0.0.0-experimental-4ead6b530",
-    "react-dom": "^0.0.0-experimental-4ead6b530",
+    "react": "0.0.0-experimental-3310209d0",
+    "react-dom": "0.0.0-experimental-3310209d0",
     "react-dropzone": "^11.0.2",
     "react-router-dom": "5",
     "react-scripts": "^4.0.1",
     "react-transition-group": "^4.4.1",
-    "reactfire": "^2.0.3",
     "uuid": "^8.2.0",
     "wicg-inert": "^3.0.3",
     "xss": "^1.0.8",

src/components/CharacterCard.js

@@ -1,9 +1,12 @@
+import {Suspense, useMemo} from 'react'
 import {Link as RouterLink} from 'react-router-dom'
 
 import {useUser} from '../shared/firebase.js'
-import {createResource, fetchImageURL} from '../shared/resources'
+import {createResource, fetchImageURL} from '../shared/resources.js'
 
 import '../styles/character-card.css'
+import {Center} from './center'
+import {Spinner} from '@fluentui/react'
 
 /**
  * @param {{resource: ResourceReader<string>, alt: string}} props
@@ -14,14 +17,35 @@ function CharacterCardArt({resource, alt}) {
 	return <img className="CharacterCard__cover" src={imageURL} alt={alt} />
 }
 
-export function CharacterCard({userID, character}) {
-	const user = useUser()
-	const imageResource = createResource(fetchImageURL(userID, character.files[0]))
+/**
+ *
+ * @param {{character: Character}} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function CharacterCard({character}) {
+	const {uid} = useUser()
+	const imageResource = useMemo(() => {
+		if (character.files.length > 0) return createResource(fetchImageURL(uid, character.files[0]))
+		return null
+	}, [character.files])
 
 	return (
 		<figure className="CharacterCard">
 			{/*TODO: replace alt with alt from data*/}
-			<CharacterCardArt resource={imageResource} alt={`Art of "${character.name}"`} />
+			{imageResource ? (
+				<Suspense
+					fallback={
+						<Center>
+							<Spinner />
+						</Center>
+					}
+				>
+					<CharacterCardArt resource={imageResource} alt={`Art of "${character.name}"`} />
+				</Suspense>
+			) : (
+				<span className="CharacterCard__letter">{character.name[0]}</span>
+			)}
 
 			<figcaption className="CharacterCard__overlay">
 				<p className="CharacterCard__name">{character.name}</p>

src/components/action-button.js

@@ -1,24 +1,24 @@
 import {FontIcon, Text} from '@fluentui/react'
 import {motion} from 'framer-motion'
 import {colors} from '../shared/theme'
-import '../styles/action-button-styles.css'
+import '../styles/action-button.css'
 
 /*
- * @param {{ variant: 'round' | 'flat' | 'bold-orange' | 'bold-pink', iconName: string }} options
+ * @param {{ variant: 'round' | 'flat' | 'bold-orange' | 'bold-pink' | 'danger', iconName: string }} options
  */
 export function ActionButton({variant, iconName, children, className, ...props}) {
 	return (
-		<motion.button
+		<button
 			animate
 			className={`ActionButton ActionButton--${variant} ${children ? 'ActionButton--content' : ''} ${className || ''}`}
 			{...props}
 		>
 			<FontIcon iconName={iconName} aria-hidden="true" />
 			{children && (
-				<Text as="span" variant="actionButton" style={{color: colors.realOrange}}>
+				<Text as="span" variant="actionButton">
 					{children}
 				</Text>
 			)}
-		</motion.button>
+		</button>
 	)
 }

src/components/center.js

@@ -1,5 +1,13 @@
 import {Stack} from '@fluentui/react'
 
-export function Center(props) {
-	return <Stack verticalAlign="center" horizontalAlign="center" style={{height: '100%', width: '100%'}} {...props} />
+const empty = {}
+export function Center({style = empty, ...props}) {
+	return (
+		<Stack
+			verticalAlign="center"
+			horizontalAlign="center"
+			style={{height: '100%', width: '100%', ...style}}
+			{...props}
+		/>
+	)
 }

src/components/character-parts.js

@@ -0,0 +1,94 @@
+import {memo, Suspense} from 'react'
+
+import xss from 'xss'
+import marked from 'marked'
+import {motion} from 'framer-motion'
+import {Spinner} from '@fluentui/react'
+
+import {Center} from './center.js'
+import {colors} from '../shared/theme.js'
+import {artworkWrapperStyles} from './slideshow-parts.js'
+
+export const CharacterStory = memo(({story}) => (
+	<div className="Character__story" dangerouslySetInnerHTML={{__html: xss(marked(story))}} />
+))
+
+const empty = {}
+/**
+ *
+ * @param {{
+ *   slideshow: JSX.Element,
+ *   name: JSX.Element,
+ *   story: JSX.Element,
+ *   actions: [JSX.Element],
+ *   mode: 'display' | 'edit',
+ *   onSubmit: function(React.SyntheticEvent)
+ * }} props
+ * @constructor
+ */
+export function CharacterLayout({slideshow, name, story, actions, mode, onSubmit}) {
+	const content = (
+		<main style={{height: 'calc(100% - 62px)'}}>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					padding: '0 0 45px 0',
+					height: 'calc(100% - 45px)',
+					overflowY: 'scroll',
+				}}
+			>
+				<Suspense
+					fallback={
+						<Center style={artworkWrapperStyles}>
+							<Spinner label="Fetching artwork" />
+						</Center>
+					}
+				>
+					{slideshow}
+				</Suspense>
+
+				<article style={{padding: '0 31px', display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+					{name}
+					{story}
+				</article>
+			</div>
+			<section
+				style={{
+					position: 'fixed',
+					bottom: 0,
+					display: 'flex',
+					justifyContent: 'space-evenly',
+					alignItems: 'center',
+					width: '100%',
+					height: 62,
+					backgroundColor: 'white',
+					boxShadow: `${colors.lightOrange} 0 -2px 7px 0`,
+				}}
+			>
+				{actions}
+			</section>
+		</main>
+	)
+
+	let wrapped
+	if (mode === 'display') {
+		wrapped = (
+			<motion.div layout style={{height: '100%'}}>
+				{content}
+			</motion.div>
+		)
+	} else if (mode === 'edit') {
+		wrapped = (
+			<motion.div layout style={{height: '100%'}}>
+				<form onSubmit={onSubmit} style={{display: 'inline'}}>
+					{content}
+				</form>
+			</motion.div>
+		)
+	} else {
+		throw new Error(`Invalid mode '${mode}' is not supported.`)
+	}
+
+	return wrapped
+}

src/components/profile-menu.js

@@ -1,12 +1,13 @@
-import {colors} from '../shared/theme'
-import {PROFILE_SIZE, ProfilePhoto} from './profile-photo'
-import {AnimatePresence, motion} from 'framer-motion'
-import {useMachine} from '@xstate/react'
 import {useEffect, useRef} from 'react'
-import {forEachNonDescendantTree} from '../shared/helpers'
-import {transitions} from '../shared/config'
+
 import {Text} from '@fluentui/react'
-import {profileMenuMachine} from '../shared/machines'
+import {useMachine} from '@xstate/react'
+import {AnimatePresence, motion} from 'framer-motion'
+
+import {colors, transitions} from '../shared/theme.js'
+import {PROFILE_SIZE, ProfilePhoto} from './profile-photo.js'
+import {forEachNonDescendantTree} from '../shared/helpers.js'
+import {profileMenuMachine} from '../shared/machines.js'
 
 const profileMenuStyles = {
 	position: 'absolute',

src/components/slideshow-parts.js

@@ -0,0 +1,63 @@
+import {ActionButton} from './action-button'
+import {colors} from '../shared/theme'
+
+export const artworkWrapperStyles = {
+	position: 'relative',
+	backgroundColor: colors.lightOrange,
+	width: '100%',
+	height: 262,
+	display: 'flex',
+	justifyContent: 'center',
+	alignItems: 'center',
+}
+export const artworkStyles = {
+	objectFit: 'contain',
+	maxWidth: '100%',
+	maxHeight: '100%',
+}
+
+const nextButtonStyles = {
+	position: 'absolute',
+	bottom: 0,
+	right: 0,
+	width: 46,
+	height: 46,
+	borderRadius: 0,
+	borderTopLeftRadius: 8,
+}
+export function NextButton(props) {
+	return (
+		<ActionButton
+			iconName="Forward"
+			variant="round-orange"
+			type="button"
+			title="Next"
+			aria-label="Next"
+			style={nextButtonStyles}
+			{...props}
+		/>
+	)
+}
+
+const previousButtonStyles = {
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	width: 46,
+	height: 46,
+	borderRadius: 0,
+	borderBottomRightRadius: 8,
+}
+export function PreviousButton(props) {
+	return (
+		<ActionButton
+			iconName="Back"
+			variant="round-orange"
+			type="button"
+			title="Previous"
+			aria-label="Previous"
+			style={previousButtonStyles}
+			{...props}
+		/>
+	)
+}

src/index.js

@@ -1,32 +1,30 @@
 import {StrictMode, Suspense} from 'react'
 import ReactDOM from 'react-dom'
-import './styles/index.css'
-import * as serviceWorker from './serviceWorker'
-import {FirebaseAppProvider} from 'reactfire'
-import {Login, Register} from './pages/authentication'
 import {loadTheme, Spinner} from '@fluentui/react'
-
-import {initializeIcons} from 'office-ui-fabric-react/lib/Icons'
-import {TransitionRouter} from './components/transition-router'
-import {Home} from './pages/home'
-import {Landing} from './pages/landing'
-import {Center} from './components/center'
 import {Route, Redirect} from 'react-router-dom'
-import {config, FirebaseProvider, useUser} from './shared/firebase'
-import {theme} from './shared/theme'
-import {BasicBoundary} from './components/error-boundary'
-import {NoRoute} from './pages/404'
-import {NewCharacter} from './pages/new-character'
-import {Character} from './pages/character'
+import {initializeIcons} from 'office-ui-fabric-react/lib/Icons'
+
+import {Login, Register} from './pages/authentication.js'
+import {TransitionRouter} from './components/transition-router.js'
+import {Home} from './pages/home.js'
+import {Landing} from './pages/landing.js'
+import {Center} from './components/center.js'
+import {FirebaseProvider, useUser} from './shared/firebase.js'
+import {theme} from './shared/theme.js'
+import {BasicBoundary} from './components/error-boundary.js'
+import {NoRoute} from './pages/404.js'
+import {NewCharacter} from './pages/new-character.js'
+import {CharacterPage} from './pages/character.js'
+
+import * as serviceWorker from './serviceWorker.js'
+import './styles/index.css'
 
 loadTheme(theme)
 initializeIcons()
 
 /**
  * A route that will only render when logged in. Redirects to "/login" when logged out.
- * @param as
- * @param props
- * @returns {JSX.Element|null}
+ * @returns {JSX.Element}
  * @constructor
  */
 function PrivateRoute({as, ...props}) {
@@ -38,8 +36,6 @@ function PrivateRoute({as, ...props}) {
 
 /**
  * A route for when you're not logged in. Redirects to the home page when logged in.
- * @param as
- * @param props
  * @returns {JSX.Element}
  * @constructor
  */
@@ -64,7 +60,7 @@ ReactDOM.render(
 					<TransitionRouter>
 						<PrivateRoute exact as={Home} path="/" />
 						<PrivateRoute exact as={NewCharacter} path="/new-character" />
-						<PrivateRoute exact as={Character} path="/character/:characterID" />
+						<PrivateRoute exact as={CharacterPage} path="/character/:characterID" />
 						<Landing exact path="/landing" />
 						<UnauthenticatedRoute exact as={Login} path="/login" />
 						<UnauthenticatedRoute exact as={Register} path="/register" />