Popular posts

First, never apologize for being a noob, I am no expert myself. Second, I never worked with Gatsby or recompose before, so I doubt if I can be of much help. Finally, I'll give it a go and let you know what I think might be the problem anyway:

From what I see, the value of the languages input is being sent whenever it is clicked, but I can't see that value updated with the language selected, whenever the list items are clicked, so this is how I would approach it

const SelectLanguage = ({ selectLanguage, lang }) => (
  <li>
      <Input id="languages" type="checkbox" name="menu" />
      <Label for="languages">Languages</Label>
      <Submenu className="submenu">
        <li onClick={e => selectLanguage("en")} ><a href="en">English</a></li>
        <li onClick={e => selectLanguage("es")}><a href="es">Español</a></li>
      </Submenu>
  </li>

)

Let me know how it goes if you gave it a try and maybe if it didn't work we can dig deeper to figure out the problem together.

Rana Emad

It almost worked when I switched to Spanish, but it took me to Gatsby.js development 404 page. I think because of lack of {lang} because in another file:

const Header = () => (
    {({ toggleLanguage, lang }) => (
        {/* ... */}
          <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
       {/* ... */}
    )}

Ah, we missed the value and values which come from lang:

const enhance = compose(
    withStateHandlers(
        props => ({ language: props.lang }),
        {
            selectLanguage: (values, { toggleLanguage }) => value => {
                toggleLanguage(value)
                return {
                    language: value
                }
            }
        }
    )
)

Gustavo Benedito Costa

Well, if you believe the missing lang is the issue have you tried adding a value attribute with its value to the li tag? Also, maybe just in case, you could add an e.preventDefault() to the onClick events to prevent the modification of the route

Rana Emad

Ah, I figured it, I kept your code, but modified, removing href and repalced for value in the element <a>:

const SelectLanguage = ({ selectLanguage, lang }) => (
  <li>
      <Input id="languages" type="checkbox" name="menu" />
      <Label for="languages">Languages</Label>
      <Submenu className="submenu">
        <li onClick={e => selectLanguage("ar")}><a value={lang}>عربي</a></li>
        <li onClick={e => selectLanguage("de")}><a value={lang}>Deutsch</a></li>
        <li onClick={e => selectLanguage("en")}><a value={lang}>English</a></li>
        <li onClick={e => selectLanguage("es")}><a value={lang}>Español</a></li>
        <li onClick={e => selectLanguage("pt")}><a value={lang}>Português</a></li>
      </Submenu>
  </li>
)

Gustavo Benedito Costa

Yaaay! Great job figuring it out! I'm glad you finally solved the issue!

Rana Emad

Thank you a lot. I uploaded the files, marking you as author of the improved file in my repo's git commit.

Gustavo Benedito Costa

Any time. Thank you for the lovely gesture!