Merge pull request #7 from kolplattformen/feat/useNewsItem
feat: 🎸 useNewsDetails(child, news)
This commit is contained in:
commit
01081609c6
|
@ -19,7 +19,7 @@
|
|||
"publish-package": "npm publish --access public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@skolplattformen/embedded-api": "^0.20.0",
|
||||
"@skolplattformen/embedded-api": "^0.22.0",
|
||||
"react-redux": "^7.2.2",
|
||||
"redux": "^4.0.5"
|
||||
},
|
||||
|
|
|
@ -18,6 +18,7 @@ const createApi = () => ({
|
|||
getClassmates: jest.fn(),
|
||||
getMenu: jest.fn(),
|
||||
getNews: jest.fn(),
|
||||
getNewsDetails: jest.fn(),
|
||||
getNotifications: jest.fn(),
|
||||
getSchedule: jest.fn(),
|
||||
getUser: jest.fn(),
|
||||
|
|
13
src/hooks.ts
13
src/hooks.ts
|
@ -34,6 +34,7 @@ const hook = <T>(
|
|||
selector: StoreSelector<T>,
|
||||
apiCaller: (api: Api) => ApiCall<T>,
|
||||
): EntityHookResult<T> => {
|
||||
const getState = (): EntityStoreRootState => store.getState() as unknown as EntityStoreRootState
|
||||
const select = (storeState: EntityStoreRootState) => {
|
||||
const stateMap = selector(storeState) || {}
|
||||
const state = stateMap[key] || { status: 'pending', data: defaultValue }
|
||||
|
@ -42,7 +43,7 @@ const hook = <T>(
|
|||
const {
|
||||
api, isLoggedIn, reporter, storage,
|
||||
} = useApi()
|
||||
const initialState = select(store.getState() as EntityStoreRootState)
|
||||
const initialState = select(getState())
|
||||
const [state, setState] = useState(initialState)
|
||||
const dispatch = useDispatch()
|
||||
|
||||
|
@ -70,7 +71,7 @@ const hook = <T>(
|
|||
useEffect(() => { load() }, [isLoggedIn])
|
||||
|
||||
const listener = () => {
|
||||
const newState = select(store.getState() as EntityStoreRootState)
|
||||
const newState = select(getState())
|
||||
if (newState.status !== state.status
|
||||
|| newState.data !== state.data
|
||||
|| newState.error !== state.error) {
|
||||
|
@ -130,6 +131,14 @@ export const useNews = (child: Child) => hook<NewsItem[]>(
|
|||
(api) => () => api.getNews(child),
|
||||
)
|
||||
|
||||
export const useNewsDetails = (child: Child, news: NewsItem) => hook<NewsItem>(
|
||||
'NEWS_DETAILS',
|
||||
`news_details_${news.id}`,
|
||||
news,
|
||||
(s) => s.newsDetails,
|
||||
(api) => () => api.getNewsDetails(child, news),
|
||||
)
|
||||
|
||||
export const useNotifications = (child: Child) => hook<Notification[]>(
|
||||
'NOTIFICATIONS',
|
||||
`notifications_${child.id}`,
|
||||
|
|
|
@ -70,5 +70,6 @@ export const calendar = createReducer<CalendarItem[]>('CALENDAR')
|
|||
export const classmates = createReducer<Classmate[]>('CLASSMATES')
|
||||
export const menu = createReducer<MenuItem[]>('MENU')
|
||||
export const news = createReducer<NewsItem[]>('NEWS')
|
||||
export const newsDetails = createReducer<NewsItem[]>('NEWS_DETAILS')
|
||||
export const notifications = createReducer<Notification[]>('NOTIFICATIONS')
|
||||
export const schedule = createReducer<ScheduleItem[]>('SCHEDULE')
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
classmates,
|
||||
menu,
|
||||
news,
|
||||
newsDetails,
|
||||
notifications,
|
||||
schedule,
|
||||
user,
|
||||
|
@ -17,6 +18,7 @@ const appReducer = combineReducers({
|
|||
classmates,
|
||||
menu,
|
||||
news,
|
||||
newsDetails,
|
||||
notifications,
|
||||
schedule,
|
||||
user,
|
||||
|
|
30
src/types.ts
30
src/types.ts
|
@ -43,21 +43,22 @@ export interface ExtraActionProps<T> {
|
|||
saveToCache?: (value: string) => Promise<void>
|
||||
}
|
||||
export type EntityActionType = 'GET_FROM_API'
|
||||
| 'RESULT_FROM_API'
|
||||
| 'API_ERROR'
|
||||
| 'GET_FROM_CACHE'
|
||||
| 'RESULT_FROM_CACHE'
|
||||
| 'STORE_IN_CACHE'
|
||||
| 'CLEAR'
|
||||
| 'RESULT_FROM_API'
|
||||
| 'API_ERROR'
|
||||
| 'GET_FROM_CACHE'
|
||||
| 'RESULT_FROM_CACHE'
|
||||
| 'STORE_IN_CACHE'
|
||||
| 'CLEAR'
|
||||
export type EntityName = 'USER'
|
||||
| 'CHILDREN'
|
||||
| 'CALENDAR'
|
||||
| 'CLASSMATES'
|
||||
| 'MENU'
|
||||
| 'NEWS'
|
||||
| 'NOTIFICATIONS'
|
||||
| 'SCHEDULE'
|
||||
| 'ALL'
|
||||
| 'CHILDREN'
|
||||
| 'CALENDAR'
|
||||
| 'CLASSMATES'
|
||||
| 'MENU'
|
||||
| 'NEWS'
|
||||
| 'NEWS_DETAILS'
|
||||
| 'NOTIFICATIONS'
|
||||
| 'SCHEDULE'
|
||||
| 'ALL'
|
||||
export interface EntityAction<T> extends Action<EntityActionType> {
|
||||
entity: EntityName
|
||||
data?: T
|
||||
|
@ -76,6 +77,7 @@ export interface EntityStoreRootState {
|
|||
classmates: EntityMap<Classmate[]>,
|
||||
menu: EntityMap<MenuItem[]>,
|
||||
news: EntityMap<NewsItem[]>,
|
||||
newsDetails: EntityMap<NewsItem>,
|
||||
notifications: EntityMap<Notification[]>,
|
||||
schedule: EntityMap<ScheduleItem[]>,
|
||||
}
|
||||
|
|
|
@ -0,0 +1,218 @@
|
|||
import React from 'react'
|
||||
import { renderHook, act } from '@testing-library/react-hooks'
|
||||
import { ApiProvider } from './provider'
|
||||
import { useNewsDetails } from './hooks'
|
||||
import store from './store'
|
||||
import init from './__mocks__/@skolplattformen/embedded-api'
|
||||
import createStorage from './__mocks__/AsyncStorage'
|
||||
import reporter from './__mocks__/reporter'
|
||||
|
||||
const pause = (ms = 0) => new Promise((r) => setTimeout(r, ms))
|
||||
|
||||
describe('useNewsDetails(child, newsItem)', () => {
|
||||
let api
|
||||
let storage
|
||||
let response
|
||||
let cached
|
||||
let child
|
||||
let newsItem
|
||||
const wrapper = ({ children }) => (
|
||||
<ApiProvider
|
||||
api={api}
|
||||
storage={storage}
|
||||
reporter={reporter}
|
||||
>
|
||||
{children}
|
||||
</ApiProvider>
|
||||
)
|
||||
beforeEach(() => {
|
||||
cached = { id: '1337', modified: 'yesterday', body: 'rich and old' }
|
||||
response = { id: '1337', modified: 'now', body: 'rich and new' }
|
||||
api = init()
|
||||
api.getNewsDetails.mockImplementation(() => (
|
||||
new Promise((res) => {
|
||||
setTimeout(() => res(response), 50)
|
||||
})
|
||||
))
|
||||
storage = createStorage({
|
||||
news_details_1337: { ...cached },
|
||||
}, 2)
|
||||
child = { id: 10 }
|
||||
newsItem = { id: '1337', modified: 'now', body: 'simple' }
|
||||
})
|
||||
afterEach(async () => {
|
||||
await act(async () => {
|
||||
await pause(70)
|
||||
store.dispatch({ entity: 'ALL', type: 'CLEAR' })
|
||||
})
|
||||
})
|
||||
it('returns correct initial value', () => {
|
||||
const { result } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
expect(result.current.status).toEqual('pending')
|
||||
})
|
||||
it('calls api', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const { waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(api.getNewsDetails).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
it('only calls api once', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
const { waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
await waitForNextUpdate()
|
||||
renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
await waitForNextUpdate()
|
||||
|
||||
const { result } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
expect(api.getNewsDetails).toHaveBeenCalledTimes(1)
|
||||
expect(result.current.status).toEqual('loaded')
|
||||
})
|
||||
})
|
||||
it('calls cache', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.data).toEqual(cached)
|
||||
})
|
||||
})
|
||||
it('updates status to loading', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.status).toEqual('loading')
|
||||
})
|
||||
})
|
||||
it('updates status to loaded', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.status).toEqual('loaded')
|
||||
})
|
||||
})
|
||||
it('stores in cache if not fake', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
api.isFake = false
|
||||
|
||||
const { waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await pause(20)
|
||||
|
||||
expect(storage.cache.news_details_1337).toEqual(JSON.stringify(response))
|
||||
})
|
||||
})
|
||||
it('does not store in cache if fake', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
api.isFake = true
|
||||
|
||||
const { waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await pause(20)
|
||||
|
||||
expect(storage.cache.news_details_1337).toEqual(JSON.stringify(cached))
|
||||
})
|
||||
})
|
||||
it('retries if api fails', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const error = new Error('fail')
|
||||
api.getNewsDetails.mockRejectedValueOnce(error)
|
||||
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.error).toEqual(error)
|
||||
expect(result.current.status).toEqual('loading')
|
||||
expect(result.current.data).toEqual({ ...cached })
|
||||
|
||||
jest.advanceTimersToNextTimer()
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.status).toEqual('loaded')
|
||||
expect(result.current.data).toEqual({ ...response })
|
||||
})
|
||||
})
|
||||
it('gives up after 3 retries', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const error = new Error('fail')
|
||||
api.getNewsDetails.mockRejectedValueOnce(error)
|
||||
api.getNewsDetails.mockRejectedValueOnce(error)
|
||||
api.getNewsDetails.mockRejectedValueOnce(error)
|
||||
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.error).toEqual(error)
|
||||
expect(result.current.status).toEqual('loading')
|
||||
expect(result.current.data).toEqual({ ...cached })
|
||||
|
||||
jest.advanceTimersToNextTimer()
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.error).toEqual(error)
|
||||
expect(result.current.status).toEqual('error')
|
||||
expect(result.current.data).toEqual({ ...cached })
|
||||
})
|
||||
})
|
||||
it('reports if api fails', async () => {
|
||||
await act(async () => {
|
||||
api.isLoggedIn = true
|
||||
const error = new Error('fail')
|
||||
api.getNewsDetails.mockRejectedValueOnce(error)
|
||||
|
||||
const { result, waitForNextUpdate } = renderHook(() => useNewsDetails(child, newsItem), { wrapper })
|
||||
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
await waitForNextUpdate()
|
||||
|
||||
expect(result.current.error).toEqual(error)
|
||||
|
||||
expect(reporter.error).toHaveBeenCalledWith(error, 'Error getting NEWS_DETAILS from API')
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue