Merged in prefetch-api (pull request #60)

Prefetch api

* getInitialProps and redirect - half way

* ssr

* make load more works

* finish search with SSR, add isLoading

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "printWidth": 300,
+  "printWidth": 120,
   "semi": false,
   "endOfLine": "auto"
 }

components/AllResultsView/AllResultsView.tsx

@@ -41,11 +41,10 @@ type organicItemsObj = {
   pixelUrl: string
 }
 interface Prop {
-  organicResults: { items: organicItemsObj[] }
-  sponsoredResults: { items: sponsoredItemsObj[] }
-  relatedSearches: { items: relatedLinks[] }
-  imageResults: { items: image[] }
-  videoResults: { items: any[] }
+  organicItems: organicItemsObj[]
+  sponsoredItems: sponsoredItemsObj[]
+  relatedSearches: relatedLinks[]
+  imagesItems: image[]
   batches?: { [x: number]: any[] }
 }
 
@@ -70,10 +69,7 @@ const AllResultsView = ({ results, searchQuery }: ResultsProp) => {
 
   if (!results) return <></>
 
-  const { organicResults, sponsoredResults, relatedSearches, imageResults, batches } = results
-  const organicItems = organicResults.items
-  const sponsoredItems = sponsoredResults.items
-  const images = imageResults.items
+  const { organicItems, sponsoredItems, relatedSearches, imagesItems, batches } = results
   const mainlineSponsor = []
   const sidebarSponsor = []
 
@@ -83,17 +79,17 @@ const AllResultsView = ({ results, searchQuery }: ResultsProp) => {
   }
   const firstBatchOrganic = !organicItems.length ? [] : organicItems.slice(0, 3)
   const secondBatchOrganic = !organicItems.length ? [] : organicItems.slice(3, organicItems.length)
-  const combinedResults = [...mainlineSponsor, ...firstBatchOrganic, images, ...secondBatchOrganic]
+  const combinedResults = [...mainlineSponsor, ...firstBatchOrganic, imagesItems, ...secondBatchOrganic]
 
   return (
     <>
       {!organicItems?.length ? (
         <h3 className={styles.titleNoResults}>{t('search:no_result_found_query', { query: searchQuery })}</h3>
       ) : (
         <div className={styles.gridContainer}>
-          {relatedSearches.items.length !== 0 && (
+          {relatedSearches.length !== 0 && (
             <div className={styles.refineSearchesWrap}>
-              <RefineSearch refineSearches={relatedSearches.items} />
+              <RefineSearch refineSearches={relatedSearches} />
             </div>
           )}
           <div className={styles.main}>
@@ -108,9 +104,9 @@ const AllResultsView = ({ results, searchQuery }: ResultsProp) => {
                 }
               })}
 
-            {relatedSearches.items.length !== 0 && (
+            {relatedSearches.length !== 0 && (
               <div className={styles.refineSearchesMobile}>
-                <RefineSearch refineSearches={relatedSearches.items} />
+                <RefineSearch refineSearches={relatedSearches} />
               </div>
             )}
 

components/ImagesView/ImagesView.tsx

@@ -8,22 +8,16 @@ type ImagesProp = {
   imageUrl: string
   thumbnailUrl: string
   pixelUrl: string
+  length: () => number
+  map: any
 }
-
-interface Prop {
-  imageResults: { items: ImagesProp[] }
-}
-
 interface ResultsProp {
-  results: Prop
+  images: ImagesProp
   query: string
 }
 
-const ImagesView = ({ results, query }: ResultsProp) => {
+const ImagesView = ({ images, query }: ResultsProp) => {
   const { t } = useTranslation()
-  if (!results) return <></>
-
-  const images = results.imageResults.items
 
   return (
     <>

components/NewsView/NewsView.tsx

@@ -11,20 +11,16 @@ type NewsObj = {
   provider: string
   description: string
   pixelUrl: string
+  length: () => number
+  map: any
 }
-
-interface Prop {
-  newsResults: { items: NewsObj[] }
-}
-
 interface ResultsProp {
-  results: Prop
+  news: NewsObj
   query: string
 }
 
-const NewsView = ({ results, query }: ResultsProp) => {
+const NewsView = ({ news, query }: ResultsProp) => {
   const { t } = useTranslation()
-  const news = results.newsResults?.items
 
   return (
     <>

components/SearchBar/SearchBar.tsx

@@ -38,7 +38,7 @@ const SearchBar = ({ big }: SearchProps) => {
       openInNewTab: userState.openInNewTab,
     },
   })
-  const { register } = methods
+  const { handleSubmit, register } = methods
 
   if (type !== typeValue && typeValue !== initType) {
     setTypeValue(type)
@@ -113,6 +113,11 @@ const SearchBar = ({ big }: SearchProps) => {
     }
   }, [searchValue])
 
+  function onSubmit({ q }) {
+    setSearchValue(q)
+    search()
+  }
+
   function resetDropdown(event) {
     setIsSuggestionOpen(false)
     setHighlightIndex(null)
@@ -148,7 +153,7 @@ const SearchBar = ({ big }: SearchProps) => {
   return (
     <div className={styles.wrapper}>
       <FormProvider {...methods}>
-        <div className={styles.form}>
+        <div className={styles.form} onSubmit={handleSubmit(onSubmit)}>
           <form ref={inputEl}>
             <Input
               name='q'

components/TabsMenu/TabsMenu.tsx

@@ -1,11 +1,10 @@
-import React, { ReactElement } from 'react'
+import React from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import TabItem from '../TabItem/TabItem'
 interface tabProp {
   id: number
   resultType: string
   title: string
-  content: ReactElement
 }
 interface Props {
   tabItems: tabProp[]

components/VideosView/VideosView.tsx

@@ -9,21 +9,18 @@ type VideosProp = {
   targetedUrl: string
   thumbnailUrl: string
   pixelUrl: string
-}
-
-interface Prop {
-  videoResults: { items: VideosProp[] }
+  length: () => number
+  map: any
 }
 
 interface ResultsProp {
-  results: Prop
+  videos: VideosProp
   query: string
 }
 
-const VideosView = ({ results, query }: ResultsProp) => {
+const VideosView = ({ videos, query }: ResultsProp) => {
   const { t } = useTranslation()
-  const videos = results.videoResults.items
-
+  console.log({ videos })
   return (
     <>
       {!videos.length ? (

helpers/_cookies.tsx

@@ -4,6 +4,10 @@ export const COOKIE_NAME_NEW_TAB = 'efw_new_tab'
 export const COOKIE_NAME_COOKIE_CONSENT = 'efw_cookie_consent_accepted'
 export const COOKIE_NAME_SEARCH_COUNT = 'efw_search_count'
 
+export const splitCookies = function (cookies, cookieName) {
+  return cookies.split(`; ${cookieName}=`).pop().split(';').shift()
+}
+
 export function set(cookieName, cookieValue, expiryDays = 365) {
   const dateNow = new Date()
   dateNow.setTime(dateNow.getTime() + expiryDays * 240 * 600 * 600 * 1000)
@@ -12,5 +16,5 @@ export function set(cookieName, cookieValue, expiryDays = 365) {
 }
 
 export const get = function get(cookieName) {
-  return `; ${document.cookie}`.split(`; ${cookieName}=`).pop().split(';').shift()
+  return splitCookies(`; ${document.cookie}`, cookieName)
 }

package.json

@@ -5,7 +5,7 @@
   "repository": "https://bitbucket.org/elliotforwater/elliotforwater_v4/src/master/",
   "main": "index.js",
   "scripts": {
-    "dev": "next-translate && next dev",
+    "dev": "next-translate && NODE_TLS_REJECT_UNAUTHORIZED='0' next dev",
     "build": "next-translate && next build",
     "start": "next-translate && next start",
     "export": "next build && next export",
@@ -108,4 +108,4 @@
       "stylelint"
     ]
   }
-}
+}