feat: Redirect to the feeds table if the user is not authenticated to…

… view the feed

src/components/Feeds/FeedView.tsx

@@ -6,9 +6,10 @@ import {
   DrawerPanelContent,
 } from "@patternfly/react-core";
 import { useQuery } from "@tanstack/react-query";
+import { notification } from "antd";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { useNavigate, useParams, useLocation } from "react-router";
+import { useLocation, useNavigate, useParams } from "react-router";
 import { clearSelectedFile } from "../../store/explorer/actions";
 import {
   getFeedSuccess,
@@ -48,6 +49,7 @@ export default function FeedView() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
+  const [api, contextHolder] = notification.useNotification();
   const { id } = params;
   const selectedPlugin = useTypedSelector(
     (state) => state.instance.selectedPlugin,
@@ -73,7 +75,11 @@ export default function FeedView() {
     enabled: type === "public",
   });
 
-  const { data: privateFeed } = useQuery({
+  const {
+    data: privateFeed,
+    isError: isPrivateFeedError,
+    error: privateFeedError,
+  } = useQuery({
     queryKey: ["authenticatedFeed", id],
     queryFn: () => fetchAuthenticatedFeed(id),
     enabled: type === "private" && isLoggedIn,
@@ -88,6 +94,21 @@ export default function FeedView() {
     }
   }, [type, navigate, isLoggedIn]);
 
+  React.useEffect(() => {
+    if (isPrivateFeedError) {
+      // cube does not return a 404 error when the user fetches a
+      // feed with an incorrect token
+      api.error({
+        message: privateFeedError.message,
+        duration: 1.5,
+      });
+
+      setTimeout(() => {
+        navigate("/feeds?type=private");
+      }, 2500);
+    }
+  }, [isPrivateFeedError]);
+
   React.useEffect(() => {
     const feed: Feed | undefined = privateFeed || publicFeed;
     if (feed) {
@@ -195,6 +216,7 @@ export default function FeedView() {
 
   return (
     <WrapperConnect>
+      {contextHolder}
       <Drawer
         isInline
         position="bottom"

src/components/Feeds/utilties.ts

@@ -102,19 +102,35 @@ export const fetchPublicFeeds = async (filterState: any) => {
 
 export async function fetchAuthenticatedFeed(id?: string) {
   if (!id) return;
-  const client = ChrisAPIClient.getClient();
-  const feed = await client.getFeed(+id);
-  return feed;
+
+  try {
+    const client = ChrisAPIClient.getClient();
+    const feed = await client.getFeed(+id);
+
+    if (!feed) {
+      throw new Error(
+        "You do not permissions to view this feed. Redirecting...",
+      );
+    }
+    return feed;
+  } catch (error) {
+    throw error;
+  }
 }
 
 export async function fetchPublicFeed(id?: string) {
   if (!id) return;
-  const client = ChrisAPIClient.getClient();
-  const publicFeed = await client.getPublicFeeds({ id: +id });
+  try {
+    const client = ChrisAPIClient.getClient();
+    const publicFeed = await client.getPublicFeeds({ id: +id });
 
-  //@ts-ignore
-  if (publicFeed && publicFeed.getItems().length > 0) {
     //@ts-ignore
-    return publicFeed.getItems()[0] as any as Feed;
+    if (publicFeed && publicFeed.getItems().length > 0) {
+      //@ts-ignore
+      return publicFeed.getItems()[0] as any as Feed;
+    }
+    throw new Error("Failed to fetch this feed...");
+  } catch (error) {
+    throw error;
   }
 }