feat(favorite): ready to use page

client/src/app/App.tsx

@@ -21,13 +21,13 @@ import {
 import {
   CATALOGUE,
   CREATE_INSTRUMENT,
-  EDIT_INSTRUMENT_BY_ID,
+  EDIT_INSTRUMENT_BY_ID, FAVORITE,
   HOME,
   INSTRUMENT_BY_ID,
   LOGIN,
   NOT_FOUND,
   PROFILE,
-  REGISTRATION_URL,
+  REGISTRATION_URL
 } from "shared/config/paths";
 import {
   CreateInstrument, // todo(refactor): add suffix `Page`
@@ -43,6 +43,10 @@ import {
   RegistrationPage,
   action as registrationAction,
 } from "pages/registration";
+import {
+  FavoritePage,
+  loader as favoriteLoader,
+} from "pages/favorite";
 
 const routes = createRoutesFromElements(
   <Route>
@@ -72,6 +76,11 @@ const routes = createRoutesFromElements(
       element={<RegistrationPage />}
       action={registrationAction}
     />
+    <Route
+      path={FAVORITE}
+      element={<FavoritePage />}
+      loader={favoriteLoader}
+    />
     <Route path={NOT_FOUND} element={<NotFound />} />
   </Route>,
 );

client/src/domain/model/page.ts

@@ -8,3 +8,8 @@ export interface Page {
   totalElements: number;
   totalPages: number;
 }
+
+export interface PageRequest {
+  pageSize: number;
+  pageNumber: number;
+}

client/src/pages/catalogue/api/loader.ts

@@ -1,6 +1,6 @@
 import { Page } from "domain/model/page";
-import { fetchFavoriteInstrumentIds } from "pages/catalogue";
 import { fetchInstruments } from "pages/catalogue/api/fetch-instruments";
+import { fetchFavoriteInstrumentIdsList } from "shared/api/fetch-favorite-instrument-ids.list";
 
 export interface CatalogueLoader {
   instrumentPage: Page;
@@ -9,7 +9,7 @@ export interface CatalogueLoader {
 
 export const loader = async (): Promise<CatalogueLoader> => {
   const instruments = await fetchInstruments();
-  const favoriteInstrumentIds = await fetchFavoriteInstrumentIds();
+  const favoriteInstrumentIds = await fetchFavoriteInstrumentIdsList();
 
   return {
     instrumentPage: instruments,

client/src/pages/catalogue/index.ts

@@ -1,7 +1,6 @@
 import { Catalogue } from "./ui/Catalogue";
 import { loader } from "./api/loader";
 import { CatalogueLoader } from "./api/loader";
-import { fetchFavoriteInstrumentIds } from "./api/fetch-favorite-instrument-ids";
 
-export { Catalogue, loader, fetchFavoriteInstrumentIds };
+export { Catalogue, loader };
 export type { CatalogueLoader };

client/src/pages/catalogue/ui/Catalogue.tsx

@@ -16,11 +16,12 @@ import {
   CATALOGUE_DEFAULT_PAGE_NUMBER,
   CATALOGUE_DEFAULT_PAGE_SIZE,
 } from "shared/config/frontend";
-import { getInstrumentsByCriteria } from "shared/api/list-instruments-by-criteria";
-import { Page } from "domain/model/page";
+import { PageRequest } from "domain/model/page";
 import { SearchBarForm } from "./SearchBarForm";
 import { NavigationBar } from "./NavigationBar";
-import { CatalogueLoader, fetchFavoriteInstrumentIds } from "pages/catalogue";
+import { CatalogueLoader } from "pages/catalogue";
+import { fetchFavoriteInstrumentIdsList } from "shared/api/fetch-favorite-instrument-ids.list";
+import { getInstrumentsByCriteriaPaginated } from "shared/api/instruments-by-criteria-paginated";
 
 export function Catalogue() {
   useJwt();
@@ -39,20 +40,20 @@ export function Catalogue() {
   );
 
   useEffect(() => {
-    fetchFavoriteInstrumentIds().then((ids) => setFavoriteInstrumentIds(ids));
+    fetchFavoriteInstrumentIdsList().then((ids) => setFavoriteInstrumentIds(ids));
 
     if (instrumentName === "") {
       filters.instrumentName = null;
     }
     if (instrumentName !== "") {
       filters.instrumentName = instrumentName;
     }
-    const page = {
+    const pageRequest = {
       pageNumber: pageNumber,
       pageSize: CATALOGUE_DEFAULT_PAGE_SIZE,
-    } as Page;
+    } as PageRequest;
 
-    getInstrumentsByCriteria(filters, page).then((r) => {
+    getInstrumentsByCriteriaPaginated(filters, pageRequest).then((r) => {
       setInstruments(r.content);
       totalPages.current = r.totalPages;
     });

client/src/pages/favorite/api/loader.ts

@@ -0,0 +1,21 @@
+import { LoaderFunction } from "react-router-dom";
+import { fetchFavoriteInstrumentIdsList } from "shared/api/fetch-favorite-instrument-ids.list";
+import { Filters } from "widgets/catalogue-filter";
+import { Instrument } from "domain/model/instrument";
+import { getInstrumentsByCriteria } from "shared/api/instruments-by-criteria.list";
+
+export interface FavoriteLoader {
+  instruments: Instrument[];
+}
+
+export const loader: LoaderFunction = async (): Promise<FavoriteLoader> => {
+  const favoriteInstrumentIds = await fetchFavoriteInstrumentIdsList()
+  const filter = {
+    instrumentId: favoriteInstrumentIds,
+  } as unknown as Filters;
+  const instruments = await getInstrumentsByCriteria(filter)
+
+  return {
+    instruments: instruments,
+  }
+};

client/src/pages/favorite/index.ts

@@ -0,0 +1,8 @@
+import {FavoritePage} from "./ui/FavoritePage";
+import {loader, FavoriteLoader} from "./api/loader";
+
+export {
+  FavoritePage,
+  loader
+};
+export type { FavoriteLoader };

client/src/pages/favorite/ui/FavoritePage.tsx

@@ -0,0 +1,40 @@
+import { Header } from "widgets/header";
+import { InstrumentCard } from "shared/ui/instrument-card/InstrumentCard";
+import { useEffect, useState } from "react";
+import { Instruments } from "domain/model/instrument";
+import { fetchFavoriteInstrumentIdsList } from "shared/api/fetch-favorite-instrument-ids.list";
+import { Filters } from "widgets/catalogue-filter";
+import { getInstrumentsByCriteria } from "shared/api/instruments-by-criteria.list";
+
+export const FavoritePage = () => {
+  // const loader = useLoaderData() as FavoriteLoader;
+  const [instruments, setInstruments] = useState<Instruments>([]);
+
+  useEffect(() => {
+    const kek = async () => {
+      const favoriteInstrumentIds = await fetchFavoriteInstrumentIdsList()
+      const filter = {
+        instrumentIds: favoriteInstrumentIds,
+      } as unknown as Filters;
+      const instruments = await getInstrumentsByCriteria(filter)
+      return instruments;
+    }
+
+    kek().then(instruments => setInstruments(instruments));
+  }, []);
+
+  return (
+    <>
+      <Header/>
+
+      <h1>Favorite</h1>
+      {instruments.map(instrument => (
+        <InstrumentCard
+          key={instrument.id.toString()}
+          instrument={instrument}
+          favorite={true}
+        />
+      ))}
+    </>
+  )
+}

client/src/pages/catalogue/api/fetch-favorite-instrument-ids.ts → client/src/shared/api/fetch-favorite-instrument-ids.list.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { SERVER_URL } from "shared/config";
 
-export const fetchFavoriteInstrumentIds = async () => {
+export const fetchFavoriteInstrumentIdsList = async () => {
   const { data, status } = await axios.get<number[]>(
     `${SERVER_URL}/api/favorite/list`,
     {

client/src/shared/api/instruments-by-criteria-paginated.ts

@@ -0,0 +1,33 @@
+import { Filters } from "@widgets/catalogue-filter";
+import { Page, PageRequest } from "@domain/model/page";
+import axios from "axios";
+import { API_INSTRUMENTS, SERVER_URL } from "shared/config";
+
+export const getInstrumentsByCriteriaPaginated = async (
+  filters: Filters,
+  pageRequest: PageRequest,
+) => {
+  const getInstrumentsByCriteriaRequestBody = JSON.stringify(filters, null, 2);
+
+  const { data, status } = await axios.post<Page>(
+    `${SERVER_URL}${API_INSTRUMENTS}`,
+    getInstrumentsByCriteriaRequestBody,
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      params: {
+        pageNumber: pageRequest.pageNumber,
+        pageSize: pageRequest.pageSize,
+      },
+    },
+  );
+
+  if (status !== 200) {
+    console.log(data);
+    console.log(status);
+    throw new Error("Failed to fetch instruments");
+  }
+
+  return data;
+};

client/src/shared/api/list-instruments-by-criteria.ts → client/src/shared/api/instruments-by-criteria.list.ts

@@ -1,26 +1,26 @@
 import axios from "axios";
-import { Page } from "domain/model/page";
 import { API_INSTRUMENTS, SERVER_URL } from "shared/config";
 import { Filters } from "widgets/catalogue-filter";
+import { Instrument, Instruments } from "domain/model/instrument";
 
 export const getInstrumentsByCriteria = async (
   filters: Filters,
-  page: Page,
 ) => {
   const getInstrumentsByCriteriaRequestBody = JSON.stringify(filters, null, 2);
-  const { data } = await axios.post<Page>(
+
+  const { data, status } = await axios.post<Instruments>(
     `${SERVER_URL}${API_INSTRUMENTS}`,
     getInstrumentsByCriteriaRequestBody,
     {
       headers: {
         "Content-Type": "application/json",
       },
-      params: {
-        pageNumber: page.pageNumber,
-        pageSize: page.pageSize,
-      },
     },
-  );
+  )
+
+  if (status !== 200) {
+    throw new Error("Failed to fetch instruments");
+  }
 
   return data;
 };

client/src/shared/index.ts

@@ -1,6 +1,7 @@
 import { deleteInstrument } from "./api/delete-instrument";
-
-import { getInstrumentsByCriteria } from "./api/list-instruments-by-criteria";
+import { getInstrumentsByCriteria } from "./api/instruments-by-criteria.list";
+import { fetchFavoriteInstrumentIdsList} from "./api/fetch-favorite-instrument-ids.list"
+import { InstrumentCard } from "./ui/instrument-card/InstrumentCard";
 
 import {
   SERVER_URL,
@@ -16,6 +17,9 @@ import {
 export {
   deleteInstrument,
   getInstrumentsByCriteria,
+  fetchFavoriteInstrumentIdsList,
+  InstrumentCard,
+
   SERVER_URL,
   API_INSTRUMENTS,
   API_AUTH_BASIC_LOGIN,

client/src/shared/ui/instrument-card/InstrumentCard.css

@@ -0,0 +1,5 @@
+.instrument-card {
+    display: flex;
+    flex-direction: column;
+    background-color: darkslateblue;
+}

client/src/shared/ui/instrument-card/InstrumentCard.tsx

@@ -0,0 +1,22 @@
+import { InstrumentDetails } from "./InstrumentDetails";
+import { InstrumentActions } from "./actions/InstrumentActions";
+import React from "react";
+import { Instrument } from "domain/model/instrument";
+import "./InstrumentCard.css";
+
+interface Props {
+  instrument: Instrument;
+  favorite: boolean;
+}
+
+export const InstrumentCard = (props: Props) => {
+  return (
+    <div className="instrument-card">
+      <InstrumentDetails instrument={props.instrument} />
+      <InstrumentActions
+        instrument={props.instrument}
+        favorite={props.favorite}
+      />
+    </div>
+  )
+}

client/src/widgets/catalogue-filter/index.ts

@@ -1,8 +1,8 @@
 import { CatalogueFilterWidget } from "./ui/CatalogueFilterWidget";
 
-import { DEFAULT_FILTER } from "./model/filters";
+import { DEFAULT_FILTER } from "./model/filter";
 
-import type { Filters } from "./model/filters";
+import type { Filters } from "./model/filter";
 
 export { CatalogueFilterWidget, DEFAULT_FILTER };
 

client/src/widgets/catalogue-filter/model/filters.ts → client/src/widgets/catalogue-filter/model/filter.ts

@@ -13,7 +13,8 @@ export type Filters = {
   releaseDateTo: string | null;
   countries: string[] | null;
   materials: string[] | null;
-};
+  instrumentIds: number[] | null;
+}
 
 export const DEFAULT_FILTER = {
   instrumentName: null,
@@ -25,4 +26,5 @@ export const DEFAULT_FILTER = {
   releaseDateTo: null,
   countries: null,
   materials: null,
+  instrumentIds: null,
 };

client/src/widgets/catalogue-filter/ui/CatalogueFilterWidget.tsx

@@ -47,6 +47,7 @@ export const CatalogueFilterWidget = ({ onFilterChange, role }: Props) => {
       releaseDateTo: releaseDateTo,
       countries: countries,
       materials: materials,
+      instrumentIds: null, // there is no such field to search by instrument ids
     });
   }, [
     instrumentTypes,

client/src/widgets/catalogue-serp/ui/CatalogueSerpWidget.css

@@ -1,11 +1,7 @@
 #catalogue-serp {
   background-color: darkkhaki;
 
-  .instrument-card {
-    display: flex;
-    flex-direction: column;
-    background-color: darkslateblue;
-  }
+
 
   .instrument-card:last-child {
     margin-bottom: 30px;

client/src/widgets/catalogue-serp/ui/CatalogueSerpWidget.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import "./CatalogueSerpWidget.css";
-import { InstrumentDetails } from "./InstrumentDetails";
-import { InstrumentActions } from "./actions/InstrumentActions";
 import { Instruments } from "domain/model/instrument";
+import { InstrumentCard } from "shared/ui/instrument-card/InstrumentCard";
 
 interface Props {
   instruments: Instruments;
@@ -16,13 +15,10 @@ export const CatalogueSerpWidget = ({
   return (
     <div id="catalogue-serp">
       {instruments.map((instrument) => (
-        <div key={instrument.id.toString()} className="instrument-card">
-          <InstrumentDetails instrument={instrument} />
-          <InstrumentActions
-            instrument={instrument}
-            favorite={favoriteInstrumentIds.includes(instrument.id)}
-          />
-        </div>
+        <InstrumentCard key={instrument.id.toString()}
+          instrument={instrument}
+          favorite={favoriteInstrumentIds.includes(instrument.id)}
+        />
       ))}
     </div>
   );