feat(web): Organization published material, request-response matching

apps/web/screens/Organization/PublishedMaterial/PublishedMaterial.tsx

@@ -53,6 +53,7 @@ import {
 } from './utils'
 import { OrderByItem } from './components/OrderByItem'
 import { useSelect } from 'downshift'
+import { stringHash } from '@island.is/web/utils/stringHash'
 import * as styles from './PublishedMaterial.css'
 
 const ASSETS_PER_PAGE = 20
@@ -112,10 +113,26 @@ const PublishedMaterial: Screen<PublishedMaterialProps> = ({
         size: ASSETS_PER_PAGE,
         tagGroups: {},
         sort: ordering,
+        hash: 0,
       },
     },
   })
 
+  // This hash value is used to match the response to a request
+  const [requestHash, setRequestHash] = useState(0)
+
+  useEffect(() => {
+    const input = { ...queryVariables.variables.input }
+    delete input['hash']
+    setRequestHash(stringHash(JSON.stringify(input)))
+  }, [queryVariables])
+
+  const [publishedMaterialData, setPublishedMaterialData] = useState({
+    total: 0,
+    items: [],
+    hash: 0,
+  })
+
   const { data, loading, fetchMore } = useQuery<
     Query,
     QueryGetPublishedMaterialArgs
@@ -144,17 +161,25 @@ const PublishedMaterial: Screen<PublishedMaterialProps> = ({
       c.selected.forEach((t) => selectedCategories.push(t)),
     )
 
+    const input = {
+      lang: activeLocale,
+      organizationSlug: (router.query.slug as string) ?? '',
+      tags: selectedCategories,
+      page: nextPage,
+      searchString: searchValue,
+      size: ASSETS_PER_PAGE,
+      tagGroups: getGenericTagGroupHierarchy(filterCategories),
+      sort: ordering,
+    }
+
+    const hash = stringHash(JSON.stringify(input))
+    setRequestHash(hash)
+
     fetchMore({
       variables: {
         input: {
-          lang: activeLocale,
-          organizationSlug: (router.query.slug as string) ?? '',
-          tags: selectedCategories,
-          page: nextPage,
-          searchString: searchValue,
-          size: ASSETS_PER_PAGE,
-          tagGroups: getGenericTagGroupHierarchy(filterCategories),
-          sort: ordering,
+          ...input,
+          hash,
         },
       },
       updateQuery: (prevResult, { fetchMoreResult }) => {
@@ -176,17 +201,25 @@ const PublishedMaterial: Screen<PublishedMaterialProps> = ({
         c.selected.forEach((t) => selectedCategories.push(t)),
       )
 
+      const input = {
+        lang: activeLocale,
+        organizationSlug: (router.query.slug as string) ?? '',
+        tags: selectedCategories,
+        page: 1,
+        searchString: searchValue,
+        size: ASSETS_PER_PAGE,
+        tagGroups: getGenericTagGroupHierarchy(filterCategories),
+        sort: ordering,
+      }
+
+      const hash = stringHash(JSON.stringify(input))
+      setRequestHash(hash)
+
       setQueryVariables({
         variables: {
           input: {
-            lang: activeLocale,
-            organizationSlug: (router.query.slug as string) ?? '',
-            tags: selectedCategories,
-            page: 1,
-            searchString: searchValue,
-            size: ASSETS_PER_PAGE,
-            tagGroups: getGenericTagGroupHierarchy(filterCategories),
-            sort: ordering,
+            ...input,
+            hash,
           },
         },
       })
@@ -258,6 +291,13 @@ const PublishedMaterial: Screen<PublishedMaterialProps> = ({
     if (selectedItem?.onClick) selectedItem.onClick()
   }, [selectedItem])
 
+  useEffect(() => {
+    const responseHash = data?.getPublishedMaterial?.hash
+    if (requestHash === responseHash) {
+      setPublishedMaterialData(data?.getPublishedMaterial)
+    }
+  }, [data?.getPublishedMaterial, requestHash])
+
   const orderByButtonRef = useRef<HTMLDivElement | null>(null)
 
   return (
@@ -412,7 +452,7 @@ const PublishedMaterial: Screen<PublishedMaterialProps> = ({
               </GridRow>
             </GridColumn>
           </GridRow>
-          {(data?.getPublishedMaterial.items ?? []).map((item, index) => {
+          {(publishedMaterialData?.items ?? []).map((item, index) => {
             return (
               <GridRow
                 key={`${item.id}-${index}`}

apps/web/screens/queries/PublishedMaterial.ts

@@ -3,6 +3,7 @@ import gql from 'graphql-tag'
 export const GET_PUBLISHED_MATERIAL_QUERY = gql`
   query GetPublishedMaterial($input: GetPublishedMaterialInput!) {
     getPublishedMaterial(input: $input) {
+      hash
       total
       items {
         id

libs/cms/src/lib/cms.elasticsearch.service.ts

@@ -234,16 +234,19 @@ export class CmsElasticsearchService {
 
   async getPublishedMaterial(
     index: string,
-    {
+    input: GetPublishedMaterialInput,
+  ): Promise<EnhancedAssetSearchResult> {
+    const {
       organizationSlug,
       searchString,
       page = 1, // The page number is 1-based meaning that page 1 is the first page
       size = 10,
       tags,
       tagGroups,
       sort,
-    }: GetPublishedMaterialInput,
-  ): Promise<EnhancedAssetSearchResult> {
+      hash = 0,
+    } = input
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const must: Record<string, any>[] = [
       {
@@ -318,6 +321,7 @@ export class CmsElasticsearchService {
       items: enhancedAssetResponse.body.hits.hits.map((item) =>
         JSON.parse(item._source.response ?? '{}'),
       ),
+      hash, // Also return the input hash so we can match the response to the request that was made
     }
   }
 }

libs/cms/src/lib/dto/getPublishedMaterial.input.ts

@@ -38,4 +38,10 @@ export class GetPublishedMaterialInput {
 
   @Field(() => GraphQLJSON)
   sort!: { field: 'title.sort' | 'releaseDate'; order: SortDirection }
+
+  @Field(() => Int, { nullable: true })
+  @IsInt()
+  @IsOptional()
+  // The unique hash for this input (used to match the response with a request)
+  hash?: number
 }

libs/cms/src/lib/models/enhancedAssetSearchResult.model.ts

@@ -8,4 +8,7 @@ export class EnhancedAssetSearchResult {
 
   @Field()
   total!: number
+
+  @Field()
+  hash!: number
 }