Skip to content

Commit 2f4fcc7

Browse files
author
quannt86
committed
Fix UI
1 parent bda246f commit 2f4fcc7

File tree

5 files changed

+186
-85
lines changed

5 files changed

+186
-85
lines changed

‎src/components/Header/Header.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,13 @@ export default function Header() {
7777
>
7878
My profile
7979
</NavLink>
80-
<NavLink
80+
{/* <NavLink
8181
to={`/admin`}
8282
className="underline font-inter text-base text-blue-400 cursor-pointer profile_tour"
8383
>
8484
Admin
85-
</NavLink>
86-
<div
85+
</NavLink> */}
86+
{/* <div
8787
className="instruc_tour underline text-base text-blue-400 cursor-pointer"
8888
onClick={() => {
8989
dispatch({
@@ -92,8 +92,8 @@ export default function Header() {
9292
}}
9393
>
9494
Web guild
95-
</div>
96-
<div>
95+
</div> */}
96+
{/* <div>
9797
<Popconfirm
9898
title="Are you sure to log out?"
9999
onConfirm={confirm}
@@ -104,6 +104,16 @@ export default function Header() {
104104
<div>Log out</div>
105105
</div>
106106
</Popconfirm>
107+
</div> */}
108+
<div
109+
className="instruc_tour underline text-base text-blue-400 cursor-pointer"
110+
onClick={() => {
111+
dispatch({
112+
type: "TOGGLE_TOUR",
113+
});
114+
}}
115+
>
116+
Web guide
107117
</div>
108118
<div
109119
alt="Quân Nguyễn Thế"

‎src/components/Stat/Stat.js‎

Lines changed: 147 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,187 @@
1-
import React, { useEffect, useMemo, useState } from 'react'
2-
import { useSelector, useDispatch } from 'react-redux'
3-
import { getStat } from '../../redux/Actions/StatAction'
1+
import React, { useEffect, useMemo, useState } from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import { getStat } from "../../redux/Actions/StatAction";
44

55
export default function Stat() {
6+
const { clickList } = useSelector((state) => state.StatReducer);
7+
const [stat, setStat] = useState(7);
8+
const dispatch = useDispatch();
69

7-
const { clickList } = useSelector(state => state.StatReducer)
8-
const [stat, setStat] = useState(7)
9-
const dispatch = useDispatch()
10-
11-
useEffect(() => {
12-
dispatch(getStat(stat))
13-
}, [stat])
10+
// useEffect(() => {
11+
// dispatch(getStat(stat))
12+
// }, [stat])
1413

1514
const renderLink = () => {
16-
return clickList.clickPluginsList?.filter(item => !item.isHeader).sort((a, b) => b.clickCount - a.clickCount).map((item, index) => {
17-
return <div key={index} className='flex mb-4 last:mb-0' >
18-
<div className="font-inter font-bold text-xl text-gray-400 flex items-center flex-shrink-0">{index + 1}</div>
19-
<div className='stat-progress-each flex justify-between py-3 px-6 ml-4 w-full relative '>
20-
<div className="pr-8">
21-
<div className="text-black text-sm font-inter font-semibold limit-one-line break-all">{item.title}</div>
22-
<div className="text-gray-500 text-sm font-inter font-normal limit-one-line break-all pr-8">
23-
{item.url}
15+
return clickList.clickPluginsList
16+
?.filter((item) => !item.isHeader)
17+
.sort((a, b) => b.clickCount - a.clickCount)
18+
.map((item, index) => {
19+
return (
20+
<div key={index} className="flex mb-4 last:mb-0">
21+
<div className="font-inter font-bold text-xl text-gray-400 flex items-center flex-shrink-0">
22+
{index + 1}
23+
</div>
24+
<div className="stat-progress-each flex justify-between py-3 px-6 ml-4 w-full relative ">
25+
<div className="pr-8">
26+
<div className="text-black text-sm font-inter font-semibold limit-one-line break-all">
27+
{item.title}
28+
</div>
29+
<div className="text-gray-500 text-sm font-inter font-normal limit-one-line break-all pr-8">
30+
{item.url}
31+
</div>
32+
</div>
33+
<div>
34+
<div className="text-black text-sm font-inter font-semibold text-center">
35+
{item.clickCount === null ? 0 : item.clickCount}
36+
</div>
37+
<div className="text-gray-500 text-sm font-inter font-normal">
38+
clicks
39+
</div>
40+
</div>
41+
<div
42+
className="absolute stat-progress-bar"
43+
style={{
44+
width:
45+
(item.clickCount / clickList.totalClickPlugins) * 100 + "%",
46+
}}
47+
></div>
48+
{/* TODO: thay đổi width theo từng click count */}
2449
</div>
2550
</div>
26-
<div>
27-
<div className="text-black text-sm font-inter font-semibold text-center">{item.clickCount === null ? 0 : item.clickCount}</div>
28-
<div className="text-gray-500 text-sm font-inter font-normal">clicks</div>
29-
</div>
30-
<div className="absolute stat-progress-bar" style={{ width: (item.clickCount / clickList.totalClickPlugins) * 100 + '%' }}></div>
31-
{/* TODO: thay đổi width theo từng click count */}
32-
</div>
33-
</div>
34-
})
35-
}
51+
);
52+
});
53+
};
3654

3755
const renderSocialLink = () => {
38-
return clickList.clickSocialList?.filter(item => item.url).sort((a, b) => b.clickCount - a.clickCount).map((item, index) => {
39-
return <div key={index} className='flex mb-4 last:mb-0' >
40-
<div className="font-inter font-bold text-xl text-gray-400 flex items-center flex-shrink-0">{index + 1}</div>
41-
<div className='stat-progress-each flex justify-between py-3 px-6 ml-4 w-full relative '>
42-
<div className="pr-8">
43-
<div className="text-black text-sm font-inter font-semibold">{item.name}</div>
44-
<div className="text-gray-500 text-sm font-inter font-normal limit-one-line break-all pr-8">
45-
{item.url}
56+
return clickList.clickSocialList
57+
?.filter((item) => item.url)
58+
.sort((a, b) => b.clickCount - a.clickCount)
59+
.map((item, index) => {
60+
return (
61+
<div key={index} className="flex mb-4 last:mb-0">
62+
<div className="font-inter font-bold text-xl text-gray-400 flex items-center flex-shrink-0">
63+
{index + 1}
64+
</div>
65+
<div className="stat-progress-each flex justify-between py-3 px-6 ml-4 w-full relative ">
66+
<div className="pr-8">
67+
<div className="text-black text-sm font-inter font-semibold">
68+
{item.name}
69+
</div>
70+
<div className="text-gray-500 text-sm font-inter font-normal limit-one-line break-all pr-8">
71+
{item.url}
72+
</div>
73+
</div>
74+
<div>
75+
<div className="text-black text-sm font-inter font-semibold text-center">
76+
{item.clickCount === null ? 0 : item.clickCount}
77+
</div>
78+
<div className="text-gray-500 text-sm font-inter font-normal">
79+
clicks
80+
</div>
81+
</div>
82+
<div
83+
className="absolute stat-progress-bar"
84+
style={{
85+
width:
86+
(item.clickCount / clickList.totalClickSocial) * 100 + "%",
87+
}}
88+
></div>
89+
{/* TODO: thay đổi width theo từng click count */}
4690
</div>
4791
</div>
48-
<div>
49-
<div className="text-black text-sm font-inter font-semibold text-center">{item.clickCount === null ? 0 : item.clickCount}</div>
50-
<div className="text-gray-500 text-sm font-inter font-normal">clicks</div>
51-
</div>
52-
<div className="absolute stat-progress-bar" style={{ width: (item.clickCount / clickList.totalClickSocial) * 100 + '%' }}></div>
53-
{/* TODO: thay đổi width theo từng click count */}
54-
</div>
55-
</div>
56-
})
57-
}
92+
);
93+
});
94+
};
5895

