Skip to content

Commit 8280f54

Browse files
jmgasperjmgasper
committed
Universal nav layout fixes
1 parent 19a44d5 commit 8280f54

File tree

6 files changed

+116
-137
lines changed

6 files changed

+116
-137
lines changed

‎src/components/Footer/Footer.jsx‎

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,33 @@
1-
import React from 'react'
2-
//import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
3-
import moment from 'moment'
4-
import MediaQuery from 'react-responsive'
5-
//import FooterV2 from '../FooterV2/FooterV2'
6-
import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'
1+
/* global tcUniNav */
2+
import React, { Component } from 'react'
73

8-
require('./Footer.scss')
4+
let uniqueId = 0
95

10-
const Footer = () => {
11-
const currentYear = moment().format('YYYY')
12-
/*const otherNavigationItems = [
13-
{img: '', text: 'Aboutss', link: 'https://www.topcoder.com/company/', target: '_blank'},
14-
{img: '', text: 'Contact us', link: 'https://www.topcoder.com/contact-us/', target: '_blank'},
15-
{img: '', text: 'Privacy', link: 'https://www.topcoder.com/privacy-policy/', target: '_blank'},
16-
{img: '', text: 'Terms', link: 'https://connect.topcoder.com/terms', target: '_blank'},
17-
{img: '', text: 'Our Process', link: 'https://www.topcoder.com/solutions/how-it-works/', target: '_blank'}
18-
]*/
19-
const isProjectDetails = /projects\/\d+/.test(window.location.pathname)
20-
const isCreateProject = window.location.pathname.startsWith(NEW_PROJECT_PATH)
21-
const isNotificationsPage = window.location.pathname.startsWith('/notifications')
22-
const isSettingsPage = window.location.pathname.startsWith('/settings/')
6+
class Footer extends Component {
7+
constructor(props) {
8+
super(props)
9+
uniqueId += 1
10+
this.footerIdRef = uniqueId
11+
this.uniNavInitialized = false
12+
}
2313

24-
// TODO this looks like a bad way of doing it, I think it should be re-factored
25-
const shouldHideOnDesktop = isProjectDetails || isCreateProject || isNotificationsPage || isSettingsPage
14+
componentDidMount() {
15+
if (!!this.footerIdRef && !this.uniNavInitialized) {
16+
this.uniNavInitialized = true
17+
tcUniNav('init', `footerNav-${this.footerIdRef}`, {
18+
fullFooter: true,
19+
type: 'footer',
20+
})
21+
}
22+
}
2623

27-
return (
28-
<MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
29-
{(matches) => {
30-
if (matches) {
31-
return (shouldHideOnDesktop ? null :
32-
<div className="Footer">
33-
<p className="copyright-notice">© Topcoder { currentYear }</p>
34-
{/*<div className="footer-menu">
35-
<MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
36-
</div>*/}
37-
</div>
38-
)
39-
} else {
40-
{/* never show footer on mobile */}
41-
return null
42-
}
43-
}}
44-
</MediaQuery>
45-
)
24+
render() {
25+
return <div id={`footerNav-${this.footerIdRef}`} />
26+
}
4627
}
4728

29+
Footer.propTypes = {}
30+
31+
Footer.defaultProps = {}
32+
4833
export default Footer

‎src/components/Footer/Footer.scss‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/components/TopBar/NavBar.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* global tcUniNav */
2+
import React, { Component } from 'react'
3+
import PropTypes from 'prop-types'
4+
import {
5+
HEADER_AUTH_URLS_HREF,
6+
HEADER_AUTH_URLS_LOCATION,
7+
DOMAIN,
8+
} from '../../config/constants'
9+
import { getInitials } from '../../helpers/format'
10+
11+
const HEADER_AUTH_URLS = {
12+
href: HEADER_AUTH_URLS_HREF,
13+
location: HEADER_AUTH_URLS_LOCATION,
14+
}
15+
const BASE = `https://www.${DOMAIN}`
16+
17+
let uniqueId = 0
18+
19+
class NavBar extends Component {
20+
constructor(props) {
21+
super(props)
22+
uniqueId += 1
23+
this.headerIdRef = uniqueId
24+
this.uniNavInitialized = false
25+
}
26+
27+
componentDidMount() {
28+
if (!!this.headerIdRef && !this.uniNavInitialized) {
29+
const user = this.props.user
30+
const navigationUserInfo = user ? {
31+
...user,
32+
initials: getInitials(user.firstName, user.lastName),
33+
} : null
34+
const authToken = user ? user.token : null
35+
const isAuthenticated = !!authToken
36+
37+
this.uniNavInitialized = true
38+
const headerId = this.headerIdRef
39+
const authURLs = HEADER_AUTH_URLS
40+
41+
const regSource = window.location.pathname.split('/')[1]
42+
const retUrl = encodeURIComponent(window.location.href)
43+
tcUniNav('init', `headerNav-${headerId}`, {
44+
type: 'tool',
45+
toolName: 'Connect',
46+
toolRoot: '/',
47+
user: isAuthenticated ? navigationUserInfo : null,
48+
signOut: () => {
49+
window.location = `${BASE}/logout?ref=nav`
50+
},
51+
signIn: () => {
52+
window.location = `${authURLs.location
53+
.replace('%S', retUrl)
54+
.replace('member?', '#!/member?')}&regSource=${regSource}`
55+
},
56+
signUp: () => {
57+
window.location = `${authURLs.location
58+
.replace('%S', retUrl)
59+
.replace(
60+
'member?',
61+
'#!/member?'
62+
)}&mode=signUp&regSource=${regSource}`
63+
},
64+
})
65+
}
66+
}
67+
68+
render() {
69+
return <div id={`headerNav-${this.headerIdRef}`} />
70+
}
71+
}
72+
73+
NavBar.propTypes = {
74+
user : PropTypes.object,
75+
}
76+
77+
NavBar.defaultProps = {}
78+
79+
export default NavBar

‎src/components/TopBar/ProjectsToolBar.js‎

Lines changed: 11 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
require('./ProjectsToolBar.scss')
2-
/* global tcUniNav */
32
import React, { Component } from 'react'
43
import PropTypes from 'prop-types'
54
import querystring from 'query-string'
@@ -15,27 +14,16 @@ import { loadProjectsMetadata } from '../../actions/templates'
1514
import { getNewProjectLink } from '../../helpers/projectHelper'
1615
import { hasPermission } from '../../helpers/permissions'
1716
import { PERMISSIONS } from '../../config/permissions'
18-
import { HEADER_AUTH_URLS_HREF, HEADER_AUTH_URLS_LOCATION, DOMAIN } from '../../config/constants'
19-
import { getInitials } from '../../helpers/format'
20-
21-
const HEADER_AUTH_URLS = {
22-
href: HEADER_AUTH_URLS_HREF,
23-
location: HEADER_AUTH_URLS_LOCATION
24-
}
25-
const BASE = `https://www.${DOMAIN}`
26-
27-
let uniqueId = 0
17+
import NavBar from './NavBar'
2818

2919
class ProjectsToolBar extends Component {
3020

3121
constructor(props) {
3222
super(props)
33-
uniqueId += 1
3423
this.state = {
3524
errorCreatingProject: false,
3625
isMobileMenuOpen: false,
37-
isMobileSearchVisible: false,
38-
headerId: uniqueId,
26+
isMobileSearchVisible: false
3927
}
4028
this.applyFilters = this.applyFilters.bind(this)
4129
this.handleTermChange = this.handleTermChange.bind(this)
@@ -83,43 +71,6 @@ class ProjectsToolBar extends Component {
8371
window.addEventListener('beforeunload', this.onLeave)
8472
}
8573

86-
componentDidUpdate() {
87-
if (!!this.state.headerId && !this.uniNavInitialized) {
88-
const user = this.props.user
89-
const navigationUserInfo = {
90-
...user,
91-
initials: getInitials(user.firstName, user.lastName)
92-
}
93-
const authToken = user ? user.token : null
94-
this.uniNavInitialized = true
95-
const headerId = this.state.headerId
96-
const isAuthenticated = !!authToken
97-
const authURLs = HEADER_AUTH_URLS
98-
99-
const regSource = window.location.pathname.split('/')[1]
100-
const retUrl = encodeURIComponent(window.location.href)
101-
tcUniNav('init', `headerNav-${headerId}`, {
102-
type: 'tool',
103-
toolName: 'Connect',
104-
toolRoot: '/',
105-
user: isAuthenticated ? navigationUserInfo : null,
106-
signOut: () => {
107-
window.location = `${BASE}/logout?ref=nav`
108-
},
109-
signIn: () => {
110-
window.location = `${authURLs.location
111-
.replace('%S', retUrl)
112-
.replace('member?', '#!/member?')}&regSource=${regSource}`
113-
},
114-
signUp: () => {
115-
window.location = `${authURLs.location
116-
.replace('%S', retUrl)
117-
.replace('member?', '#!/member?')}&mode=signUp&regSource=${regSource}`
118-
}
119-
})
120-
}
121-
}
122-
12374
componentWillUnmount() {
12475
window.removeEventListener('beforeunload', this.onLeave)
12576
const contentDiv = document.getElementById('wrapper-main')
@@ -196,7 +147,7 @@ class ProjectsToolBar extends Component {
196147

197148
render() {
198149
const { userRoles, user, mobileMenu, orgConfig } = this.props
199-
const { isMobileMenuOpen, isMobileSearchVisible, headerId } = this.state
150+
const { isMobileMenuOpen, isMobileSearchVisible } = this.state
200151
const isLoggedIn = !!(userRoles && userRoles.length)
201152

202153
const onLeaveMessage = this.onLeave() || ''
@@ -207,11 +158,11 @@ class ProjectsToolBar extends Component {
207158
when={!!onLeaveMessage}
208159
message={onLeaveMessage}
209160
/>
210-
<div id={`headerNav-${headerId}`} />
211-
<div className="primary-toolbar">
212-
{ isLoggedIn && !hasPermission(PERMISSIONS.SEARCH_PROJECTS) && <div className="projects-title-mobile">MY PROJECTS</div> }
161+
<NavBar user={user} />
162+
{isLoggedIn ? (<div className="primary-toolbar">
163+
{ !hasPermission(PERMISSIONS.SEARCH_PROJECTS) && <div className="projects-title-mobile">MY PROJECTS</div> }
213164
{
214-
isLoggedIn && hasPermission(PERMISSIONS.SEARCH_PROJECTS) &&
165+
hasPermission(PERMISSIONS.SEARCH_PROJECTS) &&
215166
<div className="search-widget">
216167
<SearchBar
217168
hideSuggestionsWhenEmpty
@@ -224,10 +175,10 @@ class ProjectsToolBar extends Component {
224175
</div>
225176
}
226177
<div className="actions">
227-
{isLoggedIn && <NewProjectNavLink link={getNewProjectLink(orgConfig)} />}
228-
{ isLoggedIn && <MobileMenuToggle onToggle={this.toggleMobileMenu}/> }
178+
<NewProjectNavLink link={getNewProjectLink(orgConfig)} />
179+
<MobileMenuToggle onToggle={this.toggleMobileMenu}/>
229180
</div>
230-
</div>
181+
</div>) : null}
231182
{ isMobileSearchVisible && isLoggedIn &&
232183
<div className="secondary-toolbar">
233184
<SearchBar
@@ -248,6 +199,7 @@ class ProjectsToolBar extends Component {
248199

249200
ProjectsToolBar.propTypes = {
250201
criteria : PropTypes.object.isRequired,
202+
user : PropTypes.object,
251203
/**
252204
* Function which render the logo section in the top bar
253205
*/

‎src/components/TopBar/SectionToolBar.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
:global {
55
.tc-header.tc-header__connect .top-bar{
6-
height: 60px;
76
background-color: $tc-gray-100;
87
position: relative;
98
display: flex;

‎src/components/TopBar/TopBarContainer.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,12 @@
9696

9797
&.tc-header__connect {
9898
padding: 0;
99-
min-height: 120px;
10099
height: auto;
101100
@media screen and (max-width: $screen-md - 1px) {
102101
min-height: 50px;
103102
}
104103

105104
.top-bar {
106-
height: 120px;
107105
background-color: $tc-black;
108106
position: relative;
109107
@media screen and (max-width: $screen-md - 1px) {

0 commit comments

Comments
 (0)