From 8bec7ba3fb11d99b188873a660470c87bb902167 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 13 Jun 2023 12:03:09 -0300
Subject: [PATCH 01/14] Implementacao do DarkMode

---
 frontend/components/Header.js        | 40 +++++++++++++++++++++-------
 frontend/pages/_app.js               | 33 ++++++++++++++++-------
 frontend/pages/themes/dark.js        |  0
 frontend/pages/themes/light.js       |  0
 frontend/styles/components/Footer.js |  2 +-
 frontend/styles/components/Header.js |  2 +-
 frontend/styles/pages/products.js    |  2 +-
 frontend/styles/pages/tutorials.js   |  5 +++-
 8 files changed, 62 insertions(+), 22 deletions(-)
 create mode 100644 frontend/pages/themes/dark.js
 create mode 100644 frontend/pages/themes/light.js

diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index e206f97..95f2533 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -9,18 +9,27 @@ import {
   MenuItem,
   Toolbar,
   Typography
-} from '@mui/material'
+}
+from '@mui/material'
 import { useRouter } from 'next/router'
-import React from 'react'
+import { ListItemIcon } from '@mui/material';
 
-import { GitHub, Twitter, YouTube } from '@mui/icons-material'
+import React from 'react'
+import {
+  GitHub,
+  Twitter,
+  YouTube,
+  Brightness4,
+  Brightness7,
+  Logout
+} from '@mui/icons-material'
 import MoreIcon from '@mui/icons-material/MoreVert'
 import TokenDialog from '../components/TokenDialog'
 import { useAuth } from '../contexts/AuthContext'
 import useStyles from '../styles/components/Header'
 import Link from './Link'
 
-function Header() {
+function Header({ darkMode, setDarkMode }) {
   const classes = useStyles()
   const router = useRouter()
   const { user, logout } = useAuth()
@@ -55,9 +64,7 @@ function Header() {
   }
 
   const handleTokenOpen = () => {
-    // Fecha o menu
     setAnchorEl(null)
-    // Abre a Dialog Token Api
     setOpen(true)
   }
 
@@ -65,6 +72,10 @@ function Header() {
     setOpen(false)
   }
 
+  const handleToggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode)
+  }
+
   return (
     <div>
       <AppBar position="static" className={classes.appbar}>
@@ -80,6 +91,14 @@ function Header() {
           </List>
           <div className={classes.separator} />
           <Typography>{user?.username}</Typography>
+          <IconButton
+            size="large"
+            edge="end"
+            color="inherit"
+            onClick={handleToggleDarkMode}
+          >
+            {darkMode ? <Brightness7 /> : <Brightness4 />}
+          </IconButton>
           <IconButton
             size="large"
             edge="end"
@@ -104,11 +123,15 @@ function Header() {
             onClose={handleClose}
           >
             <MenuItem onClick={handleTokenOpen}>API Token</MenuItem>
-            <MenuItem onClick={logout}>Logout</MenuItem>
+            <MenuItem onClick={logout}>
+              <ListItemIcon>
+                <Logout fontSize="small" />
+              </ListItemIcon>
+              <Typography variant="inherit">Logout</Typography>
+            </MenuItem>
           </Menu>
         </Toolbar>
       </AppBar>
-
       {router.pathname === '/' && (
         <Grid className={classes.banner}>
           <Grid
@@ -119,7 +142,6 @@ function Header() {
             className={classes.container}
           >
             <Grid item xs={12} className={classes.titleWrapper}>
-              {/* <h1 className={classes.title}>Photo-z Server</h1> */}
               <Typography variant="h1" className={classes.title}>
                 Photo-z Server
               </Typography>
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 87127ee..0bfe725 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,30 +1,41 @@
 import CssBaseline from '@mui/material/CssBaseline'
-import { ThemeProvider } from '@mui/styles'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import Footer from '../components/Footer'
-import Header from '../components/Header'
 import { AuthProvider } from '../contexts/AuthContext'
 import '../styles/global.css'
-import light from '../themes/light'
+import Header from '../components/Header' 
 
 const queryClient = new QueryClient()
 
 export default function MyApp(props) {
   const { Component, pageProps } = props
   const route = useRouter()
+  const [darkMode, setDarkMode] = useState(false)
 
   useEffect(() => {
-    // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side')
     if (jssStyles) {
       jssStyles.parentElement.removeChild(jssStyles)
     }
   }, [])
 
+  const light = createTheme({
+    palette: {
+    mode: 'light',
+    },
+  })
+
+  const dark = createTheme({
+    palette: {
+    mode: 'dark',
+    },
+  })
+  
   return (
     <>
       <Head>
@@ -35,10 +46,8 @@ export default function MyApp(props) {
         />
       </Head>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={light}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <ThemeProvider theme={darkMode ? dark : light}>
           <CssBaseline />
-          {/* Overwriting some global CSS. */}
           <div
             style={{
               display: 'flex',
@@ -48,7 +57,13 @@ export default function MyApp(props) {
             }}
           >
             <AuthProvider>
-              {route.pathname !== '/login' && <Header />}
+              {route.pathname !== '/login' && (
+                <Header
+                  darkMode={darkMode}
+                  setDarkMode={setDarkMode}
+                  route={route}
+                />
+              )}
               <Component {...pageProps} />
               {route.pathname !== '/login' && <Footer />}
             </AuthProvider>
diff --git a/frontend/pages/themes/dark.js b/frontend/pages/themes/dark.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/pages/themes/light.js b/frontend/pages/themes/light.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/styles/components/Footer.js b/frontend/styles/components/Footer.js
index 3c8317f..991311f 100644
--- a/frontend/styles/components/Footer.js
+++ b/frontend/styles/components/Footer.js
@@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({
     height: 64,
     position: 'relative',
     zIndex: 2,
-    backgroundColor: '#212121',
+    backgroundColor: theme.palette.grey[900],
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
diff --git a/frontend/styles/components/Header.js b/frontend/styles/components/Header.js
index a96624b..52ad297 100644
--- a/frontend/styles/components/Header.js
+++ b/frontend/styles/components/Header.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({
     marginRight: 10
   },
   appbar: {
-    background: theme.palette.primary.dark
+    background: theme.palette.grey[900]
   },
   separator: {
     flexGrow: 1
diff --git a/frontend/styles/pages/products.js b/frontend/styles/pages/products.js
index bc58554..458475e 100644
--- a/frontend/styles/pages/products.js
+++ b/frontend/styles/pages/products.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '4px',
     padding: theme.spacing(3),
     flex: '1 1 0%',
-    background: 'rgb(247, 249, 252)'
+    // background: 'rgb(247, 249, 252)'
   },
   gridTitle: {
     display: 'flex',
diff --git a/frontend/styles/pages/tutorials.js b/frontend/styles/pages/tutorials.js
index 9e3e8a4..b6a9176 100644
--- a/frontend/styles/pages/tutorials.js
+++ b/frontend/styles/pages/tutorials.js
@@ -1,3 +1,4 @@
+import { TheaterComedy } from '@mui/icons-material'
 import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
@@ -11,7 +12,9 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
     borderRadius: '2px',
     overflowX: 'auto',
-    background: '#f7f7f7'
+    // background: theme.palette.grey[400],
+    //  color: theme.palette.text.primary
+    background: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[700]
   }
 }))
 

From 011294622c4ae310486d0babae2f205399a69411 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Wed, 21 Jun 2023 11:42:47 -0300
Subject: [PATCH 02/14] Adicao de um share button na pagina de download

---
 frontend/components/ProductGrid.js   | 270 ++++++++++++---------------
 frontend/components/ProductRemove.js |  64 +++----
 2 files changed, 148 insertions(+), 186 deletions(-)

diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 4595a29..5a5cbef 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -7,6 +7,8 @@ import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import Link from '@mui/material/Link'
+import ShareIcon from '@mui/icons-material/Share'
+import TextField from '@mui/material/TextField'
 import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid'
 import moment from 'moment'
 import { useRouter } from 'next/router'
@@ -19,74 +21,78 @@ import ProductRemove from '../components/ProductRemove'
 export default function ProductGrid(props) {
   const router = useRouter()
   const [rows, setRows] = React.useState([])
-  const [rowCount, setRowCount] = React.useState(undefined)
-
+  const [rowCount, setRowCount] = React.useState(0)
   const [page, setPage] = React.useState(0)
   const [pageSize, setPageSize] = React.useState(25)
   const [sortModel, setSortModel] = React.useState([
     { field: 'created_at', sort: 'desc' }
-  ])
+  ]);
   const [loading, setLoading] = React.useState(false)
   const [delRecordId, setDelRecordId] = React.useState(null)
   const [error, setError] = React.useState(null)
+  const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
+  const [shareUrl, setShareUrl] = React.useState('');
+  const [selectedFileUrl, setSelectedFileUrl] = React.useState('');
 
   const handleSortModelChange = newModel => {
     setSortModel(newModel)
   }
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const loadProducts = React.useCallback(() => {
-    // eslint-disable-next-line prettier/prettier
-    let active = true;
-    // eslint-disable-next-line no-unexpected-multiline
-    // eslint-disable-next-line prettier/prettier
-    (async () => {
-      setLoading(true)
+  const getDownloadUrl = row => {
+    const currentUrl = window.location.href;
+    const downloadUrl = currentUrl + '/download/' + row.id;
+    return downloadUrl;
+  };
+
+  const handleDownload = row => {
+    router.push(`/product/${encodeURIComponent(row.internal_name)}`);
+  };
+
+  const handleDelete = row => {
+    setDelRecordId(row.id);
+  };
+
+  const handleShare = row => {
+    const downloadUrl = getDownloadUrl(row);
+    setSelectedFileUrl(downloadUrl);
+    setShareDialogOpen(true);
+  };
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(selectedFileUrl)
+      .then(() => {})
+      .catch(error => {});
+  };
+
+  const handleCloseShareDialog = () => {
+    setShareDialogOpen(false);
+  };
+
+  const loadProducts = React.useCallback(async () => {
+    setLoading(true);
+    try {
       const response = await getProducts({
         filters: props.filters,
-        page: page,
+        page,
         page_size: pageSize,
         sort: sortModel,
         search: props.query
-      })
-
-      if (!active) {
-        return
-      }
-      setRows(response.results)
-      setRowCount(response.count)
-      setLoading(false)
-    })()
-
-    return () => {
-      active = false
+      });
+      setRows(response.results);
+      setRowCount(response.count);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
     }
-  })
+  }, [page, pageSize, sortModel, props.query, props.filters]);
 
   React.useEffect(() => {
-    loadProducts()
+    loadProducts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, pageSize, sortModel, props.query, props.filters])
-
-  // Some api client return undefine while loading
-  // Following lines are here to prevent `rowCountState` from being undefined during the loading
-  const [rowCountState, setRowCountState] = React.useState(rowCount || 0)
-  React.useEffect(() => {
-    setRowCountState(prevRowCountState =>
-      rowCount !== undefined ? rowCount : prevRowCountState
-    )
-  }, [rowCount, setRowCountState])
+  }, [loadProducts]);
 
   const columns = React.useMemo(() => {
-    function handleDownload(row) {
-      // Redirecionar para a pagina de detalhe do produto
-      router.push(`/product/${encodeURIComponent(row.internal_name)}`)
-    }
-
-    function handleDelete(row) {
-      setDelRecordId(row.id)
-    }
-
     return [
       // Hide Id Column ISSUE #123
       // { field: 'id', headerName: 'ID', width: 90, sortable: true },
@@ -95,13 +101,11 @@ export default function ProductGrid(props) {
         headerName: 'Name',
         sortable: true,
         flex: 1,
-        renderCell: params => {
-          return (
-            <Link component="button" onClick={e => handleDownload(params.row)}>
-              {params.value}
-            </Link>
-          )
-        }
+        renderCell: params => (
+          <Link component="button" onClick={() => handleDownload(params.row)}>
+            {params.value}
+          </Link>
+        )
       },
       {
         field: 'release_name',
@@ -128,123 +132,97 @@ export default function ProductGrid(props) {
         sortable: true,
         valueFormatter: params => {
           if (params.value == null) {
-            return ''
+            return '';
           }
-          const valueFormatted = moment(params.value).format('L LTS')
-          return `${valueFormatted}`
+          return moment(params.value).format('YYYY-MM-DD');
         }
       },
       {
         field: 'actions_download',
-        type: 'actions',
         headerName: 'Download',
-        width: 100,
+        width: 120,
         sortable: false,
-        getActions: data => [
-          <GridActionsCellItem
-            key={'product_download_' + data.id}
-            icon={<DownloadIcon />}
-            label="Download"
-            onClick={e => handleDownload(data.row)}
-          />
-        ]
+        renderCell: params => (
+          <GridActionsCellItem icon={<DownloadIcon />} onClick={() => handleDownload(params.row)} />
+        )
       },
       {
-        field: 'actions_delete',
-        type: 'actions',
+        field: 'share',
+        headerName: 'Share',
+        width: 120,
+        sortable: false,
+        renderCell: params => (
+          <GridActionsCellItem icon={<ShareIcon />} onClick={() => handleShare(params.row)} />
+        )
+      },
+      {
+        field: 'delete',
         headerName: 'Delete',
-        width: 100,
+        width: 120,
         sortable: false,
-        getActions: data => [
-          <GridActionsCellItem
-            key={'product_delete_' + data.id}
-            icon={<DeleteIcon />}
-            label="Delete Product"
-            disabled={data.row.is_owner === false}
-            onClick={e => handleDelete(data.row)}
-          />
-        ]
+        renderCell: params => (
+          <GridActionsCellItem icon={<DeleteIcon />} onClick={() => handleDelete(params.row)} />
+        )
       }
-    ]
-  }, [router])
-
-  const onDeleteOk = () => {
-    loadProducts()
-    setDelRecordId(null)
-  }
-  const onDeleteCancel = () => {
-    setDelRecordId(null)
-  }
-
-  const handleError = () => {
-    const handleClose = () => {
-      setError(null)
-    }
-    return (
-      <Dialog
-        open={true}
-        onClose={handleClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            {error}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} autoFocus>
-            Ok
-          </Button>
-        </DialogActions>
-      </Dialog>
-    )
-  }
-
-  const handleDeleteProduct = () => {
-    return (
-      <ProductRemove
-        productId={delRecordId}
-        open={delRecordId !== null}
-        onOk={onDeleteOk}
-        onCancel={onDeleteCancel}
-        onError={e => setError(e)}
-      ></ProductRemove>
-    )
-  }
+    ];
+  }, []);
 
   return (
-    <>
-      {error !== null ? handleError() : null}
-      {delRecordId !== null ? handleDeleteProduct() : null}
+    <React.Fragment>
       <DataGrid
-        getRowId={row => row.id}
         rows={rows}
         columns={columns}
-        disableSelectionOnClick
-        autoHeight
-        sortingMode="server"
-        sortModel={sortModel}
-        onSortModelChange={handleSortModelChange}
-        paginationMode="server"
-        rowCount={rowCountState}
+        rowCount={rowCount}
         pagination
-        page={page}
-        onPageChange={page => setPage(page)}
+        paginationMode="server"
         pageSize={pageSize}
+        onPageChange={newPage => setPage(newPage)}
         onPageSizeChange={newPageSize => setPageSize(newPageSize)}
-        rowsPerPageOptions={[25, 50, 100]}
+        sortModel={sortModel}
+        onSortModelChange={handleSortModelChange}
         loading={loading}
+        autoHeight
+        hideFooterSelectedRowCount
       />
-    </>
-  )
+
+      <Dialog open={shareDialogOpen} onClose={handleCloseShareDialog}>
+        <DialogContent>
+          <DialogContentText>Copy the download URL:</DialogContentText>
+          <TextField
+            fullWidth
+            variant="outlined"
+            value={selectedFileUrl}
+            InputProps={{
+              endAdornment: (
+                <Button variant="contained" onClick={handleCopyUrl}>Copy</Button>
+              )
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseShareDialog}>Close</Button>
+        </DialogActions>
+      </Dialog>
+
+      {delRecordId && (
+        <ProductRemove
+          open={Boolean(delRecordId)}
+          onClose={() => setDelRecordId(null)}
+          recordId={delRecordId}
+          onRemoveSuccess={loadProducts}
+          onError={setError}
+        />
+      )}
+    </React.Fragment>
+  );
 }
 
 ProductGrid.propTypes = {
+  filters: PropTypes.object,
   query: PropTypes.string,
-  filters: PropTypes.shape({
-    release: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    product_type: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    official_product: PropTypes.bool
-  })
-}
+};
+
+ProductGrid.defaultProps = {
+  filters: {},
+  query: '',
+};
diff --git a/frontend/components/ProductRemove.js b/frontend/components/ProductRemove.js
index ac22816..8dedbe1 100644
--- a/frontend/components/ProductRemove.js
+++ b/frontend/components/ProductRemove.js
@@ -8,60 +8,44 @@ import DialogTitle from '@mui/material/DialogTitle'
 import Button from '@mui/material/Button'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { deleteProduct } from '../services/product'
-export default function ProductRemove({ productId, onOk, onCancel, onError }) {
+export default function ProductRemove({ recordId, onRemoveSuccess, onClose, onError }) {
   const [isLoading, setLoading] = React.useState(false)
-  const handleDelete = React.useCallback(
-    async function () {
-      setLoading(true)
-      return await deleteProduct(productId)
-        .then(res => {
-          // setLoading(false)
-        })
-        .catch(res => {
-          if (res.response.status === 403) {
-            onError(
-              'this product cannot be removed, please make sure you own it and try again or contact the helpdesk'
-            )
-          } else {
-            onError(
-              'Failed to remove the product, please try again later or contact the helpdesk.'
-            )
-          }
-        })
-        .finally(() => {
-          setLoading(false)
-          onOk()
-        })
-    },
-    [onError, onOk, productId]
-  )
 
-  if (productId === null) return null
+  const handleDelete = async () => {
+    setLoading(true);
+    try {
+      await deleteProduct(recordId)
+      onRemoveSuccess()
+      onClose()
+    } catch (error) {
+      onError('Failed to remove the product. Please try again later or contact the helpdesk.');
+      setLoading(false)
+    }
+  };
+
+  if (recordId === null) return null;
 
   return (
     <Dialog open={true}>
       <DialogTitle>{'Delete this Product?'}</DialogTitle>
       <DialogContent>
         <DialogContentText>
-          {'Are you sure you want to delete this record?'}{' '}
+          {'Are you sure you want to delete this record?'}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onCancel}>Cancel</Button>
-        <LoadingButton
-          loading={isLoading}
-          variant="contained"
-          onClick={handleDelete}
-        >
+        <Button onClick={onClose}>Cancel</Button>
+        <LoadingButton loading={isLoading} variant="contained" onClick={handleDelete}>
           Delete
         </LoadingButton>
       </DialogActions>
     </Dialog>
-  )
+  );
 }
