transfer to nextjs has just completed

frontend/src/__tests__/components/DisplayPost.test.js

@@ -4,13 +4,7 @@ import DisplayPost from '../../components/DisplayPost'
 import renderWithStore from '../../tests/utils/renderWithStore'
 
 const mockReplace = jest.fn()
-//
-// jest.mock('react-router', () => {
-//   return {
-//     ...jest.requireActual('react-router'),
-//     useHistory: () => ({ replace: mockReplace }),
-//   }
-// })
+
 // TODO: fix this test
 describe('DisplayPost', () => {
   xit('sets adds the post slug in url when entering post details without providing slug', async () => {

frontend/src/__tests__/components/index.test.js

@@ -0,0 +1,33 @@
+import { prettyDOM, render } from '@testing-library/react'
+
+import { Provider } from 'react-redux'
+import { createStore, applyMiddleware, compose } from 'redux'
+import thunk from 'redux-thunk'
+import rootReducer from '../../store/reducers/reducers'
+import AllPosts from '../../components/AllPosts'
+
+const store = createStore(rootReducer, compose(applyMiddleware(thunk)))
+
+window.scrollTo = jest.fn()
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '/',
+      query: '',
+      asPath: '/',
+    }
+  },
+}))
+
+describe('index page ', () => {
+  xit('should properly render skeleton', async () => {
+    const { container } = render(
+      <Provider store={store}>
+        <AllPosts />
+      </Provider>
+    )
+
+    expect(container).toBeInTheDocument()
+  })
+})

frontend/src/components/AllPosts.js

@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { useDispatch, useSelector } from 'react-redux'
-// import { useLocation } from 'react-router-dom'
+
 import { useRouter } from 'next/router'
 import { isEmpty } from 'lodash'
 
-// import { saveAllPosts } from '../store/actions/actions'
 import { saveAllPosts } from '../store/actions/actions'
 import { selectPostsWithStatus } from '../utils/selectors/selectPosts'
 import { statusType } from '../utils/constants'
@@ -17,11 +16,9 @@ import PostSkeletonTemplate from './PostSkeletonTemplate'
 
 const AllPosts = () => {
   const router = useRouter()
-  // const { search } = useLocation()
-  const dispatch = useDispatch()
 
+  const dispatch = useDispatch()
   let searchParams = router.query.page
-
   const [posts, status] = useSelector(selectPostsWithStatus)
 
   useEffect(() => {

frontend/src/components/Markdown.js

@@ -1,8 +1,5 @@
-import React from 'react'
-
 import ReactMarkdown from 'react-markdown'
 import { useSelector } from 'react-redux'
-// import { useLocation } from 'react-router-dom'
 import { useRouter } from 'next/router'
 import CodeBlock from './CodeBlock'
 import TextBlock from './TextBlock'

frontend/src/components/PostContent.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react'
 
-// import { Link, useLocation, useHistory } from 'react-router-dom'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseISO } from 'date-fns'

frontend/src/utils/customHooks/__tests__/useOnRouteLeave.test.js

@@ -1,11 +1,15 @@
 import { renderHook } from '@testing-library/react-hooks'
 import { useOnRouteLeave } from '../useOnRouteLeave'
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: '/test',
-  }),
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '',
+      pathname: '',
+      query: '',
+      asPath: '/test',
+    }
+  },
 }))
 
 describe('useOnRouteLeave', () => {

frontend/src/utils/customHooks/__tests__/useSearchQuery.test.js

@@ -1,17 +1,22 @@
 import { renderHook } from '@testing-library/react-hooks'
 import { useSearchQuery } from '../useSearchQuery'
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: '/test',
-    search: '?q=testQuery',
-  }),
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '',
+      pathname: '/search',
+      query: {
+        q: 'testQuery',
+      },
+      asPath: '',
+    }
+  },
 }))
 
 describe('useSearchQuery', () => {
   it('should ', () => {
     const { result } = renderHook(() => useSearchQuery())
+
     expect(result.current).toBe('testQuery')
   })
 })

frontend/src/utils/customHooks/useOnRouteLeave.js

@@ -1,7 +1,5 @@
-// import { useLocation } from 'react-router-dom'
 import { useRouter } from 'next/router'
 export const useOnRouteLeave = route => {
-  // const location = useLocation()
   const router = useRouter()
 
   if (router.pathname !== route) {

frontend/src/utils/customHooks/useSearchQuery.js

@@ -1,4 +1,3 @@
-// import { useLocation } from 'react-router-dom'
 import { useRouter } from 'next/router'
 
 export const useSearchQuery = () => useRouter().query.q