Skip to content

Commit 6e75c2c

Browse files
ben221199ben221199
committed
Add history buttons
1 parent f28637f commit 6e75c2c

4 files changed

Lines changed: 172 additions & 15 deletions

File tree

‎src/AppHistory.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {RefObject, useEffect, useRef, useState} from "react";
2+
import {Location, NavigationType, useLocation, useNavigationType} from "react-router";
3+
4+
function useAppHistory(): object{
5+
const location: Location = useLocation();
6+
const navigationType: NavigationType = useNavigationType();
7+
8+
const [idx, setIdx] = useState(-1);
9+
10+
const [index, setIndex] = useState(-1);
11+
const stack: RefObject<object[]> = useRef<object[]>([location]);
12+
13+
useEffect((): void => {
14+
if(navigationType===NavigationType.Push){
15+
stack.current.splice(index+1);
16+
stack.current.push(location);
17+
setIdx(history.state.idx);
18+
setIndex(index+1);
19+
}
20+
if(navigationType===NavigationType.Pop){
21+
if(idx>history.state.idx){
22+
setIndex(index-1);
23+
}
24+
if(idx<history.state.idx){
25+
setIndex(index+1);
26+
}
27+
setIdx(history.state.idx);
28+
}
29+
if(navigationType===NavigationType.Replace){
30+
stack.current[index] = location;
31+
}
32+
},[location,navigationType]);
33+
34+
function getPrevious(): object[]{
35+
return stack.current.slice(0,index);
36+
}
37+
function getNext(): object[]{
38+
return stack.current.slice(index+1);
39+
}
40+
41+
return {
42+
getNext,
43+
getPrevious,
44+
};
45+
}
46+
47+
export default useAppHistory;