+
 ProductRemove.propTypes = {
-  productId: PropTypes.number,
-  onOk: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onError: PropTypes.func.isRequired
-}
+  recordId: PropTypes.number,
+  onRemoveSuccess: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onError: PropTypes.func.isRequired,
+};

From 354922b8dc01970d6fd9e0379443685ab92692f4 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Thu, 22 Jun 2023 14:52:14 -0300
Subject: [PATCH 03/14] adicao do share button na pagina de download

---
 frontend/components/ProductDetail.js | 62 +++++++++++++++++++++++++---
 frontend/components/ProductGrid.js   |  2 +-
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index bfbff77..4fcb87e 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -1,11 +1,17 @@
 import VerifiedIcon from '@mui/icons-material/Verified'
 import LoadingButton from '@mui/lab/LoadingButton'
+import { Button } from '@mui/material'
+import DialogActions from '@mui/material/DialogActions'
+import InputAdornment from '@mui/material/InputAdornment'
 import {
   Box,
   Card,
   CardContent,
   CardHeader,
   Chip,
+  Dialog,
+  DialogContent,
+  DialogTitle,
   Divider,
   Grid,
   List,
@@ -13,6 +19,7 @@ import {
   ListItemText,
   Paper,
   Stack,
+  TextField,
   Typography
 } from '@mui/material'
 import moment from 'moment'
@@ -38,6 +45,8 @@ export default function ProductDetail({ productId, internalName }) {
   const [isLoading, setLoading] = React.useState(false)
   const [notFound, setNotFound] = React.useState(false)
   const [isDownloading, setDownloading] = React.useState(false)
+  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
+  const [shareUrl, setShareUrl] = React.useState('')
 
   const loadProductById = React.useCallback(async () => {
     setLoading(true)
@@ -122,7 +131,6 @@ export default function ProductDetail({ productId, internalName }) {
         }
       })
   }, [product])
