fix(RV-497): Fix 1st time ux to templates > 0 (#499)

Author: knguyenrise8

frontend/src/App.test.tsx

@@ -4,6 +4,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import { FilesProvider } from './contexts/FilesContext';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // Mock the imports
 vi.mock('./components/AppHeader/AppHeader.tsx', () => ({
@@ -29,11 +30,13 @@ describe('App component', () => {
 
   const renderComponent = () => {
     render(
-      <BrowserRouter>
-        <FilesProvider>
-          <App />
-        </FilesProvider>
-      </BrowserRouter>
+      <QueryClientProvider client={new QueryClient()}>
+        <BrowserRouter>
+          <FilesProvider>
+            <App />
+          </FilesProvider>
+        </BrowserRouter>
+      </QueryClientProvider>
     );
   };
 
@@ -48,7 +51,7 @@ describe('App component', () => {
   });
 
   it('displays regular content on subsequent visits', () => {
-    localStorage.setItem('hasVisited', 'true');
+    localStorage.setItem('templates', JSON.stringify(['hello']));
     renderComponent();
     expect(screen.queryByTestId('first-time-exp')).not.toBeInTheDocument();
     expect(screen.getByTestId('templates-index')).toBeInTheDocument();

frontend/src/App.tsx

@@ -9,21 +9,49 @@ import Comment from './assets/comment.svg';
 import CSV from './assets/csv.svg';
 import "./App.scss";
 import { useFiles } from "./contexts/FilesContext.tsx";
+import { useQuery } from "@tanstack/react-query";
+import { TemplateAPI } from "./types/templates.ts";
 
 function App() {
   const { pathname } = useLocation();
   const navigate = useNavigate();
-  const { setFiles } = useFiles();
-  const [isFirstVisit, setIsFirstVisit] = useState(false);
+  const { setFiles, templates, setTemplates } = useFiles();
+  const [hasMorethan1Template, setHasMoreThanOneTemplate] = useState(false);
 
+  const templateQuery = useQuery({
+    queryKey: ["templates"],
+    queryFn: TemplateAPI.getTemplates,
+  });
   useEffect(() => {
-    const hasVisited = localStorage.getItem("hasVisited");
-    if (!hasVisited) {
-      setIsFirstVisit(true);
-      localStorage.setItem("hasVisited", "true");
+    const getTemplates = async () => {
+      const templatesJSON = localStorage.getItem("templates") || "[]";
+      if (templateQuery.data && templateQuery.data?.length > 0) {
+        setTemplates(templateQuery.data as []);
+      } else if (templatesJSON) {
+        setTemplates(
+          JSON.parse(templatesJSON).map((template) => ({
+            ...template,
+            updatedAt: template.lastUpdated,
+          })),
+        );
+      } else {
+        setTemplates([]);
+      }
+    };
+    getTemplates();
+  }, [templateQuery.data]);
+
+  useEffect(() => {
+    if (templates.length > 0) {
+      setHasMoreThanOneTemplate(true);
+    } else {
+      setHasMoreThanOneTemplate(false);
     }
+  }, [templates.length]);
+
+  useEffect(() => {
     setFiles([]);
-  }, []);
+  },[]);
 
   const navLinks = [
     { text: "Annotate and Extract", url: "/" },
@@ -58,7 +86,7 @@ function App() {
           <div className="flex-10 display-flex flex-column bg-idwa-light" data-testid="content-area">
             <h2 className="padding-left-2 bg-white margin-top-0 home-header" data-testid="home-header">Annotate and Extract</h2>
             <div className="display-flex flex-justify-center app-content-container width-full" data-testid="app-content-container">
-              {isFirstVisit ? (
+              {!hasMorethan1Template ? (
                 <div className="bg-white display-flex flex-column flex-justify flex-align-center first-time-content" data-testid="first-time-exp">
                   <h3 className="first-time-header" data-testid="first-time-header">
                     Welcome to Report Vision

frontend/src/components/ExtractUploadFile.scss

@@ -57,7 +57,7 @@ p {
   display: flex;
   flex-direction: column;
   height: 150px;
-  width: 914px;
+  width: 100%;
   border-left: 5px solid #d63e04;
   background-color: #f4e3db;
 }

frontend/src/components/TemplatesIndex/TemplatesIndex.tsx

@@ -1,18 +1,17 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect } from "react";
 import { Button } from "@trussworks/react-uswds";
 import { SortableTable } from "../SortableTable/SortableTable.tsx";
 import { useNavigate } from "react-router-dom";
 import extractImage from "../../assets/extract_image.svg";
-import { useQuery } from "@tanstack/react-query";
-import { TemplateAPI } from "../../types/templates.ts";
 import usePagination from "../../hooks/use-pagination/index.ts";
+import { useFiles } from "../../contexts/FilesContext.tsx";
 
 import './TemplatesIndex.scss'
 
 type TemplateIndexProps = unknown;
 
 export const TemplatesIndex: FC<TemplateIndexProps> = () => {
-  const [templates, setTemplates] = useState([]);
+  const { templates, setTemplates } = useFiles();
   const { 
     currentItems,
     currentPage,
@@ -24,29 +23,6 @@ export const TemplatesIndex: FC<TemplateIndexProps> = () => {
     hasPreviousPage
   } = usePagination(templates, 10, 1);
   const navigate = useNavigate();
-  // TODO: Pagination and sorting will be added later
-  const templateQuery = useQuery({
-    queryKey: ["templates"],
-    queryFn: TemplateAPI.getTemplates,
-  });
-  useEffect(() => {
-    const getTemplates = async () => {
-      const templatesJSON = localStorage.getItem("templates") || "[]";
-      if (templateQuery.data && templateQuery.data?.length > 0) {
-        setTemplates(templateQuery.data as []);
-      } else if (templatesJSON) {
-        setTemplates(
-          JSON.parse(templatesJSON).map((template) => ({
-            ...template,
-            updatedAt: template.lastUpdated,
-          })),
-        );
-      } else {
-        setTemplates([]);
-      }
-    };
-    getTemplates();
-  }, [templateQuery.data]);
 
   useEffect(() => {
     const localStorageEvent = (event) => {

frontend/src/contexts/FilesContext.tsx

@@ -36,7 +36,9 @@ export interface FileType {
 
 interface FileContextType {
   files: File[];
+  templates: any[];
   selectedTemplates: TemplatePair[];
+  setTemplates: (templates: any[]) => void;
   addFile: (file: File) => void;
   removeFile: (fileName: string) => void;
   clearFiles: () => void;
@@ -49,6 +51,7 @@ const FilesContext = createContext<FileContextType | undefined>(undefined);
 
 export const FilesProvider = ({ children }: { children: ReactNode }) => {
   const [files, setFiles] = useState<File[]>([]);
+  const [templates, setTemplates] = useState<any[]>([]);
   const [selectedTemplates, _setSelectedTemplates] = useState<TemplatePair[]>(
     [],
   );
@@ -85,8 +88,10 @@ export const FilesProvider = ({ children }: { children: ReactNode }) => {
   return (
     <FilesContext.Provider
       value={{
+        templates,
         files,
         selectedTemplates,
+        setTemplates,
         addFile,
         removeFile,
         clearFiles,