Merge pull request #106 from bas-kirill/feature/rename-files-accordin…

…g-fsd

feat(client): rename files according to Feature Sliced Design

client/src/app/App.tsx

@@ -6,16 +6,16 @@ import {
   Route,
   RouterProvider,
 } from "react-router-dom";
-import { Home } from "pages/home";
-import { UserProfile, loader as profileLoader } from "pages/profile";
-import { Catalogue, loader as catalogueLoader } from "pages/catalogue";
+import { HomePage } from "pages/home";
+import { UserProfilePage, loader as profileLoader } from "pages/profile";
+import { CataloguePage, loader as catalogueLoader } from "pages/catalogue";
 import {
   action as loginAction,
-  Login, // todo(refactor): add suffix `Page`
+  LoginPage, // todo(refactor): add suffix `Page`
 } from "pages/login";
-import { NotFound } from "pages/not-found";
+import { NotFoundPage } from "pages/not-found";
 import {
-  Instrument, // todo(refactor): add suffix `Page`
+  InstrumentPage, // todo(refactor): add suffix `Page`
   loader as instrumentLoader,
 } from "pages/instrument";
 import {
@@ -31,12 +31,12 @@ import {
   REGISTRATION_URL,
 } from "shared/config/paths";
 import {
-  CreateInstrument, // todo(refactor): add suffix `Page`
+  CreateInstrumentPage, // todo(refactor): add suffix `Page`
   loader as createInstrumentLoader,
   action as createInstrumentAction,
 } from "pages/create-instrument";
 import {
-  EditInstrument, // todo(refactor): add suffix `Page`
+  EditInstrumentPage, // todo(refactor): add suffix `Page`
   loader as editLoader,
   action as editAction,
 } from "pages/edit-instrument";
@@ -48,24 +48,32 @@ import { FavoritePage, loader as favoriteLoader } from "pages/favorite";
 
 const routes = createRoutesFromElements(
   <Route>
-    <Route path={HOME} element={<Home />} />
-    <Route path={PROFILE} element={<UserProfile />} loader={profileLoader} />
-    <Route path={CATALOGUE} element={<Catalogue />} loader={catalogueLoader} />
-    <Route path={LOGIN} element={<Login />} action={loginAction} />
+    <Route path={HOME} element={<HomePage />} />
+    <Route
+      path={PROFILE}
+      element={<UserProfilePage />}
+      loader={profileLoader}
+    />
+    <Route
+      path={CATALOGUE}
+      element={<CataloguePage />}
+      loader={catalogueLoader}
+    />
+    <Route path={LOGIN} element={<LoginPage />} action={loginAction} />
     <Route
       path={INSTRUMENT_BY_ID}
-      element={<Instrument />}
+      element={<InstrumentPage />}
       loader={instrumentLoader}
     />
     <Route
       path={CREATE_INSTRUMENT}
-      element={<CreateInstrument />}
+      element={<CreateInstrumentPage />}
       loader={createInstrumentLoader}
       action={createInstrumentAction}
     />
     <Route
       path={EDIT_INSTRUMENT_BY_ID}
-      element={<EditInstrument />}
+      element={<EditInstrumentPage />}
       loader={editLoader}
       action={editAction}
     />
@@ -75,7 +83,7 @@ const routes = createRoutesFromElements(
       action={registrationAction}
     />
     <Route path={FAVORITE} element={<FavoritePage />} loader={favoriteLoader} />
-    <Route path={NOT_FOUND} element={<NotFound />} />
+    <Route path={NOT_FOUND} element={<NotFoundPage />} />
   </Route>,
 );
 

client/src/pages/catalogue/index.ts

@@ -1,6 +1,6 @@
-import { Catalogue } from "./ui/Catalogue";
+import { CataloguePage } from "./ui/CataloguePage";
 import { loader } from "./api/loader";
 import { CatalogueLoader } from "./api/loader";
 
-export { Catalogue, loader };
+export { CataloguePage, loader };
 export type { CatalogueLoader };

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
-import "./Catalogue.css";
-import { Header } from "widgets/header";
-import { Footer } from "widgets/footer";
+import "./styles/CataloguePage.css";
+import { HeaderWidget } from "widgets/header";
+import { FooterWidget } from "widgets/footer";
 import { useLoaderData } from "react-router-dom";
 import { CatalogueFilterWidget, Filters } from "widgets/catalogue-filter";
 import { CatalogueSerpWidget } from "widgets/catalogue-serp";
@@ -18,7 +18,7 @@ const getInstrumentsByCriteriaPaginated =
 
 const listFavoriteApi = new ListFavoriteApi();
 
-export function Catalogue() {
+export function CataloguePage() {
   const loader = useLoaderData() as CatalogueLoader; // https://github.com/remix-run/react-router/discussions/9792
 
   const [instruments, setInstruments] = useState<InstrumentDetail[]>(
@@ -72,7 +72,7 @@ export function Catalogue() {
 
   return (
     <div id="catalogue">
-      <Header />
+      <HeaderWidget />
 
       <SearchBarForm filters={filters} setFilters={setFilters} />
 
@@ -92,9 +92,9 @@ export function Catalogue() {
         </div>
       </div>
 
-      <Footer />
+      <FooterWidget />
     </div>
   );
 }
 
-export default Catalogue;
+export default CataloguePage;

client/src/pages/create-instrument/index.ts

@@ -1,9 +1,9 @@
-import { CreateInstrument } from "./ui/CreateInstrument";
+import { CreateInstrumentPage } from "./ui/CreateInstrumentPage";
 
 import { action } from "./api/action";
 
 import { loader, CreateInstrumentLoader } from "./api/loader";
 
-export { CreateInstrument, action, loader };
+export { CreateInstrumentPage, action, loader };
 
 export type { CreateInstrumentLoader };

client/src/pages/create-instrument/ui/CreateInstrument.tsx → client/src/pages/create-instrument/ui/CreateInstrumentPage.tsx

@@ -1,18 +1,18 @@
 import React from "react";
-import "./CreateInstrument.css";
-import { Header } from "widgets/header";
-import { Footer } from "widgets/footer";
+import "./styles/CreateInstrumentPage.css";
+import { HeaderWidget } from "widgets/header";
+import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useLoaderData } from "react-router-dom";
 import { CreateInstrumentLoader } from "pages/create-instrument";
 import { CreateInstrumentAction } from "pages/create-instrument/api/action";
 
-export const CreateInstrument = () => {
+export const CreateInstrumentPage = () => {
   const loader = useLoaderData() as CreateInstrumentLoader;
   const actionData = useActionData() as CreateInstrumentAction;
 
   return (
     <>
-      <Header />
+      <HeaderWidget />
       <h1>Instrument Creation</h1>
       <Form method="POST" id="create-instrument">
         <div className="create-instrument-field">
@@ -99,7 +99,7 @@ export const CreateInstrument = () => {
       </Form>
       {actionData?.errors &&
         actionData?.errors.map((error) => <div key={error}>{error}</div>)}
-      <Footer />
+      <FooterWidget />
     </>
   );
 };

client/src/pages/edit-instrument/index.ts

@@ -1,5 +1,5 @@
-import { EditInstrument } from "./ui/EditInstrument";
+import { EditInstrumentPage } from "./ui/EditInstrumentPage";
 import { action } from "./api/action";
 import { loader } from "./api/loader";
 
-export { EditInstrument, action, loader };
+export { EditInstrumentPage, action, loader };

client/src/pages/edit-instrument/ui/EditInstrument.tsx → client/src/pages/edit-instrument/ui/EditInstrumentPage.tsx

@@ -1,19 +1,19 @@
 import React from "react";
-import "./EditInstrument.css";
-import { Header } from "widgets/header";
-import { Footer } from "widgets/footer";
+import "./styles/EditInstrumentPage.css";
+import { HeaderWidget } from "widgets/header";
+import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useLoaderData } from "react-router-dom";
 import { EditInstrumentLoader } from "pages/edit-instrument/api/loader";
 import { EditInstrumentAction } from "pages/edit-instrument/api/action";
-import { InstrumentBasicMaterialFormField } from "./fields/InstrumentBasicMaterial";
+import { InstrumentBasicMaterialFormField } from "./InstrumentBasicMaterialFormField";
 
-export const EditInstrument = () => {
+export const EditInstrumentPage = () => {
   const loader = useLoaderData() as EditInstrumentLoader;
   const actionData = useActionData() as EditInstrumentAction;
 
   return (
     <>
-      <Header />
+      <HeaderWidget />
       <h1>{loader.instrumentForEdit.instrument_name.instrument_name}</h1>
       <Form method="POST" id="edit-instrument">
         <div className="edit-instrument-field">
@@ -156,7 +156,7 @@ export const EditInstrument = () => {
       </Form>
       {actionData.errors.length > 0 &&
         actionData?.errors.map((error) => <div key={error}>{error}</div>)}
-      <Footer />
+      <FooterWidget />
     </>
   );
 };

client/src/pages/edit-instrument/ui/fields/InstrumentBasicMaterial.tsx → client/src/pages/edit-instrument/ui/InstrumentBasicMaterialFormField.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import "./InstrumentBasicMaterial.css";
+import "./styles/InstrumentBasicMaterial.css";
 import { BasicMaterial } from "generated/model";
 
 interface Props {

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

@@ -1,18 +1,18 @@
-import { Header } from "widgets/header";
+import { HeaderWidget } from "widgets/header";
 import { InstrumentCard } from "shared/ui/instrument-card/InstrumentCard";
 import { useLoaderData } from "react-router-dom";
 import { FavoriteLoader } from "pages/favorite";
-import { Footer } from "widgets/footer";
+import { FooterWidget } from "widgets/footer";
 
 export const FavoritePage = () => {
   const loader = useLoaderData() as FavoriteLoader;
 
   return (
     <>
-      <Header />
+      <HeaderWidget />
       <h1>Favorite</h1>
 
-      {loader.instrumentDetails.length == 0 && (
+      {loader.instrumentDetails.length === 0 && (
         <div style={{ textAlign: "center" }}>Favorite List is Empty</div>
       )}
 
@@ -24,7 +24,7 @@ export const FavoritePage = () => {
         />
       ))}
 
-      <Footer />
+      <FooterWidget />
     </>
   );
 };

client/src/pages/home/index.ts

@@ -1 +1 @@
-export { Home } from "./ui/Home";
+export { HomePage } from "./ui/HomePage";

client/src/pages/home/ui/Home.tsx → client/src/pages/home/ui/HomePage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import "./styles/Home.css";
-import { Header } from "widgets/header";
-import { Footer } from "widgets/footer";
+import "./styles/HomePage.css";
+import { HeaderWidget } from "widgets/header";
+import { FooterWidget } from "widgets/footer";
 import { Slide } from "react-slideshow-image";
 import saxophone from "pages/home/ui/images/saxo.webp";
 import guitar from "pages/home/ui/images/guitar.webp";
@@ -45,10 +45,10 @@ const trendingInstrumentsResponsiveSettings = [
   },
 ];
 
-export function Home() {
+export function HomePage() {
   return (
     <div id="home">
-      <Header />
+      <HeaderWidget />
 
       <div
         id="home-logo"
@@ -91,9 +91,9 @@ export function Home() {
         </Slide>
       </div>
 
-      <Footer />
+      <FooterWidget />
     </div>
   );
 }
 
-export default Home;
+export default HomePage;

client/src/pages/home/ui/styles/Home.css → client/src/pages/home/ui/styles/HomePage.css

@@ -1,4 +1,4 @@
-@import "Home.queries.css";
+@import "HomePage.queries.css";
 @import "react-slideshow-image/dist/styles.css";
 
 #home {

client/src/pages/instrument/index.ts

@@ -1,4 +1,4 @@
-import { Instrument } from "./ui/Instrument";
+import { InstrumentPage } from "./ui/InstrumentPage";
 import { loader } from "./api/loader";
 
-export { Instrument, loader };
+export { InstrumentPage, loader };

client/src/pages/instrument/ui/InstrumentActions.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import "./InstrumentActions.css";
+import "./styles/InstrumentActions.css";
 import { useNavigate } from "react-router-dom";
 import Jwt from "domain/model/jwt";
 import { LOGIN } from "shared/config/paths";
-import { Modal } from "widgets/modal";
+import { ModalWidget } from "widgets/modal";
 import { InstrumentDetail } from "generated/model";
 import { DeleteInstrumentByIdApi } from "generated/api/delete-instrument-by-id-api";
 
@@ -58,19 +58,19 @@ export const InstrumentActions = (props: Props) => {
             Edit
           </button>
 
-          <Modal
+          <ModalWidget
             opened={deleteSuccessModal}
             closeModal={() => setDeleteSuccessModal(false)}
           >
             <h1>✅Instrument deleted</h1>
-          </Modal>
+          </ModalWidget>
 
-          <Modal
+          <ModalWidget
             opened={deleteErrorModal}
             closeModal={() => setDeleteErrorModal(false)}
           >
             <h1>❌Fail to delete instrument</h1>
-          </Modal>
+          </ModalWidget>
         </>
       )}
     </div>

client/src/pages/instrument/ui/InstrumentDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./InstrumentDescription.css";
+import "./styles/InstrumentDescription.css";
 import electricGuitar from "pages/instrument/ui/electric-guitar-gray.jpg";
 import { InstrumentDetail } from "generated/model";
 

client/src/pages/instrument/ui/Instrument.tsx → client/src/pages/instrument/ui/InstrumentPage.tsx

@@ -1,23 +1,23 @@
 import React from "react";
-import "./Instrument.css";
-import { Footer } from "widgets/footer";
-import { Header } from "widgets/header";
+import "./styles/InstrumentPage.css";
+import { FooterWidget } from "widgets/footer";
+import { HeaderWidget } from "widgets/header";
 import { useLoaderData } from "react-router-dom";
 import { InstrumentActions } from "./InstrumentActions";
 import { InstrumentDescription } from "./InstrumentDescription";
 import { InstrumentDetail } from "generated/model";
 
-export function Instrument() {
+export function InstrumentPage() {
   const instrument = useLoaderData() as InstrumentDetail;
 
   return (
     <>
-      <Header />
+      <HeaderWidget />
       <div id="instrument">
         <InstrumentDescription instrument={instrument} />
         <InstrumentActions instrument={instrument} />
       </div>
-      <Footer />
+      <FooterWidget />
     </>
   );
 }

client/src/pages/login/index.ts

@@ -1,4 +1,4 @@
-import { Login } from "./ui/Login";
+import { LoginPage } from "./ui/LoginPage";
 import { action } from "./api/action";
 
-export { Login, action };
+export { LoginPage, action };