Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";
import { useLocation, withRouter } from "react-router";
import styled from "styled-components";
import BasicSettings from "./basic-settings/BasicSettings";
import Browsers from "./browsers/Browsers";
import ChangeImage from "./change-image/ChangeImage";
import ChangePassword from "./change-password/ChangePassword";
import Devices from "./devices/Devices";
import Ips from "./ips/Ips";
import Location from "./location/Location";
import Notifications from "./notifications/Notifications";
import Privacy from "./privacy/Privacy";
import SocialNetworks from "./social-networks/SocialNetworks";
import Transactions from "./transactions/Transactions";
import CloseAccount from "./close-account/CloseAccount";

const StyledNavTabs = styled.div`
  a {
    cursor: pointer;
    &.active {
      color: blue;
    }
  }
`;

const TABS = {
  BASIC: "BASIC",
  NOTIFICATIONS: "NOTIFICATIONS",
  CHANGE_PASSWORD: "CHANGE_PASSWORD",
  CHANGE_IMAGE: "CHANGE_IMAGE",
  LOCATION: "LOCAITON",
  PRIVACY: "PRIVACY",
  SOCIAL_NETWORKS: "SOCIAL_NETWORKS",
  TRANSACTIONS: "TRANSACTIONS",
  BROWSERS: "BROWSERS",
  IPS: "IPS",
  DEVICES: "DEVICES",
  CLOSE_ACCOUNT: "CLOSE_ACCOUNT",
};

const AccountSettings = (props) => {
  // props destructuring
  const {
    facebook,
    google,
    twitter,
    socialNetworkRoutes,
    routeTransactions,
    routeAddFunds,
    routeBrowsers,
    routeIPs,
    routeDevices,
    balance,
    amounts,
  } = props.backendVars;

  const [currentTab, setCurrentTab] = useState(TABS.BASIC);

  const handleChangeTab = (event, tab, param) => {
    event.preventDefault();
    setCurrentTab(tab);
  };

  const TabRender = () => {
    switch (currentTab) {
      case TABS.BASIC:
        return <BasicSettings />;
      case TABS.NOTIFICATIONS:
        return <Notifications />;
      case TABS.CHANGE_PASSWORD:
        return <ChangePassword />;
      case TABS.CHANGE_IMAGE:
        return <ChangeImage />;
      case TABS.LOCATION:
        return <Location />;
      case TABS.PRIVACY:
        return <Privacy />;
      case TABS.SOCIAL_NETWORKS:
        return (
          <SocialNetworks
            facebook={facebook}
            twitter={twitter}
            google={google}
            socialNetworkRoutes={socialNetworkRoutes}
          />
        );
      case TABS.TRANSACTIONS:
        return (
          <Transactions
            routeTransactions={routeTransactions}
            routeAddFunds={routeAddFunds}
            balance={balance}
            amounts={amounts}
          />
        );
      case TABS.BROWSERS:
        return <Browsers routeBrowsers={routeBrowsers} />;
      case TABS.IPS:
        return <Ips routeIPs={routeIPs} />;
      case TABS.DEVICES:
        return <Devices routeDevices={routeDevices} />;
      case TABS.CLOSE_ACCOUNT:
        return <CloseAccount />;
      case TABS.default:
        return <BasicSettings />;
    }
  };

  useEffect(() => {
    const searchParam = new URLSearchParams(props.location.search);
    const tab = searchParam.get("tab");
    if (tab === "nav-basic") setCurrentTab(TABS.BASIC);
    if (tab === "nav-notification") setCurrentTab(TABS.NOTIFICATIONS);
    if (tab === "nav-password") setCurrentTab(TABS.CHANGE_PASSWORD);
    if (tab === "nav-image") setCurrentTab(TABS.CHANGE_IMAGE);
    if (tab === "nav-location") setCurrentTab(TABS.LOCATION);
    if (tab === "nav-privacy") setCurrentTab(TABS.PRIVACY);
    if (tab === "nav-social-networks") setCurrentTab(TABS.SOCIAL_NETWORKS);
    if (tab === "nav-transactions") setCurrentTab(TABS.TRANSACTIONS);
    if (tab === "nav-browsers") setCurrentTab(TABS.BROWSERS);
    if (tab === "nav-ips") setCurrentTab(TABS.IPS);
    if (tab === "nav-devices") setCurrentTab(TABS.DEVICES);
  }, [props.location]);

  return (
    <section className="profile-account-setting">
      <div className="container">
        <div className="account-tabs-setting">
          <h1>Configuración de la cuenta</h1>
          <div className="row">
            <div className="col-lg-4">
              <div className="acc-leftbar">
                <StyledNavTabs
                  className="nav nav-tabs"
                  id="nav-tab"
                  role="tablist"
                >
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.BASIC)}
                  >
                    <i className="la la-user" />Básica
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.NOTIFICATIONS)}
                  >
                    <i className="la la-cogs" />Notificaciones
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.CHANGE_PASSWORD)}
                  >
                    <i className="fa fa-lock" />Cambiar clave
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.CHANGE_IMAGE)}
                  >
                    <i className="fa fa-image" />Cambiar imagen
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.LOCATION)}
                  >
                    <i className="fa fa-map-marker" />Ubicación
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.PRIVACY)}
                  >
                    <i className="fa fa-user-secret" />Privacidad
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.SOCIAL_NETWORKS)}
                  >
                    <i className="fa fa-facebook" />Redes Sociales
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.TRANSACTIONS)}
                  >
                    <i className="fa fa-money" />Transacciones
                  </a>
                  <a
                    className={`nav-item nav-link`}
                    onClick={(e) => handleChangeTab(e, TABS.CLOSE_ACCOUNT)}
                  >
                    <i className="fa fa-trash"></i>Cerrar cuenta
                  </a>
                </StyledNavTabs>
              </div>
            </div>
            <div className="col-lg-8">
              <div className="tab-content h-100" id="nav-tabContent">
                <div className="tab-pane fade active show h-100">
                  {TabRender()}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default withRouter(AccountSettings);