From 29ce59e9fa186bc7ddde018cb4a2803205c76110 Mon Sep 17 00:00:00 2001 From: kali-in <45685321+kali-in@users.noreply.github.com> Date: Mon, 20 Jan 2025 15:21:58 +0530 Subject: [PATCH] Added support for URL query parameter --- package-lock.json | 72 +++++++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + src/App.js | 13 ++++++++- src/index.js | 7 +++-- 4 files changed, 88 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9bc928e..b1f6af2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "filter-contact-list-react-new", + "name": "aws-cloudtrail-event-name-search", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "filter-contact-list-react-new", + "name": "aws-cloudtrail-event-name-search", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.17.0", @@ -15,6 +15,7 @@ "react": "^18.3.1", "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", + "react-router-dom": "^7.1.3", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -4387,6 +4388,12 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/eslint": { "version": "8.56.12", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", @@ -16400,6 +16407,55 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz", + "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz", + "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.3" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -17321,6 +17377,12 @@ "node": ">= 0.8.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -18593,6 +18655,12 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "license": "0BSD" }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 78fc385..d7a2f52 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "react": "^18.3.1", "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", + "react-router-dom": "^7.1.3", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.js b/src/App.js index b252af6..bf7646e 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import InputGroup from 'react-bootstrap/InputGroup'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import 'bootstrap/dist/css/bootstrap.min.css'; +import { useSearchParams } from 'react-router-dom'; import { data } from './data.js'; @@ -49,7 +50,8 @@ const Header = ({ search, setSearch, isFocused, setIsFocused, searchInputRef, in }; function App() { - const [search, setSearch] = useState(''); + const [searchParams, setSearchParams] = useSearchParams(); + const [search, setSearch] = useState(searchParams.get('q') || ''); const [isFocused, setIsFocused] = useState(false); const searchInputRef = useRef(null); @@ -68,6 +70,15 @@ function App() { }; }, []); + // Update URL when search changes + useEffect(() => { + if (search) { + setSearchParams({ q: search }); + } else { + setSearchParams({}); + } + }, [search, setSearchParams]); + const inputStyle = { '::placeholder': { color: isFocused ? '#999' : '#ccc', diff --git a/src/index.js b/src/index.js index d563c0f..4a6ad89 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; @@ -7,11 +8,13 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +reportWebVitals(); \ No newline at end of file