task-7-hotfix

256sha9gag · Sep 1, 2023 · 099eed6 · 099eed6
1 parent 49d0069
commit 099eed6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 67 deletions.
diff --git a/src/components/Layout/AddNote/AddNote.jsx b/src/components/Layout/AddNote/AddNote.jsx
@@ -9,7 +9,6 @@ import Button from '../../Button/Button';
 import Textarea from './Textarea/Textarea';
 import ImagesList from './ImagesList/ImagesList';
 import {useAppContext} from '../../../context/AppContext';
-import {debounce} from "../../../utils/debounce";
 import {NotesContext} from "../../../App";
 import {generateRandomString} from "../../../utils/generateRandomString";
 
@@ -24,6 +23,7 @@ function AddNote() {
 	const {setActiveComponent} = useAppContext();
 	const [isImageChooseOpen, setIsImageChooseOpen] = useState(false);
 	const imageThumbnail = useRef(null)
+	const hiddenImg = useRef(null)
 
 	const submitHandler = () => {
 		if (selectedItem && titleValue.trim() && dateValue.trim() && emoji.trim() && textValue.trim()) {
@@ -51,38 +51,26 @@ function AddNote() {
 	const handleLogoClick = () => {
 		setActiveComponent('Main');
 	};
-	const resizeImageThumb = debounce(() => {
-		if (selectedItem && imageThumbnail.current.children[0].tagName === 'IMG') {
-			imageThumbnail.current.children[0].style.width = 'unset'
-			imageThumbnail.current.children[0].style.height = 'unset'
-			const aspectRatio = imageThumbnail.current.children[0].offsetWidth / imageThumbnail.current.children[0].offsetHeight
-			if (aspectRatio > 1) {
-				imageThumbnail.current.style.aspectRatio = '28/19'
-				imageThumbnail.current.style.width = '100%'
-				imageThumbnail.current.style.height = 'unset'
-				imageThumbnail.current.children[0].style.width = '100%'
-				imageThumbnail.current.children[0].style.height = '100%'
 
+	useEffect(() => {
+		if (imageThumbnail.current){
+			if (hiddenImg.current){
+				if (hiddenImg.current.offsetWidth / hiddenImg.current.offsetHeight < 1){
+					hiddenImg.current.parentNode.style.aspectRatio = '28/40'
+					hiddenImg.current.parentNode.style.width = '100%'
+					hiddenImg.current.parentNode.style.height = 'unset'
+				} else {
+					hiddenImg.current.parentNode.style.aspectRatio = '28/19'
+					hiddenImg.current.parentNode.style.width = '100%'
+					hiddenImg.current.parentNode.style.height = 'unset'
+				}
 			} else {
-				imageThumbnail.current.style.aspectRatio = '28/40'
-				imageThumbnail.current.style.width = '100%'
-				imageThumbnail.current.style.height = 'unset'
-				imageThumbnail.current.children[0].style.width = '100%'
-				imageThumbnail.current.children[0].style.height = '100%'
+				imageThumbnail.current.style.aspectRatio = 'unset'
+				imageThumbnail.current.style.height = '160px'
+				imageThumbnail.current.style.width = 'unset'
 			}
-		} else {
-			imageThumbnail.current.style.height = '160px'
-			imageThumbnail.current.style.aspectRatio = 'unset'
-			imageThumbnail.current.style.width = 'unset'
 		}
-	})
-
-	useEffect(() => {
-		resizeImageThumb()
-		window.removeEventListener('resize', resizeImageThumb)
-		window.addEventListener('resize', resizeImageThumb)
-		return window.removeEventListener('resize', resizeImageThumb)
-	}, [selectedItem, resizeImageThumb])
+	}, [selectedItem, imageThumbnail])
 
 	return (<>
 			{isImageChooseOpen && (<div className={styles.chooseWrapper} onClick={toggleOpen}>
@@ -131,7 +119,10 @@ function AddNote() {
 							</div>
 						</div>
 						<div ref={imageThumbnail} className={styles.imageChoose} onClick={toggleChooseOpen}>
-							{selectedItem ? <img src={selectedItem.photo} alt={selectedItem.title}/> : <>
+							{selectedItem ? <>
+								<img className={styles.imgThumb} src={selectedItem.photo} alt={selectedItem.title}/>
+								<img className={styles.hiddenImg} ref={hiddenImg} src={selectedItem.photo} alt={selectedItem.title}/>
+							</> : <>
 								<svg
 									xmlns='http://www.w3.org/2000/svg'
 									width='20'

diff --git a/src/components/Layout/AddNote/AddNote.module.css b/src/components/Layout/AddNote/AddNote.module.css
@@ -58,6 +58,7 @@
 }
 
 .imageChoose {
+  position: relative;
   display: none;
   height: 160px;
   min-width: 220px;
@@ -68,10 +69,13 @@
   cursor: pointer;
   transition: all .5s;
 }
-.imageChoose img {
+.imgThumb{
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
+
 .chooseWrapper {
   opacity: 1;
   transition: all .5s;
@@ -235,4 +239,12 @@
 .footerButtonsMobile .addNoteButton {
   width: 130px;
 }
+.hiddenImg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+  opacity: 0;
+}
 
diff --git a/src/components/Layout/AddNote/ImagesList/ImagesItem/ImagesItem.jsx b/src/components/Layout/AddNote/ImagesList/ImagesItem/ImagesItem.jsx
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import styles from './ImagesItem.module.css';
 
 function ImagesItem({note, altText}) {
+	const hiddenImg = useRef(null)
+	useEffect(()=>{
+		if (hiddenImg.current){
+			if (hiddenImg.current.offsetWidth / hiddenImg.current.offsetHeight < 1){
+				hiddenImg.current.parentNode.style.gridRow = 'span 2'
+			}
+		}
+	},[])
 
 
 	return (
 		<>
 			<img className={`${styles.img} `} src={note.photo} alt={altText}/>
+			<img ref={hiddenImg} className={`${styles.hiddenImg} `} src={note.photo} alt={altText}/>
 		</>
 	);
 }

diff --git a/src/components/Layout/AddNote/ImagesList/ImagesItem/ImagesItem.module.css b/src/components/Layout/AddNote/ImagesList/ImagesItem/ImagesItem.module.css
@@ -1,4 +1,6 @@
 .img {
+  width: 100%;
+  height: 100%;
   position: relative;
   border-radius: 12px;
   object-fit: cover;
@@ -19,4 +21,12 @@
   bottom: 0;
 }
 
+.hiddenImg {
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
 
diff --git a/src/components/Layout/AddNote/ImagesList/ImagesList.jsx b/src/components/Layout/AddNote/ImagesList/ImagesList.jsx
@@ -1,7 +1,6 @@
-import React, {useEffect, useRef} from 'react';
+import React, { useRef } from 'react';
 import styles from './ImagesList.module.css';
 import ImagesItem from './ImagesItem/ImagesItem';
-import {debounce} from "../../../../utils/debounce";
 
 function ImagesList({notes, className, gap, setIsImageChooseOpen, selectedItem, setSelectedItem}) {
 
@@ -15,39 +14,7 @@ function ImagesList({notes, className, gap, setIsImageChooseOpen, selectedItem,
 	const gridStyle = {
 		gap: gap ? `${gap}px` : '20px',
 	};
-	const resizeImages = debounce(() => {
-		console.log('resize2')
-		if (list.current) {
-			const children = list.current.children
-			for (let i = 0; i < children.length / 2; i++) {
-				if (children[i].offsetHeight > children[i].offsetWidth) {
-					children[i].style.gridRow = 'span 2'
-					children[i].style.width = '100%'
-				} else {
-					children[i].style.width = '100%'
-					children[i].children[0].style.width = '100%'
-					children[i].style.height = '100%'
-					children[i].children[0].style.height = '100%'
-				}
-				if (children[children.length - 1 - i].offsetHeight > children[i].offsetWidth) {
-					children[children.length - 1 - i].style.gridRow = 'span 2'
-					children[children.length - 1 - i].style.width = '100%'
-				} else {
-					children[children.length - 1 - i].style.width = '100%'
-					children[children.length - 1 - i].children[0].style.width = '100%'
-					children[children.length - 1 - i].style.height = '100%'
-					children[children.length - 1 - i].children[0].style.height = '100%'
-				}
-			}
-		}
-	})
-	useEffect(() => {
-		resizeImages()
-		window.removeEventListener('resize', resizeImages)
-		window.addEventListener('resize', resizeImages)
-	}, [list, resizeImages])
-
-	return (
+		return (
 		<ul ref={list} className={`${styles.imagesGrid} ${className}`} style={gridStyle}>
 			{notes.map((note, index) => (
 				<li key={note.id}