From 25ce0920b4afc202afb581c268bcd98adf8d1cf9 Mon Sep 17 00:00:00 2001 From: Nathan Alexander Walker Date: Wed, 7 Feb 2024 14:36:48 -0500 Subject: [PATCH] Moved resource list to using react-router --- app/javascript/components/App.tsx | 31 ++++++++----------- .../components/resources/ResourceList.jsx | 12 ++++--- app/javascript/pages/Home.jsx | 20 ++++++++++++ app/javascript/pages/Resources.jsx | 9 ++++++ config/routes.rb | 1 + package.json | 1 + yarn.lock | 20 ++++++++++++ 7 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 app/javascript/pages/Home.jsx create mode 100644 app/javascript/pages/Resources.jsx diff --git a/app/javascript/components/App.tsx b/app/javascript/components/App.tsx index 5cf3c46..44daf70 100644 --- a/app/javascript/components/App.tsx +++ b/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(null); - - useEffect(() => { - setAppVersion(document.body.getAttribute('data-app-version')); - }, [appVersion]) - - if (!appVersion) { - return 'Loading...'; +const router = createBrowserRouter([ + { + path: '/', + children: [ + { index: true, element: }, + { path: '/admin/resources', element: } + ] } +]) - return ( -
-

Triclops

-

{`Version ${appVersion}`}

- -
- ); +const App = () => { + return ; }; export default App; diff --git a/app/javascript/components/resources/ResourceList.jsx b/app/javascript/components/resources/ResourceList.jsx index f32f164..6283c96 100644 --- a/app/javascript/components/resources/ResourceList.jsx +++ b/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() { - - +
+ @@ -86,7 +88,7 @@ export default function ResourceList() { - + {filteredResources.slice((pageNumber - 1) * 50, pageNumber * 50).map((resource) => diff --git a/app/javascript/pages/Home.jsx b/app/javascript/pages/Home.jsx new file mode 100644 index 0000000..03f78e9 --- /dev/null +++ b/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 ( +
+

Triclops

+

{`Version ${appVersion}`}

+
+ ) +} \ No newline at end of file diff --git a/app/javascript/pages/Resources.jsx b/app/javascript/pages/Resources.jsx new file mode 100644 index 0000000..fc1a061 --- /dev/null +++ b/app/javascript/pages/Resources.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import ResourceList from "../components/resources/ResourceList"; + +export default function ResourcesPage() { + return ( + + ); +} \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 45fa4d1..39d6be0 100644 --- a/config/routes.rb +++ b/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 diff --git a/package.json b/package.json index 5b6108b..3cdb52e 100644 --- a/package.json +++ b/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" } diff --git a/yarn.lock b/yarn.lock index 2302345..22ebb13 100644 --- a/yarn.lock +++ b/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"
Identifier Source URIError Message
{resource.identifier}