Skip to content

Commit

Permalink
fix: the search error is taken care
Browse files Browse the repository at this point in the history
  • Loading branch information
Your Name committed Aug 12, 2023
1 parent eb38ae1 commit 299549e
Showing 1 changed file with 59 additions and 86 deletions.
145 changes: 59 additions & 86 deletions src/components/Card/GridView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import '../../styles/GridView.css'
import { toast } from 'react-hot-toast'

const GridView = ({ currentProducts }) => {
const { handelBookmarkAdd, bookmarks, deleteres, darkMode } =
useContext(ToolContext)
const { handelBookmarkAdd, bookmarks, deleteres, darkMode } = useContext(ToolContext)

const handleShareClick = async (product) => {
try {
Expand Down Expand Up @@ -38,100 +37,74 @@ const GridView = ({ currentProducts }) => {

return (
<main className={`grid ${darkMode ? 'dark-mode' : ''}`}>
{currentProducts.map((product, index) => {
const [imageWidth, setImageWidth] = useState(null)

useEffect(() => {
// Create an Image object
const image = new Image()

// Set up a listener for the image's onload event
image.onload = () => {
setImageWidth(image.height)
}

// Set the image source URL to trigger the onload event
image.src = product.image
}, [product.image])



return (
<article key={index}>
<div className="text_top">
{product.image ? (
<div className={`card-image ${imageWidth && imageWidth!==null < 350 && "tag"}`}>
<img
className={` ${darkMode ? 'dark-mode' : ''} ${ imageWidth && imageWidth!==null < 350 && "zoomImg"}`}
src={product.image}
alt="product-img"
onError={(e) => {
e.target.src = 'https://i.ibb.co/9H0s34n/default-img.jpg'
}}
/>
</div>
) : (
{currentProducts.map((product, index) => (
<article key={index}>
<div className="text_top">
{product.image ? (
<div className='card-image'>
<img
className={`card-image ${darkMode ? 'dark-mode' : ''}`}
src="https://i.ibb.co/9H0s34n/default-img.jpg"
alt="Default"
/>
)}
<h2 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>
{product.productName.charAt(0).toUpperCase() +
product.productName.slice(1)}
</h2>
className={`${darkMode ? 'dark-mode' : ''}`}
src={product.image}
alt="product-img"
onError={(e) => {
e.target.src = 'https://i.ibb.co/9H0s34n/default-img.jpg';
}}
/>
</div>
) : (
<img
className={`card-image ${darkMode ? 'dark-mode' : ''}`}
src="https://i.ibb.co/9H0s34n/default-img.jpg"
alt="Default"
/>
)}
<h2 className={`card-title ${darkMode ? 'dark-mode' : ''}`}>{product.productName.charAt(0).toUpperCase() + product.productName.slice(1,)}</h2>

{/* Share icon and implement the click event */}
<button
className={`share-icon`}
onClick={() => handleShareClick(product)}
{/* Share icon and implement the click event */}
<button
className={`share-icon`}
onClick={() => handleShareClick(product)}
>
<i
className="ri-share-line"
style={{ color: darkMode ? 'white' : '' }}
></i>
</button>
</div>
<p className={`card-description ${darkMode ? 'dark-mode' : ''}`}>{product.description}</p>
<div className="btn-cont">
<a target="_blank" href={product.link}>
<button className={`visit ${darkMode ? 'dark-mode' : ''}`}>
<font size="4">
Visit
</font>
</button>
</a>
{bookmarks.some(
(obj) => obj['productName'] === product.productName
) ? (
<button className={`delete ${darkMode ? 'dark-mode' : ''}`} onClick={(event) => {
event.stopPropagation();
deleteres(product);
}}
>
<i
className="ri-share-line"
style={{ color: darkMode ? 'white' : '' }}
></i>
Delete<i className={`ri-bookmark-fill ${darkMode ? 'dark-mode' : ''}`}></i>
</button>
</div>
<p className={`card-description ${darkMode ? 'dark-mode' : ''}`}>
{product.description}
</p>
<div className="btn-cont">
<a target="_blank" href={product.link}>
<button className={`visit ${darkMode ? 'dark-mode' : ''}`}>
<font size="4">Visit</font>
</button>
</a>
{bookmarks.some(
(obj) => obj['productName'] === product.productName
) ? (
<button
className={`delete ${darkMode ? 'dark-mode' : ''}`}
onClick={() => {
deleteres(product)
}}
>
Delete
<i
className={`ri-bookmark-fill ${
darkMode ? 'dark-mode' : ''
}`}
></i>
</button>
) : (
) : (
<button
className={`bookmark ${darkMode ? 'dark-mode' : ''}`}
onClick={() => handelBookmarkAdd(product)}
>
<font size="4">Bookmark</font>
<font size="4">
Bookmark
</font>
</button>
)}
</div>
</article>
)
})}
)}
</div>
</article>
))}
</main>
)
);
}

export default GridView

1 comment on commit 299549e

@vercel
Copy link

@vercel vercel bot commented on 299549e Aug 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

free-hit – ./

free-hit.vercel.app
free-hit-jasondsouza212.vercel.app
free-hit-git-main-jasondsouza212.vercel.app

Please sign in to comment.