Moved resource list to using react-router

app/javascript/components/App.tsx

@@ -1,26 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import SearchBar from './resources/SearchBar';
-import ResourceList from './resources/ResourceList';
 import '../stylesheets/triclops_v1.scss'; // app css entry point
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import HomePage from '../pages/Home';
+import ResourcesPage from '../pages/Resources';
 
-const App = () => {
-  const [appVersion, setAppVersion] = useState<string | null>(null);
-
-  useEffect(() => {
-    setAppVersion(document.body.getAttribute('data-app-version'));
-  }, [appVersion]) 
-
-  if (!appVersion) {
-    return 'Loading...';
+const router = createBrowserRouter([
+  {
+    path: '/',
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: '/admin/resources', element: <ResourcesPage /> }
+    ]
   }
+])
 
-  return (
-    <div>
-      <h1>Triclops</h1>
-      <p>{`Version ${appVersion}`}</p>
-      <ResourceList />
-    </div>
-  );
+const App = () => {
+  return <RouterProvider router={router} />;
 };
 
 export default App;

app/javascript/components/resources/ResourceList.jsx

@@ -17,8 +17,10 @@ export default function ResourceList() {
           }
         });
       const data = await response.json();
-      setResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data));
-      // setResources(data);
+      // setResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data));
+      // setFilteredResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data));
+      console.log(data[0])
+      setResources(data);
       setFilteredResources(data);
     })();
   }, []);
@@ -73,8 +75,8 @@ export default function ResourceList() {
       <button onClick={prevPage}>prev</button>
       <button onClick={nextPage}>next</button>
       <TableContainer>
-        <table className="table table-dark table-bordered table-striped">
-          <thead>
+        <table className="table table-primary table-striped">
+          <thead className='thead-dark'>
             <tr>
               <th>Identifier</th>
               <th>Source URI</th>
@@ -86,7 +88,7 @@ export default function ResourceList() {
               <th>Error Message</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className=''>
             {filteredResources.slice((pageNumber - 1) * 50, pageNumber * 50).map((resource) => 
               <tr key={resource.identifier}>
                 <td>{resource.identifier}</td>

app/javascript/pages/Home.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from "react";
+
+export default function HomePage() {
+  const [appVersion, setAppVersion] = useState(null);
+
+  useEffect(() => {
+    setAppVersion(document.body.getAttribute('data-app-version'));
+  }, [appVersion]) 
+
+  if (!appVersion) {
+    return 'Loading...';
+  }
+
+  return (
+    <div>
+      <h1>Triclops</h1>
+      <p>{`Version ${appVersion}`}</p>
+    </div>
+  )
+}

app/javascript/pages/Resources.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ResourceList from "../components/resources/ResourceList";
+
+export default function ResourcesPage() {
+  return (
+    <ResourceList />
+  );
+}

config/routes.rb

@@ -5,6 +5,7 @@
 Rails.application.routes.draw do
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   root 'pages#home'
+  get 'admin/resources', to: 'pages#home'
 
   devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }
   devise_scope :user do

package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "sass": "^1.70.0",
     "styled-components": "^6.1.8"
   }

yarn.lock

@@ -174,6 +174,11 @@
   dependencies:
     "@swc/helpers" "^0.5.0"
 
+"@remix-run/router@1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.0.tgz#461a952c2872dd82c8b2e9b74c4dfaff569123e2"
+  integrity sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==
+
 "@restart/hooks@^0.4.9":
   version "0.4.15"
   resolved "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.15.tgz"
@@ -646,6 +651,21 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-router-dom@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.0.tgz#177c8bd27146decbb991eafb5df159f7a9f70035"
+  integrity sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==
+  dependencies:
+    "@remix-run/router" "1.15.0"
+    react-router "6.22.0"
+
+react-router@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.0.tgz#a22b44851a79dafc6b944cb418db3e80622b9be1"
+  integrity sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==
+  dependencies:
+    "@remix-run/router" "1.15.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"