fix: Layout adjustments and resolved build warnings

Signed-off-by: Johannes Groß <mail@gross-johannes.de>
jo-gross · Jun 23, 2024 · 67fdbd0 · 67fdbd0
1 parent 6fb2dd7
commit 67fdbd0
Show file tree

Hide file tree

Showing 11 changed files with 353 additions and 330 deletions.
diff --git a/components/cocktails/CocktailRecipeForm.tsx b/components/cocktails/CocktailRecipeForm.tsx
@@ -32,6 +32,7 @@ import { fetchIngredients } from '../../lib/network/ingredients';
 import { fetchActions } from '../../lib/network/actions';
 import { fetchUnits } from '../../lib/network/units';
 import { calcCocktailTotalPrice } from '../../lib/CocktailRecipeCalculation';
+import Image from 'next/image';
 
 interface CocktailRecipeFormProps {
   cocktailRecipe?: CocktailRecipeFullWithImage;
@@ -134,7 +135,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
     if (props.cocktailRecipe?.glassId && glasses.length > 0) {
       formRef.current?.setFieldValue('glass', glasses.find((g) => g.id == props.cocktailRecipe?.glassId) ?? undefined);
     }
-  }, [glasses, props.cocktailRecipe?.glassId]);
+  }, [formRef, glasses, props.cocktailRecipe?.glassId]);
 
   useEffect(() => {
     // Otherwise not saved changes will be overwritten
@@ -162,7 +163,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
         }),
       );
     }
-  }, [garnishes, props.cocktailRecipe, props.cocktailRecipe?.garnishes]);
+  }, [formRef, garnishes, props.cocktailRecipe, props.cocktailRecipe?.garnishes]);
 
   useEffect(() => {
     // Otherwise not saved changes will be overwritten
@@ -199,7 +200,7 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
         }),
       );
     }
-  }, [ingredients, props.cocktailRecipe?.steps]);
+  }, [formRef, ingredients, props.cocktailRecipe?.steps]);
 
   useEffect(() => {
     fetchActions(workspaceId, setActions, setActionsLoading);
@@ -592,7 +593,9 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                         >
                           <FaTrashAlt />
                         </div>
-                        <img className={'h-32 rounded-lg'} src={values.image} alt={'Cocktail Image'} />
+                        <div className={'relative h-32 w-32 rounded-lg'}>
+                          <Image className={'w-fit rounded-lg'} src={values.image} layout={'fill'} objectFit={'contain'} alt={'Cocktail image'} />
+                        </div>
                       </div>
                     )}
                   </div>

diff --git a/components/garnishes/GarnishForm.tsx b/components/garnishes/GarnishForm.tsx
@@ -10,6 +10,7 @@ import { ModalContext } from '../../lib/context/ModalContextProvider';
 import _ from 'lodash';
 import { compressFile } from '../../lib/ImageCompressor';
 import { GarnishWithImage } from '../../models/GarnishWithImage';
+import Image from 'next/image';
 
 interface GarnishFormProps {
   garnish?: GarnishWithImage;
@@ -199,7 +200,9 @@ export function GarnishForm(props: GarnishFormProps) {
                 >
                   <FaTrashAlt />
                 </div>
-                <img className={'h-32 rounded-lg'} src={values.image} alt={'Cocktail Image'} />
+                <div className={'relative h-32 w-32 rounded-lg bg-white'}>
+                  <Image className={'w-fit rounded-lg'} src={values.image} layout={'fill'} objectFit={'contain'} alt={'Garnish image'} />
+                </div>
               </div>
             )}
           </div>

diff --git a/components/glasses/GlassForm.tsx b/components/glasses/GlassForm.tsx
@@ -10,6 +10,7 @@ import { ModalContext } from '../../lib/context/ModalContextProvider';
 import _ from 'lodash';
 import { compressFile } from '../../lib/ImageCompressor';
 import { GlassWithImage } from '../../models/GlassWithImage';
+import Image from 'next/image';
 
 interface GlassFormProps {
   glass?: GlassWithImage;
@@ -204,7 +205,9 @@ export function GlassForm(props: GlassFormProps) {
                 >
                   <FaTrashAlt />
                 </div>
-                <img className={'max-h-20 rounded-lg'} src={values.image} alt={'Cocktail Image'} />
+                <div className={'relative h-32 w-32 rounded-lg bg-white'}>
+                  <Image className={'w-fit rounded-lg'} src={values.image} layout={'fill'} objectFit={'contain'} alt={'Glass Image'} />
+                </div>
               </div>
             )}
           </div>

