feat(APW): Refresh content review - pull data on every 10s

packages/app-apw/src/components/ContentReviewEditor/CenterPanel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Routes, Route } from "@webiny/react-router";
+import { Route, Routes } from "@webiny/react-router";
 import styled from "@emotion/styled";
 import { List } from "@webiny/ui/List";
 import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
@@ -17,6 +17,7 @@ import { Box } from "../Layout";
 import { PanelBox } from "./Styled";
 import { RightPanel } from "./RightPanel";
 import { PlaceholderBox } from "./PlaceholderBox";
+import { useFetchInterval } from "~/hooks/useFetchInterval";
 
 const t = i18n.ns("app-apw/admin/content-reviews/editor");
 
@@ -65,14 +66,25 @@ const CreateChangeRequest: React.FC<CreateChangeRequestProps> = ({ create, disab
     );
 };
 
+const CHANGE_REQUESTS_REFRESH_INTERVAL = 10000; // 10s
+
 export const CenterPanel = () => {
     const { setOpen } = useChangeRequestDialog();
-    const { changeRequests, loading } = useChangeRequestsList({ sorters: [] });
+    const { changeRequests, loading, refetch } = useChangeRequestsList({
+        sorters: []
+    });
     const { currentStep, changeRequestsPending } = useCurrentStep();
 
+    useFetchInterval({
+        interval: CHANGE_REQUESTS_REFRESH_INTERVAL,
+        callback: refetch,
+        loading
+    });
+
     if (loading) {
         return <Typography use={"caption"}>Loading Change requests...</Typography>;
     }
+
     return (
         <>
             <PanelBox flex={"1 1 22%"}>

packages/app-apw/src/components/ContentReviewEditor/Comment/Comments.tsx

@@ -6,9 +6,10 @@ import { Box, Columns, Stack } from "~/components/Layout";
 import { fromNow } from "~/utils";
 import { Avatar } from "~/views/publishingWorkflows/components/ReviewersList";
 import { useCommentsList } from "~/hooks/useCommentsList";
-import { TypographyBody, TypographySecondary, AuthorName, richTextWrapperStyles } from "../Styled";
+import { AuthorName, richTextWrapperStyles, TypographyBody, TypographySecondary } from "../Styled";
 import { CommentFile } from "../ChangeRequest/ApwFile";
 import { FileWithOverlay } from "../ChangeRequest/ChangeRequestMedia";
+import { useFetchInterval } from "~/hooks/useFetchInterval";
 
 const HEADER_HEIGHT = "65px";
 const CR_DETAIL_HEIGHT = "179px";
@@ -68,8 +69,16 @@ const Comment: React.FC<CommentProps> = props => {
     );
 };
 
+const COMMENTS_REFRESH_INTERVAL = 10000; // 10s
+
 export const Comments = React.forwardRef<HTMLDivElement>(function comments(_, ref) {
-    const { comments } = useCommentsList();
+    const { comments, refetch, loading } = useCommentsList();
+
+    useFetchInterval({
+        interval: COMMENTS_REFRESH_INTERVAL,
+        callback: refetch,
+        loading
+    });
 
     return (
         <CommentsBox space={6} paddingX={6} paddingY={5}>

packages/app-apw/src/hooks/useChangeRequestsList.ts

@@ -33,6 +33,7 @@ interface UseChangeRequestsListHook {
         setSort: (sort: string) => void;
         serializeSorters: (data: Record<string, string>) => string;
         editContentReview: (id: string) => void;
+        refetch: () => Promise<any>;
     };
 }
 
@@ -49,7 +50,7 @@ export const useChangeRequestsList: UseChangeRequestsListHook = (config: Config)
         }
     };
 
-    const { data, loading } = useQuery<
+    const { data, loading, refetch } = useQuery<
         ListChangeRequestsQueryResponse,
         ListChangeRequestsQueryVariables
     >(LIST_CHANGE_REQUESTS_QUERY, {
@@ -70,6 +71,7 @@ export const useChangeRequestsList: UseChangeRequestsListHook = (config: Config)
         sort,
         setSort,
         serializeSorters,
-        editContentReview
+        editContentReview,
+        refetch
     };
 };

packages/app-apw/src/hooks/useCommentsList.ts

@@ -11,6 +11,7 @@ import { useCurrentChangeRequestId } from "~/hooks/useCurrentChangeRequestId";
 interface UseCommentsListResult {
     loading: boolean;
     comments: Array<ApwComment>;
+    refetch: () => Promise<any>;
 }
 
 /**
@@ -40,17 +41,19 @@ export const useListCommentsVariables = () => {
 
 export const useCommentsList = (): UseCommentsListResult => {
     const variables = useListCommentsVariables();
-    const { data, loading } = useQuery<ListCommentsQueryResponse, ListCommentsQueryVariables>(
-        LIST_COMMENTS_QUERY,
-        {
-            variables
-        }
-    );
+
+    const { data, loading, refetch } = useQuery<
+        ListCommentsQueryResponse,
+        ListCommentsQueryVariables
+    >(LIST_COMMENTS_QUERY, {
+        variables
+    });
 
     const comments = dotPropImmutable.get(data, "apw.listComments.data", []);
 
     return {
         comments,
-        loading
+        loading,
+        refetch
     };
 };

packages/app-apw/src/hooks/useContentReview.ts

@@ -15,21 +15,24 @@ interface UseContentReviewParams {
 interface UseContentReviewResult {
     contentReview: ApwContentReview;
     loading: boolean;
+    refetch: () => Promise<any>;
 }
 
 export function useContentReview(params: UseContentReviewParams): UseContentReviewResult {
     const id = decodeURIComponent(params.id);
 
-    const { data, loading } = useQuery<
+    const { data, loading, refetch } = useQuery<
         GetContentReviewQueryResponse,
         GetContentReviewQueryVariables
     >(GET_CONTENT_REVIEW_QUERY, {
         variables: { id },
         skip: !id
     });
+
     return {
         contentReview: dotPropImmutable.get(data, "apw.getContentReview.data"),
-        loading
+        loading,
+        refetch
     };
 }
 

packages/app-apw/src/hooks/useContentReviewsList.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import debounce from "lodash/debounce";
 import { useNavigate } from "@webiny/react-router";
 import { useQuery } from "@apollo/react-hooks";
@@ -37,6 +37,7 @@ interface UseContentReviewsListHook {
         editContentReview: (item: ApwContentReviewListItem) => void;
         status: ApwContentReviewStatus | "all";
         setStatus: (status: ApwContentReviewStatus | "all") => void;
+        refetch: () => Promise<any>;
     };
 }
 
@@ -69,7 +70,8 @@ export const useContentReviewsList: UseContentReviewsListHook = (config: Config)
     const {
         data,
         loading,
-        fetchMore: queryMore
+        fetchMore: queryMore,
+        refetch
     } = useQuery<ListContentReviewsQueryResponse, ListContentReviewsQueryVariables>(
         LIST_CONTENT_REVIEWS_QUERY,
         {
@@ -150,6 +152,7 @@ export const useContentReviewsList: UseContentReviewsListHook = (config: Config)
         serializeSorters,
         editContentReview,
         status,
-        setStatus
+        setStatus,
+        refetch
     };
 };

packages/app-apw/src/hooks/useCurrentStep.ts

@@ -2,12 +2,15 @@ import { useMemo } from "react";
 import { useContentReview } from "~/hooks/useContentReview";
 import { useContentReviewId, useCurrentStepId } from "./useContentReviewId";
 import { ApwContentReviewStep } from "~/types";
+import { useFetchInterval } from "~/hooks/useFetchInterval";
 
 interface UseCurrentStepResult {
     currentStep: ApwContentReviewStep | null;
     changeRequestsPending: boolean;
 }
 
+const CONTENT_REVIEW_REFRESH_INTERVAL = 10000; // 10s
+
 export const useCurrentStep = (): UseCurrentStepResult => {
     const contentReviewId = useContentReviewId();
     if (!contentReviewId) {
@@ -17,7 +20,15 @@ export const useCurrentStep = (): UseCurrentStepResult => {
         };
     }
     const { id: stepId } = useCurrentStepId();
-    const { contentReview } = useContentReview({ id: contentReviewId.id });
+    const { contentReview, refetch, loading } = useContentReview({
+        id: contentReviewId.id
+    });
+
+    useFetchInterval({
+        callback: refetch,
+        interval: CONTENT_REVIEW_REFRESH_INTERVAL,
+        loading
+    });
 
     const currentStep = useMemo(() => {
         let currentStep;

packages/app-apw/src/hooks/useFetchInterval.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseFetchDataProps {
+    callback: () => Promise<any>;
+    interval: number;
+    loading: boolean;
+}
+
+interface UseFetchDataResult {
+    error: Record<string, any> | null;
+}
+
+export const useFetchInterval = ({
+    callback,
+    interval,
+    loading
+}: UseFetchDataProps): UseFetchDataResult => {
+    const [error, setError] = useState<Record<string, any> | null>(null);
+    const timer = useRef<string | number | NodeJS.Timeout | undefined>(undefined);
+
+    const [initiallyLoaded, setInitiallyLoaded] = useState<boolean>(false);
+
+    // Recursive function which will not execute until api call is finished + the delay
+    const getData = useCallback(async () => {
+        try {
+            await callback();
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => {
+                getData();
+            }, interval);
+        } catch (e) {
+            setError(e);
+        }
+    }, []);
+
+    useEffect(() => {
+        /**
+         * We do not want to do anything if initial load was already done.
+         */
+        if (initiallyLoaded === true) {
+            return;
+        }
+        /**
+         *  When initiallyLoaded is false and loading is false, it means the initial loading was done so we can mark it.
+         */
+        //
+        else if (initiallyLoaded === false && loading === false) {
+            setInitiallyLoaded(true);
+        }
+        /**
+         * When initiallyLoaded is false and loading is true, it means that this is the initial load.
+         */
+        //
+        else if (!initiallyLoaded && loading === true) {
+            setInitiallyLoaded(false);
+        }
+    }, [loading]);
+
+    useEffect(() => {
+        if (initiallyLoaded !== true) {
+            return;
+        }
+        getData().catch(e => {
+            setError(e);
+            // do nothing
+            console.warn("Could not fetch the data:");
+            console.log(e);
+        });
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, [initiallyLoaded]);
+
+    return {
+        error
+    };
+};

packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import debounce from "lodash/debounce";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
 import styled from "@emotion/styled";
-import { DataList, List, DataListModalOverlayAction, ListItem } from "@webiny/ui/List";
+import { DataList, DataListModalOverlayAction, List, ListItem } from "@webiny/ui/List";
 import { i18n } from "@webiny/app/i18n";
 import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { ApwContentReviewListItem } from "~/types";
@@ -11,6 +11,7 @@ import { useContentReviewsList } from "~/hooks/useContentReviewsList";
 import { ContentReviewsFilterModal } from "./components/ContentReviewsFilterOverlay";
 import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { Typography } from "@webiny/ui/Typography";
+import { useFetchInterval } from "~/hooks/useFetchInterval";
 
 const t = i18n.ns("app-apw/admin/content-reviews/datalist");
 
@@ -51,6 +52,8 @@ const InlineLoaderWrapper = styled("div")({
     backgroundColor: "var(--mdc-theme-surface)"
 });
 
+const CONTENT_REVIEW_LIST_REFRESH_INTERVAL = 10000;
+
 export const ContentReviewDataList: React.FC = () => {
     const {
         contentReviews,
@@ -63,7 +66,8 @@ export const ContentReviewDataList: React.FC = () => {
         setStatus,
         setFilter,
         fetchMore,
-        filter
+        filter,
+        refetch
     } = useContentReviewsList({
         sorters: SORTERS
     });
@@ -78,6 +82,12 @@ export const ContentReviewDataList: React.FC = () => {
         [loading, fetchMore]
     );
 
+    useFetchInterval({
+        callback: refetch,
+        interval: CONTENT_REVIEW_LIST_REFRESH_INTERVAL,
+        loading
+    });
+
     return (
         <DataList
             loading={loading}