dev-home-page.jsx

import React, { useState } from 'react';
import {
  ActionButton,
  Text,
  Toggle,
} from '@open-raven/react-styleguide';
import { Flex } from 'reflexbox';
import {
  LOCAL_STORAGE_KEY,
  getFlagsFromLocalStorage,
  featureFlags,
} from 'common/feature-flags';

import './home-page.scss';

const initalState = {
  ...featureFlags,
  ...getFlagsFromLocalStorage(),
};

function DevHomePage({ accountMenuRender: AccountMenu }) {
  const [currlStorage, setCurrLStorage] = useState(initalState);

  const onChange = (e) => {
    const { name, checked } = e.target;
    const copy = {
      ...currlStorage,
      [name]: checked,
    };

    setCurrLStorage(copy);
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(copy));
  };

  const onClick = () => {
    window.location.reload();
  };

  return (
    <>
      <AccountMenu />
      <div className="dev-home-page">
        <div className="dev-home-page__feature-flags">
          <Text
            text="Feature Flags"
            size="large"
          />
          <br />
          <div className="dev-home-page__feature-flags__toggles">
            {
              Object.keys(currlStorage).map(key => {
                return (
                  <span
                    key={key}
                    className="feature-flag__toggle"
                  >
                    <Toggle
                      name={key}
                      checked={currlStorage[key] || false}
                      onChange={onChange}
                    />
                    {key}
                  </span>
                );
              })
            }
          </div>
          <Flex
            className="dev-home-page__feature-flags__actions"
            justifyContent="flex-end"
            width="100%"
          >
            <ActionButton
              onClick={onClick}
              variant="primary"
            >
              Apply
            </ActionButton>
          </Flex>
        </div>
      </div>
    </>
  );
}

export { DevHomePage };