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

feat(i18n): Setup react-i18next #9797

Merged
merged 5 commits into from
Jul 18, 2022
Merged

feat(i18n): Setup react-i18next #9797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
24e2f21
feat: add i18next
araujobarret Mar 30, 2022
e4f424e
Ensure json files are excluded in jest config
lidimayra Feb 15, 2022
b5a4584
Try to remove the beginning of the regex on config
lidimayra Jul 18, 2022
1b51258
Test actual strings intead of keys
lidimayra Jul 18, 2022
501ee36
simplifying (#10547)
pvinis Jul 18, 2022
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
2 changes: 1 addition & 1 deletion jest.config.v2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = {
testURL: "http://localhost",
transform: {
"\\.(gql|graphql)$": "jest-transform-graphql",
".(ts|tsx|js|jsx)": "babel-jest",
"(ts|tsx|js|jsx)$": "babel-jest",
},
},
],
Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@
"helmet": "2.3.0",
"http-proxy": "1.18.1",
"http-shutdown": "1.2.1",
"i18next": "^21.6.14",
"i18next-browser-languagedetector": "^6.1.4",
"insane": "2.6.1",
"ip": "^1.1.5",
"isomorphic-fetch": "^2.2.1",
"jsdom": "11.6.2",
Expand Down Expand Up @@ -166,6 +169,7 @@
"react-dropzone": "^11.4.2",
"react-head": "3.0.2",
"react-lines-ellipsis": "^0.14.0",
"react-i18next": "^11.16.2",
"react-linkify": "1.0.0-alpha",
"react-relay": "10.1.3",
"react-relay-network-modern": "4.7.3",
Expand Down
86 changes: 60 additions & 26 deletions src/v2/Components/NavBar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { useNavBarHeight } from "./useNavBarHeight"
import { RouterLink } from "v2/System/Router/RouterLink"
import { useTracking } from "react-tracking"
import { Z } from "v2/Apps/Components/constants"
import { useTranslation } from "react-i18next"

