Skip to content

Commit 5d890d9

Browse files
veiled-coderveiled-coder
committed
refactored HOC to render props
1 parent 9a95904 commit 5d890d9

File tree

11 files changed

+219
-154
lines changed

11 files changed

+219
-154
lines changed

‎src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function App() {
2424
modalState={showModal}
2525
setshowModalFalse={() => setshowModal(false)}
2626
/>
27-
<thetruecontext.Provider value={trueboolean}>
27+
<thetruecontext.Provider value={trueboolean}>
2828
<Nav />
2929
</thetruecontext.Provider>
3030

‎src/Nav.js

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,64 @@ import Button from "./components/Button";
77
import { faBars } from "@fortawesome/free-solid-svg-icons";
88
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
99
import { Link } from "react-router-dom";
10-
import withToggler from "./components/HOCS/withToggler";
11-
12-
function Nav({ toggleValue, Toggling }) {
13-
console.log(toggleValue);
10+
// import withToggler from "./components/HOCS/withToggler";
11+
import Toggler from "./components/Toggler";
12+
function Nav() {
1413
return (
15-
<section className="nav--container grid">
16-
<div className="nav--container_2">
17-
<div className="nav-section_content">
18-
<div className="logo--container">
19-
<img src={home} alt="a home icon" className="home--img" />
20-
<img src={logo} className="meta--logo" alt="metabnb logo" />
21-
</div>
22-
<nav>
23-
<ul className="nav-links">
24-
<Link to="/">
25-
{" "}
26-
<li className="nav-link">Home</li>
27-
</Link>
28-
<Link to="/place">
29-
<li className="nav-link">Place to stay</li>
30-
</Link>
31-
<li className="nav-link">NFTs</li>
32-
<li className="nav-link">Community</li>
33-
</ul>
34-
</nav>
35-
<div>
36-
{" "}
37-
<Button name="Connect wallet" styleclass="nav-btn" />
38-
</div>
14+
<Toggler
15+
renderprops={function (show, toggle) {
16+
return (
17+
<section className="nav--container grid">
18+
<div className="nav--container_2">
19+
<div className="nav-section_content">
20+
<div className="logo--container">
21+
<img src={home} alt="a home icon" className="home--img" />
22+
<img src={logo} className="meta--logo" alt="metabnb logo" />
23+
</div>
24+
<nav>
25+
<ul className="nav-links">
26+
<Link to="/">
27+
{" "}
28+
<li className="nav-link">Home</li>
29+
</Link>
30+
<Link to="/place">
31+
<li className="nav-link">Place to stay</li>
32+
</Link>
33+
<li className="nav-link">NFTs</li>
34+
<li className="nav-link">Community</li>
35+
</ul>
36+
</nav>
37+
<div>
38+
{" "}
39+
<Button name="Connect wallet" styleclass="nav-btn" />
40+
</div>
3941

40-
<div className="hamburger-menu" onClick={Toggling}>
41-
<FontAwesomeIcon icon={faBars} className="hamburger-menu" />
42-
</div>
43-
</div>
44-
{/* TOGGLE MENU LIST */}
45-
{toggleValue === false ? (
46-
<div className="mobile-menu_list">
47-
<Link to="/">
48-
<p onClick={Toggling}>Home</p>
49-
</Link>
50-
<Link to="/place">
51-
<p onClick={Toggling}>Place to stay</p>
52-
</Link>
53-
<p>NFTs</p>
54-
<p>Community</p>
55-
</div>
56-
) : (
57-
""
58-
)}
59-
</div>
60-
</section>
42+
<div className="hamburger-menu" onClick={toggle}>
43+
<FontAwesomeIcon icon={faBars} className="hamburger-menu" />
44+
</div>
45+
</div>
46+
{/* TOGGLE MENU LIST */}
47+
{show ? (
48+
<div className="mobile-menu_list">
49+
<Link to="/">
50+
<p onClick={toggle}>Home</p>
51+
</Link>
52+
<Link to="/place">
53+
<p onClick={toggle}>Place to stay</p>
54+
</Link>
55+
<p>NFTs</p>
56+
<p>Community</p>
57+
</div>
58+
) : (
59+
""
60+
)}
61+
</div>
62+
</section>
63+
);
64+
}}
65+
/>
6166
);
6267
}
6368

64-
export default withToggler(Nav);
69+
// export default withToggler(Nav);
70+
export default Nav;

‎src/components/HOCS/withToggler.js

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { React, Component } from "react";
1+
// import { React, Component } from "react";
22

3-
function withToggler(Component) {
4-
return function (props) {
5-
return <Toggler CalledComp={Component} {...props} />;
6-
};
7-
}
3+
// function withToggler(Component) {
4+
// return function (props) {
5+
// return <Toggler CalledComp={Component} {...props} />;
6+
// };
7+
// }
88

9-
class Toggler extends Component {
10-
state = {
11-
togglestate: "false",
12-
};
13-
toggling = () => {
14-
this.setState({ togglestate: !this.state.togglestate });
15-
};
9+
// class Toggler extends Component {
10+
// state = {
11+
// togglestate: "false",
12+
// };
13+
// toggling = () => {
14+
// this.setState({ togglestate: !this.state.togglestate });
15+
// };
1616

17-
render() {
18-
const TheCalledComp = this.props.CalledComp;
17+
// render() {
18+
// const TheCalledComp = this.props.CalledComp;
1919

20-
return (
21-
<div>
22-
<TheCalledComp
23-
toggleValue={this.state.togglestate}
24-
Toggling={this.toggling}
25-
/>
26-
</div>
27-
);
28-
}
29-
}
20+
// return (
21+
// <div>
22+
// <TheCalledComp
23+
// toggleValue={this.state.togglestate}
24+
// Toggling={this.toggling}
25+
// />
26+
// </div>
27+
// );
28+
// }
29+
// }
3030

31-
export default withToggler;
31+
// export default withToggler;

‎src/components/Modal.js

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from "react";
22
import "../styles/modal.css";
3-
import cancel from '../images/cancel.svg'
3+
import cancel from "../images/cancel.svg";
4+
import walletconnect from "../images/walletconnect.svg";
5+
import metamask from "../images/metabox.svg";
6+
7+
import arrow from "../images/arrow.svg";
48

59
function Modal({ modalState, setshowModalFalse }) {
610
const modal = {
@@ -10,11 +14,11 @@ function Modal({ modalState, setshowModalFalse }) {
1014
left: "50%",
1115
transform: "translate(-50%,-50%)",
1216
zIndex: 6,
13-
padding:'1rem 0',
14-
17+
padding: "1rem 0",
18+
1519
display: "flex",
1620
flexDirection: "column",
17-
21+
1822
borderRadius: "10px",
1923
};
2024
const overlay = {
@@ -33,12 +37,34 @@ padding:'1rem 0',
3337
<div style={modal} className="modal">
3438
<div className="connect">
3539
<p>Connect wallet</p>
36-
<img src={cancel} alt='close modal icon' onClick={setshowModalFalse}/>
40+
<img
41+
src={cancel}
42+
alt="close modal icon"
43+
onClick={setshowModalFalse}
44+
/>
3745
</div>
3846
<hr className="hr"></hr>
3947
<div className="wallet-type">
40-
<p>Choose your preferred knowledge</p>
41-
48+
<p>Choose your preferred wallet:</p>
49+
<div className="meta-box modal-box">
50+
<div className="metabox-content modal-box_content">
51+
<img className="modal-icon" src={metamask} alt="meta mask" />
52+
<p>Metamask</p>
53+
</div>
54+
<div>
55+
<img src={arrow} alt="an arrow" />
56+
</div>
57+
</div>
58+
{/* second box */}
59+
<div className="meta-box modal-box">
60+
<div className="metabox-content modal-box_content">
61+
<img className="modal-icon" src={walletconnect} alt="connect wallet" />
62+
<p>WalletConnect</p>
63+
</div>
64+
<div>
65+
<img src={arrow} alt="an arrow" />
66+
</div>
67+
</div>
4268
</div>
4369
</div>
4470
</div>

‎src/components/Toggler.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { Component } from "react";
2+
3+
export default class Toggler extends Component {
4+
state = {
5+
show: this.props.showValue,
6+
};
7+
toggle = () => {
8+
this.setState({
9+
show: !this.state.show,
10+
});
11+
};
12+
render() {
13+
// return <div>{this.props.renderprops(this.state.show, this.toggle)}</div>;
14+
return <div>{this.props.renderprops(this.state.show,this.toggle)}</div>;
15+
}
16+
}

‎src/images/arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/images/metabox.svg

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)