diff --git a/components/ingredients/IngredientForm.tsx b/components/ingredients/IngredientForm.tsx
@@ -15,6 +15,7 @@ import { IngredientWithImage } from '../../models/IngredientWithImage';
 import { Unit, UnitConversion } from '@prisma/client';
 import { UserContext } from '../../lib/context/UserContextProvider';
 import { fetchUnitConversions, fetchUnits } from '../../lib/network/units';
+import Image from 'next/image';
 
 interface IngredientFormProps {
   ingredient?: IngredientWithImage;
@@ -450,7 +451,9 @@ export function IngredientForm(props: IngredientFormProps) {
                 >
                   <FaTrashAlt />
                 </div>
-                <img className={'h-32 rounded-lg'} src={values.image} alt={'Cocktail Image'} />
+                <div className={'relative h-32 w-32 rounded-lg bg-white'}>
+                  <Image className={'w-fit rounded-lg'} src={values.image} layout={'fill'} objectFit={'contain'} alt={'Ingredient Image'} />
+                </div>
               </div>
             )}
           </div>

diff --git a/components/layout/AlertBoundary/AlertsContainer.tsx b/components/layout/AlertBoundary/AlertsContainer.tsx
@@ -10,19 +10,14 @@ AlertsContainer.propTypes = {
   id: PropTypes.string,
 };
 
-AlertsContainer.defaultProps = {
-  id: 'default-alert',
-};
-
 interface AlertsContainerProps {
   id?: string;
   fade?: boolean;
 }
 
 const duration = 5000;
 
