Skip to content

Commit b438f57

Browse files
jpeg22jpeg22
authored
Merge pull request #4594 from appirio-tech/dev
Universal Nav implementation
2 parents c12e0b8 + 448236a commit b438f57

22 files changed

+220
-132
lines changed

‎.circleci/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ workflows:
200200
- build-dev
201201
filters: &filters-dev
202202
branches:
203-
only: ['dev', 'feature/milestone-customer-approval', 'reskin']
203+
only: ['dev', 'universal_nav', 'feature/milestone-customer-approval', 'reskin']
204204

205205
- deployTest01:
206206
context : org-global

‎config/constants/dev.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const DOMAIN = 'topcoder-dev.com'
2+
13
module.exports = {
24
API_URL : 'https://api.topcoder-dev.com/v3',
35
API_URL_V2 : 'https://api.topcoder-dev.com/v2',
@@ -59,5 +61,8 @@ module.exports = {
5961
CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
6062

6163
TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
62-
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
64+
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900',
65+
UNIVERSAL_NAV_URL: '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',
66+
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
67+
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
6368
}

‎config/constants/master.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const DOMAIN = 'topcoder.com'
2+
13
module.exports = {
24
API_URL : 'https://api.topcoder.com/v3',
35
API_URL_V2 : 'https://api.topcoder.com/v2',
@@ -59,5 +61,8 @@ module.exports = {
5961
CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
6062

6163
TAAS_APP_URL: 'https://platform.topcoder.com/taas',
62-
DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490'
64+
DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490',
65+
UNIVERSAL_NAV_URL: '//uni-nav.topcoder.com/v1/tc-universal-nav.js',
66+
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
67+
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
6368
}

‎config/constants/qa.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const DOMAIN = 'topcoder-dev.com'
2+
13
module.exports = {
24
API_URL : 'https://api.topcoder-qa.com/v3',
35
API_URL_V2 : 'https://api.topcoder-qa.com/v2',
@@ -54,5 +56,8 @@ module.exports = {
5456
TC_CDN_URL: process.env.TC_CDN_URL,
5557

5658
TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
57-
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
59+
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900',
60+
UNIVERSAL_NAV_URL: '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',
61+
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
62+
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
5863
}

‎src/components/Footer/Footer.jsx

+32-45
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,35 @@
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'
7-
8-
require('./Footer.scss')
9-
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/')
23-
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
26-
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-
)
1+
/* global tcUniNav */
2+
import React, { Component } from 'react'
3+
4+
import './styles.scss'
5+
6+
let uniqueId = 0
7+
8+
class Footer extends Component {
9+
constructor(props) {
10+
super(props)
11+
uniqueId += 1
12+
this.footerIdRef = uniqueId
13+
this.uniNavInitialized = false
14+
}
15+
16+
componentDidMount() {
17+
if (!!this.footerIdRef && !this.uniNavInitialized) {
18+
this.uniNavInitialized = true
19+
tcUniNav('init', `footerNav-${this.footerIdRef}`, {
20+
fullFooter: false,
21+
type: 'footer',
22+
})
23+
}
24+
}
25+
26+
render() {
27+
return <div styleName="footer-conatiner" id={`footerNav-${this.footerIdRef}`} />
28+
}
4629
}
4730

31+
Footer.propTypes = {}
32+
33+
Footer.defaultProps = {}
34+
4835
export default Footer

‎src/components/Footer/Footer.scss

-34
This file was deleted.

‎src/components/Footer/styles.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import '~tc-ui/src/styles/tc-includes';
2+
3+
.footer-conatiner {
4+
display: flex;
5+
width: 100%;
6+
7+
footer {
8+
width: 100%;
9+
}
10+
}

‎src/components/Grid/GridView.scss

+1
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@
228228

229229
.gridview-load-more {
230230
text-align: center;
231+
margin-bottom: 20px;
231232

232233
@media screen and (max-width: $screen-md - 1px) {
233234
padding: 2 * $base-unit 0;

‎src/components/Layout/Layout.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
:global {
44
.main-wrapper {
5-
min-height: calc(100vh - 60px); // minus height
6-
padding-top: 60px;
7-
overflow: hidden;
5+
min-height: calc(100vh - 120px); // minus height
86

97
@media screen and (max-width: $screen-md - 1px) {
108
padding-top: 0;

‎src/components/TopBar/NavBar.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
10+
const HEADER_AUTH_URLS = {
11+
href: HEADER_AUTH_URLS_HREF,
12+
location: HEADER_AUTH_URLS_LOCATION,
13+
}
14+
const BASE = `https://www.${DOMAIN}`
15+
16+
let uniqueId = 0
17+
18+
class NavBar extends Component {
19+
constructor(props) {
20+
super(props)
21+
uniqueId += 1
22+
this.headerIdRef = uniqueId
23+
this.uniNavInitialized = false
24+
}
25+
26+
componentDidMount() {
27+
if (!!this.headerIdRef && !this.uniNavInitialized) {
28+
this.uniNavInitialized = true
29+
const headerId = this.headerIdRef
30+
const authURLs = HEADER_AUTH_URLS
31+
32+
const regSource = window.location.pathname.split('/')[1]
33+
const retUrl = encodeURIComponent(window.location.href)
34+
tcUniNav('init', `headerNav-${headerId}`, {
35+
type: 'tool',
36+
toolName: 'Connect',
37+
toolRoot: '/',
38+
user: 'auto',
39+
signOut: () => {
40+
window.location = `${BASE}/logout?ref=nav`
41+
},
42+
signIn: () => {
43+
window.location = `${authURLs.location
44+
.replace('%S', retUrl)
45+
.replace('member?', '#!/member?')}&regSource=${regSource}`
46+
},
47+
signUp: () => {
48+
window.location = `${authURLs.location
49+
.replace('%S', retUrl)
50+
.replace(
51+
'member?',
52+
'#!/member?'
53+
)}&mode=signUp&regSource=${regSource}`
54+
},
55+
})
56+
}
57+
}
58+
59+
render() {
60+
return <div id={`headerNav-${this.headerIdRef}`} />
61+
}
62+
}
63+
64+
NavBar.propTypes = {
65+
user : PropTypes.object,
66+
}
67+
68+
NavBar.defaultProps = {}
69+
70+
export default NavBar

‎src/components/TopBar/ProjectToolBar.js

+2-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { withRouter } from 'react-router-dom'
77
import { connect } from 'react-redux'
88
import ReactDOM from 'react-dom'
99
import { getNewProjectLink } from '../../helpers/projectHelper'
10-
import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
1110
import NewProjectNavLink from './NewProjectNavLink'
1211
import MobileMenu from '../MobileMenu/MobileMenu'
1312
import MobileMenuToggle from '../MobileMenu/MobileMenuToggle'
@@ -53,26 +52,20 @@ class ProjectToolBar extends React.Component {
5352
}
5453

5554
render() {
56-
const { renderLogoSection, userMenu, project, user, mobileMenu, location, orgConfig } = this.props
55+
const { project, user, mobileMenu, orgConfig } = this.props
5756
const { isTooltipVisible, isMobileMenuOpen } = this.state
5857

5958
return (
6059
<div className="ProjectToolBar">
6160
<div className="tool-bar">
62-
<div className="bar-column">
63-
{renderLogoSection()}
64-
</div>
61+
<div className="bar-column" />
6562
{project && project.name && <div className="bar-column project-name">
6663
<span ref="name" onMouseEnter={this.onNameEnter} onMouseLeave={this.onNameLeave}>{_.unescape(project.name)}</span>
6764
{isTooltipVisible && <div className="breadcrumb-tooltip">{_.unescape(project.name)}</div>}
6865
</div>}
6966
{project && project.name && <div className="bar-column project-name mobile"><span>{_.unescape(project.name)}</span></div>}
7067
<div className="bar-column">
7168
<NewProjectNavLink compact link={getNewProjectLink(orgConfig)} />
72-
{userMenu}
73-
{/* pass location, to make sure that component is re-rendered when location is changed
74-
it's necessary to hide notification dropdown on mobile when users uses browser history back/forward buttons */}
75-
<NotificationsDropdown location={location} />
7669
<MobileMenuToggle onToggle={this.toggleMobileMenu}/>
7770
</div>
7871
</div>

‎src/components/TopBar/ProjectToolBar.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
justify-content: space-between;
1818
width: 100%;
1919
height: 60px;
20-
background-color: $tc-black;
20+
background: $tc-gray-05;
21+
padding: 0 20px;
2122

2223
@media screen and (max-width: $screen-md - 1px) {
2324
height: 50px;
@@ -54,7 +55,7 @@
5455

5556
span {
5657
@include tc-heading-small;
57-
color: $tc-gray-10;
58+
color: $tc-black;
5859
display: block;
5960
text-overflow: ellipsis;
6061
overflow: hidden;

0 commit comments

Comments
 (0)