merge with master

Author: ddfridley

.nvmrc

@@ -1 +1 @@
-16.20.1
+18.13.0

.storybook/main.js

@@ -1,6 +1,5 @@
 import { merge } from 'webpack-merge'
 const webpack = require('webpack')
-const path = require('path')
 
 const config = {
   stories: [
@@ -9,20 +8,19 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-viewport',
+    '@storybook/addon-webpack5-compiler-babel',
   ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+  docs: {},
   webpackFinal: async config => {
     const newConfig = merge(config, {
+      devtool: 'source-map',
       module: {
         rules: [
           {

app/components/round-tracker.js

@@ -38,40 +38,40 @@ const RoundTracker = ({ roundsStatus = [], className, ...otherProps }) => {
       return <div className={classes.emptyMessage}>No rounds available</div>
     }
 
-    let visibleRounds
     const currentRoundIndex = roundsStatus.findIndex(status => status === 'inProgress')
 
-    if (isMobile) {
-      if (currentRoundIndex === 0) {
-        visibleRounds = roundsStatus.slice(0, 2) // Show the first two rounds
-      } else if (currentRoundIndex === roundsStatus.length - 1) {
-        visibleRounds = roundsStatus.slice(-1) // Show only the last round
-      } else {
-        visibleRounds = roundsStatus.slice(currentRoundIndex, currentRoundIndex + 2) // Show the current and next round
-      }
+    let lowerIndex, upperIndex
+
+    if (currentRoundIndex === 0) {
+      lowerIndex = 0
+      upperIndex = isMobile ? 2 : 3 // Show the first two rounds on mobile, first 3 on full-width
+    } else if (currentRoundIndex === roundsStatus.length - 1) {
+      lowerIndex = roundsStatus.length - (isMobile ? 1 : 3)
+      upperIndex = roundsStatus.length - 1 // Show only the last round on mobile, last 3 on full-width
     } else {
-      if (currentRoundIndex <= 0) {
-        visibleRounds = roundsStatus.slice(0, 3) // Show the first three rounds
-      } else if (currentRoundIndex === roundsStatus.length - 1) {
-        visibleRounds = roundsStatus.slice(-3) // Show the last three rounds
-      } else {
-        visibleRounds = roundsStatus.slice(currentRoundIndex - 1, currentRoundIndex + 2) // Show the previous, current, and next round
-      }
+      // Show the current and next round on mobile.
+      // Previous, current, and next round on full-width
+      lowerIndex = isMobile ? currentRoundIndex : currentRoundIndex - 1
+      upperIndex = currentRoundIndex + 2
     }
 
-    return visibleRounds.map((status, index) => (
-      <React.Fragment key={index}>
-        <div className={classes.roundContainer}>
-          <div className={classes.roundNumber}>Round {roundsStatus.length - visibleRounds.length + index + 1}</div>
-          <StatusBadge
-            name={status.charAt(0).toUpperCase() + status.slice(1)}
-            status={status.toLowerCase()}
-            className={classes.badge}
-          />
-        </div>
-        {index < visibleRounds.length - 1 && <div className={classes.dash} />}
-      </React.Fragment>
-    ))
+    return roundsStatus.map((status, index) => {
+      // Only render visible rounds
+      if (lowerIndex <= index && index < upperIndex)
+        return (
+          <React.Fragment key={index}>
+            <div className={classes.roundContainer}>
+              <div className={classes.roundNumber}>Round {index + 1}</div>
+              <StatusBadge
+                name={status.charAt(0).toUpperCase() + status.slice(1)}
+                status={status.toLowerCase()}
+                className={classes.badge}
+              />
+            </div>
+            {index < upperIndex - 1 && <div className={classes.dash} />}
+          </React.Fragment>
+        )
+    })
   }
 
   return (

app/components/step-slider.jsx

@@ -98,15 +98,17 @@ export const StepSlider = props => {
       case 'clearSendDoneToParent':
         return { ...state, sendDoneToParent: false }
       case 'updateStatuses':
-        let { valid, index } = action.payload
+        let { result, index } = action.payload
         if (steps) {
           const stepStatuses = state.stepStatuses.map((stepStatus, i) => {
-            if (valid) return i === index ? { ...stepStatus, complete: true } : stepStatus
+            if (result.valid || result.valid === undefined) {
+              return i === index ? { ...stepStatus, complete: true } : stepStatus
+            }
             // Disable navigation to all steps after if invalid
             else return i >= state.currentStep ? { ...stepStatus, complete: false } : stepStatus
           })
           return { ...state, stepStatuses: stepStatuses }
-        } else if (valid) {
+        } else if (result) {
           // Just increment if no steps
           const currentStep = Math.min(state.currentStep + 1, children.length - 1)
           return {
@@ -121,7 +123,12 @@ export const StepSlider = props => {
   }
   // Keep track of each step's seen/completion status
   // Populate statuses with initial values
-  if (steps) steps[0].seen = true
+  if (steps) {
+    steps[0].seen = true
+    steps.forEach((step, index) => {
+      steps[index].complete = false
+    })
+  }
   const [state, dispatch] = useReducer(reducer, { currentStep: 0, sendDoneToParent: false, stepStatuses: steps })
 
   // the children need to be cloned to have the onDone function applied, but we don't want to redo this every time we re-render
@@ -135,7 +142,7 @@ export const StepSlider = props => {
           ...child.props,
           key: [index],
           onDone: valid => {
-            dispatch({ type: 'updateStatuses', payload: { valid: valid, index: index } })
+            dispatch({ type: 'updateStatuses', payload: { result: valid, index: index } })
           },
         })
       ),

app/components/tournament.js

@@ -0,0 +1,94 @@
+// https://github.com/EnCiv/civil-pursuit/issues/151
+
+import React, { useReducer } from 'react'
+import { createUseStyles } from 'react-jss'
+import cx from 'classnames'
+
+import StepBar from './step-bar'
+import RoundTracker from './round-tracker'
+import StepSlider from './step-slider'
+import AnswerStep from './answer-step'
+import GroupingStep from './grouping-step'
+import RankStep from './rank-step'
+import ReviewPointList from './review-point-list'
+import WhyStep from './why-step'
+import CompareReasons from './compare-reasons'
+import Intermission from './intermission'
+
+const WebComponents = {
+  StepBar: StepBar,
+  RoundTracker: RoundTracker,
+  StepSlider: StepSlider,
+  Answer: AnswerStep,
+  GroupingStep: GroupingStep,
+  RankStep: RankStep,
+  ReviewPointList: ReviewPointList,
+  WhyStep: WhyStep,
+  CompareReasons: CompareReasons,
+  Intermission: Intermission,
+}
+
+function buildChildren(steps, round) {
+  return steps.map(step => {
+    const { webComponent, ...props } = step
+
+    const LookupResult = WebComponents[webComponent]
+    if (LookupResult) {
+      // Pass all props from step obj except WebComponent
+      return <LookupResult {...props} round={round} />
+    } else {
+      console.error(`Couldn't render step - component '${webComponent}' was not found in WebComponents.`)
+      return <div>Couldn't render step - component '{webComponent}' was not found in WebComponents.</div>
+    }
+  })
+}
+
+function Tournament(props) {
+  const { className, steps = [], ...otherProps } = props
+  const classes = useStylesFromThemeFunction(props)
+
+  function reducer(state, action) {
+    switch (action.type) {
+      case 'incrementRound':
+        // Rebuild steps when going to next round
+        const newRound = state.currentRound + 1
+
+        return {
+          ...state,
+          currentRound: newRound,
+          stepComponents: buildChildren(steps, newRound),
+        }
+    }
+  }
+
+  const [state, dispatch] = useReducer(reducer, { currentRound: 1, stepComponents: buildChildren(steps, 1) })
+
+  const stepInfo = steps.map(step => {
+    return {
+      name: step.stepName,
+      title: step.stepIntro.description,
+    }
+  })
+
+  return (
+    <div className={cx(classes.wrapper, className)} {...otherProps}>
+      <RoundTracker roundsStatus={['complete', 'complete', 'inProgress', 'pending', 'pending']} />
+      <StepSlider
+        key={state.currentRound}
+        steps={stepInfo}
+        children={state.stepComponents}
+        onDone={valid => {
+          if (valid) dispatch({ type: 'incrementRound' })
+        }}
+      />
+    </div>
+  )
+}
+
+const useStylesFromThemeFunction = createUseStyles(theme => ({
+  wrapper: {
+    width: '100%',
+  },
+}))
+
+export default Tournament

app/dturn/dturn.js

@@ -474,7 +474,7 @@ module.exports.putGroupings = putGroupings
 
 function rankMostImportant(discussionId, round, userId, statementId, rank = 1) {
   /* this is where we will write it to the database
-    Rankings.push({statementId,round,ranking: 'most', userId, parentId: discussionId})
+    Ranks.push({statementId,round,ranking: 'most', userId, parentId: discussionId})
     */
   deltaShownItemsRank(discussionId, round, statementId, rank)
   Discussions[discussionId].Uitems[userId][round].shownStatementIds[statementId].rank = rank

app/models/__tests__/rankings.js app/models/__tests__/ranks.js

@@ -1,61 +1,68 @@
 // https://github.com/EnCiv/civil-pursuit/issues/136
 
 const { Mongo, Collection } = require('@enciv/mongo-collections')
-const Rankings = require('../rankings')
+const Ranks = require('../ranks')
 
 beforeAll(async () => {
   await Mongo.connect(global.__MONGO_URI__, { useUnifiedTopology: true })
-  await Rankings.setCollectionProps()
+  await Ranks.setCollectionProps()
 })
 
 beforeEach(async () => {
-  await Rankings.drop()
-  await Rankings.setCollectionProps()
-  await Rankings.createIndexes([
-    { key: { parentId: 1, userId: 1 }, name: 'unique_parentId_userId_index', unique: true },
-  ])
+  await Ranks.drop()
+  await Ranks.setCollectionProps()
+  await Ranks.createIndexes([{ key: { parentId: 1, userId: 1 }, name: 'unique_parentId_userId_index', unique: true }])
 })
 
 afterAll(async () => {
   await Mongo.disconnect()
 })
 
-describe('Rankings Model', () => {
+describe('Ranks Model', () => {
   it('should be set up correctly', () => {
-    expect(Rankings.collectionName).toEqual('rankings')
+    expect(Ranks.collectionName).toEqual('ranks')
   })
 
   it('should insert a valid document', async () => {
     const validDoc = {
       parentId: 'parent1',
       userId: 'user1',
+      discussionId: 'discussion1',
+      stage: 'pre',
+      category: 'category1',
     }
-    const result = await Rankings.insertOne(validDoc)
+    const result = await Ranks.insertOne(validDoc)
     expect(result.acknowledged).toBe(true)
   })
 
   it('should not insert an invalid document', async () => {
     const invalidDoc = {
       userId: 'user1',
     }
-    await expect(Rankings.insertOne(invalidDoc)).rejects.toThrow('Document failed validation')
+    await expect(Ranks.insertOne(invalidDoc)).rejects.toThrow('Document failed validation')
   })
 
   it('should enforce unique indexes', async () => {
     const doc1 = {
       parentId: 'parent2',
       userId: 'user2',
+      discussionId: 'discussion2',
+      stage: 'stage2',
+      category: 'category2',
     }
     const doc2 = {
       parentId: 'parent2',
       userId: 'user2',
+      discussionId: 'discussion2',
+      stage: 'stage2',
+      category: 'category2',
     }
-    await Rankings.insertOne(doc1)
-    await expect(Rankings.insertOne(doc2)).rejects.toThrow('duplicate key error')
+    await Ranks.insertOne(doc1)
+    await expect(Ranks.insertOne(doc2)).rejects.toThrow('duplicate key error')
   })
 
   it('should have the correct indexes', async () => {
-    const indexes = await Rankings.indexes()
+    const indexes = await Ranks.indexes()
     expect(indexes).toEqual(expect.arrayContaining([expect.objectContaining({ name: 'unique_parentId_userId_index' })]))
   })
 })