feat: add collection views

package.json

@@ -33,10 +33,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "1.8.0",
-    "@graasp/sdk": "1.6.0",
+    "@graasp/query-client": "https://github.com/graasp/graasp-query-client.git#main",
+    "@graasp/sdk": "1.9.1",
     "@graasp/translations": "1.19.1",
-    "@graasp/ui": "3.4.0",
+    "@graasp/ui": "3.5.4",
     "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.140",
     "@mui/material": "5.14.5",
@@ -104,7 +104,8 @@
   },
   "resolutions": {
     "@types/react": "17.0.66",
-    "@graasp/sdk": "1.6.0"
+    "@graasp/sdk": "1.9.1",
+    "immutable": "4.3.4"
   },
   "nyc": {
     "exclude": [

src/components/collection/Collection.tsx

@@ -2,7 +2,7 @@ import { ErrorBoundary } from '@sentry/nextjs';
 import dynamic from 'next/dynamic';
 import { validate } from 'uuid';
 
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { Box } from '@mui/material';
 
@@ -33,7 +33,7 @@ type Props = {
   id?: string;
 };
 const Collection = ({ id }: Props) => {
-  const { hooks } = useContext(QueryClientContext);
+  const { hooks, mutations } = useContext(QueryClientContext);
   const {
     data: collection,
     isLoading: isLoadingItem,
@@ -47,6 +47,13 @@ const Collection = ({ id }: Props) => {
     itemId: id || '',
   });
 
+  const { mutate: postView } = mutations.usePostItemAction();
+
+  useEffect(() => {
+    if (id) {
+      postView({ itemId: id, payload: { type: 'collection-view' } });
+    }
+  }, [id]);
   // if tags could be fetched then user has at least read access
   const canRead = Boolean(tags);
 
@@ -120,7 +127,11 @@ const Collection = ({ id }: Props) => {
           }}
           py={5}
         >
-          <Summary collection={collection} isLoading={isLoading} />
+          <Summary
+            collection={collection}
+            isLoading={isLoading}
+            totalViews={itemPublishEntry?.totalViews ?? 0}
+          />
           {/* <Comments comments={comments} members={members} /> */}
         </Box>
       </Main>

src/components/collection/summary/Summary.tsx

@@ -50,9 +50,14 @@ export const getParentsIdsFromPath = (
 type SummaryProps = {
   collection?: ItemRecord;
   isLoading: boolean;
+  totalViews: number;
 };
 
-const Summary: React.FC<SummaryProps> = ({ collection, isLoading }) => {
+const Summary: React.FC<SummaryProps> = ({
+  collection,
+  isLoading,
+  totalViews,
+}) => {
   const { t } = useLibraryTranslation();
   const { hooks } = useContext(QueryClientContext);
   const { data: member } = hooks.useCurrentMember();
@@ -98,6 +103,7 @@ const Summary: React.FC<SummaryProps> = ({ collection, isLoading }) => {
         isLoading={isLoading}
         tags={collection?.settings?.tags}
         truncatedName={truncatedName}
+        totalViews={totalViews}
       />
       {collection?.type === ITEM_TYPES.FOLDER && (
         <>

src/components/collection/summary/SummaryHeader.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 
 import React, { useContext } from 'react';
 
-import { Favorite } from '@mui/icons-material';
+import { Favorite, Visibility } from '@mui/icons-material';
 import { Skeleton } from '@mui/lab';
 import {
   Alert,
@@ -19,7 +19,6 @@ import {
 import { ThumbnailSize } from '@graasp/sdk';
 import { ItemLikeRecord, ItemRecord } from '@graasp/sdk/frontend';
 
-import { GRAASP_COLOR } from '../../../config/constants';
 import { useLibraryTranslation } from '../../../config/i18n';
 import {
   ITEM_SUMMARY_TITLE_ID,
@@ -48,6 +47,7 @@ type SummaryHeaderProps = {
   truncatedName: string;
   tags: Immutable.List<string> | undefined;
   isLogged: boolean;
+  totalViews: number;
 };
 
 const SummaryHeader: React.FC<SummaryHeaderProps> = ({
@@ -56,6 +56,7 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
   isLoading,
   truncatedName,
   tags,
+  totalViews,
 }) => {
   const { t } = useLibraryTranslation();
 
@@ -211,30 +212,28 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
               divider={
                 <Divider
                   flexItem
-                  sx={{
-                    alignSelf: 'center',
-                    color: GRAASP_COLOR,
-                    fontWeight: 'bold',
-                  }}
-                >
-                  {String.fromCharCode(183)}
-                </Divider>
+                  variant="middle"
+                  orientation="vertical"
+                  sx={{ margin: 1 }}
+                />
               }
             >
-              {/* turn on again when endpoint exists */}
-              {/* <Tooltip title="Views" arrow placement="bottom">
-                <Stack direction="row" alignItems="center">
-                  <Typography
-                    fontWeight="bold"
-                    display="flex"
-                    alignItems="center"
-                    color="primary"
-                  >
-                    {views}
-                  </Typography>
-                  <Visibility color="primary" style={{ marginLeft: 5 }} />
-                </Stack>
-              </Tooltip> */}
+              {/* display only when there's a views */}
+              {totalViews ? (
+                <Tooltip title="Views" arrow placement="bottom">
+                  <Stack direction="row" alignItems="center">
+                    <Typography
+                      fontWeight="bold"
+                      display="flex"
+                      alignItems="center"
+                      color="primary"
+                    >
+                      {totalViews}
+                    </Typography>
+                    <Visibility color="primary" style={{ marginLeft: 5 }} />
+                  </Stack>
+                </Tooltip>
+              ) : null}
               <Tooltip title="Likes" arrow placement="bottom">
                 <Stack direction="row" alignItems="center">
                   <Typography