feat: [#380] Cellar UI (#404)

* refactor: remove unused setCurrentTab variable
* feat: persist purchasedCellar
* feat: stand up basic fermentation UI
* refactor: destructure propTypes
* feat: create fermentation recipe type
* test: add missing propType

src/components/Cellar/Cellar.js

@@ -1,7 +1,47 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import AppBar from '@material-ui/core/AppBar'
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+
+import { recipesMap } from '../../data/maps'
+import { recipeType } from '../../enums'
+
+import FarmhandContext from '../Farmhand/Farmhand.context'
+
+import { FermentationTabPanel } from './FermentationTabPanel'
+import { a11yProps } from './TabPanel'
+
+import './Cellar.sass'
 
 export const Cellar = () => {
-  return <div className="Cellar"></div>
+  const {
+    gameState: { learnedRecipes },
+  } = useContext(FarmhandContext)
+
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const learnedFermentationRecipes = Object.keys(learnedRecipes).filter(
+    recipeId => recipesMap[recipeId].recipeType === recipeType.FERMENTATION
+  )
+
+  return (
+    <div className="Cellar">
+      <AppBar position="static" color="primary">
+        <Tabs
+          value={currentTab}
+          onChange={(_e, newTab) => setCurrentTab(newTab)}
+          aria-label="Cellar tabs"
+        >
+          <Tab {...{ label: 'Fermentation', ...a11yProps(0) }} />
+        </Tabs>
+      </AppBar>
+      <FermentationTabPanel
+        index={0}
+        currentTab={currentTab}
+        learnedFermentationRecipes={learnedFermentationRecipes}
+      />
+    </div>
+  )
 }
 
 Cellar.propTypes = {}

src/components/Cellar/Cellar.sass

@@ -0,0 +1,4 @@
+@import ../../styles/utils.sass
+
+.Cellar
+  @include center-tabs

src/components/Cellar/FermentationTabPanel.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { number, array } from 'prop-types'
+import Divider from '@material-ui/core/Divider'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import ReactMarkdown from 'react-markdown'
+
+import { recipeType } from '../../enums'
+import { recipeCategories } from '../../data/maps'
+import { RecipeList } from '../RecipeList/RecipeList'
+
+import { TabPanel } from './TabPanel'
+
+export const FermentationTabPanel = ({
+  index,
+  currentTab,
+  learnedFermentationRecipes,
+}) => (
+  <TabPanel value={currentTab} index={index}>
+    <RecipeList
+      learnedRecipes={learnedFermentationRecipes}
+      allRecipes={recipeCategories[recipeType.FERMENTATION]}
+    />
+    <Divider />
+    <ul className="card-list">
+      <li>
+        <Card>
+          <CardContent>
+            <ReactMarkdown
+              {...{
+                linkTarget: '_blank',
+                className: 'markdown',
+                source: `Fermentation recipes are learned by selling crops. Sell as much as you can of a wide variety of items!`,
+              }}
+            />
+          </CardContent>
+        </Card>
+      </li>
+    </ul>
+  </TabPanel>
+)
+
+FermentationTabPanel.propTypes = {
+  currentTab: number.isRequired,
+  index: number.isRequired,
+  learnedFermentationRecipes: array.isRequired,
+}

src/components/Cellar/TabPanel/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { node, number } from 'prop-types'
+
+export const TabPanel = props => {
+  const { children, value, index, ...other } = props
+
+  return (
+    <section
+      role="tabpanel"
+      hidden={value !== index}
+      id={`cellar-tabpanel-${index}`}
+      aria-labelledby={`cellar-tab-${index}`}
+      {...other}
+    >
+      {value === index ? children : null}
+    </section>
+  )
+}
+
+TabPanel.propTypes = {
+  children: node,
+  index: number.isRequired,
+  value: number.isRequired,
+}
+
+export const a11yProps = index => ({
+  id: `cellar-tab-${index}`,
+  'aria-controls': `cellar-tabpanel-${index}`,
+})

src/components/Shop/Shop.test.js

@@ -15,6 +15,7 @@ beforeEach(() => {
       {...{
         handleCombinePurchase: () => {},
         handleCowPenPurchase: () => {},
+        handleCellarPurchase: () => {},
         handleFieldPurchase: () => {},
         handleStorageExpansionPurchase: () => {},
         inventoryLimit: INFINITE_STORAGE_LIMIT,

src/components/Workshop/ForgeTabPanel.js

@@ -1,27 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { number, array, object } from 'prop-types'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import Divider from '@material-ui/core/Divider'
 import ReactMarkdown from 'react-markdown'
 
 import { recipeType } from '../../enums'
-
 import { recipeCategories } from '../../data/maps'
-
 import UpgradePurchase from '../UpgradePurchase'
+import { RecipeList } from '../RecipeList/RecipeList'
 
 import { TabPanel } from './TabPanel'
-import { RecipeList } from './RecipeList'
 
 import { getUpgradesAvailable } from './getUpgradesAvailable'
 
 export function ForgeTabPanel({
   currentTab,
   index,
   learnedForgeRecipes,
-  setCurrentTab,
   toolLevels,
 }) {
   const upgradesAvailable = getUpgradesAvailable({
@@ -71,9 +68,8 @@ export function ForgeTabPanel({
 }
 
 ForgeTabPanel.propTypes = {
-  currentTab: PropTypes.number.isRequired,
-  index: PropTypes.number.isRequired,
-  learnedForgeRecipes: PropTypes.array.isRequired,
-  setCurrentTab: PropTypes.func.isRequired,
-  toolLevels: PropTypes.object.isRequired,
+  currentTab: number.isRequired,
+  index: number.isRequired,
+  learnedForgeRecipes: array.isRequired,
+  toolLevels: object.isRequired,
 }

src/components/Workshop/KitchenTabPanel.js

@@ -1,24 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { number, array } from 'prop-types'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import Divider from '@material-ui/core/Divider'
 import ReactMarkdown from 'react-markdown'
 
 import { recipeType } from '../../enums'
-
 import { recipeCategories } from '../../data/maps'
+import { RecipeList } from '../RecipeList/RecipeList'
 
 import { TabPanel } from './TabPanel'
-import { RecipeList } from './RecipeList'
 
-export function KitchenTabPanel({
-  currentTab,
-  index,
-  learnedKitchenRecipes,
-  setCurrentTab,
-}) {
+export function KitchenTabPanel({ currentTab, index, learnedKitchenRecipes }) {
   return (
     <TabPanel value={currentTab} index={index}>
       <RecipeList
@@ -46,8 +40,7 @@ export function KitchenTabPanel({
 }
 
 KitchenTabPanel.propTypes = {
-  currentTab: PropTypes.number.isRequired,
-  index: PropTypes.number.isRequired,
-  learnedKitchenRecipes: PropTypes.array.isRequired,
-  setCurrentTab: PropTypes.func.isRequired,
+  currentTab: number.isRequired,
+  index: number.isRequired,
+  learnedKitchenRecipes: array.isRequired,
 }

src/components/Workshop/RecyclingTabPanel.js

@@ -1,24 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { number, array } from 'prop-types'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import Divider from '@material-ui/core/Divider'
 import ReactMarkdown from 'react-markdown'
 
 import { recipeType } from '../../enums'
-
 import { recipeCategories } from '../../data/maps'
+import { RecipeList } from '../RecipeList/RecipeList'
 
 import { TabPanel } from './TabPanel'
-import { RecipeList } from './RecipeList'
 
-export function RecyclingTabPanel({
-  currentTab,
-  index,
-  learnedRecipes,
-  setCurrentTab,
-}) {
+export function RecyclingTabPanel({ currentTab, index, learnedRecipes }) {
   return (
     <TabPanel value={currentTab} index={index}>
       <RecipeList
@@ -46,8 +40,7 @@ export function RecyclingTabPanel({
 }
 
 RecyclingTabPanel.propTypes = {
-  currentTab: PropTypes.number.isRequired,
-  index: PropTypes.number.isRequired,
-  learnedRecipes: PropTypes.array.isRequired,
-  setCurrentTab: PropTypes.func.isRequired,
+  currentTab: number.isRequired,
+  index: number.isRequired,
+  learnedRecipes: array.isRequired,
 }

src/constants.js

@@ -165,6 +165,7 @@ export const PERSISTED_STATE_KEYS = [
   'purchasedCombine',
   'purchasedComposter',
   'purchasedCowPen',
+  'purchasedCellar',
   'purchasedField',
   'purchasedSmelter',
   'record7dayProfitAverage',

src/data/maps.js

@@ -35,6 +35,7 @@ const {
 export const recipeCategories = {
   [recipeType.KITCHEN]: {},
   [recipeType.FORGE]: {},
+  [recipeType.FERMENTATION]: {},
   [recipeType.RECYCLING]: {},
 }
 

src/enums.js

@@ -41,7 +41,12 @@ export const cropType = enumify([
  * @property farmhand.module:enums.recipeType
  * @enum {string}
  */
-export const recipeType = enumify(['FORGE', 'KITCHEN', 'RECYCLING'])
+export const recipeType = enumify([
+  'FERMENTATION',
+  'FORGE',
+  'KITCHEN',
+  'RECYCLING',
+])
 
 /**
  * @property farmhand.module:enums.fieldMode