Merge pull request #72 from Snunesnk/ImplementBackBlock

Implement back block

front/package.json

@@ -20,7 +20,6 @@
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
-        "pica": "^9.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.5",

front/src/Components/ChatComponent/index.jsx

@@ -79,7 +79,6 @@ const ChatComponent = ({
             .catch((error) => {
                 console.log(error)
             })
-            console.log(user)
     }, [user])
 
     useEffect(() => {
@@ -117,10 +116,22 @@ const ChatComponent = ({
         <div id="messages_container">
             <div id="chat_header">
                 <div id="person_info">
-                    <ArrowBackIcon onClick={() => {setActiveComponent(components.MESSAGE_LIST)}}/>
-                    <div id="see-profile" onClick={() => setActiveComponent(components.USER_PROFILE)}> 
+                    <ArrowBackIcon
+                        onClick={() => {
+                            setActiveComponent(components.MESSAGE_LIST)
+                        }}
+                    />
+                    <div
+                        id="see-profile"
+                        onClick={() =>
+                            setActiveComponent(components.USER_PROFILE)
+                        }
+                    >
                         <div className="message-img-container">
-                            <img src={ApiService.getImgPath(user.imgA)} alt="profile_pic" />
+                            <img
+                                src={ApiService.getImgPath(user.imgA)}
+                                alt="profile_pic"
+                            />
                         </div>
                         <div className="message_username">{user.name}</div>
                     </div>

front/src/Components/ImageUpload/index.css

@@ -23,6 +23,7 @@
     display: grid;
     width: 100%;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: 10px;
 }
 
 .setting-picture-container {
@@ -56,7 +57,7 @@
     cursor: -webkit-zoom-out;
 }
 
-.user-setting-picture:hover+.setting-picture-delete,
+.user-setting-picture:hover + .setting-picture-delete,
 .setting-picture-container.selected .setting-picture-delete,
 .setting-picture-delete:hover {
     bottom: 0;
@@ -90,4 +91,4 @@
 
 #picture_upload_btn {
     display: none;
-}
+}

front/src/Components/ImageUpload/index.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import './index.css'
 import '../Settings/Settings.css'
 import ApiService from '../../Services/api.service'
-import Pica from 'pica'
 
 const ImageUpload = ({ defaultImages = [], setFileList = () => {} }) => {
     const [imgs, setImgs] = useState(defaultImages)
@@ -26,42 +25,41 @@ const ImageUpload = ({ defaultImages = [], setFileList = () => {} }) => {
         }
     }, [imgRef])
 
+    const resizeImage = (imgFile, maxWidth) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image()
+            img.onload = () => {
+                const canvas = document.createElement('canvas')
+                const ctx = canvas.getContext('2d')
+                const aspectRatio = img.width / img.height
+                canvas.width = maxWidth
+                canvas.height = maxWidth / aspectRatio
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+                canvas.toBlob((blob) => resolve(blob), imgFile.type)
+            }
+            img.onerror = reject
+            img.src = URL.createObjectURL(imgFile)
+        })
+    }
+
     const onChange = async (e) => {
-        const fileList = e.target.files
-        const pica = Pica()
-
-        const resizedImages = await Promise.all(
-            Array.from(fileList).map((file) => {
-                return new Promise((resolve, reject) => {
-                    const img = new Image()
-                    img.onload = () => {
-                        const canvas = document.createElement('canvas')
-                        const maxSide = 600
-                        const scale = Math.min(
-                            maxSide / img.width,
-                            maxSide / img.height
-                        )
-                        canvas.width = img.width * scale
-                        canvas.height = img.height * scale
-
-                        pica.resize(img, canvas)
-                            .then((result) =>
-                                pica.toBlob(result, file.type, 0.9)
-                            )
-                            .then((blob) => resolve(blob))
-                            .catch((error) => reject(error))
-                    }
-                    img.src = URL.createObjectURL(file)
-                })
-            })
-        )
-
-        setFileList((currentFiles) => [...currentFiles, ...resizedImages])
-
-        setImgs((currentImgs) => [
-            ...currentImgs,
-            ...resizedImages.map((blob) => URL.createObjectURL(blob)),
-        ])
+        const fileList = Array.from(e.target.files)
+        const maxWidth = 800 // Set the maximum width for the images
+
+        try {
+            const resizedImages = await Promise.all(
+                fileList.map((file) => resizeImage(file, maxWidth))
+            )
+
+            setFileList((currentFiles) => [...currentFiles, ...resizedImages])
+
+            setImgs((currentImgs) => [
+                ...currentImgs,
+                ...resizedImages.map((blob) => URL.createObjectURL(blob)),
+            ])
+        } catch (error) {
+            console.error('Error resizing images:', error)
+        }
     }
 
     const removeImg = (img) => {
@@ -99,7 +97,7 @@ const ImageUpload = ({ defaultImages = [], setFileList = () => {} }) => {
                     imgs.map((img, i) => {
                         // Create URL if it not a URL
                         const imgUrl =
-                            img.name !== undefined
+                            img instanceof Blob
                                 ? URL.createObjectURL(img)
                                 : ApiService.getImgPath(img)
 

front/src/Components/MessagesContainer/MessagesContainer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import ChatComponent from '../ChatComponent'
 import UserProfile from '../UserProfile/UserProfile'
-import {ArrowBack,} from '@mui/icons-material'
+import { ArrowBack } from '@mui/icons-material'
 import socket from '../../Socket/socket'
 import './MessagesContainer.css'
 import MessagesLeftPane from '../MessagesLeftPane/MessagesLeftPane'
@@ -22,7 +22,7 @@ const handleSocketMessage = (
     setConversations,
     setNewMatches,
     activeUser,
-    setActiveConversation,
+    setActiveConversation
 ) => {
     const matchUser = newMatches.find((match) => match.login === message.from)
     if (matchUser) {
@@ -35,7 +35,9 @@ const handleSocketMessage = (
                 ...matchUser,
                 last_message_content: message.content,
                 last_message_timestamp: new Date(Date.now()),
-                read: activeConversation && activeConversation.login === message.from,
+                read:
+                    activeConversation &&
+                    activeConversation.login === message.from,
             },
             ...prev,
         ])
@@ -92,7 +94,9 @@ const handleSocketStatus = (status, setNewMatches, setConversations) => {
 }
 
 const MessagesContainer = () => {
-    const [activeComponent, setActiveComponent] = useState(COMPONENTS.MESSAGE_LIST)
+    const [activeComponent, setActiveComponent] = useState(
+        COMPONENTS.MESSAGE_LIST
+    )
     const [conversations, setConversations] = useState([])
     const [newMatches, setNewMatches] = useState([])
     const [activeConversation, setActiveConversation] = useState(null)
@@ -104,17 +108,14 @@ const MessagesContainer = () => {
     const user = searchParams.get('user')
 
     const checkForNewMatch = (message) => {
-        if (message.type === 'unlike')
-            setUnlike(message.payload)
+        if (message.type === 'unlike') setUnlike(message.payload)
 
-        if (message.type !== 'match')
-            return
+        if (message.type !== 'match') return
 
         const matchUser = newMatches.find(
             (match) => match.name === message.payload.name
         )
-        if (matchUser)
-            return
+        if (matchUser) return
 
         setNewMatches((prev) => [message.payload, ...prev])
     }
@@ -167,11 +168,38 @@ const MessagesContainer = () => {
     }, [unlike])
 
     useEffect(() => {
-        if (!unlike) return;
+        if (!unlike) return
+        console.log('unlike', unlike)
+
         setActiveComponent(null)
+        // Remove active conversation from conversations if it was unliked
+        if (activeConversation && activeConversation.login === unlike) {
+            setConversations((prev) => {
+                const conversation = prev.find(
+                    (c) => c.login === activeConversation.login
+                )
+                if (conversation) {
+                    const copy = [...prev]
+                    copy.splice(copy.indexOf(conversation), 1)
+                    return copy
+                } else {
+                    return prev
+                }
+            })
+        }
         setActiveConversation(null)
         setActiveUser(null)
-        setConversations([])
+        // Delete match from newMatches if it was unliked
+        setNewMatches((prev) => {
+            const match = prev.find((m) => m.login === unlike)
+            if (match) {
+                const copy = [...prev]
+                copy.splice(copy.indexOf(match), 1)
+                return copy
+            } else {
+                return prev
+            }
+        })
     }, [unlike])
 
     useEffect(() => {
@@ -201,10 +229,8 @@ const MessagesContainer = () => {
         }
     }, [socket, newMatches, activeConversation])
 
-
     useEffect(() => {
-        if (!activeConversation) 
-            return
+        if (!activeConversation) return
 
         setConversations((prev) => {
             const conversation = prev.find(
@@ -220,8 +246,6 @@ const MessagesContainer = () => {
 
         ApiService.get('/user/' + activeConversation.login)
             .then((data) => {
-                console.log(data)
-                console.log(activeConversation)
                 setActiveUser(data)
             })
             .catch((error) => {
@@ -253,7 +277,8 @@ const MessagesContainer = () => {
     return (
         <div id="message-pannel">
             <div id="messages_component_container">
-                <div id="chat_list_container"
+                <div
+                    id="chat_list_container"
                     data-active={
                         activeComponent === COMPONENTS.MESSAGE_LIST ||
                         activeComponent === COMPONENTS.NOTIFICATION
@@ -267,7 +292,8 @@ const MessagesContainer = () => {
                         setActiveComponent={setActiveComponent}
                     />
                 </div>
-                <div id="chat_container"
+                <div
+                    id="chat_container"
                     data-active={activeComponent === COMPONENTS.CHAT}
                     className="responsive-component"
                 >
@@ -292,12 +318,22 @@ const MessagesContainer = () => {
                 >
                     {activeUser ? (
                         <>
-                            <UserProfile user={activeUser} unlikable={true} setUnlike={setUnlike} />
+                            <UserProfile
+                                user={activeUser}
+                                unlikable={true}
+                                setUnlike={setUnlike}
+                            />
                             <div className="user-profile-go-back">
-                                <ArrowBack onClick={() => {setActiveComponent(COMPONENTS.CHAT)}}/>
+                                <ArrowBack
+                                    onClick={() => {
+                                        setActiveComponent(COMPONENTS.CHAT)
+                                    }}
+                                />
                             </div>
                         </>
-                        ) : (<></>)}
+                    ) : (
+                        <></>
+                    )}
                 </div>
             </div>
         </div>

front/src/Components/ProfileMatching/index.css

@@ -34,6 +34,10 @@
     .card_img_container {
         min-height: calc(90dvh - 50px - 68px);
     }
+
+    .match-animation {
+        height: calc(100dvh - 68px);
+    }
 }
 
 #profile_matching-container {
@@ -188,7 +192,8 @@
     height: fit-content;
 }
 
-.profile_matching_btn:hover {}
+.profile_matching_btn:hover {
+}
 
 .profile_matching_btn:active {
     transform: scale(0.9);
@@ -230,13 +235,15 @@
     z-index: 10;
     top: 0;
     width: 100%;
-    height: calc(100dvh - 68px);
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: linear-gradient(to bottom,
-            rgba(0, 0, 0, 0.5) 0%,
-            rgba(32, 6, 24, 1) 70%);
+    background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.5) 0%,
+        rgba(32, 6, 24, 1) 70%
+    );
     animation: match-animation 700ms ease-in;
 }
 
@@ -373,4 +380,4 @@
 .no-match p {
     font-size: 1.5rem;
     font-weight: 600;
-}
+}