-
   React.useEffect(() => {
     if (product) {
       loadFiles()
@@ -160,11 +168,11 @@ export default function ProductDetail({ productId, internalName }) {
       <ListItem
         key={`file_${file.id}`}
         disableGutters
-        // secondaryAction={
-        //   <IconButton component={Link} href={file.file} target="_blank">
-        //     <DownloadIcon />
-        //   </IconButton>
-        // }
+      // secondaryAction={
+      //   <IconButton component={Link} href={file.file} target="_blank">
+      //     <DownloadIcon />
+      //   </IconButton>
+      // }
       >
         {file.role === 0 && (
           <ListItemText
@@ -179,6 +187,19 @@ export default function ProductDetail({ productId, internalName }) {
     )
   }
 
+  const handleShareDialogOpen = () => {
+    setShareDialogOpen(true)
+    setShareUrl(window.location.href)
+  }
+
+  const handleShareDialogClose = () => {
+    setShareDialogOpen(false)
+  }
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(shareUrl)
+  }
+
   if (isLoading) return <Loading isLoading={isLoading} />
   if (notFound) return <ProductNotFound />
   if (!product) return null
@@ -236,6 +257,31 @@ export default function ProductDetail({ productId, internalName }) {
               {product.description !== '' && (
                 <Typography variant="body">{product.description}</Typography>
               )}
+
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              </Box>
+
+              <Dialog open={shareDialogOpen} onClose={handleShareDialogClose}>
+                <DialogTitle>Copy the download URL:</DialogTitle>
+                <DialogContent>
+                  <TextField
+                    fullWidth
+                    variant="outlined"
+                    value={shareUrl}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <Button onClick={handleCopyUrl}>Copy</Button>
+                        </InputAdornment>
+                      )
+                    }}
+                  />
+                </DialogContent>
+                <DialogActions>
+                  <Button onClick={handleShareDialogClose}>Close</Button>
+                </DialogActions>
+              </Dialog>
+
             </Paper>
           </Grid>
           <Grid item xs={4}>
@@ -250,6 +296,9 @@ export default function ProductDetail({ productId, internalName }) {
                     Download
                   </LoadingButton>
                 )}
+                <Button variant="contained" onClick={handleShareDialogOpen}>
+                  Share
+                </Button>
                 <List>
                   {files.map(pc => {
                     return createFileFields(pc)
@@ -276,3 +325,4 @@ ProductDetail.propTypes = {
   productId: PropTypes.number,
   internalName: PropTypes.string
 }
+
diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 5a5cbef..354eabd 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -194,7 +194,7 @@ export default function ProductGrid(props) {
             value={selectedFileUrl}
             InputProps={{
               endAdornment: (
-                <Button variant="contained" onClick={handleCopyUrl}>Copy</Button>
+                <Button onClick={handleCopyUrl}>Copy</Button>
               )
             }}
           />

From 760a55b3cde5463be267433265c2d1b8e49a1f29 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Mon, 26 Jun 2023 19:08:08 -0300
Subject: [PATCH 04/14] implementacao do Snackbar-Success ao clicar em copy e
 ajustes na funcao de pegar a URL de download

---
 frontend/components/ProductDetail.js | 57 ++++++++++-------
 frontend/components/ProductGrid.js   | 91 ++++++++++++++++++----------
 2 files changed, 95 insertions(+), 53 deletions(-)

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 4fcb87e..88c4e24 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -3,6 +3,11 @@ import LoadingButton from '@mui/lab/LoadingButton'
 import { Button } from '@mui/material'
 import DialogActions from '@mui/material/DialogActions'
 import InputAdornment from '@mui/material/InputAdornment'
+import { IconButton } from '@mui/material'
+import ShareIcon from '@mui/icons-material/Share'
+import { Snackbar } from '@mui/material'
+import Alert from '@mui/material/Alert'
+
 import {
   Box,
   Card,
@@ -168,11 +173,6 @@ export default function ProductDetail({ productId, internalName }) {
       <ListItem
         key={`file_${file.id}`}
         disableGutters
-      // secondaryAction={
-      //   <IconButton component={Link} href={file.file} target="_blank">
-      //     <DownloadIcon />
-      //   </IconButton>
-      // }
       >
         {file.role === 0 && (
           <ListItemText
@@ -187,6 +187,12 @@ export default function ProductDetail({ productId, internalName }) {
     )
   }
 
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+
+  const showSnackbar = () => {
+    setSnackbarOpen(true);
+  };
+
   const handleShareDialogOpen = () => {
     setShareDialogOpen(true)
     setShareUrl(window.location.href)
@@ -197,8 +203,9 @@ export default function ProductDetail({ productId, internalName }) {
   }
 
   const handleCopyUrl = () => {
-    navigator.clipboard.writeText(shareUrl)
-  }
+    navigator.clipboard.writeText(shareUrl);
+    showSnackbar();
+  };
 
   if (isLoading) return <Loading isLoading={isLoading} />
   if (notFound) return <ProductNotFound />
@@ -207,6 +214,15 @@ export default function ProductDetail({ productId, internalName }) {
   return (
     <React.Fragment>
       <Box className={classes.pageHeader}>
+        <Snackbar
+          open={snackbarOpen}
+          autoHideDuration={3000}
+          onClose={() => setSnackbarOpen(false)}
+        >
+          <Alert onClose={() => setSnackbarOpen(false)} severity="success" sx={{ width: '100%' }}>
+            Link copied successfully!
+          </Alert>
+        </Snackbar>
         <Typography variant="h6">Product</Typography>
       </Box>
       <Box component="form" noValidate autoComplete="off">
@@ -221,12 +237,14 @@ export default function ProductDetail({ productId, internalName }) {
             <Paper elevation={2} className={classes.paper}>
               <Stack
                 direction="row"
-                justifyContent="space-between"
-                alignItems="flex-start"
+                justifyContent="flex-start"
+                alignItems="center"
                 spacing={2}
               >
                 <Typography variant="h4">{product.display_name}</Typography>
-
+                <IconButton onClick={handleShareDialogOpen}>
+                  <ShareIcon />
+                </IconButton>
                 {product.official_product === true && (
                   <Chip
                     variant="outlined"
@@ -257,11 +275,10 @@ export default function ProductDetail({ productId, internalName }) {
               {product.description !== '' && (
                 <Typography variant="body">{product.description}</Typography>
               )}
-
-              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              </Box>
-
-              <Dialog open={shareDialogOpen} onClose={handleShareDialogClose}>
+              <Dialog open={shareDialogOpen} onClose={handleShareDialogClose}
+                PaperProps={{
+                  style: { width: '500px', minHeight: '150px', },
+                }}>
                 <DialogTitle>Copy the download URL:</DialogTitle>
                 <DialogContent>
                   <TextField
@@ -271,9 +288,11 @@ export default function ProductDetail({ productId, internalName }) {
                     InputProps={{
                       endAdornment: (
                         <InputAdornment position="end">
-                          <Button onClick={handleCopyUrl}>Copy</Button>
+                          <Button onClick={handleCopyUrl}>
+                            Copy
+                          </Button>
                         </InputAdornment>
-                      )
+                      ),
                     }}
                   />
                 </DialogContent>
@@ -281,7 +300,6 @@ export default function ProductDetail({ productId, internalName }) {
                   <Button onClick={handleShareDialogClose}>Close</Button>
                 </DialogActions>
               </Dialog>
-
             </Paper>
           </Grid>
           <Grid item xs={4}>
@@ -296,9 +314,6 @@ export default function ProductDetail({ productId, internalName }) {
                     Download
                   </LoadingButton>
                 )}
-                <Button variant="contained" onClick={handleShareDialogOpen}>
-                  Share
-                </Button>
                 <List>
                   {files.map(pc => {
                     return createFileFields(pc)
diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 354eabd..143314e 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -1,11 +1,13 @@
 /* eslint-disable multiline-ternary */
 import DeleteIcon from '@mui/icons-material/Delete'
 import DownloadIcon from '@mui/icons-material/Download'
-import Button from '@mui/material/Button'
+import { Button } from '@mui/material'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
 import Link from '@mui/material/Link'
 import ShareIcon from '@mui/icons-material/Share'
 import TextField from '@mui/material/TextField'
@@ -24,35 +26,40 @@ export default function ProductGrid(props) {
   const [rowCount, setRowCount] = React.useState(0)
   const [page, setPage] = React.useState(0)
   const [pageSize, setPageSize] = React.useState(25)
-  const [sortModel, setSortModel] = React.useState([
-    { field: 'created_at', sort: 'desc' }
-  ]);
-  const [loading, setLoading] = React.useState(false)
-  const [delRecordId, setDelRecordId] = React.useState(null)
-  const [error, setError] = React.useState(null)
+  const [sortModel, setSortModel] = React.useState([{ field: 'created_at', sort: 'desc' }]);
+  const [loading, setLoading] = React.useState(false);
+  const [delRecordId, setDelRecordId] = React.useState(null);
+  const [error, setError] = React.useState(null);
   const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
   const [shareUrl, setShareUrl] = React.useState('');
   const [selectedFileUrl, setSelectedFileUrl] = React.useState('');
+  const [copySnackbarOpen, setCopySnackbarOpen] = React.useState(false);
 
-  const handleSortModelChange = newModel => {
+  const handleSortModelChange = (newModel) => {
     setSortModel(newModel)
-  }
-
-  const getDownloadUrl = row => {
-    const currentUrl = window.location.href;
-    const downloadUrl = currentUrl + '/download/' + row.id;
+  };
+  
+  const getProductUrl = (internal_name) => {
+    return `/product/${encodeURIComponent(internal_name)}`;
+  };
+  
+  const getDownloadUrl = (row) => {
+    const id = row.id;
+    const display_name = row.display_name ? row.display_name : '';
+    const productUrl = getProductUrl(`${id}_${display_name}`);
+    const downloadUrl = window.location.origin + productUrl;
     return downloadUrl;
   };
-
-  const handleDownload = row => {
-    router.push(`/product/${encodeURIComponent(row.internal_name)}`);
+    
+  const handleDownload = (row) => {
+    router.push(getProductUrl(row.internal_name));
   };
 
-  const handleDelete = row => {
+  const handleDelete = (row) => {
     setDelRecordId(row.id);
   };
 
-  const handleShare = row => {
+  const handleShare = (row) => {
     const downloadUrl = getDownloadUrl(row);
     setSelectedFileUrl(downloadUrl);
     setShareDialogOpen(true);
@@ -60,14 +67,22 @@ export default function ProductGrid(props) {
 
   const handleCopyUrl = () => {
     navigator.clipboard.writeText(selectedFileUrl)
-      .then(() => {})
-      .catch(error => {});
+      .then(() => {
+        setCopySnackbarOpen(true);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
   };
 
   const handleCloseShareDialog = () => {
     setShareDialogOpen(false);
   };
 
+  const handleCloseCopySnackbar = () => {
+    setCopySnackbarOpen(false);
+  };
+
   const loadProducts = React.useCallback(async () => {
     setLoading(true);
     try {
@@ -76,7 +91,7 @@ export default function ProductGrid(props) {
         page,
         page_size: pageSize,
         sort: sortModel,
-        search: props.query
+        search: props.query,
       });
       setRows(response.results);
       setRowCount(response.count);
@@ -101,11 +116,11 @@ export default function ProductGrid(props) {
         headerName: 'Name',
         sortable: true,
         flex: 1,
-        renderCell: params => (
+        renderCell: (params) => (
           <Link component="button" onClick={() => handleDownload(params.row)}>
             {params.value}
           </Link>
-        )
+        ),
       },
       {
         field: 'release_name',
@@ -130,28 +145,28 @@ export default function ProductGrid(props) {
         headerName: 'Created at',
         width: 200,
         sortable: true,
-        valueFormatter: params => {
+        valueFormatter: (params) => {
           if (params.value == null) {
             return '';
           }
           return moment(params.value).format('YYYY-MM-DD');
-        }
+        },
       },
       {
         field: 'actions_download',
         headerName: 'Download',
         width: 120,
         sortable: false,
-        renderCell: params => (
+        renderCell: (params) => (
           <GridActionsCellItem icon={<DownloadIcon />} onClick={() => handleDownload(params.row)} />
-        )
+        ),
       },
       {
         field: 'share',
         headerName: 'Share',
         width: 120,
         sortable: false,
-        renderCell: params => (
+        renderCell: (params) => (
           <GridActionsCellItem icon={<ShareIcon />} onClick={() => handleShare(params.row)} />
         )
       },
@@ -160,7 +175,7 @@ export default function ProductGrid(props) {
         headerName: 'Delete',
         width: 120,
         sortable: false,
-        renderCell: params => (
+        renderCell: (params) => (
           <GridActionsCellItem icon={<DeleteIcon />} onClick={() => handleDelete(params.row)} />
         )
       }
@@ -176,8 +191,8 @@ export default function ProductGrid(props) {
         pagination
         paginationMode="server"
         pageSize={pageSize}
-        onPageChange={newPage => setPage(newPage)}
-        onPageSizeChange={newPageSize => setPageSize(newPageSize)}
+        onPageChange={(newPage) => setPage(newPage)}
+        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
         sortModel={sortModel}
         onSortModelChange={handleSortModelChange}
         loading={loading}
@@ -185,7 +200,13 @@ export default function ProductGrid(props) {
         hideFooterSelectedRowCount
       />
 
-      <Dialog open={shareDialogOpen} onClose={handleCloseShareDialog}>
+      <Dialog
+        open={shareDialogOpen}
+        onClose={handleCloseShareDialog}
+        PaperProps={{
+          style: { width: '500px', minHeight: '150px' },
+        }}
+      >
         <DialogContent>
           <DialogContentText>Copy the download URL:</DialogContentText>
           <TextField
@@ -213,6 +234,12 @@ export default function ProductGrid(props) {
           onError={setError}
         />
       )}
+
+      <Snackbar open={copySnackbarOpen} autoHideDuration={3000} onClose={handleCloseCopySnackbar}>
+        <Alert onClose={handleCloseCopySnackbar} severity="success" sx={{ width: '100%' }}>
+          Link copied successfully!
+        </Alert>
+      </Snackbar>
     </React.Fragment>
   );
 }

From b7456c2f8b98843f5733a016ba8ee48f2a324a8b Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 27 Jun 2023 00:21:44 -0300
Subject: [PATCH 05/14] foi adicionado um variant contained (background) no
 buttuon copy

---
 frontend/components/ProductGrid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 143314e..4de72ef 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -215,7 +215,7 @@ export default function ProductGrid(props) {
             value={selectedFileUrl}
             InputProps={{
               endAdornment: (
-                <Button onClick={handleCopyUrl}>Copy</Button>
+                <Button variant='contained' onClick={handleCopyUrl}>Copy</Button>
               )
             }}
           />

From ea49ed81bd4623145b7cc5b8f767f696f00fd3e0 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 27 Jun 2023 10:43:39 -0300
Subject: [PATCH 06/14] foi adicionado um replace para tratar os caracteres de
 'display_name', que antes estava pegando hifes, espacos e letras maiusculas

---
 frontend/components/ProductGrid.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 4de72ef..3aa97a3 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -46,7 +46,10 @@ export default function ProductGrid(props) {
   const getDownloadUrl = (row) => {
     const id = row.id;
     const display_name = row.display_name ? row.display_name : '';
-    const productUrl = getProductUrl(`${id}_${display_name}`);
+    
+    const formatted_display_name = display_name.replace(/[-\s]/g, '').toLowerCase();
+  
+    const productUrl = getProductUrl(`${id}_${formatted_display_name}`);
     const downloadUrl = window.location.origin + productUrl;
     return downloadUrl;
   };

From 2bc8500e2e357635570a028f2665e1b9006dca63 Mon Sep 17 00:00:00 2001
From: Glauber Costa Vila Verde <glauber.vila.verde@gmail.com>
Date: Tue, 27 Jun 2023 11:58:59 -0300
Subject: [PATCH 07/14] Fixed lint error. and added user atribute in
 docker-compose template

---
 docker-compose-development.yml       |   2 +
 frontend/components/Header.js        |   6 +-
 frontend/components/ProductDetail.js |  55 ++++----
 frontend/components/ProductGrid.js   | 190 +++++++++++++++------------
 frontend/components/ProductRemove.js |  29 ++--
 frontend/pages/_app.js               |  12 +-
 6 files changed, 166 insertions(+), 128 deletions(-)

diff --git a/docker-compose-development.yml b/docker-compose-development.yml
index 46b2257..3696fdd 100644
--- a/docker-compose-development.yml
+++ b/docker-compose-development.yml
@@ -20,6 +20,7 @@ services:
         - "GROUPID=${GROUPID:-1000}"
         - "USERNAME=${USERNAME:-pzapp}"
     command: /start.sh
+    user: "1000:1000"
     env_file:
       - .env
     volumes:
@@ -31,6 +32,7 @@ services:
 
   frontend:
     image: node:lts
+    user: "1000:1000"
     working_dir: /app
     volumes:
       - ./frontend:/app
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 95f2533..8d8b819 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -8,11 +8,11 @@ import {
   Menu,
   MenuItem,
   Toolbar,
-  Typography
+  Typography,
+  , ListItemIcon 
 }
-from '@mui/material'
+} from '@mui/material'
 import { useRouter } from 'next/router'
-import { ListItemIcon } from '@mui/material';
 
 import React from 'react'
 import {
diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 88c4e24..a19685b 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -1,14 +1,9 @@
 import VerifiedIcon from '@mui/icons-material/Verified'
 import LoadingButton from '@mui/lab/LoadingButton'
-import { Button } from '@mui/material'
-import DialogActions from '@mui/material/DialogActions'
-import InputAdornment from '@mui/material/InputAdornment'
-import { IconButton } from '@mui/material'
-import ShareIcon from '@mui/icons-material/Share'
-import { Snackbar } from '@mui/material'
-import Alert from '@mui/material/Alert'
-
 import {
+  Button,
+  IconButton,
+  Snackbar,
   Box,
   Card,
   CardContent,
@@ -27,6 +22,11 @@ import {
   TextField,
   Typography
 } from '@mui/material'
+import DialogActions from '@mui/material/DialogActions'
+import InputAdornment from '@mui/material/InputAdornment'
+import ShareIcon from '@mui/icons-material/Share'
+import Alert from '@mui/material/Alert'
+
 import moment from 'moment'
 import prettyBytes from 'pretty-bytes'
 import PropTypes from 'prop-types'
@@ -170,10 +170,7 @@ export default function ProductDetail({ productId, internalName }) {
       name = file.name.substring(0, 23) + '...' + extension
     }
     return (
-      <ListItem
-        key={`file_${file.id}`}
-        disableGutters
-      >
+      <ListItem key={`file_${file.id}`} disableGutters>
         {file.role === 0 && (
           <ListItemText
             primary={name}
@@ -187,11 +184,11 @@ export default function ProductDetail({ productId, internalName }) {
     )
   }
 
-  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false)
 
   const showSnackbar = () => {
-    setSnackbarOpen(true);
-  };
+    setSnackbarOpen(true)
+  }
 
   const handleShareDialogOpen = () => {
     setShareDialogOpen(true)
@@ -203,9 +200,9 @@ export default function ProductDetail({ productId, internalName }) {
   }
 
   const handleCopyUrl = () => {
-    navigator.clipboard.writeText(shareUrl);
-    showSnackbar();
-  };
+    navigator.clipboard.writeText(shareUrl)
+    showSnackbar()
+  }
 
   if (isLoading) return <Loading isLoading={isLoading} />
   if (notFound) return <ProductNotFound />
@@ -219,7 +216,11 @@ export default function ProductDetail({ productId, internalName }) {
           autoHideDuration={3000}
           onClose={() => setSnackbarOpen(false)}
         >
-          <Alert onClose={() => setSnackbarOpen(false)} severity="success" sx={{ width: '100%' }}>
+          <Alert
+            onClose={() => setSnackbarOpen(false)}
+            severity="success"
+            sx={{ width: '100%' }}
+          >
             Link copied successfully!
           </Alert>
         </Snackbar>
@@ -275,10 +276,13 @@ export default function ProductDetail({ productId, internalName }) {
               {product.description !== '' && (
                 <Typography variant="body">{product.description}</Typography>
               )}
-              <Dialog open={shareDialogOpen} onClose={handleShareDialogClose}
+              <Dialog
+                open={shareDialogOpen}
+                onClose={handleShareDialogClose}
                 PaperProps={{
-                  style: { width: '500px', minHeight: '150px', },
-                }}>
+                  style: { width: '500px', minHeight: '150px' }
+                }}
+              >
                 <DialogTitle>Copy the download URL:</DialogTitle>
                 <DialogContent>
                   <TextField
@@ -288,11 +292,9 @@ export default function ProductDetail({ productId, internalName }) {
                     InputProps={{
                       endAdornment: (
                         <InputAdornment position="end">
-                          <Button onClick={handleCopyUrl}>
-                            Copy
-                          </Button>
+                          <Button onClick={handleCopyUrl}>Copy</Button>
                         </InputAdornment>
-                      ),
+                      )
                     }}
                   />
                 </DialogContent>
@@ -340,4 +342,3 @@ ProductDetail.propTypes = {
   productId: PropTypes.number,
   internalName: PropTypes.string
 }
-
diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 3aa97a3..dfc0f2e 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -26,89 +26,94 @@ export default function ProductGrid(props) {
   const [rowCount, setRowCount] = React.useState(0)
   const [page, setPage] = React.useState(0)
   const [pageSize, setPageSize] = React.useState(25)
-  const [sortModel, setSortModel] = React.useState([{ field: 'created_at', sort: 'desc' }]);
-  const [loading, setLoading] = React.useState(false);
-  const [delRecordId, setDelRecordId] = React.useState(null);
-  const [error, setError] = React.useState(null);
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
-  const [shareUrl, setShareUrl] = React.useState('');
-  const [selectedFileUrl, setSelectedFileUrl] = React.useState('');
-  const [copySnackbarOpen, setCopySnackbarOpen] = React.useState(false);
+  const [sortModel, setSortModel] = React.useState([
+    { field: 'created_at', sort: 'desc' }
+  ])
+  const [loading, setLoading] = React.useState(false)
+  const [delRecordId, setDelRecordId] = React.useState(null)
+  const [error, setError] = React.useState(null)
+  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
+  const [shareUrl, setShareUrl] = React.useState('')
+  const [selectedFileUrl, setSelectedFileUrl] = React.useState('')
+  const [copySnackbarOpen, setCopySnackbarOpen] = React.useState(false)
 
-  const handleSortModelChange = (newModel) => {
+  const handleSortModelChange = newModel => {
     setSortModel(newModel)
-  };
-  
-  const getProductUrl = (internal_name) => {
-    return `/product/${encodeURIComponent(internal_name)}`;
-  };
-  
-  const getDownloadUrl = (row) => {
-    const id = row.id;
-    const display_name = row.display_name ? row.display_name : '';
-    
-    const formatted_display_name = display_name.replace(/[-\s]/g, '').toLowerCase();
-  
-    const productUrl = getProductUrl(`${id}_${formatted_display_name}`);
-    const downloadUrl = window.location.origin + productUrl;
-    return downloadUrl;
-  };
-    
-  const handleDownload = (row) => {
-    router.push(getProductUrl(row.internal_name));
-  };
+  }
 
-  const handleDelete = (row) => {
-    setDelRecordId(row.id);
-  };
+  const getProductUrl = internal_name => {
+    return `/product/${encodeURIComponent(internal_name)}`
+  }
 
-  const handleShare = (row) => {
-    const downloadUrl = getDownloadUrl(row);
-    setSelectedFileUrl(downloadUrl);
-    setShareDialogOpen(true);
-  };
+  const getDownloadUrl = row => {
+    const id = row.id
+    const display_name = row.display_name ? row.display_name : ''
+
+    const formatted_display_name = display_name
+      .replace(/[-\s]/g, '')
+      .toLowerCase()
+
+    const productUrl = getProductUrl(`${id}_${formatted_display_name}`)
+    const downloadUrl = window.location.origin + productUrl
+    return downloadUrl
+  }
+
+  const handleDownload = row => {
+    router.push(getProductUrl(row.internal_name))
+  }
+
+  const handleDelete = row => {
+    setDelRecordId(row.id)
+  }
+
+  const handleShare = row => {
+    const downloadUrl = getDownloadUrl(row)
+    setSelectedFileUrl(downloadUrl)
+    setShareDialogOpen(true)
+  }
 
   const handleCopyUrl = () => {
-    navigator.clipboard.writeText(selectedFileUrl)
+    navigator.clipboard
+      .writeText(selectedFileUrl)
       .then(() => {
-        setCopySnackbarOpen(true);
+        setCopySnackbarOpen(true)
+      })
+      .catch(error => {
+        console.error(error)
       })
-      .catch((error) => {
-        console.error(error);
-      });
-  };
+  }
 
   const handleCloseShareDialog = () => {
-    setShareDialogOpen(false);
-  };
+    setShareDialogOpen(false)
+  }
 
   const handleCloseCopySnackbar = () => {
-    setCopySnackbarOpen(false);
-  };
+    setCopySnackbarOpen(false)
+  }
 
   const loadProducts = React.useCallback(async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       const response = await getProducts({
         filters: props.filters,
         page,
         page_size: pageSize,
         sort: sortModel,
-        search: props.query,
-      });
-      setRows(response.results);
-      setRowCount(response.count);
+        search: props.query
+      })
+      setRows(response.results)
+      setRowCount(response.count)
     } catch (error) {
-      setError(error);
+      setError(error)
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [page, pageSize, sortModel, props.query, props.filters]);
+  }, [page, pageSize, sortModel, props.query, props.filters])
 
   React.useEffect(() => {
-    loadProducts();
+    loadProducts()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadProducts]);
+  }, [loadProducts])
 
   const columns = React.useMemo(() => {
     return [
@@ -119,11 +124,11 @@ export default function ProductGrid(props) {
         headerName: 'Name',
         sortable: true,
         flex: 1,
-        renderCell: (params) => (
+        renderCell: params => (
           <Link component="button" onClick={() => handleDownload(params.row)}>
             {params.value}
           </Link>
-        ),
+        )
       },
       {
         field: 'release_name',
@@ -148,29 +153,35 @@ export default function ProductGrid(props) {
         headerName: 'Created at',
         width: 200,
         sortable: true,
-        valueFormatter: (params) => {
+        valueFormatter: params => {
           if (params.value == null) {
-            return '';
+            return ''
           }
-          return moment(params.value).format('YYYY-MM-DD');
-        },
+          return moment(params.value).format('YYYY-MM-DD')
+        }
       },
       {
         field: 'actions_download',
         headerName: 'Download',
         width: 120,
         sortable: false,
-        renderCell: (params) => (
-          <GridActionsCellItem icon={<DownloadIcon />} onClick={() => handleDownload(params.row)} />
-        ),
+        renderCell: params => (
+          <GridActionsCellItem
+            icon={<DownloadIcon />}
+            onClick={() => handleDownload(params.row)}
+          />
+        )
       },
       {
         field: 'share',
         headerName: 'Share',
         width: 120,
         sortable: false,
-        renderCell: (params) => (
-          <GridActionsCellItem icon={<ShareIcon />} onClick={() => handleShare(params.row)} />
+        renderCell: params => (
+          <GridActionsCellItem
+            icon={<ShareIcon />}
+            onClick={() => handleShare(params.row)}
+          />
         )
       },
       {
@@ -178,12 +189,15 @@ export default function ProductGrid(props) {
         headerName: 'Delete',
         width: 120,
         sortable: false,
-        renderCell: (params) => (
-          <GridActionsCellItem icon={<DeleteIcon />} onClick={() => handleDelete(params.row)} />
+        renderCell: params => (
+          <GridActionsCellItem
+            icon={<DeleteIcon />}
+            onClick={() => handleDelete(params.row)}
+          />
         )
       }
-    ];
-  }, []);
+    ]
+  }, [])
 
   return (
     <React.Fragment>
@@ -194,8 +208,8 @@ export default function ProductGrid(props) {
         pagination
         paginationMode="server"
         pageSize={pageSize}
-        onPageChange={(newPage) => setPage(newPage)}
-        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
+        onPageChange={newPage => setPage(newPage)}
+        onPageSizeChange={newPageSize => setPageSize(newPageSize)}
         sortModel={sortModel}
         onSortModelChange={handleSortModelChange}
         loading={loading}
@@ -207,7 +221,7 @@ export default function ProductGrid(props) {
         open={shareDialogOpen}
         onClose={handleCloseShareDialog}
         PaperProps={{
-          style: { width: '500px', minHeight: '150px' },
+          style: { width: '500px', minHeight: '150px' }
         }}
       >
         <DialogContent>
@@ -218,7 +232,9 @@ export default function ProductGrid(props) {
             value={selectedFileUrl}
             InputProps={{
               endAdornment: (
-                <Button variant='contained' onClick={handleCopyUrl}>Copy</Button>
+                <Button variant="contained" onClick={handleCopyUrl}>
+                  Copy
+                </Button>
               )
             }}
           />
@@ -238,21 +254,29 @@ export default function ProductGrid(props) {
         />
       )}
 
-      <Snackbar open={copySnackbarOpen} autoHideDuration={3000} onClose={handleCloseCopySnackbar}>
-        <Alert onClose={handleCloseCopySnackbar} severity="success" sx={{ width: '100%' }}>
+      <Snackbar
+        open={copySnackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleCloseCopySnackbar}
+      >
+        <Alert
+          onClose={handleCloseCopySnackbar}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
           Link copied successfully!
         </Alert>
       </Snackbar>
     </React.Fragment>
-  );
+  )
 }
 
 ProductGrid.propTypes = {
   filters: PropTypes.object,
-  query: PropTypes.string,
-};
+  query: PropTypes.string
+}
 
 ProductGrid.defaultProps = {
   filters: {},
-  query: '',
-};
+  query: ''
+}
diff --git a/frontend/components/ProductRemove.js b/frontend/components/ProductRemove.js
index 8dedbe1..0a84a78 100644
--- a/frontend/components/ProductRemove.js
+++ b/frontend/components/ProductRemove.js
@@ -8,22 +8,29 @@ import DialogTitle from '@mui/material/DialogTitle'
 import Button from '@mui/material/Button'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { deleteProduct } from '../services/product'
-export default function ProductRemove({ recordId, onRemoveSuccess, onClose, onError }) {
+export default function ProductRemove({
+  recordId,
+  onRemoveSuccess,
+  onClose,
+  onError
+}) {
   const [isLoading, setLoading] = React.useState(false)
 
   const handleDelete = async () => {
-    setLoading(true);
+    setLoading(true)
     try {
       await deleteProduct(recordId)
       onRemoveSuccess()
       onClose()
     } catch (error) {
-      onError('Failed to remove the product. Please try again later or contact the helpdesk.');
+      onError(
+        'Failed to remove the product. Please try again later or contact the helpdesk.'
+      )
       setLoading(false)
     }
-  };
+  }
 
-  if (recordId === null) return null;
+  if (recordId === null) return null
 
   return (
     <Dialog open={true}>
@@ -35,17 +42,21 @@ export default function ProductRemove({ recordId, onRemoveSuccess, onClose, onEr
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>Cancel</Button>
-        <LoadingButton loading={isLoading} variant="contained" onClick={handleDelete}>
+        <LoadingButton
+          loading={isLoading}
+          variant="contained"
+          onClick={handleDelete}
+        >
           Delete
         </LoadingButton>
       </DialogActions>
     </Dialog>
-  );
+  )
 }
 
 ProductRemove.propTypes = {
   recordId: PropTypes.number,
   onRemoveSuccess: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
-  onError: PropTypes.func.isRequired,
-};
+  onError: PropTypes.func.isRequired
+}
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 0bfe725..279e032 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import Footer from '../components/Footer'
 import { AuthProvider } from '../contexts/AuthContext'
 import '../styles/global.css'
-import Header from '../components/Header' 
+import Header from '../components/Header'
 
 const queryClient = new QueryClient()
 
@@ -26,16 +26,16 @@ export default function MyApp(props) {
 
   const light = createTheme({
     palette: {
-    mode: 'light',
-    },
+      mode: 'light'
+    }
   })
 
   const dark = createTheme({
     palette: {
-    mode: 'dark',
-    },
+      mode: 'dark'
+    }
   })
-  
+
   return (
     <>
       <Head>

From 7459f433892d1f32805a48905aa19b55643e127e Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 27 Jun 2023 19:05:02 -0300
Subject: [PATCH 08/14] correcao  dos erros apontados pelo Lint

---
 frontend/components/Header.js        |  9 +++-
 frontend/components/ProductDetail.js |  4 +-
 frontend/components/ProductGrid.js   | 71 +++++++++++++---------------
 3 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 8d8b819..6c0a992 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -9,12 +9,12 @@ import {
   MenuItem,
   Toolbar,
   Typography,
-  , ListItemIcon 
-}
+  ListItemIcon
 } from '@mui/material'
 import { useRouter } from 'next/router'
 
 import React from 'react'
+import PropTypes from 'prop-types'
 import {
   GitHub,
   Twitter,
@@ -203,4 +203,9 @@ function Header({ darkMode, setDarkMode }) {
   )
 }
 
+Header.propTypes = {
+  darkMode: PropTypes.bool.isRequired,
+  setDarkMode: PropTypes.func.isRequired
+}
+
 export default Header
diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index a19685b..0f13ca2 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -283,7 +283,7 @@ export default function ProductDetail({ productId, internalName }) {
                   style: { width: '500px', minHeight: '150px' }
                 }}
               >
-                <DialogTitle>Copy the download URL:</DialogTitle>
+                <DialogTitle style={{ fontSize: '16px' }}>Copy the download URL:</DialogTitle>
                 <DialogContent>
                   <TextField
                     fullWidth
@@ -292,7 +292,7 @@ export default function ProductDetail({ productId, internalName }) {
                     InputProps={{
                       endAdornment: (
                         <InputAdornment position="end">
-                          <Button onClick={handleCopyUrl}>Copy</Button>
+                          <Button variant='contained' onClick={handleCopyUrl}>Copy</Button>
                         </InputAdornment>
                       )
                     }}
diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index dfc0f2e..20b1418 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -31,9 +31,7 @@ export default function ProductGrid(props) {
   ])
   const [loading, setLoading] = React.useState(false)
   const [delRecordId, setDelRecordId] = React.useState(null)
-  const [error, setError] = React.useState(null)
   const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
-  const [shareUrl, setShareUrl] = React.useState('')
   const [selectedFileUrl, setSelectedFileUrl] = React.useState('')
   const [copySnackbarOpen, setCopySnackbarOpen] = React.useState(false)
 
@@ -41,37 +39,6 @@ export default function ProductGrid(props) {
     setSortModel(newModel)
   }
 
-  const getProductUrl = internal_name => {
-    return `/product/${encodeURIComponent(internal_name)}`
-  }
-
-  const getDownloadUrl = row => {
-    const id = row.id
-    const display_name = row.display_name ? row.display_name : ''
-
-    const formatted_display_name = display_name
-      .replace(/[-\s]/g, '')
-      .toLowerCase()
-
-    const productUrl = getProductUrl(`${id}_${formatted_display_name}`)
-    const downloadUrl = window.location.origin + productUrl
-    return downloadUrl
-  }
-
-  const handleDownload = row => {
-    router.push(getProductUrl(row.internal_name))
-  }
-
-  const handleDelete = row => {
-    setDelRecordId(row.id)
-  }
-
-  const handleShare = row => {
-    const downloadUrl = getDownloadUrl(row)
-    setSelectedFileUrl(downloadUrl)
-    setShareDialogOpen(true)
-  }
-
   const handleCopyUrl = () => {
     navigator.clipboard
       .writeText(selectedFileUrl)
@@ -101,10 +68,11 @@ export default function ProductGrid(props) {
         sort: sortModel,
         search: props.query
       })
+
       setRows(response.results)
       setRowCount(response.count)
     } catch (error) {
-      setError(error)
+      console.error(error)
     } finally {
       setLoading(false)
     }
@@ -115,7 +83,37 @@ export default function ProductGrid(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadProducts])
 
+  const getProductUrl = React.useCallback(internalName => {
+    return `/product/${encodeURIComponent(internalName)}`
+  }, [])
+
   const columns = React.useMemo(() => {
+    const getDownloadUrl = row => {
+      const { id, /* eslint-disable camelcase */ display_name } = row
+
+      const formattedDisplayName = display_name
+        .replace(/[-\s]/g, '')
+        .toLowerCase()
+
+      const productUrl = getProductUrl(`${id}_${formattedDisplayName}`)
+      const downloadUrl = `${window.location.origin}${productUrl}`
+      return downloadUrl
+    }
+
+    const handleDownload = row => {
+      router.push(getProductUrl(row.internal_name))
+    }
+
+    const handleDelete = row => {
+      setDelRecordId(row.id)
+    }
+
+    const handleShare = row => {
+      const downloadUrl = getDownloadUrl(row)
+      setSelectedFileUrl(downloadUrl)
+      setShareDialogOpen(true)
+    }
+
     return [
       // Hide Id Column ISSUE #123
       // { field: 'id', headerName: 'ID', width: 90, sortable: true },
@@ -154,7 +152,7 @@ export default function ProductGrid(props) {
         width: 200,
         sortable: true,
         valueFormatter: params => {
-          if (params.value == null) {
+          if (!params.value) {
             return ''
           }
           return moment(params.value).format('YYYY-MM-DD')
@@ -197,7 +195,7 @@ export default function ProductGrid(props) {
         )
       }
     ]
-  }, [])
+  }, [getProductUrl, router])
 
   return (
     <React.Fragment>
@@ -250,7 +248,6 @@ export default function ProductGrid(props) {
           onClose={() => setDelRecordId(null)}
           recordId={delRecordId}
           onRemoveSuccess={loadProducts}
-          onError={setError}
         />
       )}
 

From 2b109d5886f19dc7e24bf121f56760daa67112dc Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 27 Jun 2023 19:45:09 -0300
Subject: [PATCH 09/14] identacao do ProductDetail e remocao da pasta themes e
 arquivos vazios em desuso

---
 frontend/components/ProductDetail.js | 10 +++++++---
 frontend/pages/themes/dark.js        |  0
 frontend/pages/themes/light.js       |  0
 3 files changed, 7 insertions(+), 3 deletions(-)
 delete mode 100644 frontend/pages/themes/dark.js
 delete mode 100644 frontend/pages/themes/light.js

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 0f13ca2..c500899 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -274,7 +274,7 @@ export default function ProductDetail({ productId, internalName }) {
                 {product.release_name} - {product.product_type_name}
               </Typography>
               {product.description !== '' && (
-                <Typography variant="body">{product.description}</Typography>
+                <Typography variant="body1">{product.description}</Typography>
               )}
               <Dialog
                 open={shareDialogOpen}
@@ -283,7 +283,9 @@ export default function ProductDetail({ productId, internalName }) {
                   style: { width: '500px', minHeight: '150px' }
                 }}
               >
-                <DialogTitle style={{ fontSize: '16px' }}>Copy the download URL:</DialogTitle>
+                <DialogTitle style={{ fontSize: '16px' }}>
+                  Copy the download URL:
+                </DialogTitle>
                 <DialogContent>
                   <TextField
                     fullWidth
@@ -292,7 +294,9 @@ export default function ProductDetail({ productId, internalName }) {
                     InputProps={{
                       endAdornment: (
                         <InputAdornment position="end">
-                          <Button variant='contained' onClick={handleCopyUrl}>Copy</Button>
+                          <Button variant="contained" onClick={handleCopyUrl}>
+                            Copy
+                          </Button>
                         </InputAdornment>
                       )
                     }}
diff --git a/frontend/pages/themes/dark.js b/frontend/pages/themes/dark.js
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/pages/themes/light.js b/frontend/pages/themes/light.js
deleted file mode 100644
index e69de29..0000000

From 6f6cf1988edd170515ab6e7d286abc3202506c20 Mon Sep 17 00:00:00 2001
From: Glauber Costa Vila Verde <glauber.vila.verde@gmail.com>
Date: Fri, 14 Jul 2023 15:29:27 -0300
Subject: [PATCH 10/14] Changed layout in product list, added Card for better
 contrast in dark mode

---
 frontend/pages/oficial_products.js | 96 +++++++++++++++--------------
 frontend/pages/user_products.js    | 99 ++++++++++++++++--------------
 frontend/styles/pages/products.js  |  4 +-
 3 files changed, 104 insertions(+), 95 deletions(-)

diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
index 15d3c6f..e3b7477 100644
--- a/frontend/pages/oficial_products.js
+++ b/frontend/pages/oficial_products.js
@@ -1,17 +1,16 @@
-import * as React from 'react'
-import { Paper, Box, Button } from '@mui/material'
+import { Box, Button, Card, CardContent, Paper } from '@mui/material'
+import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
-import Divider from '@mui/material/Divider'
 import Typography from '@mui/material/Typography'
-import useStyles from '../styles/pages/products'
-import FormControl from '@mui/material/FormControl'
+import { useRouter } from 'next/router'
+import { parseCookies } from 'nookies'
+import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
 import SearchField from '../components/SearchField'
-import { parseCookies } from 'nookies'
-import { useRouter } from 'next/router'
 import { useAuth } from '../contexts/AuthContext'
+import useStyles from '../styles/pages/products'
 
 export default function Products() {
   const classes = useStyles()
@@ -28,7 +27,7 @@ export default function Products() {
 
   return (
     // Baseado neste template: https://mira.bootlab.io/dashboard/analytics
-    <Paper className={classes.root}>
+    <Paper className={classes.root} elevation={3}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
           {/* TODO: Aqui deve entrar o BREADCRUMB */}
@@ -52,45 +51,48 @@ export default function Products() {
           )}
         </Grid>
       </Grid>
-      <Divider className={classes.titleDivider} variant={'fullWidth'} />
-      <Grid container className={classes.gridContent}>
-        <Grid item xs={12}>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-            <FormControl sx={{ m: 1, minWidth: '200px' }}>
-              <ReleaseSelect
-                value={filters.release}
-                onChange={value => {
-                  setFilters({
-                    ...filters,
-                    release: value
-                  })
-                }}
-                disabled={search !== ''}
-                allowAll={true}
-                noRelease={true}
-              />
-            </FormControl>
-            <FormControl sx={{ m: 1, minWidth: '200px' }}>
-              <ProductTypeSelect
-                value={filters.product_type}
-                onChange={value => {
-                  setFilters({
-                    ...filters,
-                    product_type: value
-                  })
-                }}
-                disabled={search !== ''}
-                allowAll={true}
-              />
-            </FormControl>
-            {/* TODO: Empurrar o Search para a direita */}
-            <SearchField onChange={query => setSearch(query)} />
-          </Box>
-        </Grid>
-        <Grid item xs={12}>
-          <ProductGrid query={search} filters={filters} />
-        </Grid>
-      </Grid>
+      <Card>
+        <CardContent>
+          <Grid container className={classes.gridContent}>
+            <Grid item xs={12}>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+                <FormControl sx={{ mt: 1, minWidth: '200px' }}>
+                  <ReleaseSelect
+                    value={filters.release}
+                    onChange={value => {
+                      setFilters({
+                        ...filters,
+                        release: value
+                      })
+                    }}
+                    disabled={search !== ''}
+                    allowAll={true}
+                    noRelease={true}
+                  />
+                </FormControl>
+                <FormControl sx={{ m: 1, minWidth: '200px' }}>
+                  <ProductTypeSelect
+                    value={filters.product_type}
+                    onChange={value => {
+                      setFilters({
+                        ...filters,
+                        product_type: value
+                      })
+                    }}
+                    disabled={search !== ''}
+                    allowAll={true}
+                  />
+                </FormControl>
+                {/* TODO: Empurrar o Search para a direita */}
+                <SearchField onChange={query => setSearch(query)} />
+              </Box>
+            </Grid>
+            <Grid item xs={12}>
+              <ProductGrid query={search} filters={filters} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
     </Paper>
   )
 }
diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
index 1408985..3d3dcd9 100644
--- a/frontend/pages/user_products.js
+++ b/frontend/pages/user_products.js
@@ -1,15 +1,21 @@
-import * as React from 'react'
-import { Paper, Box, FormControl, Button } from '@mui/material'
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  FormControl,
+  Paper
+} from '@mui/material'
 import Grid from '@mui/material/Grid'
-import Divider from '@mui/material/Divider'
 import Typography from '@mui/material/Typography'
-import useStyles from '../styles/pages/products'
+import { useRouter } from 'next/router'
+import { parseCookies } from 'nookies'
+import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
 import SearchField from '../components/SearchField'
-import { parseCookies } from 'nookies'
-import { useRouter } from 'next/router'
+import useStyles from '../styles/pages/products'
 
 export default function Products() {
   const classes = useStyles()
@@ -46,45 +52,48 @@ export default function Products() {
           </Button>
         </Grid>
       </Grid>
-      <Divider className={classes.titleDivider} variant={'fullWidth'} />
-      <Grid container className={classes.gridContent}>
-        <Grid item xs={12}>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-            <FormControl sx={{ m: 1, minWidth: '200px' }}>
-              <ReleaseSelect
-                value={filters.release}
-                onChange={value => {
-                  setFilters({
-                    ...filters,
-                    release: value
-                  })
-                }}
-                disabled={search !== ''}
-                allowAll={true}
-                noRelease={true}
-              />
-            </FormControl>
-            <FormControl sx={{ m: 1, minWidth: '200px' }}>
-              <ProductTypeSelect
-                value={filters.product_type}
-                onChange={value => {
-                  setFilters({
-                    ...filters,
-                    product_type: value
-                  })
-                }}
-                disabled={search !== ''}
-                allowAll={true}
-              />
-            </FormControl>
-            {/* TODO: Empurrar o Search para a direita */}
-            <SearchField onChange={query => setSearch(query)} />
-          </Box>
-        </Grid>
-        <Grid item xs={12}>
-          <ProductGrid query={search} filters={filters} />
-        </Grid>
-      </Grid>
+      <Card>
+        <CardContent>
+          <Grid container className={classes.gridContent}>
+            <Grid item xs={12}>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+                <FormControl sx={{ mt: 1, minWidth: '200px' }}>
+                  <ReleaseSelect
+                    value={filters.release}
+                    onChange={value => {
+                      setFilters({
+                        ...filters,
+                        release: value
+                      })
+                    }}
+                    disabled={search !== ''}
+                    allowAll={true}
+                    noRelease={true}
+                  />
+                </FormControl>
+                <FormControl sx={{ m: 1, minWidth: '200px' }}>
+                  <ProductTypeSelect
+                    value={filters.product_type}
+                    onChange={value => {
+                      setFilters({
+                        ...filters,
+                        product_type: value
+                      })
+                    }}
+                    disabled={search !== ''}
+                    allowAll={true}
+                  />
+                </FormControl>
+                {/* TODO: Empurrar o Search para a direita */}
+                <SearchField onChange={query => setSearch(query)} />
+              </Box>
+            </Grid>
+            <Grid item xs={12}>
+              <ProductGrid query={search} filters={filters} />
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
     </Paper>
   )
 }
diff --git a/frontend/styles/pages/products.js b/frontend/styles/pages/products.js
index 458475e..513f915 100644
--- a/frontend/styles/pages/products.js
+++ b/frontend/styles/pages/products.js
@@ -30,9 +30,7 @@ const useStyles = makeStyles(theme => ({
   },
   gridContent: {
     display: 'flex',
-    flexFlow: 'row wrap',
-    margin: theme.spacing(2)
-    // height: 'calc(100% - 65px)'
+    flexFlow: 'row wrap'
   }
 }))
 

From ba5271024b165474b2667e1e3d7fb76231f2fe70 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 18 Jul 2023 18:37:22 -0300
Subject: [PATCH 11/14] added condition to remove 'share' when status is
 different from published

---
 frontend/components/ProductDetail.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index c500899..27e839c 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -243,16 +243,20 @@ export default function ProductDetail({ productId, internalName }) {
                 spacing={2}
               >
                 <Typography variant="h4">{product.display_name}</Typography>
-                <IconButton onClick={handleShareDialogOpen}>
-                  <ShareIcon />
-                </IconButton>
-                {product.official_product === true && (
-                  <Chip
-                    variant="outlined"
-                    color="success"
-                    label="Official Product"
-                    icon={<VerifiedIcon />}
-                  />
+                {product.status === 1 && (
+                  <>
+                    <IconButton onClick={handleShareDialogOpen}>
+                      <ShareIcon />
+                    </IconButton>
+                    {product.official_product && (
+                      <Chip
+                        variant="outlined"
+                        color="success"
+                        label="Official Product"
+                        icon={<VerifiedIcon />}
+                      />
+                    )}
+                  </>
                 )}
               </Stack>
               <Stack

From 440515e5854812dfb335a830745f7f66a0dca797 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Wed, 19 Jul 2023 15:56:42 -0300
Subject: [PATCH 12/14] remov interference btw share & chip

---
 frontend/components/ProductDetail.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 27e839c..2ffbd0b 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -244,19 +244,17 @@ export default function ProductDetail({ productId, internalName }) {
               >
                 <Typography variant="h4">{product.display_name}</Typography>
                 {product.status === 1 && (
-                  <>
-                    <IconButton onClick={handleShareDialogOpen}>
-                      <ShareIcon />
-                    </IconButton>
-                    {product.official_product && (
-                      <Chip
-                        variant="outlined"
-                        color="success"
-                        label="Official Product"
-                        icon={<VerifiedIcon />}
-                      />
-                    )}
-                  </>
+                  <IconButton onClick={handleShareDialogOpen}>
+                    <ShareIcon />
+                  </IconButton>
+                )}
+                {product.official_product === true && (
+                  <Chip
+                    variant="outlined"
+                    color="success"
+                    label="Official Product"
+                    icon={<VerifiedIcon />}
+                  />
                 )}
               </Stack>
               <Stack

From f5da7b8a88518b93d82ca437849109c1cdf667c8 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Fri, 21 Jul 2023 12:24:52 -0300
Subject: [PATCH 13/14] adding Dialog share to a new file

---
 frontend/components/ProductDetail.js | 72 ++++++----------------------
 frontend/components/ProductGrid.js   | 67 ++++++--------------------
 frontend/components/ProductShare.js  | 71 +++++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 111 deletions(-)
 create mode 100644 frontend/components/ProductShare.js

diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 2ffbd0b..1c6562e 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -1,31 +1,25 @@
+import ShareIcon from '@mui/icons-material/Share'
 import VerifiedIcon from '@mui/icons-material/Verified'
 import LoadingButton from '@mui/lab/LoadingButton'
 import {
-  Button,
-  IconButton,
-  Snackbar,
   Box,
   Card,
   CardContent,
   CardHeader,
   Chip,
-  Dialog,
-  DialogContent,
-  DialogTitle,
   Divider,
   Grid,
+  IconButton,
   List,
   ListItem,
   ListItemText,
   Paper,
+  Snackbar,
   Stack,
-  TextField,
   Typography
 } from '@mui/material'
-import DialogActions from '@mui/material/DialogActions'
-import InputAdornment from '@mui/material/InputAdornment'
-import ShareIcon from '@mui/icons-material/Share'
 import Alert from '@mui/material/Alert'
+import ProductShare from './ProductShare'
 
 import moment from 'moment'
 import prettyBytes from 'pretty-bytes'
@@ -51,7 +45,8 @@ export default function ProductDetail({ productId, internalName }) {
   const [notFound, setNotFound] = React.useState(false)
   const [isDownloading, setDownloading] = React.useState(false)
   const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
-  const [shareUrl, setShareUrl] = React.useState('')
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false)
+  const productShareRef = React.useRef(null)
 
   const loadProductById = React.useCallback(async () => {
     setLoading(true)
@@ -184,24 +179,8 @@ export default function ProductDetail({ productId, internalName }) {
     )
   }
 
-  const [snackbarOpen, setSnackbarOpen] = React.useState(false)
-
-  const showSnackbar = () => {
-    setSnackbarOpen(true)
-  }
-
   const handleShareDialogOpen = () => {
-    setShareDialogOpen(true)
-    setShareUrl(window.location.href)
-  }
-
-  const handleShareDialogClose = () => {
-    setShareDialogOpen(false)
-  }
-
-  const handleCopyUrl = () => {
-    navigator.clipboard.writeText(shareUrl)
-    showSnackbar()
+    setShareDialogOpen(!shareDialogOpen)
   }
 
   if (isLoading) return <Loading isLoading={isLoading} />
@@ -278,36 +257,13 @@ export default function ProductDetail({ productId, internalName }) {
               {product.description !== '' && (
                 <Typography variant="body1">{product.description}</Typography>
               )}
-              <Dialog
-                open={shareDialogOpen}
-                onClose={handleShareDialogClose}
-                PaperProps={{
-                  style: { width: '500px', minHeight: '150px' }
-                }}
-              >
-                <DialogTitle style={{ fontSize: '16px' }}>
-                  Copy the download URL:
-                </DialogTitle>
-                <DialogContent>
-                  <TextField
-                    fullWidth
-                    variant="outlined"
-                    value={shareUrl}
-                    InputProps={{
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          <Button variant="contained" onClick={handleCopyUrl}>
-                            Copy
-                          </Button>
-                        </InputAdornment>
-                      )
-                    }}
-                  />
-                </DialogContent>
-                <DialogActions>
-                  <Button onClick={handleShareDialogClose}>Close</Button>
-                </DialogActions>
-              </Dialog>
+              <ProductShare
+                isOpen={shareDialogOpen}
+                handleShareDialogOpen={handleShareDialogOpen}
+                url={window.location.href}
+                setParentSnackbarOpen={setSnackbarOpen}
+                productShareRef={productShareRef}
+              />
             </Paper>
           </Grid>
           <Grid item xs={4}>
diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index 20b1418..b69961c 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -1,16 +1,10 @@
 /* eslint-disable multiline-ternary */
 import DeleteIcon from '@mui/icons-material/Delete'
 import DownloadIcon from '@mui/icons-material/Download'
-import { Button } from '@mui/material'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
-import Snackbar from '@mui/material/Snackbar'
+import ShareIcon from '@mui/icons-material/Share'
 import Alert from '@mui/material/Alert'
 import Link from '@mui/material/Link'
-import ShareIcon from '@mui/icons-material/Share'
-import TextField from '@mui/material/TextField'
+import Snackbar from '@mui/material/Snackbar'
 import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid'
 import moment from 'moment'
 import { useRouter } from 'next/router'
@@ -19,6 +13,7 @@ import * as React from 'react'
 import { getProducts } from '../services/product'
 
 import ProductRemove from '../components/ProductRemove'
+import ProductShare from './ProductShare'
 
 export default function ProductGrid(props) {
   const router = useRouter()
@@ -31,29 +26,15 @@ export default function ProductGrid(props) {
   ])
   const [loading, setLoading] = React.useState(false)
   const [delRecordId, setDelRecordId] = React.useState(null)
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
   const [selectedFileUrl, setSelectedFileUrl] = React.useState('')
   const [copySnackbarOpen, setCopySnackbarOpen] = React.useState(false)
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false)
+  const productShareRef = React.useRef(null)
 
   const handleSortModelChange = newModel => {
     setSortModel(newModel)
   }
 
-  const handleCopyUrl = () => {
-    navigator.clipboard
-      .writeText(selectedFileUrl)
-      .then(() => {
-        setCopySnackbarOpen(true)
-      })
-      .catch(error => {
-        console.error(error)
-      })
-  }
-
-  const handleCloseShareDialog = () => {
-    setShareDialogOpen(false)
-  }
-
   const handleCloseCopySnackbar = () => {
     setCopySnackbarOpen(false)
   }
@@ -111,7 +92,7 @@ export default function ProductGrid(props) {
     const handleShare = row => {
       const downloadUrl = getDownloadUrl(row)
       setSelectedFileUrl(downloadUrl)
-      setShareDialogOpen(true)
+      setSnackbarOpen(true)
     }
 
     return [
@@ -215,33 +196,13 @@ export default function ProductGrid(props) {
         hideFooterSelectedRowCount
       />
 
-      <Dialog
-        open={shareDialogOpen}
-        onClose={handleCloseShareDialog}
-        PaperProps={{
-          style: { width: '500px', minHeight: '150px' }
-        }}
-      >
-        <DialogContent>
-          <DialogContentText>Copy the download URL:</DialogContentText>
-          <TextField
-            fullWidth
-            variant="outlined"
-            value={selectedFileUrl}
-            InputProps={{
-              endAdornment: (
-                <Button variant="contained" onClick={handleCopyUrl}>
-                  Copy
-                </Button>
-              )
-            }}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCloseShareDialog}>Close</Button>
-        </DialogActions>
-      </Dialog>
-
+      <ProductShare
+        isOpen={snackbarOpen}
+        handleShareDialogOpen={() => setSnackbarOpen(!snackbarOpen)}
+        url={selectedFileUrl}
+        setParentSnackbarOpen={setCopySnackbarOpen}
+        productShareRef={productShareRef}
+      />
       {delRecordId && (
         <ProductRemove
           open={Boolean(delRecordId)}
@@ -276,4 +237,4 @@ ProductGrid.propTypes = {
 ProductGrid.defaultProps = {
   filters: {},
   query: ''
-}
+}
\ No newline at end of file
diff --git a/frontend/components/ProductShare.js b/frontend/components/ProductShare.js
new file mode 100644
index 0000000..fd0300b
--- /dev/null
+++ b/frontend/components/ProductShare.js
@@ -0,0 +1,71 @@
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    TextField
+} from '@mui/material'
+import DialogActions from '@mui/material/DialogActions'
+import InputAdornment from '@mui/material/InputAdornment'
+
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export default function ProductShare({
+    isOpen,
+    handleShareDialogOpen,
+    url,
+    setParentSnackbarOpen
+}) {
+    const handleCopyUrl = () => {
+        navigator.clipboard
+            .writeText(url)
+            .then(() => {
+                handleShareDialogOpen()
+                setParentSnackbarOpen(true)
+            })
+            .catch(error => {
+                console.error(error)
+            })
+    }
+
+    return (
+        <Dialog
+            open={isOpen}
+            onClose={handleShareDialogOpen}
+            PaperProps={{
+                style: { width: '500px', minHeight: '150px' }
+            }}
+        >
+            <DialogTitle style={{ fontSize: '16px' }}>
+                Copy the download URL:
+            </DialogTitle>
+            <DialogContent>
+                <TextField
+                    fullWidth
+                    variant="outlined"
+                    value={url}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <Button variant="contained" onClick={handleCopyUrl}>
+                                    Copy
+                                </Button>
+                            </InputAdornment>
+                        )
+                    }}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleShareDialogOpen}>Close</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+ProductShare.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    handleShareDialogOpen: PropTypes.func.isRequired,
+    url: PropTypes.string,
+    setParentSnackbarOpen: PropTypes.func.isRequired
+}
\ No newline at end of file

From b2dc556153129184d69bb7502d9290fc5962587f Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Fri, 21 Jul 2023 16:04:08 -0300
Subject: [PATCH 14/14] lint adjusts

---
 frontend/components/ProductGrid.js  |   2 +-
 frontend/components/ProductShare.js | 114 ++++++++++++++--------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/components/ProductGrid.js b/frontend/components/ProductGrid.js
index b69961c..b334ea7 100644
--- a/frontend/components/ProductGrid.js
+++ b/frontend/components/ProductGrid.js
@@ -237,4 +237,4 @@ ProductGrid.propTypes = {
 ProductGrid.defaultProps = {
   filters: {},
   query: ''
-}
\ No newline at end of file
+}
diff --git a/frontend/components/ProductShare.js b/frontend/components/ProductShare.js
index fd0300b..3540811 100644
--- a/frontend/components/ProductShare.js
+++ b/frontend/components/ProductShare.js
@@ -1,9 +1,9 @@
 import {
-    Button,
-    Dialog,
-    DialogContent,
-    DialogTitle,
-    TextField
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  TextField
 } from '@mui/material'
 import DialogActions from '@mui/material/DialogActions'
 import InputAdornment from '@mui/material/InputAdornment'
@@ -12,60 +12,60 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 export default function ProductShare({
-    isOpen,
-    handleShareDialogOpen,
-    url,
-    setParentSnackbarOpen
+  isOpen,
+  handleShareDialogOpen,
+  url,
+  setParentSnackbarOpen
 }) {
-    const handleCopyUrl = () => {
-        navigator.clipboard
-            .writeText(url)
-            .then(() => {
-                handleShareDialogOpen()
-                setParentSnackbarOpen(true)
-            })
-            .catch(error => {
-                console.error(error)
-            })
-    }
+  const handleCopyUrl = () => {
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        handleShareDialogOpen()
+        setParentSnackbarOpen(true)
+      })
+      .catch(error => {
+        console.error(error)
+      })
+  }
 
-    return (
-        <Dialog
-            open={isOpen}
-            onClose={handleShareDialogOpen}
-            PaperProps={{
-                style: { width: '500px', minHeight: '150px' }
-            }}
-        >
-            <DialogTitle style={{ fontSize: '16px' }}>
-                Copy the download URL:
-            </DialogTitle>
-            <DialogContent>
-                <TextField
-                    fullWidth
-                    variant="outlined"
-                    value={url}
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <Button variant="contained" onClick={handleCopyUrl}>
-                                    Copy
-                                </Button>
-                            </InputAdornment>
-                        )
-                    }}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={handleShareDialogOpen}>Close</Button>
-            </DialogActions>
-        </Dialog>
-    )
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleShareDialogOpen}
+      PaperProps={{
+        style: { width: '500px', minHeight: '150px' }
+      }}
+    >
+      <DialogTitle style={{ fontSize: '16px' }}>
+        Copy the download URL:
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          fullWidth
+          variant="outlined"
+          value={url}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <Button variant="contained" onClick={handleCopyUrl}>
+                  Copy
+                </Button>
+              </InputAdornment>
+            )
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleShareDialogOpen}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
 }
 
 ProductShare.propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    handleShareDialogOpen: PropTypes.func.isRequired,
-    url: PropTypes.string,
-    setParentSnackbarOpen: PropTypes.func.isRequired
-}
\ No newline at end of file
+  isOpen: PropTypes.bool.isRequired,
+  handleShareDialogOpen: PropTypes.func.isRequired,
+  url: PropTypes.string,
+  setParentSnackbarOpen: PropTypes.func.isRequired
+}