useOptions and withRedux

Sometimes you will encounter a problem that can only be solved by having different behavior when the user is editing the page. For this use case Jaen offers up a solution in the form of useOptions and withRedux.

Simple hidden TextField

import {fields, useOptions, withRedux} from '@snek-at/jaen-pages'
import {Box} from '@chakra-ui/react'

const HiddenComponent = () => {
  const {isEditing} = useOptions()
  return(
    <Box display={isEditing ? 'static' : 'none'}>
      <fields.TextField 
        fieldName="supersecret"
        initValue="<p>I'm Hidden</p>"
        rtf={false}
      />
    </Box>
  )
}

export default withRedux(HiddenComponent)

First you are required to import {useOptions, withRedux} from @snek-at/jaen-pages once you have done that you can use the boolean isEditing to set the display of your component to none if the administrator of the page isn't editing it.

Once you are finished building your component you have to pass it to the withRedux function so that it has access to the useOptions hook before exporting it.

LightBox

For this example we will use the Chakra-UI Jaen Lightbox from our advanced snippets.

import {
  Box,
  useDisclosure,
  Modal,
  ModalOverlay,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  Center
} from '@chakra-ui/react'
import {useOptions, withRedux} from '@snek-at/jaen-pages'
import * as React from 'react'
import styled from '@emotion/styled'

interface LightBoxProps {
  previewImage: React.ReactNode
}

const DefaultImage = styled(Box)`
  cursor: ${props => (props.isEditing ? 'normal' : 'zoom-in')};
  filter: ${props => (props.isEditing ? '' : 'brightness(80%)')};
`

const LightBox: React.FC<LightBoxProps> = ({previewImage, children}) => {
  const {onToggle, isOpen, onClose} = useDisclosure()
  const {isEditing} = useOptions()
  const togglePreview = () => isEditing === false && onToggle()

  return (
    <>
      <DefaultImage isEditing onClick={togglePreview}>
        {children}
      </DefaultImage>
      <Modal onClose={onClose} isOpen={isOpen} isCentered size="6xl">
        <ModalOverlay />
        <ModalContent>
          <ModalCloseButton color="red" />
          <ModalBody p="0" width="100%" height="100%">
            <Center>{previewImage}</Center>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  )
}

export default withRedux(LightBox)

Confused? Don't worry we will look through the example in more detail.

After the imports in which withRedux and useOptions are again included we start by defining our props. Because the previewImage prop is a ImageField we have to set it to React.ReactNode.

Next we use Emotion to style our image. In this case we define the cursor the be 'normal' if someone is editing and to be 'zoom-in' otherwise. We also define a filter for the image for the enduser scenario (we increase the brightness of the image). After the styling the Chakra UI useDisclosure hook is used. We also get our isEditing boolean from the useOptions hook and we define togglePreview to only toggle the state of isOpen when isEditing is false.

Now we use our styled Box and wrap the children (an ImageField) in it. Next a Chakar UI modal is used in order to display the onClick(full view) image.

In the end we export the LightBox after passing it to the withRedux function.