Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored Footer, Header, Loading #152

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactored Footer, Header, Loading #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions assets/js/Ioda/components/footer/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
*/


import React, { PureComponent } from 'react';
import React, { memo } from 'react';
import PreloadImage from "react-preload-image";
// images
//import caidaLogo from 'images/logos/caida.png';
Expand All @@ -79,25 +79,22 @@ import PreloadImage from "react-preload-image";
import gatechLogo from 'images/logos/gatech_white.svg';



class Footer extends PureComponent {
render() {
return (
<div className="footer">
<div className="footer__content">
<div className="row">
<div className="col-1-of-1">
<div className="footer__logos">
<div className="footer__logos-item footer__logos-item--gatech">
<PreloadImage className="footer__logos-item-container" src={gatechLogo} lazy/>
</div>
const Footer = () => {
return (
<div className="footer">
<div className="footer__content">
<div className="row">
<div className="col-1-of-1">
<div className="footer__logos">
<div className="footer__logos-item footer__logos-item--gatech">
<PreloadImage className="footer__logos-item-container" src={gatechLogo} lazy/>
</div>
</div>
</div>
</div>
</div>
);
}
</div>
);
}

export default Footer;
export default memo(Footer);
168 changes: 80 additions & 88 deletions assets/js/Ioda/components/header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
* MODIFICATIONS.
*/

import React, { Component } from "react";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import T from "i18n-react";
import iodaLogo from "images/logos/ioda-logo.svg";
Expand All @@ -88,58 +88,51 @@ const languageOptions = [
{ value: "fa", label: "Farsi" },
];

class Header extends Component {
constructor(props) {
super(props);
const Header = () => {

this.state = {
language: getSavedLanguagePreference(),
advancedMode: getSavedAdvancedModePreference(),
showDrawer: false,
mounted: false,
};
}
const [language, setLanguage] = useState(getSavedLanguagePreference());
const [advancedMode, setAdvancedMode] = useState(getSavedAdvancedModePreference());
const [showDrawer, setShowDrawer] = useState(false);
const [mounted, setMounted] = useState(false);

componentDidMount() {
this.setState({ mounted: true });
}

setShowDrawer = (showDrawer) => {
this.setState({ showDrawer });
};
// const setShowDrawer = (showDrawer) => {
// this.setState({ showDrawer });
// };

toggleDrawerMenu = () => {
this.setShowDrawer(!this.state.showDrawer);
const toggleDrawerMenu = () => {
setShowDrawer(!showDrawer);
};

handleLanguageChange = (language) => {
if (!this.state.mounted) {
const handleLanguageChange = (language) => {
if (!mounted) {
return;
}
setLanguage(language);
saveLanguagePreference(language);
window.location.reload(false);
window.location.reload();
};

handleModeChange = (isAdvancedMode) => {
if (!this.state.mounted) {
const handleModeChange = (isAdvancedMode) => {
if (!mounted) {
return;
}
setAdvancedMode(advancedMode);
saveAdvancedModePreference(isAdvancedMode);
window.location.reload(false);
window.location.reload();
};

render() {
const dashboard = T.translate("header.dashboard");
const reports = T.translate("header.reports");
const project = T.translate("header.projectInfo");
const help = T.translate("header.help");
const iodaLogoAltText = T.translate("header.iodaLogoAltText");
const api = T.translate("header.api");
const viewToggleHelp = T.translate("header.viewToggleHelp");
const dashboard = T.translate("header.dashboard");
const reports = T.translate("header.reports");
const project = T.translate("header.projectInfo");
const help = T.translate("header.help");
const iodaLogoAltText = T.translate("header.iodaLogoAltText");
const api = T.translate("header.api");
const viewToggleHelp = T.translate("header.viewToggleHelp");

const modeStatus = this.state.advancedMode ? "Advanced" : "Simple";
const modeStatus = advancedMode ? "Advanced" : "Simple";

return (
return (
<div className="header">
<div className="header__container p-6 max-cont row items-center">
<div className="header__logo mr-auto">
Expand All @@ -154,8 +147,8 @@ class Header extends Component {
</div>
<div className="header__item">
<a
href="https://api.ioda.inetintel.cc.gatech.edu/v2/"
className="a-fake"
href="https://api.ioda.inetintel.cc.gatech.edu/v2/"
className="a-fake"
>
{api}
</a>
Expand All @@ -181,77 +174,77 @@ class Header extends Component {

<div className="header__item">
<Select
value={this.state.language}
style={{ width: 100 }}
className="ml-md"
onChange={this.handleLanguageChange}
options={languageOptions}
popupClassName="header__language-select"
value={language}
style={{ width: 100 }}
className="ml-md"
onChange={handleLanguageChange}
options={languageOptions}
popupClassName="header__language-select"
/>
</div>

<div className="header__item">
<Tooltip title={viewToggleHelp}>
<div className="row items-center">
<Switch
className="mr-3"
checked={this.state.advancedMode}
onChange={this.handleModeChange}
className="mr-3"
checked={advancedMode}
onChange={handleModeChange}
/>
<span className="text-lg">{modeStatus}</span>
</div>
</Tooltip>
</div>

<div className="header__drawer-icon">
<Button icon={<MenuOutlined />} onClick={this.toggleDrawerMenu} />
<Button icon={<MenuOutlined />} onClick={toggleDrawerMenu} />
</div>
</div>

{/* DRAWER MENU */}
<Drawer
placement="right"
onClose={() => this.setShowDrawer(false)}
open={this.state.showDrawer}
className="header__drawer-body"
closeIcon={
<CloseOutlined style={{ fontSize: "16px", color: "#fff" }} />
}
extra={
<Link to="/" onClick={() => this.setShowDrawer(false)}>
<img
src={iodaLogo}
alt={iodaLogoAltText}
width="97"
height="35"
/>
</Link>
}
width={320}
placement="right"
onClose={() => setShowDrawer(false)}
open={showDrawer}
className="header__drawer-body"
closeIcon={
<CloseOutlined style={{ fontSize: "16px", color: "#fff" }} />
}
extra={
<Link to="/" onClick={() => setShowDrawer(false)}>
<img
src={iodaLogo}
alt={iodaLogoAltText}
width="97"
height="35"
/>
</Link>
}
width={320}
>
<div className="header__drawer-item">
<Link
to="/dashboard"
className="a-fake"
onClick={() => this.setShowDrawer(false)}
to="/dashboard"
className="a-fake"
onClick={() => setShowDrawer(false)}
>
{dashboard}
</Link>
</div>
<div className="header__drawer-item">
<a
href="https://api.ioda.inetintel.cc.gatech.edu/v2/"
className="a-fake"
href="https://api.ioda.inetintel.cc.gatech.edu/v2/"
className="a-fake"
>
{api}
</a>
</div>

<div className="header__drawer-item">
<Link
to="/project"
className="a-fake"
onClick={() => this.setShowDrawer(false)}
to="/project"
className="a-fake"
onClick={() => setShowDrawer(false)}
>
{project}
</Link>
Expand All @@ -265,43 +258,42 @@ class Header extends Component {

<div className="header__drawer-item">
<Link
to="/help"
className="a-fake"
onClick={() => this.setShowDrawer(false)}
to="/help"
className="a-fake"
onClick={() => setShowDrawer(false)}
>
{help}
</Link>
</div>

<div
className="header__drawer-item mt-6 pt-6"
style={{ borderTop: "1px solid gray" }}
className="header__drawer-item mt-6 pt-6"
style={{ borderTop: "1px solid gray" }}
>
<Select
value={this.state.language}
style={{ width: 100 }}
className="ml-md"
onChange={this.handleLanguageChange}
options={languageOptions}
value={language}
style={{ width: 100 }}
className="ml-md"
onChange={handleLanguageChange}
options={languageOptions}
/>
</div>

<div className="header__drawer-item">
<Tooltip title={viewToggleHelp}>
<div className="ml-6 row items-center">
<Switch
className="mr-3"
checked={this.state.advancedMode}
onChange={this.handleModeChange}
className="mr-3"
checked={advancedMode}
onChange={handleModeChange}
/>
<span>{modeStatus}</span>
</div>
</Tooltip>
</div>
</Drawer>
</div>
);
}
);
}

export default Header;
29 changes: 13 additions & 16 deletions assets/js/Ioda/components/loading/Loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Link } from "react-router-dom";
import React from "react";
import T from "i18n-react";

class Loading extends Component {
render() {
const Loading = ({text}) => {
return (
<div className="progress-bar-striped">
<div style={{ width: "100%" }}>
<strong>
{this.props.text ? (
<p>{this.props.text}</p>
) : (
<T.p text="loadingBar.loading" />
)}
</strong>
<div className="progress-bar-striped">
<div style={{ width: "100%" }}>
<strong>
{text ? (
<p>{text}</p>
) : (
<T.p text="loadingBar.loading" />
)}
</strong>
</div>
</div>
</div>
);
}

}

export default Loading;