Add refreshToken prop and handleRefreshToken function (#350)

Author: ukrocks007

src/components/containers/EventsBrowser.tsx

@@ -47,6 +47,7 @@ type EventBrowserProps = {
   tableHeaderItems?: any;
   theme?: string;
   dataLoading?: any;
+  refreshToken?: () => void;
 };
 
 interface EventBrowserState {
@@ -80,6 +81,7 @@ class EventsBrowser extends React.Component<EventBrowserProps, EventBrowserState
   constructor(props) {
     super(props);
     autobind(this);
+
     this.state = {
       resultsPerPage: 20,
       filtersOpen: false,
@@ -155,6 +157,12 @@ class EventsBrowser extends React.Component<EventBrowserProps, EventBrowserState
     this.props.createSession(this.props.auditLogToken, this.props.host);
   }
 
+  handleRefreshToken() {
+    if (typeof this.props.refreshToken === "function") {
+      this.props.refreshToken();
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.currentResults !== nextProps.currentResults) {
       this.onEventsChange(this.props.currentResults, nextProps.currentResults);
@@ -199,8 +207,7 @@ class EventsBrowser extends React.Component<EventBrowserProps, EventBrowserState
 
       skipViewLogEvent: this.props.skipViewLogEvent,
     };
-
-    this.props.requestEventSearch(queryObj);
+    this.props.requestEventSearch(queryObj, this.handleRefreshToken);
   }
 
   nextPage() {
@@ -613,8 +620,8 @@ export default connect(
     tableHeaderItems: state.ui.eventsUiData.eventTableHeaderItems,
   }),
   (dispatch: any) => ({
-    requestEventSearch(query) {
-      return dispatch(requestEventSearch(query));
+    requestEventSearch(query, handleRefreshToken) {
+      return dispatch(requestEventSearch(query, handleRefreshToken));
     },
     createSession(token, host) {
       return dispatch(createSession(token, host));

src/dev/LogsViewerWrapper.tsx

@@ -10,28 +10,32 @@ const actorId = "dev";
 const LogsViewerWrapper = (props) => {
   const [token, setToken] = useState("");
 
-  useEffect(() => {
-    if (!token) {
-      const urlWithQuery = `${endpoint}/publisher/v1/project/${projectId}/viewertoken?group_id=${groupId}&actor_id=${actorId}&is_admin=true`;
-      fetch(urlWithQuery, {
-        method: "GET",
-        headers: {
-          Accept: "application/json",
-          Authorization: `Token token=${apiKey}`,
-        },
-      }).then((res) => {
-        if (res.ok) {
-          res.json().then((data) => {
-            setToken(data.token);
-          });
+  const fetchToken = () => {
+    const urlWithQuery = `${endpoint}/publisher/v1/project/${projectId}/viewertoken?group_id=${groupId}&actor_id=${actorId}&is_admin=true`;
+    fetch(urlWithQuery, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Token token=${apiKey}`,
+      },
+    }).then((res) => {
+      if (res.ok) {
+        res.json().then((data) => {
+          setToken(data.token);
+        });
 
-          return;
-        }
+        return;
+      }
 
-        throw new Error("Failed to fetch viewer token");
-      });
+      throw new Error("Failed to fetch viewer token");
+    });
+  };
+
+  useEffect(() => {
+    if (!token) {
+      fetchToken();
     }
-  }, []);
+  }, [token]);
 
   if (!token) {
     return <progress> </progress>;
@@ -70,6 +74,7 @@ const LogsViewerWrapper = (props) => {
       fields={props.fields ? (Array.isArray(props.fields) ? props.fields : defaultFields) : defaultFields}
       disableShowRawEvent={props.disableShowRawEvent ? props.disableShowRawEvent : false}
       skipViewLogEvent={true}
+      refreshToken={fetchToken}
     />
   );
 };

src/index.tsx

@@ -24,6 +24,7 @@ type RetracedEventsBrowserProps = {
   disableShowRawEvent?: boolean;
   fields?: EventField[];
   skipViewLogEvent?: boolean;
+  refreshToken?: () => void;
 };
 
 const store = configStore();
@@ -46,6 +47,7 @@ export default class RetracedEventsBrowser extends React.Component<RetracedEvent
             fields={this.props.fields || []}
             disableShowRawEvent={this.props.disableShowRawEvent}
             skipViewLogEvent={this.props.skipViewLogEvent}
+            refreshToken={this.props.refreshToken}
           />
         </Provider>
       </div>

src/redux/data/events/thunks.js

@@ -2,7 +2,7 @@ import _ from "lodash";
 import { receiveEventList } from "./actions";
 import { loadingData } from "../../ui/actions";
 
-export function requestEventSearch(query) {
+export function requestEventSearch(query, refreshToken) {
   return async (dispatch, getState) => {
     dispatch(loadingData("eventFetch", true));
     let data;
@@ -83,10 +83,16 @@ export function requestEventSearch(query) {
       dispatch(loadingData("eventFetch", false));
       return null;
     }
-
-    const events = data.data.search.edges.map(({ node }) => node);
-    const cursor = data.data.search.pageInfo.hasPreviousPage && _.last(data.data.search.edges).cursor;
-    dispatch(receiveEventList(query, data.data.search.totalCount, events, cursor));
-    dispatch(loadingData("eventFetch", false));
+    if (data?.data?.search?.edges && Array.isArray(data.data.search.edges)) {
+      const events = data.data.search.edges.map(({ node }) => node);
+      const cursor = data.data.search.pageInfo.hasPreviousPage && _.last(data.data.search.edges).cursor;
+      dispatch(receiveEventList(query, data.data.search.totalCount, events, cursor));
+      dispatch(loadingData("eventFetch", false));
+    } else {
+      dispatch(loadingData("eventFetch", false));
+      if (refreshToken && typeof refreshToken === "function") {
+        refreshToken();
+      }
+    }
   };
 }