All files / pages/belt-assessment belt-results.js

0% Statements 0/15
0% Branches 0/2
0% Functions 0/6
0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100                                                                                                                                                                                                       
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
import en from '../../locales/belt-assessment/belt-results/en'
import fr from '../../locales/belt-assessment/belt-results/fr'
import GroupedBeltResults from '../../components/GroupedBeltResults'
import DottedLine from '../../components/DottedLine'
 
export default function BeltResults({ locale }) {
  const t = locale === 'en' ? en : fr
  const router = useRouter()
  const [state, setState] = useState({})
 
  useEffect(() => {
    try {
      setState(JSON.parse(router.query.state))
    } catch (e) {
      console.error(e)
    }
  }, [])
 
  const groups = {
    'Agile': [
      'continuous-planning',
      'continuous-collaboration',
      'continuous-improvement',
    ],
    'Devops and Agile': ['continuous-quality'],
    'DevOps': [
      'continuous-integration',
      'continuous-delivery',
      'continuous-operations',
      'continuous-security',
    ],
    'Design Thinking': ['continuous-user-feedback'],
  }
 
  return (
    <div className="flex flex-col gap-5 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold text-periwinkle text-center">
        {t.title}
      </h1>
      <DottedLine />
      {Object.keys(groups).map((k) => (
        <GroupedBeltResults
          key={k}
          t={t}
          topic={k}
          keys={groups[k]}
          state={state}
        />
      ))}
      <div className="self-end flex gap-4">
        <button
          onClick={() => router.push('/belt-assessment/belt-system')}
          className="w-24 rounded bg-gray-600 text-white px-2 hover:bg-gray-800"
        >
          {t.back}
        </button>
        <button
          onClick={() => {
            sessionStorage.removeItem('belt-results')
            router.push('/belt-assessment/belt-system')
          }}
          className="w-24 rounded bg-gray-600 text-white px-2 hover:bg-gray-800"
        >
          {t.reassess}
        </button>
      </div>
    </div>
  )
}
 
export async function getStaticProps({ locale }) {
  /* istanbul ignore next */
  const langToggleLink =
    locale === 'en'
      ? '/fr/belt-assessment/belt-results'
      : '/belt-assessment/belt-results'
 
  /* Place-holder Meta Data Props */
  const meta = {
    data_en: {
      title: 'Digital Dojo - Belt Results',
      desc: 'English',
      author: '',
      keywords: '',
    },
    data_fr: {
      title: 'Dojo Numérique - Résultats de ceinture',
      desc: 'Français',
      author: '',
      keywords: '',
    },
  }
 
  return {
    props: { locale, langToggleLink, meta },
  }
}