feat: create storage feature

Author: mechamobau

package-lock.json

@@ -4,7 +4,9 @@
   "private": true,
   "dependencies": {
     "@bitty/pipe": "^0.2.1",
+    "@rehooks/local-storage": "^2.4.5",
     "@rsbuild/plugin-svgr": "^1.0.7",
+    "@tanstack/react-query": "^5.69.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

package.json

@@ -60,5 +60,10 @@
     "surface_water": "Surface Water",
     "population": "Population",
     "diameter": "Diameter"
+  },
+  "favorites": {
+    "title": "Favorites",
+    "cta": "Go to",
+    "delete": "Delete"
   }
 }

public/locales/en/translation.json

@@ -60,5 +60,10 @@
     "surface_water": "Agua Superficial",
     "population": "Población",
     "diameter": "Diámetro"
+  },
+  "favorites": {
+    "title": "Favoritos",
+    "cta": "Ir a",
+    "delete": "Borrar"
   }
 }

public/locales/es/translation.json

@@ -60,5 +60,10 @@
     "surface_water": "Água Superficial",
     "population": "População",
     "diameter": "Diâmetro"
+  },
+  "favorites": {
+    "title": "Favoritos",
+    "cta": "Ir até",
+    "delete": "Remover"
   }
 }

public/locales/pt/translation.json

@@ -1,13 +1,17 @@
 import { Navigate, Route, Routes } from 'react-router';
 import { ItemList } from './pages/ItemList/ItemList';
 import { ItemListLayout } from './components/layouts/ItemListLayout';
+import { GetById } from './pages/GetItemById/GetItemById';
+import { ItemStorageList } from './pages/ItemStorageList/ItemStorageList';
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Navigate to="/planets" replace />} />
       <Route element={<ItemListLayout />}>
+        <Route path="favorites" element={<ItemStorageList />}></Route>
         <Route path="/:entityName" element={<ItemList />}></Route>
+        <Route path="/:entityName/:entityId" element={<GetById />}></Route>
       </Route>
     </Routes>
   );

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useMemo } from 'react';
 
-import { useFilter } from '../../context/useFilter';
+import { useFilter } from '../../hooks/useFilter';
 import FilterForm from '../forms/FilterForm';
 
 import type { FilterValues } from '../../models/Item';

src/components/dropdown/FilterDropdown.tsx

@@ -4,7 +4,7 @@ import Button from 'react-bootstrap/Button';
 import FormControl from 'react-bootstrap/FormControl';
 
 import orderLabels from '../../constants/orderLabels';
-import { initialValues } from '../../context/useSort';
+import { initialValues } from '../../hooks/useSort';
 import OrderEnum from '../../models/enum/Order.enum';
 
 import type Item from '../../models/Item';

src/components/forms/SortForm.tsx

@@ -5,6 +5,7 @@ import Nav from 'react-bootstrap/Nav';
 import Container from 'react-bootstrap/Container';
 import { useTranslation } from 'react-i18next';
 import { entitiesList } from '../../constants/entitiesList';
+import { NavDropdown } from 'react-bootstrap';
 
 const Title = styled.h1`
   font-size: 1.9em;
@@ -37,15 +38,23 @@ export function ItemListLayout() {
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav>
-              {entitiesList.map((entity) => {
-                return (
-                  <Link to={`/${entity}`}>
-                    <Nav.Link href={`/${entity}`}>
-                      {t(`${entity}:title`)}
-                    </Nav.Link>
-                  </Link>
-                );
-              })}
+              <NavDropdown title="Entidades" id="basic-nav-dropdown">
+                {entitiesList.map((entity) => {
+                  return (
+                    <Link to={`/${entity}`}>
+                      <NavDropdown.Item href={`/${entity}`}>
+                        <Nav.Link href={`/${entity}`}>
+                          {t(`${entity}:title`)}
+                        </Nav.Link>
+                      </NavDropdown.Item>
+                    </Link>
+                  );
+                })}
+              </NavDropdown>
+
+              <Link to={`/favorites`}>
+                <Nav.Link href={`/favorites`}>{t(`favorites:title`)}</Nav.Link>
+              </Link>
             </Nav>
           </Navbar.Collapse>
         </Container>

src/components/layouts/ItemListLayout.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 
-import { Pagination } from '../../context/usePagination';
+import { Pagination } from '../../hooks/usePagination';
 
 /**
  * Props do componente `PaginationButtonGroup`