feat(examples): improve examples

* update deps
* refactor some modules

examples/example-next-gip/eggs/aviasales/events.ts

@@ -1,7 +1,5 @@
 import mitt from 'mitt'
 
-export const AviasalesEventEmitter = mitt()
-
 export enum AviasalesEvent {
   GET_TICKETS = 'aviasales/GET_TICKETS',
   CHANGE_STOPS = 'aviasales/CHANGE_STOPS',
@@ -12,6 +10,13 @@ export enum ChangeStopsMassive {
   UNCHECK_ALL = 'UNCHECK_ALL',
 }
 
+type MittEvents = {
+  [AviasalesEvent.GET_TICKETS]: string | undefined
+  [AviasalesEvent.CHANGE_STOPS]: number | ChangeStopsMassive
+}
+
+export const AviasalesEventEmitter = mitt<MittEvents>()
+
 export const AviasalesPublicAction = {
   getTickets() {
     AviasalesEventEmitter.emit(AviasalesEvent.GET_TICKETS, AviasalesEvent.GET_TICKETS)

examples/example-next-gip/eggs/aviasales/saga/tickets-saga.ts

@@ -10,7 +10,7 @@ import { getTickets } from '@/eggs/aviasales/saga/get-tickets'
 import { isAllTicketLoadedSelector } from '@/eggs/aviasales/selectors'
 import { StoreActionType } from '@/store/action-types'
 
-type ChannelPayload = string
+type ChannelPayload = string | undefined
 
 const subscribe: Subscribe<ChannelPayload> = emitter => {
   const handler: Handler<ChannelPayload> = payload => {

examples/example-next-gip/eggs/count/index.ts

@@ -1,5 +1,6 @@
 import type { Egg } from '@redux-eggs/core'
 
+import { skipHydration } from '@/eggs/count/middlewares'
 import { COUNT_REDUCER_KEY, countReducer } from '@/eggs/count/reducer'
 import { countWatcher } from '@/eggs/count/saga'
 import type { AppStore } from '@/store'
@@ -10,6 +11,7 @@ export const getCountEgg = (): Egg<AppStore> => {
     reducersMap: {
       [COUNT_REDUCER_KEY]: countReducer,
     },
+    middlewares: [skipHydration],
     sagas: [countWatcher],
   }
 }

examples/example-next-gip/eggs/count/middlewares.ts

@@ -0,0 +1,13 @@
+import type { Middleware } from 'redux'
+
+import { COUNT_REDUCER_KEY } from '@/eggs/count/reducer'
+import { countSelector } from '@/eggs/count/selectors'
+import { StoreActionType } from '@/store/action-types'
+
+export const skipHydration: Middleware = store => next => action => {
+  if (action.type === StoreActionType.HYDRATE && countSelector(store.getState())) {
+    delete action.payload[COUNT_REDUCER_KEY]
+  }
+
+  next(action)
+}

examples/example-next-gip/next.config.js

@@ -7,13 +7,6 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    // ignoreBuildErrors: true,
-  },
   images: {
     domains: ['pics.avs.io'],
   },

examples/example-next-gip/package.json

@@ -35,15 +35,15 @@
     "@redux-saga/symbols": "1.1.2",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
-    "dayjs": "1.10.4",
-    "immer": "9.0.6",
-    "mitt": "2.1.0",
-    "nanoid": "3.1.30",
-    "next": "12.0.8",
+    "dayjs": "1.10.7",
+    "immer": "9.0.12",
+    "mitt": "3.0.0",
+    "nanoid": "3.3.1",
+    "next": "12.1.0",
     "nprogress": "0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intersection-observer": "8.32.0",
+    "react-intersection-observer": "8.33.1",
     "react-redux": "7.2.6",
     "redux": "4.1.2",
     "redux-devtools-extension": "2.13.9",
@@ -52,23 +52,23 @@
     "reselect": "4.1.5"
   },
   "devDependencies": {
-    "@jest/types": "27.4.2",
-    "@next/bundle-analyzer": "12.0.8",
-    "@types/jest": "27.0.3",
-    "@types/node": "16.11.11",
+    "@jest/types": "27.5.1",
+    "@next/bundle-analyzer": "12.1.0",
+    "@types/jest": "27.4.0",
+    "@types/node": "17.0.18",
     "@types/nprogress": "0.2.0",
-    "@types/react": "17.0.37",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
-    "@types/redux-logger": "3.0.8",
-    "eslint": "7.32.0",
-    "eslint-config-next": "12.0.8",
-    "jest": "27.4.2",
-    "redux-saga-test-plan": "4.0.3",
-    "sass": "1.35.2",
-    "styled-jsx": "4.0.0",
-    "ts-jest": "27.1.0",
+    "@types/react-redux": "7.1.22",
+    "@types/redux-logger": "3.0.9",
+    "eslint": "8.9.0",
+    "eslint-config-next": "12.1.0",
+    "jest": "27.5.1",
+    "redux-saga-test-plan": "4.0.4",
+    "sass": "1.49.8",
+    "styled-jsx": "5.0.0",
+    "ts-jest": "27.1.3",
     "tslib": "2.3.1",
-    "typescript": "4.5.2"
+    "typescript": "4.5.5"
   }
 }

examples/example-next-gip/pages/posts/gip/[id].tsx

@@ -19,9 +19,13 @@ interface HeadingProps {
 
 type Props = HeadingProps & { errorCode?: number }
 
-const postTitleSelector = createSelector(isActivePostLoading, activePostSelector, (isLoading, activePost): string =>
-  isLoading ? 'Post is loading ...' : `${activePost?.title || 'Empty title'}`,
-)
+const postTitleSelector = createSelector(isActivePostLoading, activePostSelector, (isLoading, activePost): string => {
+  if (isLoading) {
+    return 'Post is loading ...'
+  }
+
+  return `${activePost?.title || 'Empty title'}`
+})
 
 const Heading: FC<HeadingProps> = ({ title }) => {
   const postTitle = useSelector(postTitleSelector)

examples/example-next-rtk/eggs/aviasales/events.ts

@@ -1,7 +1,5 @@
 import mitt from 'mitt'
 
-export const AviasalesEventEmitter = mitt()
-
 export enum AviasalesEvent {
   GET_TICKETS = 'aviasales/GET_TICKETS',
   CHANGE_STOPS = 'aviasales/CHANGE_STOPS',
@@ -12,6 +10,13 @@ export enum ChangeStopsMassive {
   UNCHECK_ALL = 'UNCHECK_ALL',
 }
 
+type MittEvents = {
+  [AviasalesEvent.GET_TICKETS]: string | undefined
+  [AviasalesEvent.CHANGE_STOPS]: number | ChangeStopsMassive
+}
+
+export const AviasalesEventEmitter = mitt<MittEvents>()
+
 export const AviasalesPublicAction = {
   getTickets() {
     AviasalesEventEmitter.emit(AviasalesEvent.GET_TICKETS, AviasalesEvent.GET_TICKETS)

examples/example-next-rtk/eggs/aviasales/saga/tickets-saga.ts

@@ -10,7 +10,7 @@ import { isAllTicketLoadedSelector } from '@/eggs/aviasales/selectors'
 import { AviasalesReducerAction } from '@/eggs/aviasales/slice'
 import { StoreActionType } from '@/store/action-types'
 
-type ChannelPayload = string
+type ChannelPayload = string | undefined
 
 const subscribe: Subscribe<ChannelPayload> = emitter => {
   const handler: Handler<ChannelPayload> = payload => {

examples/example-next-rtk/eggs/count/middlewares.ts

@@ -0,0 +1,13 @@
+import type { Middleware } from '@reduxjs/toolkit'
+
+import { countSelector } from '@/eggs/count/selectors'
+import { COUNT_SLICE } from '@/eggs/count/slice'
+import { StoreActionType } from '@/store/action-types'
+
+export const skipHydration: Middleware = store => next => action => {
+  if (action.type === StoreActionType.HYDRATE && countSelector(store.getState())) {
+    delete action.payload[COUNT_SLICE]
+  }
+
+  next(action)
+}

examples/example-next-rtk/next.config.js

@@ -7,13 +7,6 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    // ignoreBuildErrors: true,
-  },
   images: {
     domains: ['pics.avs.io'],
   },

examples/example-next-rtk/package.json

@@ -33,40 +33,40 @@
     "@redux-eggs/saga-extension": "workspace:*",
     "@redux-saga/is": "1.1.2",
     "@redux-saga/symbols": "1.1.2",
-    "@reduxjs/toolkit": "1.6.2",
+    "@reduxjs/toolkit": "1.7.2",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
-    "dayjs": "1.10.4",
-    "mitt": "2.1.0",
-    "next": "12.0.8",
+    "dayjs": "1.10.7",
+    "mitt": "3.0.0",
+    "next": "12.1.0",
     "nprogress": "0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intersection-observer": "8.32.0",
+    "react-intersection-observer": "8.33.1",
     "react-redux": "7.2.6",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
-    "typed-redux-saga": "1.3.1"
+    "typed-redux-saga": "1.4.0"
   },
   "devDependencies": {
     "@jambit/eslint-plugin-typed-redux-saga": "0.4.0",
-    "@jest/types": "27.4.2",
-    "@next/bundle-analyzer": "12.0.8",
-    "@types/jest": "27.0.3",
-    "@types/node": "16.11.11",
+    "@jest/types": "27.5.1",
+    "@next/bundle-analyzer": "12.1.0",
+    "@types/jest": "27.4.0",
+    "@types/node": "17.0.18",
     "@types/nprogress": "0.2.0",
-    "@types/react": "17.0.37",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
-    "@types/redux-logger": "3.0.8",
-    "eslint": "7.32.0",
-    "eslint-config-next": "12.0.8",
-    "jest": "27.4.2",
-    "redux-saga-test-plan": "4.0.3",
-    "sass": "1.35.2",
-    "styled-jsx": "4.0.0",
-    "ts-jest": "27.1.0",
+    "@types/react-redux": "7.1.22",
+    "@types/redux-logger": "3.0.9",
+    "eslint": "8.9.0",
+    "eslint-config-next": "12.1.0",
+    "jest": "27.5.1",
+    "redux-saga-test-plan": "4.0.4",
+    "sass": "1.49.8",
+    "styled-jsx": "5.0.0",
+    "ts-jest": "27.1.3",
     "tslib": "2.3.1",
-    "typescript": "4.5.2"
+    "typescript": "4.5.5"
   }
 }

examples/example-next-rtk/pages/posts/gip/[id].tsx

@@ -19,9 +19,13 @@ interface HeadingProps {
 
 type Props = HeadingProps & { errorCode?: number }
 
-const postTitleSelector = createSelector(isActivePostLoading, activePostSelector, (isLoading, activePost): string =>
-  isLoading ? 'Post is loading ...' : `${activePost?.title || 'Empty title'}`,
-)
+const postTitleSelector = createSelector(isActivePostLoading, activePostSelector, (isLoading, activePost): string => {
+  if (isLoading) {
+    return 'Post is loading ...'
+  }
+
+  return `${activePost?.title || 'Empty title'}`
+})
 
 const Heading: FC<HeadingProps> = ({ title }) => {
   const postTitle = useSelector(postTitleSelector)

examples/example-next/eggs/aviasales/events.ts

@@ -1,7 +1,5 @@
 import mitt from 'mitt'
 
-export const AviasalesEventEmitter = mitt()
-
 export enum AviasalesEvent {
   GET_TICKETS = 'aviasales/GET_TICKETS',
   CHANGE_STOPS = 'aviasales/CHANGE_STOPS',
@@ -12,6 +10,13 @@ export enum ChangeStopsMassive {
   UNCHECK_ALL = 'UNCHECK_ALL',
 }
 
+type MittEvents = {
+  [AviasalesEvent.GET_TICKETS]: string | undefined
+  [AviasalesEvent.CHANGE_STOPS]: number | ChangeStopsMassive
+}
+
+export const AviasalesEventEmitter = mitt<MittEvents>()
+
 export const AviasalesPublicAction = {
   getTickets() {
     AviasalesEventEmitter.emit(AviasalesEvent.GET_TICKETS, AviasalesEvent.GET_TICKETS)

examples/example-next/eggs/aviasales/saga/tickets-saga.ts

@@ -10,7 +10,7 @@ import { getTickets } from '@/eggs/aviasales/saga/get-tickets'
 import { isAllTicketLoadedSelector } from '@/eggs/aviasales/selectors'
 import { StoreActionType } from '@/store/action-types'
 
-type ChannelPayload = string
+type ChannelPayload = string | undefined
 
 const subscribe: Subscribe<ChannelPayload> = emitter => {
   const handler: Handler<ChannelPayload> = payload => {

examples/example-next/eggs/count/index.ts

@@ -1,5 +1,6 @@
 import type { Egg } from '@redux-eggs/core'
 
+import { skipHydration } from '@/eggs/count/middlewares'
 import { COUNT_REDUCER_KEY, countReducer } from '@/eggs/count/reducer'
 import { countWatcher } from '@/eggs/count/saga'
 import type { AppStore } from '@/store'
@@ -10,6 +11,7 @@ export const getCountEgg = (): Egg<AppStore> => {
     reducersMap: {
       [COUNT_REDUCER_KEY]: countReducer,
     },
+    middlewares: [skipHydration],
     sagas: [countWatcher],
   }
 }

examples/example-next/eggs/count/middlewares.ts

@@ -0,0 +1,13 @@
+import type { Middleware } from 'redux'
+
+import { COUNT_REDUCER_KEY } from '@/eggs/count/reducer'
+import { countSelector } from '@/eggs/count/selectors'
+import { StoreActionType } from '@/store/action-types'
+
+export const skipHydration: Middleware = store => next => action => {
+  if (action.type === StoreActionType.HYDRATE && countSelector(store.getState())) {
+    delete action.payload[COUNT_REDUCER_KEY]
+  }
+
+  next(action)
+}

examples/example-next/next.config.js

@@ -7,13 +7,6 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    // ignoreBuildErrors: true,
-  },
   images: {
     domains: ['pics.avs.io'],
   },