<commit_before>// @flow

import type { FluxReduceStore } from "flux/utils";
import type { SectionType } from "../enums/Section.js";
import { Container } from "flux/utils";
import cdn from "../utils/cdn.js";
import CurrentUser from "../utils/CurrentUser.js";
import NavigationLinks, { NavigationLink } from "../utils/NavigationLinks.js";
import NavigationStore from "../stores/NavigationStore.js";
import SectionLink from "./SectionLink.jsx";
import React from "react";
import Section from "../enums/Section.js";
import url from "../utils/url.js";
import AlertHeader from "./AlertHeader.jsx";
import MyProjectsStore, {
  MyProjectsAPIResponse,
} from "../stores/MyProjectsStore.js";
import MyGroupsStore, { MyGroupsAPIResponse } from "../stores/MyGroupsStore.js";
import MyEventsStore, { MyEventsAPIResponse } from "../stores/MyEventsStore.js";
import UniversalDispatcher from "../stores/UniversalDispatcher.js";
import _ from "lodash";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Dropdown from "react-bootstrap/Dropdown";
import Button from "react-bootstrap/Button";
import UserIcon from "../svg/user-circle-solid.svg";
import { Dictionary } from "../types/Generics.jsx";

type State = {|
  showMyProjects: boolean,
  showMyGroups: boolean,
  showMyEvents: boolean,
  showHeader: boolean,
  loginUrl: string,
|};

class MainHeader extends React.Component<{||}, State> {
  static getStores(): $ReadOnlyArray<FluxReduceStore> {
    return [NavigationStore, MyProjectsStore, MyGroupsStore, MyEventsStore];
  }

  static calculateState(prevState: State): State {
    const myProjects: MyProjectsAPIResponse = MyProjectsStore.getMyProjects();
    const myGroups: MyGroupsAPIResponse = MyGroupsStore.getMyGroups();
    const myEvents: MyEventsAPIResponse = MyEventsStore.getMyEvents();
    return {
      showHeader: !url.argument("embedded"),
      showMyProjects:
        myProjects &&
        (!_.isEmpty(myProjects.volunteering_projects) ||
          !_.isEmpty(myProjects.owned_projects)),
      showMyGroups: myGroups && !_.isEmpty(myGroups.owned_groups),
      showMyEvents:
        myEvents &&
        (!_.isEmpty(myEvents.owned_events) || CurrentUser.isStaff()),
      loginUrl: url.logInThenReturn(),
    };
  }
  // may need activeSection: NavigationStore.getSection() in calculateState, check that

  constructor(): void {
    super();
    this.state = {
      activeSection: NavigationStore.getSection(),
    };

    this._handleHeightChange = this._handleHeightChange.bind(this);
    this.mainHeaderRef = React.createRef();
  }

  componentDidMount() {
    UniversalDispatcher.dispatch({ type: "INIT" });
    if (this.mainHeaderRef && this.mainHeaderRef.current) {
      this._handleHeightChange(this.mainHeaderRef.current.clientHeight);
    }
  }

  render(): React$Node {
    return this.state.showHeader ? (
      <div ref={this.mainHeaderRef} className="MainHeader-root">
        <AlertHeader
          onAlertClose={this._handleAlertClosing.bind(this)}
          onUpdate={this._onAlertHeaderUpdate.bind(this)}
        />
        <div className="MainHeader-nav-container">{this._renderNavBar()}</div>
      </div>
    ) : null;
  }

  _renderNavBar() {
    //TODO: Once the blog is 'settled in' remove the conditional, the window.BLOG_URL target, and just hardcode it in.
    return (
      <Navbar collapseOnSelect expand="lg" bg="navlight" variant="light">
        <Navbar.Brand>
          <a href={url.section(Section.Home)}>
            <img src={cdn.image("dl_logo.png")} alt="DemocracyLab" />
          </a>
        </Navbar.Brand>
        {CurrentUser.isLoggedIn() ? null : (
          <Button
            className="MainHeader-showmobile MainHeader-login-button"
            variant="outline-primary"
            href={this.state.loginUrl}
          >
            Log In
          </Button>
        )}
        <Navbar.Toggle aria-controls="nav-pagenav-container" />
        <Navbar.Collapse id="nav-pagenav-container" className="flex-column">
          <Nav className="MainHeader-usernav ml-auto">
            {CurrentUser.isLoggedIn()
              ? this._renderUserSection()
              : this._renderLogInSection()}
          </Nav>
          <Nav className="MainHeader-pagenav mr-auto">
            {this._renderNavLink(Section.Home, "Home")}
            <NavDropdown title="Projects" id="nav-projects">
              {this._renderNavDropdownItem(
                Section.FindProjects,
                "Find Projects"
              )}
              {this._renderNavDropdownItem(
                Section.CreateProject,
                "Create Project"
              )}
            </NavDropdown>
            <NavDropdown title="Groups" id="nav-group">
              {this._renderNavDropdownItem(Section.FindGroups, "Find Groups")}
              {this._renderNavDropdownItem(Section.CreateGroup, "Create Group")}
            </NavDropdown>
            {this._renderEventNavItems()}
            <Nav.Link href={url.section(Section.CorporateEvent)}>
              Companies
            </Nav.Link>
            <NavDropdown title="About" id="nav-about">
              {this._renderNavDropdownItem(Section.AboutUs, "About Us")}
              {this._renderNavDropdownItem(Section.ContactUs, "Contact Us")}
              {this._renderNavDropdownItem(Section.Press, "News")}
            </NavDropdown>
            {window.BLOG_URL ? (
              <Nav.Link href={window.BLOG_URL}>Blog</Nav.Link>
            ) : null}
            {this._renderNavLink(
              Section.Donate,
              "Donate",
              "MainHeader-showmobile"
            )}
            {CurrentUser.isLoggedIn() ? (
              <Nav.Link className="MainHeader-showmobile mb-3" href="/logout/">
                Log Out<commit_msg>Top Menu: Fix highlighting for Companies link<commit_after>// @flow

import type { FluxReduceStore } from "flux/utils";
import type { SectionType } from "../enums/Section.js";
import { Container } from "flux/utils";
import cdn from "../utils/cdn.js";
import CurrentUser from "../utils/CurrentUser.js";
import NavigationLinks, { NavigationLink } from "../utils/NavigationLinks.js";
import NavigationStore from "../stores/NavigationStore.js";
import SectionLink from "./SectionLink.jsx";
import React from "react";
import Section from "../enums/Section.js";
import url from "../utils/url.js";
import AlertHeader from "./AlertHeader.jsx";
import MyProjectsStore, {
  MyProjectsAPIResponse,
} from "../stores/MyProjectsStore.js";
import MyGroupsStore, { MyGroupsAPIResponse } from "../stores/MyGroupsStore.js";
import MyEventsStore, { MyEventsAPIResponse } from "../stores/MyEventsStore.js";
import UniversalDispatcher from "../stores/UniversalDispatcher.js";
import _ from "lodash";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Dropdown from "react-bootstrap/Dropdown";
import Button from "react-bootstrap/Button";
import UserIcon from "../svg/user-circle-solid.svg";
import { Dictionary } from "../types/Generics.jsx";

type State = {|
  showMyProjects: boolean,
  showMyGroups: boolean,
  showMyEvents: boolean,
  showHeader: boolean,
  loginUrl: string,
|};

class MainHeader extends React.Component<{||}, State> {
  static getStores(): $ReadOnlyArray<FluxReduceStore> {
    return [NavigationStore, MyProjectsStore, MyGroupsStore, MyEventsStore];
  }

  static calculateState(prevState: State): State {
    const myProjects: MyProjectsAPIResponse = MyProjectsStore.getMyProjects();
    const myGroups: MyGroupsAPIResponse = MyGroupsStore.getMyGroups();
    const myEvents: MyEventsAPIResponse = MyEventsStore.getMyEvents();
    return {
      showHeader: !url.argument("embedded"),
      showMyProjects:
        myProjects &&
        (!_.isEmpty(myProjects.volunteering_projects) ||
          !_.isEmpty(myProjects.owned_projects)),
      showMyGroups: myGroups && !_.isEmpty(myGroups.owned_groups),
      showMyEvents:
        myEvents &&
        (!_.isEmpty(myEvents.owned_events) || CurrentUser.isStaff()),
      loginUrl: url.logInThenReturn(),
    };
  }
  // may need activeSection: NavigationStore.getSection() in calculateState, check that

  constructor(): void {
    super();
    this.state = {
      activeSection: NavigationStore.getSection(),
    };

    this._handleHeightChange = this._handleHeightChange.bind(this);
    this.mainHeaderRef = React.createRef();
  }

  componentDidMount() {
    UniversalDispatcher.dispatch({ type: "INIT" });
    if (this.mainHeaderRef && this.mainHeaderRef.current) {
      this._handleHeightChange(this.mainHeaderRef.current.clientHeight);
    }
  }

  render(): React$Node {
    return this.state.showHeader ? (
      <div ref={this.mainHeaderRef} className="MainHeader-root">
        <AlertHeader
          onAlertClose={this._handleAlertClosing.bind(this)}
          onUpdate={this._onAlertHeaderUpdate.bind(this)}
        />
        <div className="MainHeader-nav-container">{this._renderNavBar()}</div>
      </div>
    ) : null;
  }

  _renderNavBar() {
    //TODO: Once the blog is 'settled in' remove the conditional, the window.BLOG_URL target, and just hardcode it in.
    return (
      <Navbar collapseOnSelect expand="lg" bg="navlight" variant="light">
        <Navbar.Brand>
          <a href={url.section(Section.Home)}>
            <img src={cdn.image("dl_logo.png")} alt="DemocracyLab" />
          </a>
        </Navbar.Brand>
        {CurrentUser.isLoggedIn() ? null : (
          <Button
            className="MainHeader-showmobile MainHeader-login-button"
            variant="outline-primary"
            href={this.state.loginUrl}
          >
            Log In
          </Button>
        )}
        <Navbar.Toggle aria-controls="nav-pagenav-container" />
        <Navbar.Collapse id="nav-pagenav-container" className="flex-column">
          <Nav className="MainHeader-usernav ml-auto">
            {CurrentUser.isLoggedIn()
              ? this._renderUserSection()
              : this._renderLogInSection()}
          </Nav>
          <Nav className="MainHeader-pagenav mr-auto">
            {this._renderNavLink(Section.Home, "Home")}
            <NavDropdown title="Projects" id="nav-projects">
              {this._renderNavDropdownItem(
                Section.FindProjects,
                "Find Projects"
              )}
              {this._renderNavDropdownItem(
                Section.CreateProject,
                "Create Project"
              )}
            </NavDropdown>
            <NavDropdown title="Groups" id="nav-group">
              {this._renderNavDropdownItem(Section.FindGroups, "Find Groups")}
              {this._renderNavDropdownItem(Section.CreateGroup, "Create Group")}
            </NavDropdown>
            {this._renderEventNavItems()}
            {this._renderNavLink(Section.CorporateEvent, "Companies")}
            <NavDropdown title="About" id="nav-about">
              {this._renderNavDropdownItem(Section.AboutUs, "About Us")}
              {this._renderNavDropdownItem(Section.ContactUs, "Contact Us")}
              {this._renderNavDropdownItem(Section.Press, "News")}
            </NavDropdown>
            {window.BLOG_URL ? (
              <Nav.Link href={window.BLOG_URL}>Blog</Nav.Link>
            ) : null}
            {this._renderNavLink(
              Section.Donate,
              "Donate",
              "MainHeader-showmobile"
            )}
            {CurrentUser.isLoggedIn() ? (
              <Nav.Link className="MainHeader-showmobile mb-3" href="/logout/">
                Log Out
{'fraction_non_alphanumeric': 0.12771063683894746, 'fraction_numerical': 0.00017142367360932544, 'mean_word_length': 2.759020618556701, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '236438', 'n_tokens_mistral': 3363, 'n_tokens_neox': 3277, 'n_words': 631}