Skip to content

Commit 22373ef

Browse files
quentinguideequentinguidee
committed
[components/header] JS -> TS
1 parent 9b52943 commit 22373ef

21 files changed

+265
-189
lines changed

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.5.0",
88
"@testing-library/user-event": "^7.2.1",
9+
"@types/jest": "^26.0.22",
10+
"@types/node": "^14.14.37",
11+
"@types/react": "^17.0.3",
12+
"@types/react-dom": "^17.0.3",
913
"classnames": "^2.3.1",
1014
"firebase": "^7.17.2",
1115
"jszip": "^3.5.0",
@@ -22,7 +26,8 @@
2226
"react-resize-detector": "^4.2.3",
2327
"react-reveal": "^1.2.2",
2428
"react-router-dom": "^5.2.0",
25-
"react-scripts": "^3.4.1"
29+
"react-scripts": "^3.4.1",
30+
"typescript": "^4.2.4"
2631
},
2732
"scripts": {
2833
"start": "react-app-rewired start",
@@ -48,6 +53,7 @@
4853
]
4954
},
5055
"devDependencies": {
56+
"@types/react-router-dom": "^5.1.7",
5157
"react-app-rewired": "^2.1.6"
5258
}
5359
}

‎src/components/header/Header.js renamed to ‎src/components/header/Header.tsx

