Skip to content

Commit

Permalink
Merge pull request #13 from kali-in/add-query-support
Browse files Browse the repository at this point in the history
Added support for URL query parameter
  • Loading branch information
kali-in authored Jan 20, 2025
2 parents 6617f9a + 29ce59e commit 3373b9d
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 5 deletions.
72 changes: 70 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
13 changes: 12 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);

Expand All @@ -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',
Expand Down
7 changes: 5 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
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';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

// 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();

0 comments on commit 3373b9d

Please sign in to comment.