react komponent funkcyjny + context provider

import {useContext} from 'react';

// zamiast wzorca PubSub w tym przypadku mozna uzyc hooka useContext z Reacta
// wtedy w kazdym komponencie potrzebujacym jakiegos konkretnego stanu
// importuje sie ponizszy plik i mozna ten stan ustawiac lub pobierac
import editorMetaInfoContext from '../context_providers/editorMetaInfoContext';


import './Footer.css';

function Footer() {
  // getter oraz setter do informacji o polozeniu kursora
  const [editorMetaInfo, setEditorMetaInfo] = useContext(editorMetaInfoContext);
  return (
    <div className="ide-footer d-flex">
      <div className="editor-information mr-auto">
        {
          editorMetaInfo.line !== null &&
          editorMetaInfo.column !== null &&
          //ten div zostanie pokazany jedynie gdy beda spelnione powyzsze warunki
          (<div>Ln {editorMetaInfo.line}, Col {editorMetaInfo.column}</div>)
        }
        {
          editorMetaInfo.language !== null &&
          //tak samo tutaj
          (<div>{editorMetaInfo.language}</div>)
        }
      </div>
    </div>
  );
}

export default Footer;