Merge pull request #108 from bas-kirill/feature/introduce-css-modules

feat(css): migrate catalogue for css modules

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

@@ -1,7 +1,3 @@
-import {
-  CATALOGUE_DEFAULT_PAGE_NUMBER,
-  CATALOGUE_DEFAULT_PAGE_SIZE,
-} from "shared/config";
 import {
   GetInstrumentsByCriteriaPaginatedApi,
   ListFavoriteApi,
@@ -11,6 +7,10 @@ import {
   InstrumentId,
 } from "generated/model";
 import { Filters } from "widgets/catalogue-filter";
+import {
+  CATALOGUE_DEFAULT_PAGE_NUMBER,
+  CATALOGUE_DEFAULT_PAGE_SIZE,
+} from "shared/config/frontend";
 
 const getInstrumentsByCriteriaPaginated =
   new GetInstrumentsByCriteriaPaginatedApi();

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

@@ -1,17 +1,17 @@
 import React, { useEffect, useRef, useState } from "react";
-import "./styles/CataloguePage.css";
+import styles from "./styles/CataloguePage.module.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";
 import { CATALOGUE_DEFAULT_PAGE_SIZE } from "shared/config/frontend";
-import { SearchBarForm } from "./SearchBarForm";
-import { NavigationBar } from "./NavigationBar";
 import { ListFavoriteApi } from "generated/api/list-favorite-api";
 import { InstrumentDetail, InstrumentId } from "generated/model";
-import { GetInstrumentsByCriteriaPaginatedApi } from "generated/api/get-instruments-by-criteria-paginated-api";
+import { GetInstrumentsByCriteriaPaginatedApi } from "generated/api";
 import { CatalogueLoader } from "pages/catalogue";
+import { NavigationBarWidget } from "widgets/catalogue-navbar";
+import { SearchBarInputField } from "pages/catalogue/ui/SearchBarInput.field";
 
 const getInstrumentsByCriteriaPaginated =
   new GetInstrumentsByCriteriaPaginatedApi();
@@ -71,20 +71,22 @@ export function CataloguePage() {
   }, [filters, pageNumber]);
 
   return (
-    <div id="catalogue">
+    <>
       <HeaderWidget />
 
-      <SearchBarForm filters={filters} setFilters={setFilters} />
+      <SearchBarInputField filters={filters} setFilters={setFilters} />
 
-      <div id="catalogue-wrapper">
-        <CatalogueFilterWidget onFilterChange={setFilters} />
+      <div className={styles.catalogue__wrapper}>
+        <div className={styles.catalogue__filters__wrapper}>
+          <CatalogueFilterWidget onFilterChange={setFilters} />
+        </div>
 
-        <div id="catalogue-serp-navbar-wrapper">
+        <div className={styles.catalogue__serp__navbar__wrapper}>
           <CatalogueSerpWidget
             instruments={instruments}
             favoriteInstrumentIds={favoriteInstrumentIds}
           />
-          <NavigationBar
+          <NavigationBarWidget
             totalPages={totalPages.current}
             pageNumber={pageNumber}
             setPageNumber={setPageNumber}
@@ -93,7 +95,7 @@ export function CataloguePage() {
       </div>
 
       <FooterWidget />
-    </div>
+    </>
   );
 }
 

client/src/pages/catalogue/ui/SearchBarInput.field.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./styles/SearchBarInput.field.module.css";
+import { InstrumentName } from "generated/model";
+import { Filters } from "widgets/catalogue-filter";
+
+interface Props {
+  filters: Filters;
+  setFilters: (filter: Filters) => void;
+}
+
+export const SearchBarInputField = (props: Props) => {
+  return (
+    <input
+      type="text"
+      placeholder={"Search..."}
+      onChange={(e) => {
+        props.setFilters({
+          ...props.filters,
+          instrumentName: {
+            instrument_name: e.target.value,
+          } as InstrumentName,
+        });
+      }}
+      className={styles.search_bar__input}
+    />
+  );
+};

client/src/pages/catalogue/ui/styles/Catalogue.page.module.css

@@ -0,0 +1,15 @@
+.catalogue__wrapper {
+  display: flex;
+  flex-direction: row;
+  background-color: darkorchid;
+}
+
+.catalogue__filters__wrapper {
+  background-color: darkslateblue;
+  flex: 1;
+}
+
+.catalogue__serp__navbar__wrapper {
+  background-color: aqua;
+  flex: 3;
+}

client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.css

@@ -0,0 +1,11 @@
+.search_bar__input {
+  width: 100%;
+  background-color: darkslateblue;
+
+  input[type="text"] {
+    background-color: white;
+    font-size: 24px;
+    text-align: center;
+    width: 100%;
+  }
+}

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

@@ -1,11 +1,11 @@
 import React from "react";
