TCA-590 - use swr cache for data that doesn't change over time

Author: vas3a

src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications.provider.tsx

@@ -1,5 +1,6 @@
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 import { learnUrlGet } from '../../functions'
+import { useSwrCache } from '../../learn-swr'
 
 import { AllCertificationsProviderData } from './all-certifications-provider-data.model'
 
@@ -14,10 +15,12 @@ export function useGetAllCertifications(
 
     const url: string = learnUrlGet(
         'certifications',
-        `?providerName=${providerName}&test=true`
+        `?providerName=${providerName}`
     )
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
     const {data, error}: SWRResponse = useSWR(url, {
+        ...swrCacheConfig,
         isPaused: () => options?.enabled === false
     })
 

src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses.provider.tsx

@@ -1,6 +1,7 @@
 import { get } from 'lodash'
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 import { learnUrlGet } from '../../functions'
+import { useSwrCache } from '../../learn-swr'
 
 import { CoursesProviderData } from './courses-provider-data.model'
 import { LearnCourse } from './learn-course.model'
@@ -18,8 +19,9 @@ export function useGetCourses(
         .join('&')
 
     const url: string = learnUrlGet('courses', `?${params}`)
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
-    const {data, error}: SWRResponse<ReadonlyArray<LearnCourse>> = useSWR(url)
+    const {data, error}: SWRResponse<ReadonlyArray<LearnCourse>> = useSWR(url, swrCacheConfig)
 
     return {
         course: get(data, [0]),

src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.provider.tsx

@@ -1,15 +1,17 @@
 import { find } from 'lodash'
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 import { learnUrlGet } from '../../functions'
+import { useSwrCache } from '../../learn-swr'
 
 import { ResourceProviderData } from './resource-provider-data.model'
 import { ResourceProvider } from './resource-provider.model'
 
 export function useGetResourceProvider(providerName?: string): ResourceProviderData {
 
     const url: string = learnUrlGet('providers')
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
-    const {data, error}: SWRResponse<ReadonlyArray<ResourceProvider>> = useSWR(url)
+    const {data, error}: SWRResponse<ReadonlyArray<ResourceProvider>> = useSWR(url, swrCacheConfig)
 
     return {
         provider: find(data, {name: providerName}),

src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications.provider.tsx

@@ -31,12 +31,12 @@ export function useGetUserCertifications(
     const completed: ReadonlyArray<UserCertificationCompleted> = data
         ?.filter(c => c.status === UserCertificationProgressStatus.completed)
         .map(c => c as UserCertificationCompleted)
-        .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()) ?? []
+        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()) ?? []
 
     const inProgress: ReadonlyArray<UserCertificationInProgress> = data
         ?.filter(c => c.status === UserCertificationProgressStatus.inProgress)
         .map(c => c as UserCertificationInProgress)
-        .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()) ?? []
+        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()) ?? []
 
     if (error) {
         errorHandle(error, 'There was an error getting your course progress.')

src-ts/tools/learn/learn-lib/learn-swr/LearnSwr.tsx

@@ -13,6 +13,9 @@ const LearnSwr: FC<LearnSwrProps> = (props: LearnSwrProps) => {
         <SWRConfig
             value={{
                 fetcher: (resource) => learnXhrGetAsync(resource),
+                refreshInterval: 0,
+                revalidateOnMount: true,
+                revalidateOnFocus: false,
             }}
         >
             {props.children}

src-ts/tools/learn/learn-lib/learn-swr/index.ts

@@ -1 +1,2 @@
 export { default as LearnSwr } from './LearnSwr'
+export * from './use-swr-cache'

src-ts/tools/learn/learn-lib/learn-swr/use-swr-cache.tsx

@@ -0,0 +1,31 @@
+import { mutate, SWRConfiguration } from "swr";
+
+let cacheMap: any = {} as any;
+
+if (typeof window !== "undefined") {
+    try {
+        // load all cached data from localstorage
+        cacheMap = JSON.parse(localStorage.getItem('swr-cached') ?? '{}')
+    } catch {}
+
+    // parse the loaded data, and load it into swr's in-memory cache
+    if (cacheMap) {
+        Object.entries(cacheMap).forEach(([key, data]) => {
+            mutate(key, data, {revalidate: false})
+        })
+    }
+}
+
+export function useSwrCache<T>(key: string): SWRConfiguration {
+    // return handlers to store and clear localstorage data
+    return {
+        onError() {
+            cacheMap[key] = undefined
+            localStorage.setItem('swr-cached', JSON.stringify(cacheMap));
+        },
+        onSuccess(data: T) {
+            cacheMap[key] = data
+            localStorage.setItem('swr-cached', JSON.stringify(cacheMap));
+        },
+    }
+}