CSSTUDIO-2461: fix fail to redirect on create, edit, reply

src/api/ologApi.js

@@ -206,7 +206,7 @@ export const useVerifyLogExists = () => {
 
     return useCallback(async ({logRequest, logResult}) => {
         return withRetry({
-            fcn: async () => searchLogs({title: logResult.title, end: "now"}).unwrap(),
+            fcn: async () => searchLogs({title: `"${logResult.title}"`, end: "now"}).unwrap(),
             retries: 5,
             retryCondition: (retryRes) => {
                 // Retry if the entry we created isn't in the search results yet

src/beta/components/search/SearchResults.js

@@ -6,7 +6,6 @@ import { updateSearchPageParams, useSearchPageParams } from "features/searchPage
 import { updateSearchParams, useSearchParams } from "features/searchParamsReducer";
 import React, { useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
 import SearchResultList from "./SearchResultList";
 import SimpleSearch from "./SimpleSearch";
 import { SortToggleButton } from "./SortToggleButton";
@@ -15,11 +14,12 @@ import { SearchParamsBadges } from "./SearchParamsBadges";
 import { AdvancedSearchDrawer } from "./SearchResultList/AdvancedSearchDrawer";
 import { useAdvancedSearch } from "features/advancedSearchReducer";
 import { withCacheBust } from "hooks/useSanitizedSearchParams";
+import useBetaNavigate from "hooks/useBetaNavigate";
 
 export const SearchResults = styled(({className}) => {
 
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const navigate = useBetaNavigate();
 
   const { active: advancedSearchActive, fieldCount: advancedSearchFieldCount } = useAdvancedSearch();
   const currentLogEntry = useCurrentLogEntry();
@@ -88,7 +88,7 @@ export const SearchResults = styled(({className}) => {
 
   const onRowClick = (log) => {
     dispatch(updateCurrentLogEntry(log));
-    navigate(`/beta/logs/${log.id}`);
+    navigate(`/logs/${log.id}`);
   }
 
   const onPageChange = (event, page) => {

src/components/LogDetails/LogEntryGroupView.js

@@ -20,13 +20,13 @@ import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { updateCurrentLogEntry } from 'features/currentLogEntryReducer';
 import GroupHeader from './GroupHeader';
-import { useNavigate } from 'react-router-dom';
 import CommonmarkPreview from 'components/shared/CommonmarkPreview';
 import customization from 'config/customization';
 import { getLogEntryGroupId } from '../Properties/utils';
 import { sortByCreatedDate } from 'components/log/sort';
 import { ologApi } from 'api/ologApi';
 import { styled } from '@mui/material';
+import useBetaNavigate from 'hooks/useBetaNavigate';
 
 const Container = styled("div")`
     display: flex;
@@ -55,7 +55,7 @@ const GroupContainer = styled("li")`
 const LogEntryGroupView = ({currentLogEntry, logGroupRecords, setLogGroupRecords, className}) => {
 
     const dispatch = useDispatch();
-    const navigate = useNavigate();
+    const navigate = useBetaNavigate();
     const [ getLogGroup ] = ologApi.endpoints.getLogGroup.useLazyQuery();
 
     useEffect(() => {

src/components/LogDetails/NavigationButtons.js

@@ -18,18 +18,18 @@
 import { useState, useEffect } from 'react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { updateCurrentLogEntry } from 'features/currentLogEntryReducer';
 import { Button, Stack } from '@mui/material';
+import useBetaNavigate from 'hooks/useBetaNavigate';
 
 const NavigationButtons = ({
     currentLogEntry,
     searchResults,
     ...props
 }) => { 
 
-    const navigate = useNavigate();
+    const navigate = useBetaNavigate();
     const dispatch = useDispatch();
     const [previousLogEntry, setPreviousLogEntry] = useState();
     const [nextLogEntry, setNextLogEntry] = useState();

src/components/log/CreateLog/CreateLog.js

@@ -2,24 +2,23 @@ import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 import EntryEditor from "../EntryEditor";
 import useFormPersist from "react-hook-form-persist";
-import { useLocation, useNavigate } from "react-router-dom";
 import { ologApi, useVerifyLogExists } from "api/ologApi";
 import { Backdrop, CircularProgress } from "@mui/material";
+import useBetaNavigate from "hooks/useBetaNavigate";
 
 const CreateLog = ({isAuthenticated}) => {
 
     const [createInProgress, setCreateInProgress] = useState(false);
     const [createLog] = ologApi.endpoints.createLog.useMutation();
     const verifyLogExists = useVerifyLogExists();
-    const location = useLocation();
 
     const form = useForm({
         defaultValues: {
             attachments: []
         }
     });
     const { watch, setValue } = form;
-    const navigate = useNavigate();
+    const navigate = useBetaNavigate();
 
     /**
      * Save/restore form data
@@ -52,17 +51,14 @@ const CreateLog = ({isAuthenticated}) => {
             // Create log
             const data = await createLog({log: body}).unwrap();
             try {
-                // Verify it is fully indexed/created before redirecting
-                await verifyLogExists({logRequest: formData, logResult: data});
-                clearFormData();
-                setCreateInProgress(false);
-                if(location.pathname.startsWith("/beta")) {
-                    navigate(`/beta/logs/${data.id}`);
-                } else {
-                    navigate(`/logs/${data.id}`);
-                }
+              // Verify it is fully indexed/created before redirecting
+              await verifyLogExists({logRequest: formData, logResult: data});
+              clearFormData();
+              setCreateInProgress(false);
             } catch (error) {
-                console.error("An error occured while checking log was created", error);
+              console.error("An error occured while checking log was created", error);
+            } finally {
+              navigate(`/logs/${data.id}`);
             }
         } catch (error) {
             if(error.response && (error.response.status === 401 || error.response.status === 403)){

src/components/log/EditLog/EditLog.js

@@ -2,16 +2,15 @@ import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 import EntryEditor from "../EntryEditor";
 import { ologApi, useVerifyLogExists } from "api/ologApi";
-import { useLocation, useNavigate } from "react-router-dom";
 import { Backdrop, CircularProgress } from "@mui/material";
+import useBetaNavigate from "hooks/useBetaNavigate";
 
 const EditLog = ({log, isAuthenticated}) => {
 
     const [editInProgress, setEditInProgress] = useState(false);
     const [editLog] = ologApi.endpoints.editLog.useMutation();
     const verifyLogExists = useVerifyLogExists();
-    const navigate = useNavigate();
-    const location = useLocation();
+    const navigate = useBetaNavigate();
 
     const existingLogGroup = log?.properties?.filter(it => it.name === "Log Entry Group")?.at(0)?.value;
 
@@ -54,16 +53,13 @@ const EditLog = ({log, isAuthenticated}) => {
             // Edit the log
             const data = await editLog({log: body}).unwrap();
             try {
-                // Verify full edited/available
-                await verifyLogExists({logRequest: formData, logResult: data});
-                setEditInProgress(false);
-                if(location.pathname.startsWith("/beta")) {
-                    navigate(`/beta/logs/${data.id}`);
-                } else {
-                    navigate(`/logs/${data.id}`);
-                }
+              // Verify full edited/available
+              await verifyLogExists({logRequest: formData, logResult: data});
+              setEditInProgress(false);
             } catch (error) {
-                console.error("An error occured while checking log was edited", error);
+              console.error("An error occured while checking log was edited", error);
+            } finally {
+              navigate(`/logs/${data.id}`);
             }
         } catch (error) {
             if(error.response && (error.response.status === 401 || error.response.status === 403)){

src/components/log/ReplyLog/ReplyLog.js

@@ -3,16 +3,15 @@ import { useForm } from "react-hook-form";
 import EntryEditor from "../EntryEditor";
 import customization from "config/customization";
 import { ologApi, useVerifyLogExists } from "api/ologApi";
-import { useLocation, useNavigate } from "react-router-dom";
 import { Backdrop, CircularProgress } from "@mui/material";
+import useBetaNavigate from "hooks/useBetaNavigate";
 
 const ReplyLog = ({log, isAuthenticated}) => {
 
     const [replyInProgress, setReplyInProgress] = useState(false);
     const [createLog] = ologApi.endpoints.createLog.useMutation();
     const verifyLogExists = useVerifyLogExists();
-    const navigate = useNavigate();
-    const location = useLocation();
+    const navigate = useBetaNavigate();
 
     const form = useForm({
         defaultValues: {
@@ -52,16 +51,13 @@ const ReplyLog = ({log, isAuthenticated}) => {
             // create (reply to) the log
             const data = await createLog({log: body, replyTo: log.id}).unwrap();
             try {
-                // verify log fully created before redirecting
-                await verifyLogExists({logRequest: formData, logResult: data});
-                setReplyInProgress(false);
-                if(location.pathname.startsWith("/beta")) {
-                    navigate(`/beta/logs/${data.id}`);
-                } else {
-                    navigate(`/logs/${data.id}`);
-                }
+              // verify log fully created before redirecting
+              await verifyLogExists({logRequest: formData, logResult: data});
+              setReplyInProgress(false);
             } catch (error) {
-                console.error("An error occured while checking log was created", error);
+              console.error("An error occured while checking log was created", error);
+            } finally {
+              navigate(`/logs/${data.id}`);
             }
         } catch (error) {
             if(error.response && (error.response.status === 401 || error.response.status === 403)){

src/hooks/useBetaNavigate.js

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+const { useLocation, useNavigate } = require("react-router-dom");
+
+const useBetaNavigate = () => {
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return useCallback((path) => {
+
+    if(location.pathname.startsWith("/beta")) {
+      return navigate(`/beta${path}`);
+    } else {
+      return navigate(`${path}`);
+    }
+
+  }, [location, navigate]);
+}
+
+export default useBetaNavigate;