| 1 |
www |
1 |
import React, { useEffect, useState } from "react";
|
|
|
2 |
import styled from "styled-components";
|
|
|
3 |
import Timeline from './timeline'
|
|
|
4 |
import Progress from './progress'
|
|
|
5 |
import {axios} from '../../utils'
|
|
|
6 |
|
|
|
7 |
const StyledNavTabs = styled.div`
|
|
|
8 |
a {
|
|
|
9 |
cursor: pointer;
|
|
|
10 |
&.active {
|
|
|
11 |
color: blue;
|
|
|
12 |
}
|
|
|
13 |
}
|
|
|
14 |
`;
|
|
|
15 |
|
|
|
16 |
const TABS = {
|
|
|
17 |
BASIC: "BASIC",
|
|
|
18 |
NOTIFICATIONS: "NOTIFICATIONS",
|
|
|
19 |
};
|
|
|
20 |
|
|
|
21 |
const AccountSettings = props => {
|
|
|
22 |
const [currentTab, setCurrentTab] = useState(TABS.BASIC);
|
|
|
23 |
const handleChangeTab = (event, tab, param) => {
|
|
|
24 |
event.preventDefault();
|
|
|
25 |
switch (tab) {
|
|
|
26 |
case TABS.BASIC:
|
|
|
27 |
setTitle('Acciones Personales en 2GETSkills')
|
|
|
28 |
break;
|
|
|
29 |
|
|
|
30 |
default:
|
|
|
31 |
setTitle('Desempeño Personal en 2GETSkills')
|
|
|
32 |
break;
|
|
|
33 |
}
|
|
|
34 |
setCurrentTab(tab);
|
|
|
35 |
};
|
|
|
36 |
const [timeline, setTimeline] = React.useState([])
|
|
|
37 |
const [timelinePagination, setTimelinePagination] = React.useState({count: 0, pages: 0, page: 1})
|
|
|
38 |
const [title, setTitle] = React.useState('Acciones Personales en 2GETSkills')
|
|
|
39 |
const TabRender = () => {
|
|
|
40 |
switch (currentTab) {
|
|
|
41 |
case TABS.BASIC:
|
|
|
42 |
return <Timeline
|
|
|
43 |
timeline={timeline}
|
|
|
44 |
pagination={timelinePagination}
|
|
|
45 |
getMoreItems={getMoreItems}
|
|
|
46 |
activities={props.backendVars.activities}
|
|
|
47 |
changeTitle={title => setTitle(title)}
|
|
|
48 |
/>;
|
|
|
49 |
case TABS.NOTIFICATIONS:
|
|
|
50 |
return <Progress
|
|
|
51 |
/>;
|
|
|
52 |
}
|
|
|
53 |
};
|
|
|
54 |
const getTimeline = async (page = timelinePagination.page, concatItems = false) => {
|
|
|
55 |
try {
|
|
|
56 |
const {data} = await axios.get('microlearning/timeline?page='+page)
|
|
|
57 |
if(data.success){
|
|
|
58 |
if(concatItems){
|
|
|
59 |
const _timeline = [... timeline, ... data.data.current.items]
|
|
|
60 |
setTimeline(_timeline)
|
|
|
61 |
setTimelinePagination({
|
|
|
62 |
... data.data.total,
|
|
|
63 |
page: page.page+1
|
|
|
64 |
})
|
|
|
65 |
}else{
|
|
|
66 |
setTimeline(data.data.current.items)
|
|
|
67 |
setTimelinePagination({
|
|
|
68 |
... data.data.total,
|
|
|
69 |
page: data.data.current.page
|
|
|
70 |
})
|
|
|
71 |
}
|
|
|
72 |
}
|
|
|
73 |
} catch (error) {
|
|
|
74 |
console.log('>>: error > ', error)
|
|
|
75 |
}
|
|
|
76 |
}
|
|
|
77 |
const getMoreItems = () => {
|
|
|
78 |
if(timelinePagination.pages > timelinePagination.page){
|
|
|
79 |
let {page} = timelinePagination
|
|
|
80 |
page+=1
|
|
|
81 |
getTimeline(page, true)
|
|
|
82 |
}
|
|
|
83 |
}
|
|
|
84 |
useEffect(() => {
|
|
|
85 |
getTimeline()
|
|
|
86 |
// const searchParam = new URLSearchParams(props.location.search);
|
|
|
87 |
// const tab = searchParam.get("tab");
|
|
|
88 |
// if (tab === "nav-basic") setCurrentTab(TABS.BASIC);
|
|
|
89 |
// if (tab === "nav-notification") setCurrentTab(TABS.NOTIFICATIONS);
|
|
|
90 |
// if (tab === "nav-password") setCurrentTab(TABS.CHANGE_PASSWORD);
|
|
|
91 |
// if (tab === "nav-image") setCurrentTab(TABS.CHANGE_IMAGE);
|
|
|
92 |
// if (tab === "nav-location") setCurrentTab(TABS.LOCATION);
|
|
|
93 |
// if (tab === "nav-privacy") setCurrentTab(TABS.PRIVACY);
|
|
|
94 |
// if (tab === "nav-social-networks") setCurrentTab(TABS.SOCIAL_NETWORKS);
|
|
|
95 |
// if (tab === "nav-transactions") setCurrentTab(TABS.TRANSACTIONS);
|
|
|
96 |
// if (tab === "nav-browsers") setCurrentTab(TABS.BROWSERS);
|
|
|
97 |
// if (tab === "nav-ips") setCurrentTab(TABS.IPS);
|
|
|
98 |
// if (tab === "nav-devices") setCurrentTab(TABS.DEVICES);
|
|
|
99 |
}, []);
|
|
|
100 |
|
|
|
101 |
return (
|
|
|
102 |
<section className="profile-account-setting">
|
|
|
103 |
<div className="container">
|
|
|
104 |
<div
|
|
|
105 |
className="text-center mt-2"
|
|
|
106 |
>
|
|
|
107 |
<h1 className="font-weight-bold">2GETSkills, tu app de micro-aprendizaje</h1>
|
|
|
108 |
{
|
|
|
109 |
!!title && (
|
|
|
110 |
<p> {title} </p>
|
|
|
111 |
)
|
|
|
112 |
}
|
|
|
113 |
</div>
|
|
|
114 |
<div className="account-tabs-setting">
|
|
|
115 |
<div className="row">
|
|
|
116 |
<div className="col-lg-3">
|
|
|
117 |
<div className="acc-leftbar">
|
|
|
118 |
<StyledNavTabs
|
|
|
119 |
className="nav nav-tabs"
|
|
|
120 |
id="nav-tab"
|
|
|
121 |
role="tablist"
|
|
|
122 |
>
|
|
|
123 |
<a
|
|
|
124 |
className={`nav-item text-center nav-link ${
|
|
|
125 |
currentTab === TABS.BASIC ? "active" : ""
|
|
|
126 |
}`}
|
|
|
127 |
id="nav-basic-tab"
|
|
|
128 |
onClick={(e) => handleChangeTab(e, TABS.BASIC)}
|
|
|
129 |
>
|
|
|
130 |
<i className="la la-user"></i>Tus acciones Personales en 2GETSkills
|
|
|
131 |
</a>
|
|
|
132 |
<a
|
|
|
133 |
className={`nav-item text-center nav-link ${
|
|
|
134 |
currentTab === TABS.NOTIFICATIONS ? "active" : ""
|
|
|
135 |
}`}
|
|
|
136 |
id="nav-basic-tab"
|
|
|
137 |
onClick={(e) => handleChangeTab(e, TABS.NOTIFICATIONS)}
|
|
|
138 |
>
|
|
|
139 |
<i
|
|
|
140 |
className="fa fa-spinner"
|
|
|
141 |
/> Tu progreso en 2GETSkills
|
|
|
142 |
</a>
|
|
|
143 |
</StyledNavTabs>
|
|
|
144 |
</div>
|
|
|
145 |
{/* <!--acc-leftbar end--> */}
|
|
|
146 |
</div>
|
|
|
147 |
|
|
|
148 |
<div className="col-lg-9">
|
|
|
149 |
<div className="tab-content" id="nav-tabContent">
|
|
|
150 |
<div className="tab-pane fade active show">{TabRender()}</div>
|
|
|
151 |
</div>
|
|
|
152 |
</div>
|
|
|
153 |
</div>
|
|
|
154 |
</div>
|
|
|
155 |
{/* <!--account-tabs-setting end--> */}
|
|
|
156 |
</div>
|
|
|
157 |
</section>
|
|
|
158 |
);
|
|
|
159 |
};
|
|
|
160 |
|
|
|
161 |
export default AccountSettings;
|