code-formatting

g-marcin · Jun 25, 2023 · 67c6af8 · 67c6af8
1 parent 8f14509
commit 67c6af8
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 80 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,8 @@
+import 'bootstrap/dist/css/bootstrap.css';
 import { RouterProvider } from 'react-router-dom';
 import { ThemeContextProvider } from './contexts';
 import { AppRouter } from './router';
 
-import 'bootstrap/dist/css/bootstrap.css';
-
 function App() {
   return (
     <>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,3 @@
-export * from "./CustomPagination";
+export * from './CustomPagination';
 export * from './Loader';
 export * from './layout';
diff --git a/src/components/layout/CustomOffcanvas/CustomOffcanvas.tsx b/src/components/layout/CustomOffcanvas/CustomOffcanvas.tsx
@@ -12,32 +12,32 @@ type CustomOffcanvasProps = {
   handleClose: () => void;
 };
 
-export const CustomOffcanvas: FC<CustomOffcanvasProps> = ({ show,  handleClose, ...props }) => {
+export const CustomOffcanvas: FC<CustomOffcanvasProps> = ({ show, handleClose, ...props }) => {
   const { isDark, setIsDark } = useContext(ThemeContext);
 
   return (
     <>
-        <ReactFocusLock>
-      <Offcanvas show={show} onHide={handleClose} className={styles.offcanvas} {...props} placement={'end'}>
+      <ReactFocusLock>
+        <Offcanvas show={show} onHide={handleClose} className={styles.offcanvas} {...props} placement={'end'}>
           <Offcanvas.Header closeButton>
             <Offcanvas.Title>Menu:</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            <div className={styles["menu-item"]}>
+            <div className={styles['menu-item']}>
               Toggle page theme:
-               {isDark ? (
-              <button className={styles.button}>
-                <Sun size={36} onClick={() => setIsDark(isDark)} />
-              </button>
-            ) : (
-              <button className={styles.button} onClick={() => setIsDark(isDark)}>
-                <Moon size={36} color='#000000' />
-              </button>
-            )}
-            </div>     
+              {isDark ? (
+                <button className={styles.button}>
+                  <Sun size={36} onClick={() => setIsDark(isDark)} />
+                </button>
+              ) : (
+                <button className={styles.button} onClick={() => setIsDark(isDark)}>
+                  <Moon size={36} color="#000000" />
+                </button>
+              )}
+            </div>
           </Offcanvas.Body>
-      </Offcanvas>
-        </ReactFocusLock>
+        </Offcanvas>
+      </ReactFocusLock>
     </>
   );
 };
diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx
@@ -21,8 +21,8 @@ export const Header: FC = () => {
           <Menu className={styles.menu} color="#ffffff" />
         </button>
       </header>
-      <SubHeader/>
-        <CustomOffcanvas name={'hamburger-menu'} show={show} handleClose={handleClose} handleShow={handleShow} />
+      <SubHeader />
+      <CustomOffcanvas name={'hamburger-menu'} show={show} handleClose={handleClose} handleShow={handleShow} />
     </>
   );
 };
diff --git a/src/components/layout/SubHeader/SubHeader.tsx b/src/components/layout/SubHeader/SubHeader.tsx
@@ -1,31 +1,36 @@
-import { FC } from "react";
-import { NavLink, useParams } from "react-router-dom";
-import { useBeerDetails } from "../../../hooks/useBeerDetails";
-import styles from "./subheader.module.css";
+import { FC } from 'react';
+import { NavLink, useParams } from 'react-router-dom';
+import { useBeerDetails } from '../../../hooks/useBeerDetails';
+import styles from './subheader.module.css';
 
 export const SubHeader: FC = () => {
-const {id} = useParams() 
-const{beerDetails, isLoading} = useBeerDetails(id)
-if(!beerDetails){
-  return
-}
+  const { id } = useParams();
+  const { beerDetails, isLoading } = useBeerDetails(id);
+  if (!beerDetails) {
+    return;
+  }
 
   return (
     <nav className={`${styles.nav} text-decoration-none`}>
       {
-        <NavLink
-          to="/"
-          className={`${styles.homeCrumb} text-decoration-none`}
-        >
-         Home
+        <NavLink to="/" className={`${styles.homeCrumb} text-decoration-none`}>
+          Home
         </NavLink>
       }
-     {isLoading? "": <>
-       {id? <NavLink to={`/details/${id}`} className={`${styles.authorCrumb} text-decoration-none`}>
-          {"> "}
-          {beerDetails.name}
-        </NavLink>: ""}
-        </>}
+      {isLoading ? (
+        ''
+      ) : (
+        <>
+          {id ? (
+            <NavLink to={`/details/${id}`} className={`${styles.authorCrumb} text-decoration-none`}>
+              {'> '}
+              {beerDetails.name}
+            </NavLink>
+          ) : (
+            ''
+          )}
+        </>
+      )}
     </nav>
   );
 };
diff --git a/src/components/layout/SubHeader/index.ts b/src/components/layout/SubHeader/index.ts
@@ -1 +1 @@
-export * from "./SubHeader";
+export * from './SubHeader';
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useBeerDetails';
diff --git a/src/hooks/useBeerDetails.ts b/src/hooks/useBeerDetails.ts
@@ -4,27 +4,27 @@ import { httpClient } from '../common';
 import { BeerType, beerDataDTO } from '../types';
 import { beerDetailsMapper } from './beerDetailsMapper';
 
-export const useBeerDetails = (id:string|undefined) => {
+export const useBeerDetails = (id: string | undefined) => {
   const [beerDetails, setBeerDetails] = useState<BeerType>();
   const [isLoading, setIsLoading] = useState(false);
-
   useEffect(() => {
+    if (!id) {
+      return;
+    }
     setIsLoading(true);
     httpClient
-      .get(`/beers?ids=${id?id:""}`)
+      .get(`/beers?ids=${id}`)
       .then((response: AxiosResponse<beerDataDTO[]>) => {
         if (response.data) {
           setBeerDetails(beerDetailsMapper(response.data));
-        }else{
-          throw new Error("no details data recieved")
+        } else {
+          throw new Error('no details data recieved');
         }
-        setIsLoading(false)
       })
+      .then(() => setIsLoading(false))
       .catch(() => {
         return;
       });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
   return { beerDetails: beerDetails, isLoading: isLoading };
 };
diff --git a/src/modules/BeerBrowser/BeerBrowser.tsx b/src/modules/BeerBrowser/BeerBrowser.tsx
@@ -10,7 +10,7 @@ import { beerDataMapper } from './beerDataMapper';
 
 const BeerBrowser: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState<number | undefined>();
   const setPageHandler = (page: number) => {
     setPage(page);
   };
@@ -19,7 +19,7 @@ const BeerBrowser: FC = () => {
   useEffect(() => {
     setIsLoading(true);
     httpClient
-      .get(`/beers?page=${page}&per_page=9`)
+      .get(`/beers?page=${page || 1}&per_page=9`)
       .then((response: AxiosResponse<beerDataDTO[]>) => {
         setBeerData(beerDataMapper(response.data));
       })
@@ -37,10 +37,19 @@ const BeerBrowser: FC = () => {
         <div>
           <Container className={styles.beerCardsContainer}>
             {beerData?.map((beer) => {
-              return <BeerCard name={beer.name} tagline={beer.tagline} image={beer.imageUrl} id={beer.id} key={beer.id} />;
+              return (
+                <BeerCard
+                  name={beer.name}
+                  tagline={beer.tagline}
+                  image={beer.imageUrl}
+                  id={beer.id}
+                  key={beer.id}
+                  isLoading={isLoading}
+                />
+              );
             })}
           </Container>
-          <CustomPagination page={page} setPageHandler={setPageHandler} />
+          <CustomPagination page={page || 1} setPageHandler={setPageHandler} />
         </div>
       )}
     </>

diff --git a/src/modules/BeerDetails/IngredientsInfo/Hops/HopsGroup.tsx b/src/modules/BeerDetails/IngredientsInfo/Hops/HopsGroup.tsx
@@ -12,14 +12,14 @@ export const HopsGroup: FC<HopsGroupProps> = ({ title, hops }) => {
     <>
       <h3 className={styles.categoryHeader}>{title}</h3>
       {hops.length !== 0 ? (
-        hops.map((hop: HopType,index) => {
-          return (       
-              <div className={styles.ingredient} key={index}>
-                <div>{hop.name}</div>
-                <div>
-                  {hop.amount.value} {hop.amount.unit}
-                </div>
+        hops.map((hop: HopType, index) => {
+          return (
+            <div className={styles.ingredient} key={index}>
+              <div>{hop.name}</div>
+              <div>
+                {hop.amount.value} {hop.amount.unit}
               </div>
+            </div>
           );
         })
       ) : (

diff --git a/src/modules/BeerDetails/IngredientsInfo/IngredientsInfo.tsx b/src/modules/BeerDetails/IngredientsInfo/IngredientsInfo.tsx
@@ -30,25 +30,24 @@ export const IngredientsInfo: FC<IngredientsInfoProps> = ({ beerDetails }) => {
           <Card.Title>
             <h1 className={styles.header}>Ingredients:</h1>
           </Card.Title>
-
-            <h2 className={styles.subHeader}>Malts:</h2>
-            {beerDetails?.ingredients.malt.map((malt, index) => {
-              return (
-                <div className={styles.ingredient} key={index}>
-                  <div>{malt.name}</div>
-                  <div>
-                    {malt.amount.value} {malt.amount.unit}
-                  </div>
+
+          <h2 className={styles.subHeader}>Malts:</h2>
+          {beerDetails?.ingredients.malt.map((malt, index) => {
+            return (
+              <div className={styles.ingredient} key={index}>
+                <div>{malt.name}</div>
+                <div>
+                  {malt.amount.value} {malt.amount.unit}
                 </div>
-              );
-            })}
-
-        
-            <h2 className={styles.subHeader}>Hops:</h2>
-            <HopsGroup title={'--Start'} hops={hopsStart} />
-            <HopsGroup title={'--Middle'} hops={hopsMiddle} />
-            <HopsGroup title={'--End'} hops={hopsEnd} />
-      
+              </div>
+            );
+          })}
+
+          <h2 className={styles.subHeader}>Hops:</h2>
+          <HopsGroup title={'--Start'} hops={hopsStart} />
+          <HopsGroup title={'--Middle'} hops={hopsMiddle} />
+          <HopsGroup title={'--End'} hops={hopsEnd} />
+
           <h2 className={styles.subHeader}>Yeast:</h2>
           <div className={styles.ingredient}>{beerDetails?.ingredients.yeast}</div>
         </Card.Body>

diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -1 +0,0 @@
-
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./SubHeader";
		export * from './SubHeader';