Scaffolding and wiring for Page Detail screen

Author: azdak

src/main.tsx

@@ -37,6 +37,7 @@ import {
   BulkProperty,
   Pages,
   AddPages,
+  PageDetail,
 } from '~/routes';
 import {
   addPropertyAction,
@@ -55,6 +56,7 @@ import {
   authenticatedLoader,
   pagesLoader,
   addPagesLoader,
+  pageDetailLoader,
 } from '~/routes/route-handlers';
 
 const queryClient = new QueryClient({
@@ -107,7 +109,7 @@ const router = createBrowserRouter([
         element: <TagDetails />,
         loader: authenticatedLoader(tagDetailsLoader(queryClient)),
       },
-      {
+      { // report page detail
         path: 'reports/:reportId/pages/:pageId',
         element: <PageDetails />,
         loader: authenticatedLoader(pageDetailsLoader(queryClient)),
@@ -125,6 +127,11 @@ const router = createBrowserRouter([
         element: <AddPages />,
         loader: authenticatedLoader(addPagesLoader(queryClient)),
       },
+      { // url detail
+        path: 'pages/:pageId',
+        element: <PageDetail />,
+        loader: authenticatedLoader(pageDetailLoader(queryClient)),
+      },
       {
         path: 'properties',
         element: <Properties />,

src/queries/pages.ts

@@ -1,10 +1,16 @@
 import { queryOptions } from '@tanstack/react-query';
-import { getPages, IPageParams } from '~/services';
+import { getPages, getPageDetail, IPageParams, IPageDetailParams } from '~/services';
 
 // Query for all pages
 export const pagesQuery = (params:IPageParams) => queryOptions({
     queryKey: ['pages'],
     queryFn: async () => getPages({params: params}),
 });
 
+// Query for page detail
+export const pageDetailQuery = (params:IPageDetailParams) => queryOptions({
+    queryKey: ['page-detail'],
+    queryFn: async () => getPageDetail(params),
+});
+
 

src/routes/index.ts

@@ -21,6 +21,7 @@ export { default as EditProperty } from './protected/properties/edit-property';
 // Pages
 export { default as Pages } from './protected/pages/pages';
 export { default as AddPages } from './protected/pages/add-pages';
+export { default as PageDetail } from './protected/pages/page-detail';
 
 // Scans
 export { default as Scans } from './protected/scans';

src/routes/protected/pages/page-detail.tsx

@@ -0,0 +1,53 @@
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
+import { ActionFunctionArgs, Link, useLoaderData, useNavigate } from 'react-router-dom';
+import { SEO } from '~/components/layout';
+import { pageDetailQuery } from '~/queries/pages';
+
+// Initial data on pageload
+export const pageDetailLoader =
+  (queryClient: QueryClient) => async ({ params }: ActionFunctionArgs) => {
+    console.log(params);
+    if(!params.pageId) return;
+    const initialPage = await queryClient.ensureQueryData(
+      pageDetailQuery({ pageId: params.pageId }),
+    );
+    return { initialPage };
+  };
+
+const pageDetail = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { initialPage } = useLoaderData() as Awaited<
+    ReturnType<ReturnType<typeof pageDetailLoader>>
+  >; 
+
+  return (
+    <>
+      <SEO
+        title="Pages - Equalify"
+        description="Manage and monitor your properties on Equalify to improve their accessibility."
+        url="https://dashboard.equalify.app/properties"
+      />
+      <div className="flex w-full flex-col-reverse justify-between sm:flex-row sm:items-center">
+        <h1
+          className="text-2xl font-bold md:text-3xl"
+          id="properties-list-heading"
+        >
+          Page Detail
+        </h1>
+        <div className="flex flex-row items-center gap-2">
+          <Link
+            to=""
+            onClick={() => navigate(-1)}
+            aria-label='Back to Pages'
+            className="text-[#186121]">
+            &#60; Back to Pages
+          </Link>
+        </div> 
+      </div>
+      <section>
+        </section> 
+      </>
+    )
+};
+export default pageDetail;

src/routes/protected/pages/pages.tsx

@@ -110,13 +110,12 @@ const Pages = () => {
         accessorKey: 'url',
         header: 'URL',
         cell: ({ row }) => (
-          <a
+          <Link
             className="text-blue-500 hover:opacity-50"
-            target="_blank"
-            href={row.original.url}
+            to={'./'+row.original.id}
           >
             {row.original.url}
-          </a>
+          </Link>
         ),
       },
       {

src/routes/route-handlers.ts

@@ -13,7 +13,8 @@ export { tagDetailsLoader } from './protected/reports/tag-details';
 export { reportsLoader } from './protected/reports/reports';
 export { scansLoader } from './protected/scans';
 export { pagesLoader } from './protected/pages/pages';
-export { addPagesLoader } from './protected/pages/add-pages'
+export { addPagesLoader } from './protected/pages/add-pages';
+export { pageDetailLoader } from './protected/pages/page-detail';
 
 export const authenticatedLoader = (loader: any) => async (args: any) => {
   const { isAuthenticated } = useStore.getState();

src/services/pages.ts

@@ -39,6 +39,10 @@ export interface IUrl {
   urlId: string;
 }
 
+export interface IPageDetailParams {
+  pageId: string;
+}
+
 const API_NAME = 'auth';
 
 /**
@@ -70,6 +74,36 @@ export const getPages = async ({ params }: { params: IPageParams }): Promise<IPa
   }
 };
 
+/**
+ * Fetch single page detail
+ * @returns {Promise<IPage>} Single IPage record
+ * @throws Will throw an error if the fetch fails
+ */
+export const getPageDetail = async ( params :IPageDetailParams): Promise<IPage> => {
+  try {
+    const response = await get({
+      apiName: API_NAME,
+      path: `/get/page`,
+      options: {
+        queryParams: {
+          pageId: params.pageId,
+        },
+      },
+    }).response;
+    console.log(response);
+
+    const { body } = response;
+    const { result } = (await body.json()) as unknown as ApiResponse<
+    IPage
+    >;
+    console.log('Fetched', result);
+    return result ;
+  } catch (error) {
+    console.error('Error fetching pages', error);
+    throw error;
+  }
+};
+
 /**
  * Send pages to scan
  * @param urls - Array of <IUrl>s to sent to scan
@@ -95,6 +129,7 @@ export const sendUrlsToScan = async (
   }
 };
 
+/* Add pages */
 export const addPagesFromForm = async (
   formData:any
 ): Promise<{result:any}> => {