-function AlertsContainer(props: AlertsContainerProps) {
-  const { id } = props;
+function AlertsContainer({ id = 'default-alert', fade }: AlertsContainerProps) {
   const mounted = useRef(false);
   const router = useRouter();
 

diff --git a/components/modals/SearchModal.tsx b/components/modals/SearchModal.tsx
@@ -1,6 +1,6 @@
 import { BsSearch } from 'react-icons/bs';
 import { CompactCocktailRecipeInstruction } from '../cocktails/CompactCocktailRecipeInstruction';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { CocktailRecipeFull } from '../../models/CocktailRecipeFull';
 import { Loading } from '../Loading';
 import { ModalContext } from '../../lib/context/ModalContextProvider';
@@ -30,14 +30,14 @@ export function SearchModal(props: SearchModalProps) {
   const [cocktails, setCocktails] = useState<CocktailRecipeFull[]>([]);
   const [isLoading, setLoading] = useState(false);
 
-  let controller = new AbortController();
+  const controllerRef = useRef<AbortController>(new AbortController());
 
   const fetchCocktails = useCallback(
     (search: string) => {
       if (!workspaceId) return;
-      controller.abort(); // Vorherige Anfrage abbrechen
+      controllerRef.current.abort(); // Vorherige Anfrage abbrechen
       const newAbortController = new AbortController();
-      controller = newAbortController;
+      controllerRef.current = newAbortController;
 
       setLoading(true);
       fetch(

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -135,7 +135,7 @@ export default function WorkspacesPage() {
           </div>
         </div>
         {userContext.user && (
-          <div className={'col-span-3 grid grid-cols-1 gap-2 p-4 md:grid-cols-4 md:gap-4 md:p-12'}>
+          <div className={'col-span-3 grid grid-cols-1 gap-2 p-4 md:gap-4 md:p-12 lg:grid-cols-4'}>
             {workspacesLoading ? (
               <div className={'col-span-4'}>
                 <Loading />
@@ -157,9 +157,9 @@ export default function WorkspacesPage() {
                 ))}
                 <div className={'card h-40'}>
                   <div className={'card-body flex h-full flex-col items-center justify-center space-y-2'}>
-                    <div className={'join'}>
+                    <div className={'join w-full'}>
                       <input
-                        className={'input join-item input-bordered'}
+                        className={'input join-item input-bordered w-full'}
                         placeholder={'Neue Workspace erstellen'}
                         value={newWorkspaceName}
                         onChange={(event) => setNewWorkspaceName(event.target.value)}
@@ -173,9 +173,9 @@ export default function WorkspacesPage() {
                         <FaArrowRight />
                       </button>
                     </div>
-                    <div className={'join'}>
+                    <div className={'join w-full'}>
                       <input
-                        className={'input join-item input-bordered'}
+                        className={'input join-item input-bordered w-full'}
                         placeholder={'Mit Code beitreten'}
                         value={joinWorkspaceId}
                         onChange={(event) => setJoinWorkspaceId(event.target.value)}

diff --git a/pages/signage.tsx b/pages/signage.tsx
@@ -1,9 +1,10 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { alertService } from '../lib/alertService';
 import { $Enums, Signage } from '@prisma/client';
 import { PageCenter } from '../components/layout/PageCenter';
 import { Loading } from '../components/Loading';
+import Image from 'next/image';
 import MonitorFormat = $Enums.MonitorFormat;
 
 export default function SignagePage() {
@@ -16,33 +17,37 @@ export default function SignagePage() {
   const [content, setContent] = useState<Signage>();
   const [imageLoading, setImageLoading] = useState<boolean>(false);
 
-  useEffect(() => {
+  const fetchData = useCallback(() => {
     if (!id) return;
-    if (!imageLoading) {
-      setImageLoading(true);
-      fetch(`/api/signage/${id}?format=${format}`)
-        .then((response) => response.json())
-        .then((data) => {
-          setContent(data.content);
-          setImageLoading(false);
-        })
-        .catch((error) => {
-          console.error('Signage', error);
-          alertService.error('Fehler beim Laden der Karte.');
-        })
-        .finally(() => {
-          setImageLoading(false);
-        });
-    }
+    setImageLoading(true);
+    fetch(`/api/signage/${id}?format=${format}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setContent(data.content);
+        setImageLoading(false);
+      })
+      .catch((error) => {
+        console.error('Signage', error);
+        alertService.error('Fehler beim Laden der Karte.');
+      })
+      .finally(() => {
+        setImageLoading(false);
+      });
   }, [id, format]);
 
+  useEffect(() => {
+    if (!imageLoading && !content) {
+      fetchData();
+    }
+  }, [content, fetchData, imageLoading]);
+
   return (
     <div style={content?.backgroundColor ? { backgroundColor: content.backgroundColor } : {}} className={'h-screen w-screen'}>
       <PageCenter>
         {imageLoading ? (
           <Loading />
         ) : content?.content ? (
-          <img src={content?.content} alt={'Keine Karte gefunden.'} className={'h-full w-full object-contain'} />
+          <Image src={content.content} layout={'fill'} objectFit={'contain'} alt={'Horizontal monitor'} />
         ) : (
           <div>Keine Karte gefunden</div>
         )}

diff --git a/pages/workspaces/[workspaceId]/index.tsx b/pages/workspaces/[workspaceId]/index.tsx
@@ -246,7 +246,9 @@ export default function OverviewPage() {
           <></>
         )}
 
-        <div className={`grid grid-cols-1 gap-2 p-2 ${showQueueAsOverlay ? '' : 'lg:grid-cols-6'} print:grid-cols-5 print:overflow-clip print:p-0`}>
+        <div
+          className={`grid grid-cols-1 gap-2 p-2 ${showQueueAsOverlay ? '' : showStatisticActions && cocktailQueue.length > 0 ? 'lg:grid-cols-6' : ''} print:grid-cols-5 print:overflow-clip print:p-0`}
+        >
           {showStatisticActions && cocktailQueue.length > 0 ? (
             <div
               className={
@@ -331,17 +333,6 @@ export default function OverviewPage() {
             <></>
           )}
 
-          {/*Empty spacer*/}
-          {/*{showQueueAsOverlay ? (*/}
-          {/*  <div className={'p-4 md:hidden'}>*/}
-          {/*    <div key={`cocktailQueue-item-title`} className={'h-[24px]'}></div>*/}
-          {/*    {cocktailQueue.map((cocktailQueueItem, index) => (*/}
-          {/*      <div key={`cocktailQueue-item-${index}`} className={'h-[40px]'}></div>*/}
-          {/*    ))}*/}
-          {/*  </div>*/}
-          {/*) : (*/}
-          {/*  <></>*/}
-          {/*)}*/}
           <div className={`order-1 col-span-5 flex w-full flex-col space-y-2 overflow-y-auto rounded-xl`}>
             {selectedCardId == 'search' || selectedCardId == undefined ? (
               <SearchPage showImage={showImage} showTags={showTags} showStatisticActions={showStatisticActions} />