Maps languages from new version of @alheimsins/b5-johnson-120-ipip-neo-pi-r (patch)

Author: zrrrzzt

components/LanguageBar.js

@@ -2,6 +2,7 @@ import { Component } from 'react'
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'
 const { getInfo } = require('@alheimsins/b5-johnson-120-ipip-neo-pi-r')
 const { languages } = getInfo()
+const langCodes = languages.map(lang => lang.id)
 
 export default class extends Component {
   constructor (props) {
@@ -22,11 +23,11 @@ export default class extends Component {
       <div className='lang'>
         {
           !this.state.toggleLang &&
-            languages.filter(langCode => langCode === 'en' || selectedLanguage === langCode).map(langCode => <span key={langCode} onClick={() => switchLanguage(langCode)} className={selectedLanguage === langCode ? 'languageSelected' : 'language'}>{langCode} </span>)
+          langCodes.filter(langCode => langCode === 'en' || selectedLanguage === langCode).map(langCode => <span key={langCode} onClick={() => switchLanguage(langCode)} className={selectedLanguage === langCode ? 'languageSelected' : 'language'}>{langCode} </span>)
         }
         {
           this.state.toggleLang &&
-            languages.map(langCode => <span key={langCode} onClick={() => switchLanguage(langCode)} className={selectedLanguage === langCode ? 'languageSelected' : 'language'}>{langCode} </span>)
+          langCodes.map(langCode => <span key={langCode} onClick={() => switchLanguage(langCode)} className={selectedLanguage === langCode ? 'languageSelected' : 'language'}>{langCode} </span>)
         }
         <span className='language' onClick={this.handleToggleLang}> {this.state.toggleLang ? <FaAngleLeft /> : <FaAngleRight />}</span>
         <style jsx>

pages/index.js

@@ -6,7 +6,8 @@ import { getInfo } from '@alheimsins/b5-johnson-120-ipip-neo-pi-r'
 import withI18next from '../hoc/withI18next'
 
 const { languages } = getInfo()
-const languageList = languages.map(code => ({ code, name: ISO6391.getName(code) }))
+const langCodes = languages.map(lang => lang.id)
+const languageList = langCodes.map(code => ({ code, name: ISO6391.getName(code) }))
 
 const startTest = e => {
   e.preventDefault()
@@ -15,7 +16,7 @@ const startTest = e => {
 }
 
 const Home = ({ countryCode, t }) => {
-  const defaultLanguage = languages.includes(countryCode) ? countryCode : 'en'
+  const defaultLanguage = langCodes.includes(countryCode) ? countryCode : 'en'
   return (
     <div>
       <div style={{ paddingBottom: '20px', borderBottom: '1px solid rgb(234, 234, 234)' }}>