+54-36
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
1-
import React, { Component } from 'react'
2-
import { FormattedMessage as Message } from 'react-intl'
3-
import GithubConnector from '../../GithubConnector'
4-
import classNames from 'classnames'
5-
6-
import styles from './sass/header.module.sass'
7-
8-
import HeaderLogo from './HeaderLogo'
9-
import HeaderAccount from './HeaderAccount'
10-
import HeaderHamburger from './HeaderHamburger'
11-
import HeaderLink from './HeaderLink'
12-
import HeaderLinks from './HeaderLinks'
13-
import HeaderSeparator from './HeaderSeparator'
14-
import HeaderSpacer from './HeaderSpacer'
15-
16-
export default class Header extends Component {
17-
constructor(props) {
1+
import React, { Component } from "react";
2+
3+
import { FormattedMessage as Message } from "react-intl";
4+
import GithubConnector from "../../GithubConnector";
5+
import classNames from "classnames";
6+
7+
import HeaderLogo from "./HeaderLogo";
8+
import HeaderAccount from "./HeaderAccount";
9+
import HeaderHamburger from "./HeaderHamburger";
10+
import HeaderLink from "./HeaderLink";
11+
import HeaderLinks from "./HeaderLinks";
12+
import HeaderSeparator from "./HeaderSeparator";
13+
import HeaderSpacer from "./HeaderSpacer";
14+
15+
import styles from "./sass/Header.module.sass";
16+
17+
type HeaderProps = React.HTMLProps<HTMLHeadElement>;
18+
19+
type HeaderState = {
20+
isOpened: boolean;
21+
connector: GithubConnector;
22+
};
23+
24+
export default class Header extends Component<HeaderProps, HeaderState> {
25+
constructor(props: HeaderProps) {
1826
super(props);
19-
27+
2028
this.state = {
2129
isOpened: false,
22-
connector: GithubConnector.getInstance()
30+
connector: GithubConnector.getInstance(),
2331
};
2432

2533
this.login = this.login.bind(this);
@@ -29,19 +37,19 @@ export default class Header extends Component {
2937
this.closeHamburger = this.closeHamburger.bind(this);
3038

3139
this.onAuthStateChanged = this.onAuthStateChanged.bind(this);
32-
40+
3341
this.componentDidMount = this.componentDidMount.bind(this);
3442
this.componentWillUnmount = this.componentWillUnmount.bind(this);
3543
}
36-
44+
3745
componentDidMount() {
3846
this.state.connector.onAuthStateChanged(this.onAuthStateChanged);
3947
}
40-
48+
4149
componentWillUnmount() {
4250
this.state.connector.removeAuthStateChanged(this.onAuthStateChanged);
4351
}
44-
52+
4553
onAuthStateChanged() {
4654
this.forceUpdate();
4755
}
@@ -55,7 +63,7 @@ export default class Header extends Component {
5563
}
5664

5765
toggleHamburger() {
58-
this.setState({ isOpened: !this.state.isOpened });
66+
this.setState({ isOpened: !this.state.isOpened });
5967
}
6068

6169
closeHamburger() {
@@ -66,26 +74,36 @@ export default class Header extends Component {
6674
let isLogged = this.state.connector.isLogged();
6775

6876
let messages = {
69-
omega: <Message id='toolbar.omega' defaultMessage='Omega' />,
70-
install: <Message id='toolbar.install' defaultMessage='Install' />,
71-
releases: <Message id='toolbar.releases' defaultMessage='Releases' />,
72-
simulator: <Message id='toolbar.simulator' defaultMessage='Simulator' />,
73-
wiki: <Message id='toolbar.wiki' defaultMessage='Wiki' />,
74-
IDE: <Message id='toolbar.ide' defaultMessage='Python IDE' />,
75-
gitHub: <Message id='toolbar.github' defaultMessage='GitHub' />,
76-
login: <Message id='toolbar.login' defaultMessage='Login with Github' />,
77-
logout: <Message id='toolbar.logout' defaultMessage='Logout' />,
78-
}
77+
omega: <Message id="toolbar.omega" defaultMessage="Omega" />,
78+
install: <Message id="toolbar.install" defaultMessage="Install" />,
79+
releases: (
80+
<Message id="toolbar.releases" defaultMessage="Releases" />
81+
),
82+
simulator: (
83+
<Message id="toolbar.simulator" defaultMessage="Simulator" />
84+
),
85+
wiki: <Message id="toolbar.wiki" defaultMessage="Wiki" />,
86+
IDE: <Message id="toolbar.ide" defaultMessage="Python IDE" />,
87+
gitHub: <Message id="toolbar.github" defaultMessage="GitHub" />,
88+
login: (
89+
<Message
90+
id="toolbar.login"
91+
defaultMessage="Login with Github"
92+
/>
93+
),
94+
logout: <Message id="toolbar.logout" defaultMessage="Logout" />,
95+
};
7996

8097
return (
8198
<header
99+
{...this.props}
82100
className={classNames({
83101
[styles.header]: true,
84102
[styles.headerOpened]: this.state.isOpened,
85-
[this.props.className]: true,
103+
header: true, // For Omega-IDE
86104
})}
87105
>
88-
<HeaderLogo onClick={this.closeHamburger} className="logo">
106+
<HeaderLogo onClick={this.closeHamburger} to="/">
89107
{messages.omega}
90108
</HeaderLogo>
91109
<HeaderSpacer />

‎src/components/header/HeaderAccount.js

-23
This file was deleted.

‎src/components/header/HeaderAccount.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react";
2+
import styles from "./sass/Header.module.sass";
3+
import classNames from "classnames";
4+
5+
type HeaderAccountProps = {
6+
username?: string | null;
7+
image?: string | null;
8+
hide?: boolean;
9+
};
10+
11+
export default function HeaderAccount(props: HeaderAccountProps) {
12+
return (
13+
<div
14+
className={classNames({
15+
[styles.account]: true,
16+
[styles.accountHidden]: props.hide,
17+
})}
18+
>
19+
<div className={styles.accountUsername}>{props.username}</div>
20+
<img
21+
className={styles.accountImage}
22+
alt="profile"
23+
src={props.image || ""}
24+
/>
25+
</div>
26+
);
27+
}

‎src/components/header/HeaderHamburger.js

-12
This file was deleted.

‎src/components/header/HeaderHamburger.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { MouseEventHandler } from "react";
2+
import styles from "./sass/Header.module.sass";
3+
4+
type HeaderHamburgerProps = {
5+
onClick?: MouseEventHandler;
6+
};
7+
8+
export default function HeaderHamburger(props: HeaderHamburgerProps) {
9+
return (
10+
<div onClick={props.onClick} className={styles.hamburger}>
11+
<i className={`${styles.hamburgerIcon} material-icons-round`}>
12+
menu
13+
</i>
14+
</div>
15+
);
16+
}

‎src/components/header/HeaderLink.js

-74
This file was deleted.

0 commit comments

Comments
 (0)