Skip to content

Commit

Permalink
Merge pull request #22 from TID-Lab/auth-fetch-query
Browse files Browse the repository at this point in the history 
fix bugs related to auth and react-query
  • Loading branch information
@codelastnight
codelastnight authored Jul 17, 2024
2 parents e334f3c + fc0c839 commit be06e36
Show file tree
Hide file tree
Showing 34 changed files with 5,058 additions and 4,589 deletions.
1,547 changes: 513 additions & 1,034 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@sendgrid/mail": "^7.6.1",
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-query-devtools": "^4.36.1",
"@yaireo/tagify": "^4.9.8",
"async": "^3.2.0",
"aws-sdk": "^2.814.0",
Expand Down Expand Up @@ -92,10 +94,9 @@
"react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^4.7.0",
"react-facebook": "^8.1.4",
"react-query": "^3.34.15",
"react-router-bootstrap": "^0.26.0",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"react-tagcloud": "^2.2.0",
"react-twitter-widgets": "^1.10.0",
"readline-sync": "^1.4.10",
Expand Down
2 changes: 1 addition & 1 deletion src/App.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render, cleanup, screen } from "@testing-library/react";
import App from "./App_new";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

afterEach(cleanup);
Expand Down
214 changes: 107 additions & 107 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,140 @@
import React, { useState } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@yaireo/tagify/dist/tagify.css';
import AggieNavbar from './components/AggieNavbar';
import AlertService, { AlertContent } from './components/AlertService';
import React, { useEffect, useState } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "@yaireo/tagify/dist/tagify.css";
import AggieNavbar from "./components/AggieNavbar";
import AlertService, { AlertContent } from "./components/AlertService";
import {
Navigate,
Route,
Routes,
useLocation,
useNavigate,
} from 'react-router-dom';
import ReportsIndex from './pages/report/ReportsIndex';
import ReportDetails from './pages/report/ReportDetails';
import GroupsIndex from './pages/group/GroupsIndex';
import GroupDetails from './pages/group/GroupDetails';
import SourcesIndex from './pages/source/SourcesIndex';
import SourceDetails from './pages/source/SourceDetails';
import UsersIndex from './pages/user/UsersIndex';
import UserProfile from './pages/user/UserProfile';
import TagsIndex from './pages/tag/TagsIndex';
import Configuration from './pages/Configuration';
import CredentialsIndex from './pages/CredentialsIndex';
import Login from './pages/Login';
import Analysis from './pages/Analysis';
import NotFound from './pages/NotFound';
import ResetPassword from './pages/ResetPassword';
import { useQuery, useQueryClient } from 'react-query';
import { getSession } from './api/session';
import { AxiosError } from 'axios';
import { Session } from './objectTypes';
import RelevantReportsIndex from './pages/report/RelevantReportsIndex';
import { getAllGroups } from './api/groups';
import { Button, Modal } from 'react-bootstrap';
} from "react-router-dom";
import ReportsIndex from "./pages/report/ReportsIndex";
import ReportDetails from "./pages/report/ReportDetails";
import GroupsIndex from "./pages/group/GroupsIndex";
import GroupDetails from "./pages/group/GroupDetails";
import SourcesIndex from "./pages/source/SourcesIndex";
import SourceDetails from "./pages/source/SourceDetails";
import UsersIndex from "./pages/user/UsersIndex";
import UserProfile from "./pages/user/UserProfile";
import TagsIndex from "./pages/tag/TagsIndex";
import Configuration from "./pages/Configuration";
import CredentialsIndex from "./pages/CredentialsIndex";
import Login from "./pages/Login";
import Analysis from "./pages/Analysis";
import NotFound from "./pages/NotFound";
import ResetPassword from "./pages/ResetPassword";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { getSession } from "./api/session";
import { Axios, AxiosError } from "axios";
import { Session } from "./objectTypes";
import RelevantReportsIndex from "./pages/report/RelevantReportsIndex";
import { getAllGroups } from "./api/groups";
import { Button, Modal } from "react-bootstrap";
//TODO: BIG TODO is to correctly type all of react-query usage. Its not critical for function, but it is good for clarity in development.
//TODO: Also BIG TODO is to ensure EVERY API call has a way of surfacing an error message. I want readble UI alerts but at least console.errors.
const isSafari = () =>
/^((?!chrome|android).)*safari/i.test(navigator.userAgent);

const PublicRoutes = () => {
return (
<Routes>
<Route path='/reset-password' element={<ResetPassword />} />
<Route path='/login' element={<Login />} />
<Route path='/*' element={<Navigate replace to='login' />} />
</Routes>
);
};

interface IPrivateRouteProps {
sessionData: Session | undefined;
setGlobalAlert: React.Dispatch<AlertContent>;
}

