Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import Timeline from './timeline'
import Progress from './progress'
import {axios} from '../../utils'

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

const TABS = {
    BASIC: "BASIC",
    NOTIFICATIONS: "NOTIFICATIONS",
};

const AccountSettings = props => {
    const [currentTab, setCurrentTab] = useState(TABS.BASIC);
    const handleChangeTab = (event, tab, param) => {
        event.preventDefault();
        switch (tab) {
            case TABS.BASIC:
                setTitle('Acciones Personales en 2GETSkills')
                break;
        
            default:
                setTitle('Desempeño Personal en 2GETSkills')
                break;
        }
        setCurrentTab(tab);
    };
    const [timeline, setTimeline] = React.useState([])
    const [timelinePagination, setTimelinePagination] = React.useState({count: 0, pages: 0, page: 1})
    const [title, setTitle] = React.useState('Acciones Personales en 2GETSkills')
    const TabRender = () => {
        switch (currentTab) {
            case TABS.BASIC:
                return <Timeline
                    timeline={timeline}
                    pagination={timelinePagination}
                    getMoreItems={getMoreItems}
                    activities={props.backendVars.activities}
                    changeTitle={title => setTitle(title)}
                />;
            case TABS.NOTIFICATIONS:
                return <Progress
                />;
        }
    };
    const getTimeline = async (page = timelinePagination.page, concatItems = false) => {
        try {
            const {data} = await axios.get('microlearning/timeline?page='+page)
            if(data.success){
                if(concatItems){
                    const _timeline = [... timeline, ... data.data.current.items]
                    setTimeline(_timeline)
                    setTimelinePagination({
                        ... data.data.total,
                        page: page.page+1
                    })
                }else{
                    setTimeline(data.data.current.items)
                    setTimelinePagination({
                        ... data.data.total,
                        page: data.data.current.page
                    })
                }
            }
        } catch (error) {
            console.log('>>: error > ', error)
        }
    }
    const getMoreItems = () => {
        if(timelinePagination.pages > timelinePagination.page){
            let {page} = timelinePagination
            page+=1
            getTimeline(page, true)
        }
    }
    useEffect(() => {
        getTimeline()
        // 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);
    }, []);

    return (
        <section className="profile-account-setting">
            <div className="container">
                <div
                    className="text-center mt-2"
                >
                    <h1 className="font-weight-bold">2GETSkills, tu app de micro-aprendizaje</h1>
                    {
                        !!title && (
                            <p> {title} </p>
                        )
                    }
                </div>
                <div className="account-tabs-setting">
                    <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 text-center nav-link ${
                                        currentTab === TABS.BASIC ? "active" : ""
                                    }`}
                                    id="nav-basic-tab"
                                    onClick={(e) => handleChangeTab(e, TABS.BASIC)}
                                >
                                    <i className="la la-user"></i>Tus acciones Personales en 2GETSkills
                                </a>
                                <a
                                    className={`nav-item text-center nav-link ${
                                        currentTab === TABS.NOTIFICATIONS ? "active" : ""
                                    }`}
                                    id="nav-basic-tab"
                                    onClick={(e) => handleChangeTab(e, TABS.NOTIFICATIONS)}
                                >
                                    <i
                                        className="fa fa-spinner"
                                    /> Tu progreso en 2GETSkills
                                </a>
                                </StyledNavTabs>
                            </div>
                        {/* <!--acc-leftbar end--> */}
                        </div>

                        <div className="col-lg-9">
                            <div className="tab-content" id="nav-tabContent">
                                <div className="tab-pane fade active show">{TabRender()}</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* <!--account-tabs-setting end--> */}
            </div>
        </section>
    );
};

export default AccountSettings;