no-issue: Fix location.state null (#5179)

* extract useFromLocation

* extract `useFromLocation` to own file and use

packages/datatrak-web/src/api/mutations/useLogin.ts

@@ -4,7 +4,8 @@
  */
 
 import { useMutation, useQueryClient } from 'react-query';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useFromLocation } from '../../utils';
+import { useNavigate } from 'react-router-dom';
 import { post } from '../api';
 import { ROUTES } from '../../constants';
 
@@ -13,18 +14,10 @@ type LoginCredentials = {
   password: string;
 };
 
-function hasFrom(state: unknown): state is { from: string } {
-  if (state !== null && typeof state === 'object' && 'from' in state) {
-    return typeof state.from === 'string';
-  }
-  return false;
-}
 export const useLogin = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const location = useLocation();
-
-  const from = hasFrom(location.state) ? location.state.from : undefined;
+  const from = useFromLocation();
 
   return useMutation<any, Error, LoginCredentials, unknown>(
     ({ email, password }: LoginCredentials) => {

packages/datatrak-web/src/utils/index.ts

@@ -5,5 +5,6 @@
 
 export { errorToast, successToast } from './toast';
 export { useDebounce } from './useDebounce';
+export { useFromLocation } from './useFromLocation';
 export { useIsMobile } from './useIsMobile';
 export * from './date';

packages/datatrak-web/src/utils/useFromLocation.ts

@@ -0,0 +1,18 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+import { useLocation } from 'react-router-dom';
+
+function hasFrom(state: unknown): state is { from: string } {
+  if (state !== null && typeof state === 'object' && 'from' in state) {
+    return typeof state.from === 'string';
+  }
+  return false;
+}
+
+export function useFromLocation() {
+  const location = useLocation();
+  return hasFrom(location.state) ? location.state.from : undefined;
+}

packages/datatrak-web/src/views/ProjectSelectPage.tsx

@@ -5,7 +5,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Paper } from '@material-ui/core';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { useFromLocation } from '../utils';
 import { ProjectSelectForm } from '../features';
 import { ROUTES } from '../constants';
 
@@ -19,10 +20,7 @@ const Container = styled(Paper).attrs({
 
 export const ProjectSelectPage = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-  const { from } = location.state as {
-    from?: string;
-  };
+  const from = useFromLocation();
 
   const onSuccess = () => {
     navigate(from || ROUTES.HOME, {