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

Fix href link to Nextjs link #74

Closed
wants to merge 6 commits into from
Closed

Fix href link to Nextjs link #74

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
93c869f
Update GoTop, hash href link to Nextjs Link
thuyvy3110 Dec 17, 2019
0272110
Update NavItem, hash href link to Nextjs Link
thuyvy3110 Dec 17, 2019
5c7d55a
Update Footer.spec.tsx.snap
thuyvy3110 Dec 17, 2019
05427b1
Update NavContent.spec.tsx.snap
thuyvy3110 Dec 17, 2019
7bab30c
Update NavItem.spec.tsx.snap
thuyvy3110 Dec 17, 2019
60764ae
Add router after change to use Nextjs Link
thuyvy3110 Dec 18, 2019
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
233 changes: 120 additions & 113 deletions views/components/__test__/__snapshots__/Footer.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,135 +111,142 @@ exports[`Footer should render without throwing an error 1`] = `
</StyledComponent>
</Footer__CopyRight>
<GoTop>
<GoTop__Container
<Link
href="#Home"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "GoTop__Container-sc-18ceaec-0",
"isStatic": false,
"lastClassName": "krsECY",
"rules": Array [
"color:",
[Function],
";border-color:",
[Function],
";transition:color 0.5s;&:hover{color:",
[Function],
";}",
],
},
"displayName": "GoTop__Container",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "GoTop__Container-sc-18ceaec-0",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="#Home"
<GoTop__Container
onClick={[Function]}
onMouseEnter={[Function]}
>
<a
className="GoTop__Container-sc-18ceaec-0 krsECY"
href="#Home"
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "GoTop__Container-sc-18ceaec-0",
"isStatic": false,
"lastClassName": "krsECY",
"rules": Array [
"color:",
[Function],
";border-color:",
[Function],
";transition:color 0.5s;&:hover{color:",
[Function],
";}",
],
},
"displayName": "GoTop__Container",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "GoTop__Container-sc-18ceaec-0",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={[Function]}
onClick={[Function]}
onMouseEnter={[Function]}
>
<GoTop__GoTopIcon
name="goTop"
<a
className="GoTop__Container-sc-18ceaec-0 krsECY"
onClick={[Function]}
onMouseEnter={[Function]}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "GoTop__GoTopIcon-sc-18ceaec-1",
"isStatic": false,
"lastClassName": "gjeSlo",
"rules": Array [
"position:absolute;top:-20px;left:50%;z-index:200;display:block;width:36px;height:36px;margin-left:-15px;font-size:0;border:none;overflow:hidden;color:",
[Function],
";border-color:",
[Function],
";transition:color 0.5s;&::before{font-size:45px;line-height:35px;color:",
[Function],
";transition:color 0.5s;}&:hover{color:",
[Function],
";&::before{color:",
[Function],
";}}",
],
},
"displayName": "GoTop__GoTopIcon",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "GoTop__GoTopIcon-sc-18ceaec-1",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
<GoTop__GoTopIcon
name="goTop"
>
<Icon
className="GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "GoTop__GoTopIcon-sc-18ceaec-1",
"isStatic": false,
"lastClassName": "gjeSlo",
"rules": Array [
"position:absolute;top:-20px;left:50%;z-index:200;display:block;width:36px;height:36px;margin-left:-15px;font-size:0;border:none;overflow:hidden;color:",
[Function],
";border-color:",
[Function],
";transition:color 0.5s;&::before{font-size:45px;line-height:35px;color:",
[Function],
";transition:color 0.5s;}&:hover{color:",
[Function],
";&::before{color:",
[Function],
";}}",
],
},
"displayName": "GoTop__GoTopIcon",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "GoTop__GoTopIcon-sc-18ceaec-1",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
name="goTop"
>
<Icon__Symbol
<Icon
className="GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
name="goTop"
>
<StyledComponent
<Icon__Symbol
className="GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Icon__Symbol-sc-1aleqew-0",
"isStatic": false,
"lastClassName": "fUifJe",
"rules": Array [
"display:inline-block;&::before{font-family:",
[Function],
";font-style:normal;font-weight:normal;content:'",
[Function],
"';}",
],
},
"displayName": "Icon__Symbol",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Icon__Symbol-sc-1aleqew-0",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
name="goTop"
>
<div
className="Icon__Symbol-sc-1aleqew-0 fUifJe GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
<StyledComponent
className="GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Icon__Symbol-sc-1aleqew-0",
"isStatic": false,
"lastClassName": "fUifJe",
"rules": Array [
"display:inline-block;&::before{font-family:",
[Function],
";font-style:normal;font-weight:normal;content:'",
[Function],
"';}",
],
},
"displayName": "Icon__Symbol",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Icon__Symbol-sc-1aleqew-0",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
name="goTop"
/>
</StyledComponent>
</Icon__Symbol>
</Icon>
</StyledComponent>
</GoTop__GoTopIcon>
</a>
</StyledComponent>
</GoTop__Container>
>
<div
className="Icon__Symbol-sc-1aleqew-0 fUifJe GoTop__GoTopIcon-sc-18ceaec-1 gjeSlo"
name="goTop"
/>
</StyledComponent>
</Icon__Symbol>
</Icon>
</StyledComponent>
</GoTop__GoTopIcon>
</a>
</StyledComponent>
</GoTop__Container>
</Link>
</GoTop>
</div>
</footer>
Expand Down
9 changes: 6 additions & 3 deletions views/components/footer/GoTop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import React from 'react'
import styled from 'styled-components/macro'
import Icon from '~/views/components/common/Icon'
import { HOME } from '~/consts/pages'
import Link from 'next/link'

const GoTop = () => (
<Container href={`#${HOME}`}>
<GoTopIcon name="goTop" />
</Container>
<Link href={`#${HOME}`}>
DeKal marked this conversation as resolved.
Show resolved Hide resolved
<Container>
<GoTopIcon name="goTop" />
</Container>
</Link>
)

export default GoTop
Expand Down
20 changes: 11 additions & 9 deletions views/components/nav/NavItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,24 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components/macro'
import { Translate } from 'react-localize-redux'
import Link from 'next/link'

const NavItem = ({ page, isSelected, setSelectedPage }) => {
return isSelected ? (
<SelectedContainer>
<Translate id={page} />
</SelectedContainer>
) : (
<Container
data-test-id="nav-link"
href={`#${page}`}
onClick={() => {
setSelectedPage(page)
}}
>
<Translate id={page} />
</Container>
<Link href={`#${page}`}>
DeKal marked this conversation as resolved.
Show resolved Hide resolved
<Container
data-test-id="nav-link"
onClick={() => {
setSelectedPage(page)
}}
>
<Translate id={page} />
</Container>
</Link>
)
}

Expand Down
Loading