-import styles from "./styles/EditInstrumentPage.module.css";
+import styles from "./styles/EditInstrument.page.module.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 "./InstrumentBasicMaterialFormField";
+import { InstrumentBasicMaterialField } from "./InstrumentBasicMaterial.field";
 import { useJwt } from "shared/jwt/use-jwt";
 
 export const EditInstrumentPage = () => {
@@ -171,7 +171,7 @@ export const EditInstrumentPage = () => {
             </select>
           </div>
 
-          <InstrumentBasicMaterialFormField
+          <InstrumentBasicMaterialField
             materials={loader.materials}
             usedMaterialsForInstrument={
               loader.instrumentForEdit.basic_materials

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

@@ -1,14 +1,14 @@
 import React, { useRef, useState } from "react";
 import formStyles from "./styles/EditInstrumentPage.module.css";
-import styles from "./styles/InstrumentBasicMaterial.module.css";
+import styles from "./styles/InstrumentBasicMaterial.field.module.css";
 import { BasicMaterial } from "generated/model";
 
 interface Props {
   materials: BasicMaterial[];
   usedMaterialsForInstrument: BasicMaterial[];
 }
 
-export const InstrumentBasicMaterialFormField = (props: Props) => {
+export const InstrumentBasicMaterialField = (props: Props) => {
   const selectedBasicMaterial = useRef<BasicMaterial>();
   const [basicMaterials, setBasicMaterials] = useState<BasicMaterial[]>(
     props.usedMaterialsForInstrument,

client/src/pages/favorite/ui/FavoritePage.tsx → client/src/pages/favorite/ui/Favorite.page.tsx

@@ -1,15 +1,18 @@
+import React from "react";
+import { FavoriteLoader } from "pages/favorite";
 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 { FooterWidget } from "widgets/footer";
+import { InstrumentCard } from "shared/instrument-card";
 
 export const FavoritePage = () => {
   const loader = useLoaderData() as FavoriteLoader;
 
   return (
     <>
       <HeaderWidget />
+
       <h1>Favorite</h1>
 
       {loader.instrumentDetails.length === 0 && (

client/src/pages/home/index.ts

@@ -1 +1,3 @@
-export { HomePage } from "./ui/HomePage";
+import { HomePage } from "./ui/HomePage";
+
+export { HomePage };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import "./styles/HomePage.css";
+import styles from "./styles/Home.page.module.css";
 import { HeaderWidget } from "widgets/header";
 import { FooterWidget } from "widgets/footer";
 import { Slide } from "react-slideshow-image";
@@ -47,24 +47,24 @@ const trendingInstrumentsResponsiveSettings = [
 
 export function HomePage() {
   return (
-    <div id="home">
+    <div className={styles.home}>
       <HeaderWidget />
 
       <div
-        id="home-logo"
+        className={styles.home_logo}
         style={{
           background: `url(${homeLogo}) no-repeat center, linear-gradient(blue, cyan)`,
         }}
       >
-        <form id="home-search-bar-form">
+        <form className={styles.search_bar__form}>
           <input type="text" placeholder="What instrument?" />
           <input type="submit" value="Search" />
         </form>
       </div>
 
       <h1 style={{ color: "#002244" }}>Why Choose Us for Your Musical Needs</h1>
 
-      <div id="home-reasons-choose">
+      <div className={styles.reasons}>
         <div>
           We offer a wide range of high-quality instruments for all skill levels
         </div>
@@ -74,13 +74,13 @@ export function HomePage() {
 
       <h1>Trending Instruments</h1>
 
-      <div id={"trending-instruments"}>
+      <div className={styles.trends}>
         <Slide
           autoplay={true}
           responsive={trendingInstrumentsResponsiveSettings}
         >
           {images.map((img) => (
-            <div key={img.image} className="each-slide">
+            <div key={img.image} className={styles.eachSlide}>
               <img
                 src={img.image}
                 alt={img.caption}

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

@@ -1,7 +1,7 @@
 @import "HomePage.queries.css";
 @import "react-slideshow-image/dist/styles.css";
 
-#home {
+.home {
   display: flex;
   flex-direction: column;
 
@@ -11,13 +11,13 @@
   }
 }
 
-#home-logo {
+.home_logo {
   height: 45vh;
   display: flex;
   flex-direction: column-reverse;
 }
 
-#home-search-bar-form {
+.search_bar__form {
   display: flex;
   margin-bottom: 1em;
 
@@ -37,7 +37,7 @@
   }
 }
 
-#home-reasons-choose {
+.reasons {
   display: flex;
 
   div {
@@ -50,7 +50,7 @@
   }
 }
 
-#trending-instruments {
+.trends {
   margin: 0 15px 15px 15px;
 }
 

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

@@ -1,22 +1,18 @@
 import React from "react";
-import "./styles/InstrumentPage.css";
+import "./styles/Instrument.page.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";
+import { InstrumentCard } from "shared/instrument-card";
 
 export function InstrumentPage() {
   const instrument = useLoaderData() as InstrumentDetail;
 
   return (
     <>
       <HeaderWidget />
-      <div id="instrument">
-        <InstrumentDescription instrument={instrument} />
-        <InstrumentActions instrument={instrument} />
-      </div>
+      <InstrumentCard instrument={instrument} favorite={false} />
       <FooterWidget />
     </>
   );