/**
* Old Force pages have the navbar height hardcoded in several places. If
Expand Down Expand Up @@ -72,6 +73,7 @@ export const NavBar: React.FC = track(
return null
}
const { trackEvent } = useTracking()
const { t } = useTranslation()
const [showMobileMenu, toggleMobileNav] = useState(false)
const xs = __internal__useMatchMedia(themeProps.mediaQueries.xs)
const sm = __internal__useMatchMedia(themeProps.mediaQueries.sm)
Expand Down Expand Up @@ -108,7 +110,7 @@ export const NavBar: React.FC = track(
event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
) => {
const link = event.currentTarget
const text = (link.textContent || link.getAttribute("data-label")) ?? ""
const text = (link.getAttribute("data-label") || link.textContent) ?? ""
const href = link.getAttribute("href")!

trackEvent({
Expand Down Expand Up @@ -149,7 +151,7 @@ export const NavBar: React.FC = track(
flex={1}
size="small"
>
Sign Up
{t`navbar.signup`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

</Button>

<Button
Expand All @@ -160,7 +162,7 @@ export const NavBar: React.FC = track(
ml={1}
size="small"
>
Log In
{t`navbar.login`}
</Button>
</Flex>
)}
Expand All @@ -181,34 +183,38 @@ export const NavBar: React.FC = track(
href="/collect"
textDecoration="none"
onClick={handleClick}
data-label="Buy"
>
Buy
{t("navbar.buy")}
</NavBarItemLink>
</Flex>

<NavBarItemLink
href="/sell"
textDecoration="none"
onClick={handleClick}
data-label="Consign"
>
Sell
{t("navbar.sell")}
</NavBarItemLink>

<NavBarItemLink
href="/price-database"
textDecoration="none"
onClick={handleClick}
data-label="Price Database"
>
Price Database
{t`navbar.priceDatabase`}
</NavBarItemLink>

<Flex alignItems="center" display={["none", "none", "flex"]}>
<NavBarItemLink
href="/articles"
textDecoration="none"
onClick={handleClick}
data-label="Articles"
>
Editorial
{t`navbar.editorial`}
</NavBarItemLink>
</Flex>
</Text>
Expand All @@ -230,7 +236,7 @@ export const NavBar: React.FC = track(
})
}}
>
Log In
{t`navbar.login`}
</Button>

<Button
Expand All @@ -245,7 +251,7 @@ export const NavBar: React.FC = track(
})
}}
>
Sign Up
{t`navbar.signup`}
</Button>
</Flex>
)}
Expand Down Expand Up @@ -325,7 +331,7 @@ export const NavBar: React.FC = track(
onClick={handleClick}
data-label="Artists"
/>
Artists
{t`navbar.artists`}
</NavBarItemButton>
)}
</Dropdown>
Expand Down Expand Up @@ -356,37 +362,65 @@ export const NavBar: React.FC = track(
onClick={handleClick}
data-label="Artworks"
/>
Artworks
{t`navbar.artworks`}
</NavBarItemButton>
)}
</Dropdown>

<NavBarItemLink href="/auctions" onClick={handleClick}>
Auctions
<NavBarItemLink
href="/auctions"
onClick={handleClick}
data-label="Auctions"
>
{t`navbar.auctions`}
</NavBarItemLink>

<NavBarItemLink href="/viewing-rooms" onClick={handleClick}>
Viewing&nbsp;Rooms
<NavBarItemLink
href="/viewing-rooms"
onClick={handleClick}
data-label="Viewing Rooms"
>
{t`navbar.viewingRooms`}
</NavBarItemLink>

<NavBarItemLink href="/galleries" onClick={handleClick}>
Galleries
<NavBarItemLink
href="/galleries"
onClick={handleClick}
data-label="Galleries"
>
{t`navbar.galleries`}
</NavBarItemLink>

<NavBarItemLink href="/art-fairs" onClick={handleClick}>
Fairs
<NavBarItemLink
href="/art-fairs"
onClick={handleClick}
data-label="Fairs"
>
{t`navbar.fairs`}
</NavBarItemLink>

<NavBarItemLink href="/shows" onClick={handleClick}>
Shows
<NavBarItemLink
href="/shows"
onClick={handleClick}
data-label="Shows"
>
{t`navbar.shows`}
</NavBarItemLink>

<NavBarItemLink href="/institutions" onClick={handleClick}>
Museums
<NavBarItemLink
href="/institutions"
onClick={handleClick}
data-label="Institutions"
>
{t`navbar.museums`}
</NavBarItemLink>

<NavBarItemLink href="/nft" onClick={handleClick}>
NFTs
<NavBarItemLink
href="/nft"
onClick={handleClick}
data-label="NFTs"
>
{t`navbar.nfts`}
</NavBarItemLink>
</Flex>

Expand All @@ -402,7 +436,7 @@ export const NavBar: React.FC = track(
})
}}
>
Download App
{t`navbar.downloadApp`}
</NavBarItemButton>
</Flex>
</Text>
Expand Down
5 changes: 3 additions & 2 deletions src/v2/Components/NavBar/__tests__/NavBar.jest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { mount } from "enzyme"
import { NavBar } from "../NavBar"
import { NavBarMobileMenuInboxNotificationCount } from "../NavBarMobileMenu/NavBarMobileMenuInboxNotificationCount"
import { mediator } from "lib/mediator"
import "v2/System/i18n/i18n"

jest.mock("v2/Components/Search/SearchBar", () => {
return {
Expand Down Expand Up @@ -63,7 +64,7 @@ describe("NavBar", () => {
it("renders logged out items", () => {
const wrapper = getWrapper()
expect(wrapper.html()).toContain("Log In")
expect(wrapper.html()).toContain("Sign Up")
expect(wrapper.html()).toContain("Sign up")
expect(wrapper.find(BellIcon).length).toEqual(0)
expect(wrapper.find(SoloIcon).length).toEqual(0)
})
Expand All @@ -72,7 +73,7 @@ describe("NavBar", () => {
// @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
const wrapper = getWrapper({ user: true })
expect(wrapper.html()).not.toContain("Log In")
expect(wrapper.html()).not.toContain("Sign Up")
expect(wrapper.html()).not.toContain("Sign up")
expect(wrapper.find(BellIcon).length).toEqual(1)
expect(wrapper.find(SoloIcon).length).toEqual(1)
})
Expand Down
69 changes: 38 additions & 31 deletions src/v2/Components/Search/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import * as Schema from "v2/System/Analytics/Schema"
import { SystemQueryRenderer } from "v2/System/Relay/SystemQueryRenderer"
import {
FirstSuggestionItem,
PLACEHOLDER,
PLACEHOLDER_XS,
SuggestionItem,
} from "v2/Components/Search/Suggestions/SuggestionItem"
import { Router } from "found"
Expand All @@ -28,6 +26,8 @@ import { useDidMount } from "v2/Utils/Hooks/useDidMount"
import createLogger from "v2/Utils/logger"
import { Media } from "v2/Utils/Responsive"
import { SearchInputContainer } from "./SearchInputContainer"
import { useTranslation } from "react-i18next"
import { ClassI18n } from "v2/System/i18n/ClassI18n"

const logger = createLogger("Components/Search/SearchBar")

Expand Down Expand Up @@ -371,7 +371,7 @@ export class SearchBar extends Component<Props, State> {

renderInputComponent = props => <SearchInputContainer {...props} />

renderAutosuggestComponent({ xs }) {
renderAutosuggestComponent(t, { xs }) {
const { term } = this.state
const { viewer } = this.props

Expand All @@ -390,7 +390,7 @@ export class SearchBar extends Component<Props, State> {
event.preventDefault()
}
},
placeholder: xs ? PLACEHOLDER_XS : PLACEHOLDER,
placeholder: xs ? t`navbar.searchArtsy` : t`navbar.searchBy`,
value: term,
}

Expand Down Expand Up @@ -435,31 +435,37 @@ export class SearchBar extends Component<Props, State> {
const { router } = this.props

return (
<Form
action="/search"
method="GET"
onSubmit={event => {
if (router) {
event.preventDefault()
const encodedTerm = encodeURIComponent(this.state.term)

// TODO: Reenable in-router push once all routes have been moved over
// to new app shell
// router.push(`/search?term=${this.state.term}`)
window.location.assign(`/search?term=${encodedTerm}`)
this.onBlur(event)
} else {
console.error(
"[Components/Search/SearchBar] `router` instance not found."
)
}
}}
>
<Media at="xs">{this.renderAutosuggestComponent({ xs: true })}</Media>
<Media greaterThan="xs">
{this.renderAutosuggestComponent({ xs: false })}
</Media>
</Form>
<ClassI18n>
{({ t }) => (
<Form
action="/search"
method="GET"
onSubmit={event => {
if (router) {
event.preventDefault()
const encodedTerm = encodeURIComponent(this.state.term)

// TODO: Reenable in-router push once all routes have been moved over
// to new app shell
// router.push(`/search?term=${this.state.term}`)
window.location.assign(`/search?term=${encodedTerm}`)
this.onBlur(event)
} else {
console.error(
"[Components/Search/SearchBar] `router` instance not found."
)
}
}}
>
<Media at="xs">
{this.renderAutosuggestComponent(t, { xs: true })}
</Media>
<Media greaterThan="xs">
{this.renderAutosuggestComponent(t, { xs: false })}
</Media>
</Form>
)}
</ClassI18n>
)
}
}
Expand Down Expand Up @@ -513,18 +519,19 @@ const StaticSearchContainer: React.FC<{ searchQuery: string } & BoxProps> = ({
searchQuery,
...rest
}) => {
const { t } = useTranslation()
return (
<>
<Box display={["block", "none"]} {...rest}>
<SearchInputContainer
placeholder={searchQuery || PLACEHOLDER_XS}
placeholder={searchQuery || t`navbar.searchArtsy`}
defaultValue={searchQuery}
/>
</Box>

<Box display={["none", "block"]} {...rest}>
<SearchInputContainer
placeholder={searchQuery || PLACEHOLDER}
placeholder={searchQuery || t`navbar.searchBy`}
defaultValue={searchQuery}
/>
</Box>
Expand Down
3 changes: 0 additions & 3 deletions src/v2/Components/Search/Suggestions/SuggestionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,6 @@ const SuggestionItemLink = styled(RouterLink).attrs({
min-height: 60px;
`

export const PLACEHOLDER = "Search by artist, gallery, style, theme, tag, etc."
export const PLACEHOLDER_XS = "Search Artsy"
Comment on lines -87 to -88
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These weren't being used anywhere besides inside the SearchBar component, so we deleted it from here.


const DefaultSuggestion: React.FC<SuggestionItemProps> = ({
display,
label,
Expand Down
1 change: 1 addition & 0 deletions src/v2/System/Router/Boot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { AnalyticsContext } from "../Analytics/AnalyticsContext"
import { ClientContext } from "v2/System/Router/buildClientAppContext"
import { SiftContainer } from "v2/Utils/SiftContainer"
import { setupSentryClient } from "lib/setupSentryClient"
import "v2/System/i18n/i18n"

export interface BootProps {
children: React.ReactNode
Expand Down
Loading