Upgrade Dependencies and get react hooks working

packages/web/package.json

@@ -54,15 +54,15 @@
     "net": "^1.0.2",
     "network-speed": "^2.0.3",
     "next": "^8.0.3",
-    "next-i18next": "^0.36.5",
+    "next-i18next": "^2.1.1",
     "next-images": "^1.1.1",
     "next-plugin-transpile-modules": "^2.0.0",
-    "nuka-carousel": "git://github.com/cmcewen/nuka-carousel#fee86bf",
-    "react": "^16.9.0",
+    "nuka-carousel": "^4.5.13",
+    "react": "16.9.0",
     "react-apollo": "^2.5.8",
     "react-autosuggest": "^9.4.3",
     "react-debounce-input": "^3.2.0",
-    "react-dom": "^16.9.0",
+    "react-dom": "16.9.0",
     "react-google-recaptcha": "^1.1.0",
     "react-is": "^16.8.6",
     "react-lazyload": "^2.5.0",

packages/web/src/brandkit/Color.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { withNamespaces } from 'react-i18next'
 import { ImageBackground, ImageRequireSource, StyleSheet, Text, View } from 'react-native'
 import Palette from 'src/brandkit/color/Palette'
 import { brandStyles } from 'src/brandkit/common/constants'
@@ -13,7 +12,7 @@ import Page from 'src/brandkit/common/Page'
 import PageHeadline from 'src/brandkit/common/PageHeadline'
 import SectionTitle from 'src/brandkit/common/SectionTitle'
 import Judgement, { Value } from 'src/brandkit/logo/Judgement'
-import { I18nProps, NameSpaces } from 'src/i18n'
+import { I18nProps, NameSpaces, withNamespaces } from 'src/i18n'
 import { ScreenProps, ScreenSizes, withScreenSize } from 'src/layout/ScreenSize'
 import { hashNav } from 'src/shared/menu-items'
 import { colors, fonts, standardStyles } from 'src/styles'

packages/web/src/brandkit/IconsPage.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react'
-import { withNamespaces } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
-
 import { brandStyles, GAP } from 'src/brandkit/common/constants'
+import Fetch from 'src/brandkit/common/Fetch'
 import Page from 'src/brandkit/common/Page'
 import PageHeadline from 'src/brandkit/common/PageHeadline'
-import { I18nProps, NameSpaces, Trans } from 'src/i18n'
-
-import Fetch from 'src/brandkit/common/Fetch'
 import IconShowcase from 'src/brandkit/common/Showcase'
+import { I18nProps, NameSpaces, Trans, withNamespaces } from 'src/i18n'
 import InlineAnchor from 'src/shared/InlineAnchor'
 import { CeloLinks, hashNav } from 'src/shared/menu-items'
 import { fonts, standardStyles } from 'src/styles'

packages/web/src/brandkit/KeyImagery.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import { withNamespaces } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text } from 'react-native'
 import Page from 'src/brandkit/common/Page'
+import { NameSpaces, withNamespaces } from 'src/i18n'
 import { hashNav } from 'src/shared/menu-items'
 
 const { brandImagery } = hashNav
 
 // TODO in v 1.1
-const KeyImageryWrapped = withNamespaces()(
+const KeyImageryWrapped = withNamespaces(NameSpaces.brand)(
   React.memo(function KeyImagery() {
     return (
       <Page

packages/web/src/header/Header.3.tsx

@@ -3,10 +3,10 @@ import throttle from 'lodash.throttle'
 import dynamic from 'next/dynamic'
 import { SingletonRouter as Router, withRouter } from 'next/router'
 import * as React from 'react'
-import { WithNamespaces, withNamespaces } from 'react-i18next'
 import { Animated, Dimensions, Easing, StyleSheet, View } from 'react-native'
-import BlueBanner, { BANNER_HEIGHT, styles as bannerStyle } from 'src/header/BlueBanner'
+import BlueBanner, { styles as bannerStyle } from 'src/header/BlueBanner'
 import cssStyles from 'src/header/Header.3.scss'
+import { I18nProps, withNamespaces } from 'src/i18n'
 import MediumLogo from 'src/icons/MediumLogo'
 import Octocat from 'src/icons/Octocat'
 import LogoDarkBg from 'src/logos/LogoDarkBg'
@@ -37,7 +37,7 @@ interface OwnProps {
   router: Router
 }
 
-type Props = OwnProps & WithNamespaces
+type Props = OwnProps & I18nProps
 
 interface State {
   showDesktopMenu: boolean

packages/web/src/home/version3/HomeWork.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
-import { WithNamespaces, withNamespaces } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 import Fade from 'react-reveal/Fade'
 import { H1 } from 'src/fonts/Fonts'
+import { I18nProps, withNamespaces } from 'src/i18n'
 import { Cell, GridRow, Spans } from 'src/layout/GridRow'
 import Button, { BTN, SIZE } from 'src/shared/Button.3'
 import menuItems from 'src/shared/menu-items'
 import { standardStyles, textStyles } from 'src/styles'
 
-type Props = WithNamespaces
+type Props = I18nProps
 
 class HomeWork extends React.PureComponent<Props> {
   render() {

packages/web/src/i18n.ts

@@ -1,17 +1,17 @@
-import NextI18Next, { I18nProps as i18nProps } from 'next-i18next'
+import NextI18Next, { I18n, TFunction } from 'next-i18next'
 
 const options = { defaultLanguage: 'en', otherLanguages: ['en'], saveMissing: false }
 const NextI18NextInstance = new NextI18Next(options)
-
 export const Trans = NextI18NextInstance.Trans
 
 export interface I18nProps {
-  t: i18nProps['t']
-  i18n: i18nProps['i18n']
+  t: TFunction
+  i18n: I18n
 }
 
 export default NextI18NextInstance
-export const { appWithTranslation, withNamespaces } = NextI18NextInstance
+export const { appWithTranslation, withTranslation } = NextI18NextInstance
+export const withNamespaces = withTranslation
 
 export enum NameSpaces {
   common = 'common',