5996
return (
60-
<div className='stat_tour' id='stat'>
97+
<div className="stat_tour" id="stat">
6198
<div className="flex justify-between xs:px-16 xs:bg-white xs:pt-32">
62-
<div className="font-inter font-semibold text-blDark text-xl leading-6 flex items-center">Stats &amp; Insights</div>
99+
<div className="font-inter font-semibold text-blDark text-xl leading-6 flex items-center">
100+
Stats &amp; Insights
101+
</div>
63102
<ul className="flex stat-toolbar">
64-
<li onClick={() => { setStat(7) }} className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ${stat === 7 ? 'active' : ''} stat-toolbar`} >
103+
<li
104+
onClick={() => {
105+
setStat(7);
106+
}}
107+
className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ${
108+
stat === 7 ? "active" : ""
109+
} stat-toolbar`}
110+
>
65111
7 Days
66112
</li>
67-
<li onClick={() => { setStat(30) }} className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ml-4 ${stat === 30 ? 'active' : ''} stat-toolbar`}>
113+
<li
114+
onClick={() => {
115+
setStat(30);
116+
}}
117+
className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ml-4 ${
118+
stat === 30 ? "active" : ""
119+
} stat-toolbar`}
120+
>
68121
30 Days
69122
</li>
70-
<li onClick={() => { setStat(1000) }} className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ml-4 ${stat === 1000 ? 'active' : ''} stat-toolbar`}>
123+
<li
124+
onClick={() => {
125+
setStat(1000);
126+
}}
127+
className={`cursor-pointer transition-all relative text-sm font-semibold hover:text-gray-800 duration-50 font-inter pb-1 ml-4 ${
128+
stat === 1000 ? "active" : ""
129+
} stat-toolbar`}
130+
>
71131
All time
72132
</li>
73133
</ul>
74134
</div>
75135

76-
<div className='bg-white round-sm shadow-sm p-8 mt-6'>
77-
<div className="font-inter font-semibold text-black text-xl leading-6 mb-6">Top Links</div>
78-
{clickList.clickPluginsList?.length === 0 &&
79-
<div className='flex justify-center items-center'>
136+
<div className="bg-white round-sm shadow-sm p-8 mt-6">
137+
<div className="font-inter font-semibold text-black text-xl leading-6 mb-6">
138+
Top Links
139+
</div>
140+
{clickList.clickPluginsList?.length === 0 && (
141+
<div className="flex justify-center items-center">
80142
<div className="grey-border-block w-2/5 mr-4"></div>
81-
<div className="text-gray-500 text-sm font-inter font-normal " style={{ userSelect: 'none' }}>No data</div>
143+
<div
144+
className="text-gray-500 text-sm font-inter font-normal "
145+
style={{ userSelect: "none" }}
146+
>
147+
No data
148+
</div>
82149
<div className="grey-border-block w-2/5 ml-4"></div>
83-
</div>}
150+
</div>
151+
)}
84152
{renderLink()}
85153
</div>
86154

87-
<div className='bg-white round-sm shadow-sm p-8 mt-6'>
88-
<div className="font-inter font-semibold text-black text-xl leading-6 mb-6">Top Socials</div>
89-
{clickList.clickSocialList?.filter(item => item.url).length === 0 &&
90-
<div className='flex justify-center items-center'>
155+
<div className="bg-white round-sm shadow-sm p-8 mt-6">
156+
<div className="font-inter font-semibold text-black text-xl leading-6 mb-6">
157+
Top Socials
158+
</div>
159+
{clickList.clickSocialList?.filter((item) => item.url).length === 0 && (
160+
<div className="flex justify-center items-center">
91161
<div className="grey-border-block w-2/5 mr-4"></div>
92-
<div className="text-gray-500 text-sm font-inter font-normal " style={{ userSelect: 'none' }}>No data</div>
162+
<div
163+
className="text-gray-500 text-sm font-inter font-normal "
164+
style={{ userSelect: "none" }}
165+
>
166+
No data
167+
</div>
93168
<div className="grey-border-block w-2/5 ml-4"></div>
94-
</div>}
169+
</div>
170+
)}
95171
{renderSocialLink()}
96172
</div>
97173

98-
<div className='bg-white round-sm shadow-sm p-8 mt-6 flex justify-between items-center'>
99-
<div className="font-inter font-semibold text-black text-xl leading-6">Profile Views</div>
100-
<div className='flex flex-col items-center'>
101-
<p className='font-inter font-semibold text-black text-xl leading-6 underline'>
174+
<div className="bg-white round-sm shadow-sm p-8 mt-6 flex justify-between items-center">
175+
<div className="font-inter font-semibold text-black text-xl leading-6">
176+
Profile Views
177+
</div>
178+
<div className="flex flex-col items-center">
179+
<p className="font-inter font-semibold text-black text-xl leading-6 underline">
102180
{clickList.totalClickProfile}
103181
</p>
104-
<span className='text-base font-normal'>views</span>
182+
<span className="text-base font-normal">views</span>
105183
</div>
106184
</div>
107185
</div>
108-
)
186+
);
109187
}

‎src/pages/MainPage/MainPage.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { history } from "../../App";
66
import { getAllUserProfile } from "../../redux/Actions/ProfileAction";
77
import { defaultThemes } from "../../utils/themes";
88

9+
let firstTime = true;
10+
911
export default function Mainpage() {
1012
const [isAnimate, setIsAnimate] = useState(false);
1113
const header = useRef(null);
@@ -15,13 +17,24 @@ export default function Mainpage() {
1517
const dispatch = useDispatch();
1618

1719
useEffect(() => {
18-
dispatch(getAllUserProfile());
20+
// dispatch(getAllUserProfile());
1921
const onScroll = () => handleScroll(window.pageYOffset);
2022
// window.removeEventListener('scroll', onScroll);
2123
window.addEventListener("scroll", onScroll, { passive: true });
2224
return () => window.removeEventListener("scroll", onScroll);
2325
}, []);
2426

27+
useEffect(() => {
28+
if (firstTime) {
29+
dispatch({
30+
type: "TOGGLE_TOUR",
31+
});
32+
}
33+
return () => {
34+
firstTime = false;
35+
};
36+
});
37+
2538
useEffect(() => {
2639
if (isTouring) {
2740
dispatch({

‎src/pages/WebTour/WebTour.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const steps = [
1414
{
1515
selector: "",
1616
content:
17-
"Chào cậu! mình là Khanh Noi (/◕ヮ◕)/ - hướng dẫn viên tại GHTKlink! Mình sẽ hướng dẫn cậu đi thăm quan và giới thiệu cho cậu hiểu rõ hơn về GHTKlink nhé! Được rồi đi thôi!",
17+
"Chào cậu! mình là Khanh Noi (/◕ヮ◕)/ - hướng dẫn viên tại Biolink! Mình sẽ hướng dẫn cậu đi thăm quan và giới thiệu cho cậu hiểu rõ hơn về Biolink nhé! Được rồi đi thôi!",
1818
path: "/",
1919
},
2020
{
@@ -103,7 +103,7 @@ const steps = [
103103
{
104104
selector: "",
105105
content:
106-
"Vậy là chuyến thăm quan được thực hiện bởi Khanh Noi đến đây kết thúc rùi (;´༎ຶД༎ຶ`) Noi hy vọng cậu sẽ có một khoảng thời gian vui vẻ khi trải nghiệm GHTKlink được thực hiện bởi sieu nhan cuong phong! nha.",
106+
"Vậy là chuyến thăm quan được thực hiện bởi Khanh Noi đến đây kết thúc rùi (;´༎ຶД༎ຶ`) Noi hy vọng cậu sẽ có một khoảng thời gian vui vẻ khi trải nghiệm Biolink được thực hiện bởi sieu nhan cuong phong! nha.",
107107
path: "/",
108108
},
109109
];

‎src/redux/Reducers/LinkReducer.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,15 @@ const initialState = {
2323
{
2424
id: 0,
2525
name: "instagram",
26-
url: "Link/insta",
26+
url: "https://www.instagram.com/d4_l1ng/",
2727
},
28+
{
29+
id: 3,
30+
name: "facebook",
31+
url: "https://www.facebook.com/profile.php?id=100005135208157",
32+
},
33+
],
34+
unActiveSocial: [
2835
{
2936
id: 1,
3037
name: "twitter",
@@ -35,13 +42,6 @@ const initialState = {
3542
name: "tiktok",
3643
url: "Link/tittok",
3744
},
38-
],
39-
unActiveSocial: [
40-
{
41-
id: 3,
42-
name: "facebook",
43-
url: "",
44-
},
4545
{
4646
id: 4,
4747
name: "mail",

0 commit comments

Comments
 (0)