Implement switch list using useNavigate

src/App.jsx

@@ -6,6 +6,7 @@ import { AddItem, Home, Layout, List } from './views';
 import { getItemData, streamListItems } from './api';
 import { useStateWithStorage } from './utils';
 import { generateToken } from '@the-collab-lab/shopping-list-utils';
+import SwitchList from './views/SwitchList';
 
 export function App() {
  const [data, setData] = useState([]);
@@ -23,6 +24,10 @@ export function App() {
  function setNewToken() {
  setListToken(generateToken());
  }
+
+ function clearListToken() {
+ setListToken(null);
+ }
 
  useEffect(() => {
  if (!listToken) return;
@@ -85,6 +90,7 @@ export function App() {
  />
  }
  />
+ <Route path="/switch-list" element={<SwitchList clearListToken={clearListToken}/>} />
  <Route
  path="/list"
  element={<List data={data} token={listToken} />}

src/views/Layout.jsx

@@ -30,12 +30,9 @@ export function Layout({ token }) {
  <nav className="Nav">
  {token ? (
  <>
- <button
- className="switch-btn Nav-link"
- onClick={handleSwitchToken}
- >
+ <NavLink to="/switch-list" className="Nav-link">
  Switch List
- </button>
+ </NavLink>
  <NavLink to="/list" className="Nav-link">
  List
  </NavLink>

src/views/SwitchList.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function SwitchList({clearListToken}) {
+ const navigate = useNavigate();
+
+ React.useEffect(() => {
+ setTimeout(() => {
+ clearListToken()
+ navigate('/');
+ }, 1000);
+ }, [navigate]);
+
+ return <p style={{textAlign: "center"}}>Redirecting to home...</p>;
+}