‎src/components/CustomSVG.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,20 @@ function CustomSVG({icon,viewBox,style}): JSX.Element {
1111
</g>
1212
);
1313
}
14+
if(icon==='arrow-left'){
15+
element = (
16+
<g fill="none" fillRule="evenodd" strokeLinecap="round" strokeWidth="2">
17+
<polyline points="15 18 9 12 15 6"/>
18+
</g>
19+
);
20+
}
21+
if(icon==='arrow-right'){
22+
element = (
23+
<g fill="none" fillRule="evenodd" strokeLinecap="round" strokeWidth="2">
24+
<polyline points="9 18 15 12 9 6"/>
25+
</g>
26+
);
27+
}
1428
if (icon === 'lbc') {
1529
element = (
1630
<>
@@ -73,6 +87,15 @@ function CustomSVG({icon,viewBox,style}): JSX.Element {
7387
</>
7488
);
7589
}
90+
if(icon==='menu'){
91+
element = (
92+
<g strokeWidth="2">
93+
<line x1="3" y1="12" x2="21" y2="12"/>
94+
<line x1="3" y1="6" x2="21" y2="6"/>
95+
<line x1="3" y1="18" x2="21" y2="18"/>
96+
</g>
97+
);
98+
}
7699

77100
return (
78101
<svg viewBox={viewBox} style={style}>

‎src/components/Header.tsx‎

Lines changed: 94 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,107 @@
11
import {JSX} from "react";
2-
import {Link} from "react-router";
2+
import {Link, NavLink, NavigateFunction, useNavigate} from "react-router";
3+
4+
import useAppHistory from "../AppHistory";
35
import CustomSVG from "./CustomSVG";
46

57
function Header(): JSX.Element {
8+
const appHistory: object = useAppHistory();
9+
10+
const navigate: NavigateFunction = useNavigate();
11+
612
return (
713
<header>
8-
<div style={{display:'flex',justifyContent:'space-between',overflow:'hidden',padding:'10px 16px',whiteSpace:'nowrap'}}>
9-
<div style={{justifyContent:'flex-start'}}>
10-
<Link className="hoverHeaderButton" style={{fill:'white',textDecoration:'none'}} to="/">
11-
<CustomSVG icon="logo" style={{height:'40px',verticalAlign:'middle',width:'40px'}} viewBox="0 0 322 254"/>
12-
<span style={{fontSize:'16px',fontWeight:'700',marginLeft:'10px',verticalAlign:'middle'}}>LBRY Web</span>
14+
<div style={{
15+
display: 'flex',
16+
justifyContent: 'space-between',
17+
overflow: 'hidden',
18+
padding: '10px 16px',
19+
whiteSpace: 'nowrap'
20+
}}>
21+
<div style={{justifyContent: 'flex-start'}}>
22+
<Link className="hoverHeaderButtonFill" to="#menu" style={{
23+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
24+
borderRadius: '1.5rem',
25+
display: 'inline-block',
26+
height: '40px',
27+
textAlign: 'center',
28+
verticalAlign: 'middle',
29+
width: '40px'
30+
}}>
31+
<CustomSVG icon="menu" viewBox="0 0 24 24" style={{height: '16px', padding: '12px 0'}}/>
32+
</Link>
33+
<Link className="hoverHeaderButton"
34+
style={{fill: 'white', margin: '0 10px', textDecoration: 'none'}} to="/">
35+
<CustomSVG icon="logo" style={{height: '40px', verticalAlign: 'middle', width: '40px'}}
36+
viewBox="0 0 322 254"/>
37+
<span style={{
38+
fontSize: '16px',
39+
fontWeight: '700',
40+
marginLeft: '10px',
41+
verticalAlign: 'middle'
42+
}}>LBRY Web</span>
1343
</Link>
1444
</div>
15-
<div style={{justifyContent:'center'}}>
16-
{/*TODO CENTER*/}
45+
<div style={{justifyContent: 'center'}}>
46+
<NavLink className="hoverHeaderButtonFill" disabled={appHistory.getPrevious().length === 0}
47+
onClick={(appHistory.getPrevious().length > 0)?((): void => {navigate(-1)}):null} to={null} style={{
48+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
49+
borderRadius: '1.5rem',
50+
display: 'inline-block',
51+
height: '40px',
52+
marginRight: '10px',
53+
textAlign: 'center',
54+
verticalAlign: 'middle',
55+
width: '40px'
56+
}}>
57+
<CustomSVG icon="arrow-left" viewBox="0 0 24 24"
58+
style={{height: '18px', padding: '11px 0'}}/>
59+
</NavLink>
60+
<NavLink className="hoverHeaderButtonFill" disabled={appHistory.getNext().length === 0}
61+
onClick={(appHistory.getNext().length > 0)?((): void => {navigate(1)}):null} to={null} style={{
62+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
63+
borderRadius: '1.5rem',
64+
display: 'inline-block',
65+
height: '40px',
66+
marginRight: '10px',
67+
textAlign: 'center',
68+
verticalAlign: 'middle',
69+
width: '40px'
70+
}}>
71+
<CustomSVG icon="arrow-right" viewBox="0 0 24 24"
72+
style={{height: '18px', padding: '11px 0'}}/>
73+
</NavLink>
1774
</div>
18-
<div style={{justifyContent:'flex-end'}}>
19-
<Link className="hoverHeaderButton" style={{backgroundColor:'rgba(45, 45, 45, 0.7)',borderRadius:'6px',display:'inline-block',height:'40px',margin:'0 10px',padding:'0 10px',textDecoration:'none',verticalAlign:'middle'}} to="/wallet">
20-
<CustomSVG icon="lbc" viewBox="0 0 24 24" style={{height:'16px',padding:'12px 0',verticalAlign:'middle'}}/>
21-
<span style={{fontSize:'16px',fontWeight:'700',marginLeft:'6px',verticalAlign:'middle'}}>0.10</span>
75+
<div style={{justifyContent: 'flex-end'}}>
76+
<Link className="hoverHeaderButton" style={{
77+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
78+
borderRadius: '6px',
79+
display: 'inline-block',
80+
height: '40px',
81+
margin: '0 10px',
82+
padding: '0 10px',
83+
textDecoration: 'none',
84+
verticalAlign: 'middle'
85+
}} to="/wallet">
86+
<CustomSVG icon="lbc" viewBox="0 0 24 24"
87+
style={{height: '16px', padding: '12px 0', verticalAlign: 'middle'}}/>
88+
<span style={{
89+
fontSize: '16px',
90+
fontWeight: '700',
91+
marginLeft: '6px',
92+
verticalAlign: 'middle'
93+
}}>0.10</span>
2294
</Link>
23-
<Link className="hoverHeaderButtonFill" to="/settings" style={{backgroundColor:'rgba(45, 45, 45, 0.7)',borderRadius:'1.5rem',display:'inline-block',height:'40px',textAlign:'center',verticalAlign:'middle',width:'40px'}}>
24-
<CustomSVG icon="account" viewBox="0 0 24 24" style={{height:'18px',padding:'11px 0'}}/>
95+
<Link className="hoverHeaderButtonFill" to="/settings" style={{
96+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
97+
borderRadius: '1.5rem',
98+
display: 'inline-block',
99+
height: '40px',
100+
textAlign: 'center',
101+
verticalAlign: 'middle',
102+
width: '40px'
103+
}}>
104+
<CustomSVG icon="account" viewBox="0 0 24 24" style={{height: '18px', padding: '11px 0'}}/>
25105
</Link>
26106
</div>
27107
</div>

‎src/main.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,21 @@ header{
2525

2626
.hoverHeaderButtonFill{
2727
fill:white;
28+
stroke:white;
2829
}
2930

3031
.hoverHeaderButton:hover{
3132
color:rgb(43, 187, 144);
3233
}
3334

34-
.hoverHeaderButtonFill:hover{
35+
.hoverHeaderButtonFill:not([disabled]):hover{
3536
fill:rgb(43, 187, 144);
37+
stroke:rgb(43, 187, 144);
38+
}
39+
40+
.hoverHeaderButtonFill[disabled]{
41+
cursor:default;
42+
opacity: .3;
3643
}
3744

3845
main{

0 commit comments

Comments
 (0)