fix image dimensions

nullsploit01 · Jan 9, 2024 · aa3cc2d · aa3cc2d
1 parent 23ec356
commit aa3cc2d
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 25 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,9 +1,9 @@
-import { Box, Typography } from '@mui/material'
-
 import AddProductsMenu from 'src/components/organisms/add-products-menu'
 import CatalogProducts from 'src/components/organisms/catalog-products'
 import EditProductModal from 'src/components/organisms/edit-product-modal'
 
+import { Box, Typography } from '@mui/material'
+
 const App = () => {
   return (
     <Box sx={{ height: '100vh' }}>

diff --git a/ui/src/components/organisms/add-products-menu/index.tsx b/ui/src/components/organisms/add-products-menu/index.tsx
@@ -1,11 +1,11 @@
-import { Add } from '@mui/icons-material/'
-import React from 'react'
-
 import CustomMenu from 'src/components/molecules/menu'
 import { AddMenuOptions } from 'src/constants/menu'
 import { Operations } from 'src/constants/operations'
 import { useProducts } from 'src/hooks/products'
 
+import { Add } from '@mui/icons-material/'
+import React from 'react'
+
 const AddProductsMenu: React.FC = () => {
   const { addProduct } = useProducts()
 

diff --git a/ui/src/components/organisms/catalog-products/index.tsx b/ui/src/components/organisms/catalog-products/index.tsx
@@ -1,13 +1,12 @@
-import { Delete, Edit } from '@mui/icons-material/'
-import { Box, Button, ButtonGroup, Typography } from '@mui/material'
-import { Fragment } from 'react'
-
-import defaultProductImage from 'src/assets/images/default_product_image.png'
 import CustomCard from 'src/components/molecules/card'
 import { useProducts } from 'src/hooks/products'
 import { IProduct } from 'src/models/product'
 import { getFormattedPrice } from 'src/utils'
 
+import { Delete, Edit } from '@mui/icons-material/'
+import { Box, Button, ButtonGroup, Typography } from '@mui/material'
+import { Fragment } from 'react'
+
 const CatalogProducts = () => {
   const { products, removeProduct, editProduct } = useProducts()
 
@@ -51,7 +50,7 @@ const CatalogProducts = () => {
           <Box key={index} sx={{ p: 3 }}>
             <CustomCard
               content={renderContent(product)}
-              image={defaultProductImage}
+              image={product.image}
               actions={renderActions(product)}
             />
           </Box>

diff --git a/ui/src/components/organisms/edit-product-modal/index.tsx b/ui/src/components/organisms/edit-product-modal/index.tsx
@@ -2,7 +2,7 @@ import CustomModal from 'src/components/molecules/modal'
 import { useProducts } from 'src/hooks/products'
 import { IProduct } from 'src/models/product'
 
-import { Box, Button, TextField, Typography } from '@mui/material'
+import { Box, Button, Card, CardMedia, TextField, Typography } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Form, Formik } from 'formik'
 import { Fragment } from 'react'
@@ -30,7 +30,22 @@ const EditProductModal = () => {
                     <Box sx={{ mr: 3, mb: 2, ml: 2 }}>
                       <Grid container spacing={2}>
                         <Grid xs={4}>
-                          <Box sx={{ border: 1, height: '100%' }}></Box>
+                          <Box
+                            sx={{
+                              border: 1,
+                              maxHeight: '130px',
+                              maxWidth: '180px',
+                              overflow: 'hidden'
+                            }}
+                          >
+                            <Card>
+                              <CardMedia sx={{ width: '100%', height: 'auto', display: 'block' }}>
+                                {values.image && (
+                                  <CardMedia sx={{ height: 140, py: 8 }} image={values.image} />
+                                )}
+                              </CardMedia>
+                            </Card>
+                          </Box>
                         </Grid>
                         <Grid lg={8}>
                           <Box

diff --git a/ui/src/hooks/products/index.ts b/ui/src/hooks/products/index.ts
@@ -1,7 +1,7 @@
-import { useContext } from 'react'
-
 import { ProductContext } from 'src/providers/product-provider'
 
+import { useContext } from 'react'
+
 export const useProducts = () => {
   const productContext = useContext(ProductContext)
 

diff --git a/ui/src/main.tsx b/ui/src/main.tsx
@@ -1,10 +1,10 @@
-import { Fragment } from 'react'
-import ReactDOM from 'react-dom/client'
-
 import App from 'src/App.tsx'
 import 'src/index.css'
 import { ProductContextProvider } from 'src/providers/product-provider/index.tsx'
 
+import { Fragment } from 'react'
+import ReactDOM from 'react-dom/client'
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Fragment>
     <ProductContextProvider>

diff --git a/ui/src/models/product/index.ts b/ui/src/models/product/index.ts
@@ -3,7 +3,7 @@ export interface IProduct {
   name: string
   price: number
   description?: string
-  image?: string
+  image: string
   color?: string
   brand?: string
   model?: string

diff --git a/ui/src/providers/product-provider/index.tsx b/ui/src/providers/product-provider/index.tsx
@@ -1,9 +1,10 @@
-import { IProductContext, IProductContextProvider } from './interface'
-import { createContext, FC, useRef, useState } from 'react'
-
+import defaultProductImage from 'src/assets/images/default_product_image.png'
 import { IProduct } from 'src/models/product'
 import { generateID } from 'src/utils'
 
+import { IProductContext, IProductContextProvider } from './interface'
+import { createContext, FC, useRef, useState } from 'react'
+
 export const ProductContext = createContext<IProductContext>({} as IProductContext)
 
 export const ProductContextProvider: FC<IProductContextProvider> = ({ children }) => {
@@ -17,7 +18,8 @@ export const ProductContextProvider: FC<IProductContextProvider> = ({ children }
       product = {
         id: generateID(),
         name: `Product ${productCount.current}`,
-        price: 0
+        price: 0,
+        image: defaultProductImage
       }
     }
     productCount.current += 1

diff --git a/ui/src/providers/product-provider/interface.ts b/ui/src/providers/product-provider/interface.ts
@@ -1,7 +1,7 @@
-import { ReactNode } from 'react'
-
 import { IProduct } from 'src/models/product'
 
+import { ReactNode } from 'react'
+
 export interface IProductContext {
   products: IProduct[]
   productToEdit: IProduct | null