Skip to content

Commit 85bee50

Browse files
coderwassananmolcoderwassananmol
authored
Merge pull request #191 from akankshat05/header
Fix: convert header to functional component
2 parents 549984a + 019be88 commit 85bee50

File tree

1 file changed

+119
-136
lines changed

1 file changed

+119
-136
lines changed

‎components/Header.js‎

Lines changed: 119 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,104 @@
1-
import React, { Component } from "react";
1+
import React, { useState } from "react";
22
import Link from "next/link";
3-
import { withSession } from "../hooks/withSession";
43
import { signOut } from "next-auth/react";
4+
import { useSession } from "next-auth/react";
55

6-
class Header extends Component {
7-
constructor() {
8-
super();
9-
this.state = {
10-
isDropDownOpen: false,
11-
};
12-
}
13-
toggleDropDown = () => {
14-
this.setState({ isDropDownOpen: !this.state.isDropDownOpen });
6+
function Header(props) {
7+
const [isDropDownOpen, setIsDropDownOpen] = useState(false);
8+
const { data: session } = useSession();
9+
10+
const toggleDropDown = () => {
11+
setIsDropDownOpen(!isDropDownOpen);
1512
};
16-
render() {
17-
const { data: session } = this.props.session;
18-
return (
19-
<div className="marginTop">
20-
<style jsx>
21-
{`
22-
.marginTop {
23-
margin-top: 20px;
24-
}
25-
.user-info__right {
26-
margin-left: auto !important;
27-
padding: 0 20px;
28-
margin-bottom: 20px;
29-
}
30-
.user-dropdown {
31-
position: absolute;
32-
right: 20px;
33-
margin-top: 5px;
34-
background: white;
35-
border: 1px solid lightgrey;
36-
width: 150px;
37-
padding: 1px;
38-
}
39-
.user-dropdown p {
40-
margin: 0;
41-
}
42-
.user-dropdown-option {
43-
display: flex;
44-
justify-content: space-between;
45-
cursor: pointer;
46-
padding: 9px;
47-
}
48-
.user-dropdown-option:hover {
49-
background: #f5f5f56d;
50-
}
51-
`}
52-
</style>
53-
<div className="cdx-tabs">
54-
<div className="cdx-tabs__header">
55-
<ul
56-
className="cdx-tabs__list"
57-
role="tablist"
58-
aria-activedescendant="form-tabs-1"
59-
>
60-
<Link href="/">
61-
<li
62-
id="form-tabs-1-label"
63-
className="cdx-tabs__list__item"
64-
role="presentation"
13+
14+
return (
15+
<div className="marginTop">
16+
<style jsx>
17+
{`
18+
.marginTop {
19+
margin-top: 20px;
20+
}
21+
.user-info__right {
22+
margin-left: auto !important;
23+
padding: 0 20px;
24+
margin-bottom: 20px;
25+
}
26+
.user-dropdown {
27+
position: absolute;
28+
right: 20px;
29+
margin-top: 5px;
30+
background: white;
31+
border: 1px solid lightgrey;
32+
width: 150px;
33+
padding: 1px;
34+
}
35+
.user-dropdown p {
36+
margin: 0;
37+
}
38+
.user-dropdown-option {
39+
display: flex;
40+
justify-content: space-between;
41+
cursor: pointer;
42+
padding: 9px;
43+
}
44+
.user-dropdown-option:hover {
45+
background: #f5f5f56d;
46+
}
47+
`}
48+
</style>
49+
<div className="cdx-tabs">
50+
<div className="cdx-tabs__header">
51+
<ul
52+
className="cdx-tabs__list"
53+
role="tablist"
54+
aria-activedescendant="form-tabs-1"
55+
>
56+
<Link href="/">
57+
<li
58+
id="form-tabs-1-label"
59+
className="cdx-tabs__list__item"
60+
role="presentation"
61+
>
62+
<label
63+
htmlFor="form-tabs-1-input"
64+
role="tab"
65+
aria-selected={props.page === "index" ? "true" : "false"}
6566
>
66-
<label
67-
for="form-tabs-1-input"
68-
role="tab"
69-
aria-selected={
70-
this.props.page === "index" ? "true" : "false"
71-
}
72-
>
73-
Upload
74-
</label>
75-
</li>
76-
</Link>
77-
<Link href="/queue">
78-
<li
79-
id="form-tabs-2-label"
80-
className="cdx-tabs__list__item"
81-
role="presentation"
67+
Upload
68+
</label>
69+
</li>
70+
</Link>
71+
<Link href="/queue">
72+
<li
73+
id="form-tabs-2-label"
74+
className="cdx-tabs__list__item"
75+
role="presentation"
76+
>
77+
<label
78+
htmlFor="form-tabs-2-input"
79+
role="tab"
80+
aria-selected={props.page === "queue" ? "true" : "false"}
8281
>
83-
<label
84-
for="form-tabs-2-input"
85-
role="tab"
86-
aria-selected={
87-
this.props.page === "queue" ? "true" : "false"
88-
}
89-
>
90-
Queue
91-
</label>
92-
</li>
93-
</Link>
94-
<Link href="/stats">
95-
<li
96-
id="form-tabs-3-label"
97-
className="cdx-tabs__list__item"
98-
role="presentation"
82+
Queue
83+
</label>
84+
</li>
85+
</Link>
86+
<Link href="/stats">
87+
<li
88+
id="form-tabs-3-label"
89+
className="cdx-tabs__list__item"
90+
role="presentation"
91+
>
92+
<label
93+
htmlFor="form-tabs-3-input"
94+
role="tab"
95+
aria-selected={props.page === "stats" ? "true" : "false"}
9996
>
100-
<label
101-
for="form-tabs-3-input"
102-
role="tab"
103-
aria-selected={
104-
this.props.page === "stats" ? "true" : "false"
105-
}
106-
>
107-
Stats
108-
</label>
109-
</li>
110-
</Link>
111-
{/* <Link href="/faq">
97+
Stats
98+
</label>
99+
</li>
100+
</Link>
101+
{/* <Link href="/faq">
112102
<li
113103
id="form-tabs-3-label"
114104
className="cdx-tabs__list__item"
@@ -123,39 +113,32 @@ class Header extends Component {
123113
</label>
124114
</li>
125115
</Link> */}
126-
</ul>
127-
{session && (
128-
<div className="user-info__right">
129-
<button
130-
className="cdx-button"
131-
onClick={() => this.toggleDropDown()}
132-
>
133-
{session && session.user.name}
134-
<span
135-
className="cdx-button__icon cdx-css-icon--expand-icon"
136-
aria-hidden="true"
137-
></span>
138-
</button>
139-
{this.state.isDropDownOpen && (
140-
<div className="user-dropdown">
141-
<div
142-
className="user-dropdown-option"
143-
onClick={() => signOut()}
144-
>
145-
<p>Logout</p>
146-
<span className="cdx-css-icon--logout-icon"></span>
147-
</div>
116+
</ul>
117+
{session && (
118+
<div className="user-info__right">
119+
<button className="cdx-button" onClick={() => toggleDropDown()}>
120+
{session && session.user.name}
121+
<span
122+
className="cdx-button__icon cdx-css-icon--expand-icon"
123+
aria-hidden="true"
124+
></span>
125+
</button>
126+
{isDropDownOpen && (
127+
<div className="user-dropdown">
128+
<div
129+
className="user-dropdown-option"
130+
onClick={() => signOut()}
131+
>
132+
<p>Logout</p>
133+
<span className="cdx-css-icon--logout-icon"></span>
148134
</div>
149-
)}
150-
</div>
151-
)}
152-
</div>
135+
</div>
136+
)}
137+
</div>
138+
)}
153139
</div>
154140
</div>
155-
);
156-
}
141+
</div>
142+
);
157143
}
158-
159-
const HeaderWithSession = withSession(Header);
160-
161-
export default HeaderWithSession;
144+
export default Header;

0 commit comments

Comments
 (0)