const PrivateRoutes = ({ sessionData, setGlobalAlert }: IPrivateRouteProps) => {
return (
<Routes>
<Route path='/reset-password' element={<ResetPassword />} />
<Route path='/login' element={<Navigate to='/reports' />} />
{/* <Route path='*' element={<Navigate replace to='login' />} /> */}

<Route index element={<Navigate to={"/reports"} />} />
<Route
path='/reports'
element={<ReportsIndex setGlobalAlert={setGlobalAlert} />}
/>
<Route path='/report/:id' element={<ReportDetails />} />
<Route
path='/relevant-reports'
element={<RelevantReportsIndex setGlobalAlert={setGlobalAlert} />}
/>
<Route path='/groups' element={<GroupsIndex />} />
<Route path='/group/:id' element={<GroupDetails />} />
<Route path='/sources' element={<SourcesIndex />} />
<Route path='/source/:id' element={<SourceDetails />} />
<Route path='/users' element={<UsersIndex />} />
<Route path='/user/:id' element={<UserProfile session={sessionData} />} />
<Route path='/tags' element={<TagsIndex />} />
<Route path='/config' element={<Configuration />} />
<Route path='/credentials' element={<CredentialsIndex />} />
<Route path='/analysis' element={<Analysis />} />
<Route path='/404' element={<NotFound />} />
</Routes>
);
};
const App = () => {
const queryClient = useQueryClient();
const [isLoggedIn, setIsLoggedIn] = useState(true);
const [userData, setUserData] = useState<Session | undefined>(undefined);

const navigate = useNavigate();
const location = useLocation();
let sessionFetching = true;
const sessionQuery = useQuery<Session | undefined, AxiosError>(
'session',
getSession,
{
onError: (err: AxiosError) => {
if (err.response && err.response.status === 401) {
sessionFetching = false;
navigate('/reports');

// we just wanna check session once, no need for react query.
useEffect(() => {
getSession()
.then((data: Session) => {
// did log in
setIsLoggedIn(true);
if (data) setUserData(data);
if (location.pathname === "/login") {
navigate("/reports");
}
},
onSuccess: (data) => {
sessionFetching = true;
if (location.pathname === '/login') {
navigate('/reports');
// For some reason, when there is a navigation here, the session sometimes doesn't tell the navbar it's signed in. Refetching on navigation fixes that.
sessionQuery.refetch();
})
.catch((err: AxiosError) => {
// didn't log in
if (err.response && err.response.status === 401) {
}
},
retry: sessionFetching,
}
);
setIsLoggedIn(false);
});
}, []);

queryClient.prefetchQuery('all-groups', getAllGroups);
//queryClient.prefetchQuery("all-groups", getAllGroups);
// This is how we "globalize" an alert. This is only for alerts that should remain over multiple views
// replace with recoil
const [globalAlert, setGlobalAlert] = useState<AlertContent>({
heading: '',
message: '',
variant: 'primary',
heading: "",
message: "",
variant: "primary",
});

const InitialApp = (
<>
<AggieNavbar
isAuthenticated={sessionQuery.isSuccess}
session={sessionQuery.data}
/>
<AggieNavbar isAuthenticated={isLoggedIn} session={userData} />
<AlertService globalAlert={globalAlert} setGlobalAlert={setGlobalAlert} />
<Routes>
<Route path='/'>
{(sessionQuery.isSuccess || sessionQuery.isFetching) && (
<>
<Route index element={<Navigate to={'reports'} />} />
<Route path='login' element={<Login />} />
<Route
path='reports'
element={<ReportsIndex setGlobalAlert={setGlobalAlert} />}
/>
<Route path='report/:id' element={<ReportDetails />} />
<Route
path='relevant-reports'
element={
<RelevantReportsIndex setGlobalAlert={setGlobalAlert} />
}
/>
<Route path='groups' element={<GroupsIndex />} />
<Route path='group/:id' element={<GroupDetails />} />
<Route path='sources' element={<SourcesIndex />} />
<Route path='source/:id' element={<SourceDetails />} />
<Route path='users' element={<UsersIndex />} />
<Route
path='user/:id'
element={<UserProfile session={sessionQuery.data} />}
/>
<Route path='tags' element={<TagsIndex />} />
<Route path='config' element={<Configuration />} />
<Route path='credentials' element={<CredentialsIndex />} />
<Route path='analysis' element={<Analysis />} />
<Route path='reset-password' element={<ResetPassword />} />
<Route path='404' element={<NotFound />} />
<Route path='*' element={<Navigate replace to='/404' />} />
</>
)}
{/*@ts-ignore*/}
{sessionQuery.isError &&
sessionQuery.error &&
sessionQuery.error.response &&
sessionQuery.error.response.status === 401 && (
<>
<Route path='reset-password' element={<ResetPassword />} />
<Route path='login' element={<Login />} />
<Route path='*' element={<Navigate replace to='login' />} />
</>
)}
</Route>
</Routes>
{isLoggedIn ? (
<PrivateRoutes sessionData={userData} setGlobalAlert={setGlobalAlert} />
) : (
<PublicRoutes />
)}
</>
);

const WrongBrowser = (
<Modal.Dialog color='danger'>
<Modal.Header>
<Modal.Title>:(</Modal.Title>
<Modal.Title>{":("}</Modal.Title>
</Modal.Header>

<Modal.Body>
Expand Down
Loading

0 comments on commit be06e36

Please sign in to comment.