@kiwicom/smart-faq/src/SmartFAQ/common/Responsive.js

// @flow

import * as React from 'react';
import MediaQuery from 'react-responsive';

import { SidebarVersion, FullPageVersion } from './PageVariant';
import { isBrowser } from '../../shared/helpers';
import PageVariantContext from '../context/PageVariant';

type Props = {|
  children: React.Node,
|};

const fallbackFallbackScreenWidth = 900;

const createBreakpointQuery = (
  criterion: 'min' | 'max',
  expectedValue: number,
) => {
  const visibleOnSSR = screenWidthFallback =>
    criterion === 'max'
      ? screenWidthFallback <= expectedValue
      : screenWidthFallback >= expectedValue;

  const MediaQueryComponent = ({ children }: Props) =>
    isBrowser() ? (
      <MediaQuery query={`screen and (${criterion}-width: ${expectedValue}px)`}>
        {children}
      </MediaQuery>
    ) : (
      <PageVariantContext.Consumer>
        {value =>
          visibleOnSSR(
            (value && value.screenWidthFallback) || fallbackFallbackScreenWidth,
          )
            ? children
            : null
        }
      </PageVariantContext.Consumer>
    );

  return MediaQueryComponent;
};

const createMediaQuery = (mediaquery: string) => {
  const MediaQueryComponent = ({ children }: Props) => (
    <>
      <SidebarVersion>
        <MediaQuery query={mediaquery}>{children}</MediaQuery>
      </SidebarVersion>
      <FullPageVersion>
        {mediaquery === 'screen and (orientation: landscape)' ? children : null}
      </FullPageVersion>
    </>
  );

  return MediaQueryComponent;
};

const breakPoint = 900;

export const Desktop = createBreakpointQuery('min', breakPoint + 1);
export const Mobile = createBreakpointQuery('max', breakPoint);
export const Portrait = createMediaQuery(`screen and (orientation: portrait)`);
export const Landscape = createMediaQuery(
  `screen and (orientation: landscape)`,
);