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-3">

              <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-9">

              <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);