feat: 🎸 useNewsDetails(child, news)

Returns a richer version of a news item

package.json

@@ -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"
   },

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) {
@@ -138,7 +139,6 @@ export const useNewsDetails = (child: Child, news: NewsItem) => hook<NewsItem>(
   (api) => () => api.getNewsDetails(child, news),
 )
 
-
 export const useNotifications = (child: Child) => hook<Notification[]>(
   'NOTIFICATIONS',
   `notifications_${child.id}`,

src/types.ts

@@ -43,22 +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'
-  | 'NEWS_DETAILS'
-  | 'NOTIFICATIONS'
-  | 'SCHEDULE'
-  | 'ALL'
+| 'CHILDREN'
+| 'CALENDAR'
+| 'CLASSMATES'
+| 'MENU'
+| 'NEWS'
+| 'NEWS_DETAILS'
+| 'NOTIFICATIONS'
+| 'SCHEDULE'
+| 'ALL'
 export interface EntityAction<T> extends Action<EntityActionType> {
   entity: EntityName
   data?: T

src/useNewsDetails.test.js

@@ -13,6 +13,7 @@ describe('useNewsDetails(child, newsItem)', () => {
   let api
   let storage
   let response
+  let cached
   let child
   let newsItem
   const wrapper = ({ children }) => (
@@ -25,18 +26,19 @@ describe('useNewsDetails(child, newsItem)', () => {
     </ApiProvider>
   )
   beforeEach(() => {
-    response = { id: '1337', modified: 'now' }
+    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: { id: '1337', modified: 'yesterday' },
+      news_details_1337: { ...cached },
     }, 2)
     child = { id: 10 }
-    newsItem = { id: '1337', modified: 'this morning' }
+    newsItem = { id: '1337', modified: 'now', body: 'simple' }
   })
   afterEach(async () => {
     await act(async () => {
@@ -86,7 +88,7 @@ describe('useNewsDetails(child, newsItem)', () => {
       await waitForNextUpdate()
       await waitForNextUpdate()
 
-      expect(result.current.data).toEqual({ id: '1337' })
+      expect(result.current.data).toEqual(cached)
     })
   })
   it('updates status to loading', async () => {
@@ -124,7 +126,7 @@ describe('useNewsDetails(child, newsItem)', () => {
       await waitForNextUpdate()
       await pause(20)
 
-      expect(storage.cache.news_1).toEqual('{"id":"1337"}')
+      expect(storage.cache.news_details_1337).toEqual(JSON.stringify(response))
     })
   })
   it('does not store in cache if fake', async () => {
@@ -138,7 +140,7 @@ describe('useNewsDetails(child, newsItem)', () => {
       await waitForNextUpdate()
       await pause(20)
 
-      expect(storage.cache.news_2).toEqual('{"id":"1337"}')
+      expect(storage.cache.news_details_1337).toEqual(JSON.stringify(cached))
     })
   })
   it('retries if api fails', async () => {
@@ -155,7 +157,7 @@ describe('useNewsDetails(child, newsItem)', () => {
 
       expect(result.current.error).toEqual(error)
       expect(result.current.status).toEqual('loading')
-      expect(result.current.data).toEqual({ id: '1337' })
+      expect(result.current.data).toEqual({ ...cached })
 
       jest.advanceTimersToNextTimer()
 
@@ -164,7 +166,7 @@ describe('useNewsDetails(child, newsItem)', () => {
       await waitForNextUpdate()
 
       expect(result.current.status).toEqual('loaded')
-      expect(result.current.data).toEqual({ id: '1337' })
+      expect(result.current.data).toEqual({ ...response })
     })
   })
   it('gives up after 3 retries', async () => {
@@ -183,7 +185,7 @@ describe('useNewsDetails(child, newsItem)', () => {
 
       expect(result.current.error).toEqual(error)
       expect(result.current.status).toEqual('loading')
-      expect(result.current.data).toEqual({ id: '1337' })
+      expect(result.current.data).toEqual({ ...cached })
 
       jest.advanceTimersToNextTimer()
 
@@ -193,7 +195,7 @@ describe('useNewsDetails(child, newsItem)', () => {
 
       expect(result.current.error).toEqual(error)
       expect(result.current.status).toEqual('error')
-      expect(result.current.data).toEqual({ id: '1337' })
+      expect(result.current.data).toEqual({ ...cached })
     })
   })
   it('reports if api fails', async () => {