<commit_before>import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { actionCreators } from "~/app/actions/actions";
import * as generalSelectors from "../../redux/selectors/general-selectors.js";
import * as viewSelectors from "../../redux/selectors/view-selectors.js";
import {
  getUri,
  generateLink,
  getQueryParams,
  extractAtomUriFromConnectionUri,
} from "../../utils.js";
import * as atomUtils from "../../redux/utils/atom-utils";
import * as connectionUtils from "../../redux/utils/connection-utils";
import * as processUtils from "../../redux/utils/process-utils.js";
import WonAtomMessages from "../../components/atom-messages.jsx";
import WonGroupAtomMessages from "../../components/group-atom-messages.jsx";
import WonConnectionsOverview from "../../components/connections-overview.jsx";
import WonGenericPage from "~/app/pages/genericPage";

import "~/style/_atom-messages.scss";
import "~/style/_connections.scss";
import "~/style/_responsiveness-utils.scss";
import ico36_message from "~/images/won-icons/ico36_message.svg";

export default function PageConnections() {
  const history = useHistory();
  const dispatch = useDispatch();

  const {
    connectionUri: selectedConnectionUri,
    postUri: atomUriInRoute,
  } = getQueryParams(history.location);

  const processState = useSelector(generalSelectors.getProcessState);
  const atom = useSelector(
    generalSelectors.getOwnedAtomByConnectionUri(selectedConnectionUri)
  );
  const atomUri =
    getUri(atom) || extractAtomUriFromConnectionUri(selectedConnectionUri);
  const isAtomFetchNecessary = processUtils.isAtomFetchNecessary(
    processState,
    atomUri,
    atom
  );

  const selectedConnection = atomUtils.getConnection(
    atom,
    selectedConnectionUri
  );
  const selectedTargetAtom = useSelector(
    generalSelectors.getAtom(
      connectionUtils.getTargetAtomUri(selectedConnection)
    )
  );

  const isSelectedConnectionGroupChat =
    selectedConnection &&
    connectionUtils.hasTargetSocketUri(
      selectedConnection,
      atomUtils.getGroupSocket(selectedTargetAtom)
    );
  const isSelectedConnectionChat =
    selectedConnection &&
    connectionUtils.hasTargetSocketUri(
      selectedConnection,
      atomUtils.getChatSocket(selectedTargetAtom)
    );

  useEffect(
    () => {
      if (isAtomFetchNecessary) {
        console.debug("fetch atomUri, ", atomUri);
        dispatch(actionCreators.atoms__fetchUnloadedAtom(atomUri));
      }

      if (!atomUriInRoute && ownedAtoms) {
        const unloadedAtoms = ownedAtoms.filter((atom, atomUri) =>
          processUtils.isAtomFetchNecessary(processState, atomUri, atom)
        );

        if (unloadedAtoms.size > 0) {
          unloadedAtoms.mapKeys(atomUri => {
            console.debug("fetch atomUri, ", atomUri);
            dispatch(actionCreators.atoms__fetchUnloadedAtom(atomUri));
          });
        }
      }
      //If the request has not a Chat-, or GroupSocket we won't show the messages view
      if (
        !isAtomFetchNecessary &&
        !isSelectedConnectionGroupChat &&
        !isSelectedConnectionChat &&
        selectedTargetAtom
      ) {
        history.replace(
          generateLink(
            history.location,
            { postUri: getUri(selectedTargetAtom) },
            "/post"
          )
        );
      }
    },
    [
      selectedConnectionUri,
      atom,
      ownedAtoms,
      selectedTargetAtom,
      isAtomFetchNecessary,
      atomUriInRoute,
    ]
  );

  const ownedAtoms = useSelector(generalSelectors.getOwnedAtoms);

  const activePinnedAtomUri = useSelector(viewSelectors.getActivePinnedAtomUri);

  const allChatConnections = useSelector(
    activePinnedAtomUri
      ? generalSelectors.getChatConnectionsOfActivePinnedAtom(
          activePinnedAtomUri
        )
      : generalSelectors.getAllUnassignedUnpinnedChatConnections
  );
  const storedAtoms = useSelector(generalSelectors.getAtoms);

  let contentElements;<commit_msg>Make sure targetAtom is loaded to get targetSocket<commit_after>import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { actionCreators } from "~/app/actions/actions";
import * as generalSelectors from "../../redux/selectors/general-selectors.js";
import * as viewSelectors from "../../redux/selectors/view-selectors.js";
import {
  getUri,
  generateLink,
  getQueryParams,
  extractAtomUriFromConnectionUri,
} from "../../utils.js";
import * as atomUtils from "../../redux/utils/atom-utils";
import * as connectionUtils from "../../redux/utils/connection-utils";
import * as processUtils from "../../redux/utils/process-utils.js";
import WonAtomMessages from "../../components/atom-messages.jsx";
import WonGroupAtomMessages from "../../components/group-atom-messages.jsx";
import WonConnectionsOverview from "../../components/connections-overview.jsx";
import WonGenericPage from "~/app/pages/genericPage";

import "~/style/_atom-messages.scss";
import "~/style/_connections.scss";
import "~/style/_responsiveness-utils.scss";
import ico36_message from "~/images/won-icons/ico36_message.svg";

export default function PageConnections() {
  const history = useHistory();
  const dispatch = useDispatch();

  const {
    connectionUri: selectedConnectionUri,
    postUri: atomUriInRoute,
  } = getQueryParams(history.location);

  const processState = useSelector(generalSelectors.getProcessState);
  const atom = useSelector(
    generalSelectors.getOwnedAtomByConnectionUri(selectedConnectionUri)
  );
  const atomUri =
    getUri(atom) || extractAtomUriFromConnectionUri(selectedConnectionUri);
  const isAtomFetchNecessary = processUtils.isAtomFetchNecessary(
    processState,
    atomUri,
    atom
  );

  const selectedConnection = atomUtils.getConnection(
    atom,
    selectedConnectionUri
  );
  const selectedTargetAtom = useSelector(
    generalSelectors.getAtom(
      connectionUtils.getTargetAtomUri(selectedConnection)
    )
  );

  const targetAtomUri = selectedTargetAtom && getUri(selectedTargetAtom);
  const isTargetAtomFetchNecessary = processUtils.isAtomFetchNecessary(
    processState,
    targetAtomUri,
    selectedTargetAtom
  );
  const isTargetAtomLoading = processUtils.isAtomLoading(
    processState,
    targetAtomUri
  );

  const isSelectedConnectionGroupChat =
    selectedConnection &&
    selectedTargetAtom &&
    connectionUtils.hasTargetSocketUri(
      selectedConnection,
      atomUtils.getGroupSocket(selectedTargetAtom)
    );

  const isSelectedConnectionChat =
    selectedConnection &&
    selectedTargetAtom &&
    connectionUtils.hasTargetSocketUri(
      selectedConnection,
      atomUtils.getChatSocket(selectedTargetAtom)
    );

  useEffect(
    () => {
      if (isAtomFetchNecessary) {
        console.debug("fetch atomUri, ", atomUri);
        dispatch(actionCreators.atoms__fetchUnloadedAtom(atomUri));
      }

      if (isTargetAtomFetchNecessary) {
        console.debug("fetch atomUri, ", targetAtomUri);
        dispatch(actionCreators.atoms__fetchUnloadedAtom(targetAtomUri));
      }

      if (!atomUriInRoute && ownedAtoms) {
        const unloadedAtoms = ownedAtoms.filter((atom, atomUri) =>
          processUtils.isAtomFetchNecessary(processState, atomUri, atom)
        );

        if (unloadedAtoms.size > 0) {
          unloadedAtoms.mapKeys(atomUri => {
            console.debug("fetch atomUri, ", atomUri);
            dispatch(actionCreators.atoms__fetchUnloadedAtom(atomUri));
          });
        }
      }
      //If the request has not a Chat-, or GroupSocket we won't show the messages view
      if (
        !isAtomFetchNecessary &&
        !isTargetAtomFetchNecessary &&
        selectedConnection &&
        targetAtomUri &&
        !isTargetAtomLoading &&
        !isSelectedConnectionGroupChat &&
        !isSelectedConnectionChat
      ) {
        history.replace(
          generateLink(
            history.location,
            { postUri: getUri(selectedTargetAtom) },
            "/post"
          )
        );
      }
    },
    [
      selectedConnectionUri,
      atom,
      ownedAtoms,
      selectedConnection,
      targetAtomUri,
      isTargetAtomLoading,
      isTargetAtomFetchNecessary,
      isAtomFetchNecessary,
      atomUriInRoute,
    ]
  );

  const ownedAtoms = useSelector(generalSelectors.getOwnedAtoms);

  const activePinnedAtomUri = useSelector(viewSelectors.getActivePinnedAtomUri);

  const allChatConnections = useSelector(
    activePinnedAtomUri
      ? generalSelectors.getChatConnectionsOfActivePinnedAtom(
          activePinnedAtomUri
        )
      : generalSelectors.getAllUnassignedUnpinnedChatConnections
  );
  const storedAtoms = useSelector(generalSelectors.getAtoms);

  let contentElements;
{'fraction_non_alphanumeric': 0.10156162228963038, 'fraction_numerical': 0.0011234692731153803, 'mean_word_length': 3.3895463510848125, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '3438939', 'n_tokens_mistral': 2588, 'n_tokens_neox': 2534, 'n_words': 447}