update dependencies

CHANGELOG.md

@@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 ### Security
+
+- upgraded dependencies
  
 ## [0.9.6] - 2020-07-17
 

components/auth/footer.tsx

@@ -30,7 +30,13 @@ const AuthFooterInner: React.FC<Props> = (props) => {
   return (
     <footer className={scss.footer}>
       <Link href={'/admin'}>
-        <Button type={'link'} ghost>
+        <Button
+          type={'link'}
+          ghost
+          style={{
+            color: '#FFF',
+          }}
+        >
           {t('admin')}
         </Button>
       </Link>
@@ -39,18 +45,39 @@ const AuthFooterInner: React.FC<Props> = (props) => {
             <span style={{ color: '#FFF' }} key={'user'}>
               Hi, {props.me.username}
             </span>,
-            <Button key={'logout'} type={'link'} ghost onClick={logout}>
+            <Button
+              key={'logout'}
+              type={'link'}
+              ghost
+              onClick={logout}
+              style={{
+                color: '#FFF',
+              }}
+            >
               {t('logout')}
             </Button>,
           ]
         : [
             <Link href={'/login'} key={'login'}>
-              <Button type={'link'} ghost>
+              <Button
+                type={'link'}
+                ghost
+                style={{
+                  color: '#FFF',
+                }}
+              >
                 {t('login')}
               </Button>
             </Link>,
             <Link href={'/register'} key={'register'}>
-              <Button type={'link'} ghost disabled={data ? data.disabledSignUp.value : false}>
+              <Button
+                type={'link'}
+                ghost
+                disabled={data ? data.disabledSignUp.value : false}
+                style={{
+                  color: '#FFF',
+                }}
+              >
                 {t('register')}
               </Button>
             </Link>,

components/omf.tsx

@@ -6,7 +6,7 @@ import scss from './omf.module.scss'
 export const Omf: React.FC = () => {
   const { data, loading } = useQuery<SettingsQueryData>(SETTINGS_QUERY)
 
-  if (loading || data.hideContrib.value) {
+  if (loading || (data && data.hideContrib.value)) {
     return null
   }
 

package.json

@@ -12,57 +12,58 @@
     "translation:missing": "cross-env TS_NODE_TRANSPILE_ONLY=true ts-node locales/missing.ts"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.1.0",
+    "@ant-design/icons": "^4.2.2",
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/react-common": "^3.1.4",
+    "@apollo/react-hooks": "^4.0.0",
     "@lifeomic/axios-fetch": "^1.4.2",
-    "antd": "^4.2.2",
+    "antd": "^4.6.2",
     "apollo-boost": "^0.4.9",
-    "axios": "^0.19.2",
+    "axios": "^0.20.0",
     "cross-env": "^7.0.2",
-    "dayjs": "^1.8.27",
+    "dayjs": "^1.8.34",
-    "graphql": "^15.0.0",
+    "graphql": "^15.3.0",
-    "i18next": "^19.4.5",
+    "i18next": "^19.7.0",
-    "i18next-browser-languagedetector": "^4.2.0",
+    "i18next-browser-languagedetector": "^6.0.1",
-    "next": "9.4.0",
+    "next": "9.5.3",
-    "next-images": "^1.4.0",
+    "next-images": "^1.4.1",
-    "next-redux-wrapper": "^6.0.0",
+    "next-redux-wrapper": "^6.0.2",
     "react": "16.13.1",
     "react-color": "^2.18.1",
     "react-dom": "16.13.1",
     "react-github-button": "^0.1.11",
-    "react-i18next": "^11.5.0",
+    "react-i18next": "^11.7.2",
-    "react-icons": "^3.10.0",
+    "react-icons": "^3.11.0",
-    "react-id-swiper": "^3.0.0",
+    "react-id-swiper": "^4.0.0",
     "react-markdown": "^4.3.1",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
-    "sass": "^1.26.5",
+    "sass": "^1.26.10",
     "styled-components": "^5.1.1",
-    "swiper": "^5.4.1"
+    "swiper": "^6.1.2"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
     "@types/lifeomic__axios-fetch": "^1.4.0",
-    "@types/node": "^14.0.1",
+    "@types/node": "^14.6.2",
     "@types/node-fetch": "^2.5.7",
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.49",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.1.2",
-    "@types/swiper": "^5.3.1",
+    "@types/swiper": "^5.4.0",
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
-    "@typescript-eslint/parser": "^3.2.0",
+    "@typescript-eslint/parser": "^4.0.1",
-    "commander": "^5.1.0",
+    "commander": "^6.1.0",
-    "eslint": "^7.2.0",
+    "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-react-hooks": "^4.1.0",
     "glob": "^7.1.6",
     "lodash.merge": "^4.6.2",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
-    "ts-node": "^8.10.2",
+    "ts-node": "^9.0.0",
-    "typescript": "^3.9.2"
+    "typescript": "^4.0.2"
   }
 }

pages/_app.tsx

@@ -1,14 +1,16 @@
 import { ApolloProvider } from '@apollo/react-common'
 import { buildAxiosFetch } from '@lifeomic/axios-fetch'
 import 'antd/dist/antd.css'
+import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks'
 import ApolloClient from 'apollo-boost'
 import 'assets/global.scss'
 import 'assets/variables.scss'
 import axios from 'axios'
 import { authConfig } from 'components/with.auth'
 import 'i18n'
-import { AppProps } from 'next/app'
+import { AppInitialProps, AppProps } from 'next/app'
 import getConfig from 'next/config'
+import { AppType } from 'next/dist/next-server/lib/utils'
 import Head from 'next/head'
 import React from 'react'
 import { wrapper } from 'store'
@@ -22,22 +24,29 @@ const { publicRuntimeConfig } = getConfig() as {
 const client = new ApolloClient({
   uri: publicRuntimeConfig.endpoint,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-explicit-any
-  fetch: buildAxiosFetch(axios) as any,
+  fetch: buildAxiosFetch(axios as any) as any,
   request: (operation): void => {
     operation.setContext(authConfig())
   },
 })
 
-const App: React.FC<AppProps> = ({ Component, pageProps }) => {
+const App: AppType = ({ Component, pageProps }) => {
   return (
     <ApolloProvider client={client}>
-      <Head>
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
-        <title>OhMyForm</title>
+      <ApolloHooksProvider client={client as any}>
-        <meta name="theme-color" content={'#4182e4'} />
+        <Head>
-      </Head>
+          <title>OhMyForm</title>
-      <Component {...pageProps} />
+          <meta name="theme-color" content={'#4182e4'} />
+        </Head>
+        <Component {...pageProps} />
+      </ApolloHooksProvider>
     </ApolloProvider>
   )
 }
 
+App.getInitialProps = (): AppInitialProps => ({
+  pageProps: {},
+})
+
 export default wrapper.withRedux(App)

pages/form/[id]/index.tsx

@@ -65,7 +65,6 @@ const Index: NextPage<Props> = () => {
   const goPrev = () => swiper && swiper.slidePrev()
 
   const swiperConfig: ReactIdSwiperProps = {
-    getSwiper: setSwiper,
     direction: 'vertical',
     allowSlideNext: false,
     allowSlidePrev: true,
@@ -79,7 +78,8 @@ const Index: NextPage<Props> = () => {
       }}
     >
       <Omf />
-      <Swiper {...swiperConfig}>
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}
+      <Swiper {...swiperConfig} ref={(element) => element && setSwiper((element as any).swiper)}>
         {[
           data.form.startPage.show ? (
             <FormPage

pages/login/index.tsx

@@ -111,13 +111,25 @@ const Index: NextPage = () => {
         <Button.Group className={scss.otherActions}>
           {(!data || !data.disabledSignUp.value) && (
             <Link href={'/register'}>
-              <Button type={'link'} ghost>
+              <Button
+                type={'link'}
+                ghost
+                style={{
+                  color: '#FFF',
+                }}
+              >
                 {t('register')}
               </Button>
             </Link>
           )}
           <Link href={'/login/recover'}>
-            <Button type={'link'} ghost>
+            <Button
+              type={'link'}
+              ghost
+              style={{
+                color: '#FFF',
+              }}
+            >
               {t('recover')}
             </Button>
           </Link>

pages/register.tsx

@@ -119,7 +119,13 @@ const Register: NextPage = () => {
 
         <Button.Group className={scss.otherActions}>
           <Link href={'/login'}>
-            <Button type={'link'} ghost>
+            <Button
+              type={'link'}
+              ghost
+              style={{
+                color: '#FFF',
+              }}
+            >
               {t('register:gotoLogin')}
             </Button>
           </Link>

store/index.ts

@@ -25,4 +25,4 @@ const makeStore: MakeStore<State> = () => {
   return createStore(root, undefined, composeWithDevTools(applyMiddleware(thunkMiddleware)))
 }
 
-export const wrapper = createWrapper<State>(makeStore, { debug: true })
+export const wrapper = createWrapper<State>(makeStore, { debug: false })