From ddfdc29c1f1dd23671bd8de2150a405d4eb0ddda Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Thu, 3 Nov 2022 17:18:57 +0100
Subject: [PATCH] add picture preview for new message

---
 client/src/components/NewMessage.tsx | 108 +++++++++++++++++----------
 1 file changed, 68 insertions(+), 40 deletions(-)

diff --git a/client/src/components/NewMessage.tsx b/client/src/components/NewMessage.tsx
index c6da596..9ec1ca3 100644
--- a/client/src/components/NewMessage.tsx
+++ b/client/src/components/NewMessage.tsx
@@ -1,12 +1,22 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { FaPlus } from 'react-icons/fa';
+import { FaPlus, FaTimes } from 'react-icons/fa';
 import { newMessage } from '@controllers/MessageController';
 
 const NewMessage = () => {
   const [message, setMessage] = useState('');
   const [image, setImage] = useState('');
   const queryClient = useQueryClient();
+  const [preview, setPreview] = useState('');
+
+  const handleImageSelect = (e: any) => {
+    setImage(e.target.value);
+    const file = e.target.files[0];
+    if (file) {
+      const src = URL.createObjectURL(file);
+      setPreview(src);
+    }
+  };
 
   const { mutate: send } = useMutation(newMessage, {
     onSuccess: () => {
@@ -26,51 +36,69 @@ const NewMessage = () => {
     send(data);
     setMessage('');
     setImage('');
+    setPreview('');
+  };
+
+  const handleRemoveImage = () => {
+    setImage('');
+    setPreview('');
   };
 
   return (
     <footer className="new-message z-10 flex justify-center w-full">
-      <form
-        onSubmit={handleSubmit}
-        className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark"
-      >
-        <div className="file">
-          <label htmlFor="image" className="cursor-pointer block p-2">
-            <span className="rounded-full text-grey-dark bg-red-light text-lg p-2 block">
-              <FaPlus className="" />
+      <div className="w-full max-w-3xl">
+        {preview !== '' && (
+          <div className="image-preview w-fit rounded-xl bg-grey-dark p-3 absolute bottom-20 shadow-md shadow-grey-dark">
+            <img src={preview} alt="Image" className="rounded-lg max-w-xs max-h-48" />
+            <span className="rounded-full text-grey-light bg-grey-dark text-lg p-2 block absolute -top-4 -right-4 cursor-pointer shadow-md shadow-slate-800 hover:text-grey-dark hover:bg-grey-light transition-all" onClick={handleRemoveImage}>
+              <FaTimes className="" />
             </span>
-            <span className="sr-only">Ajouter une image</span>
-          </label>
-          <input
-            type="file"
-            name="image"
-            id="image"
-            accept="image/*"
-            className="hidden"
-            {...(image !== '' && { value: image })}
-            onChange={(e) => setImage(e.target.value)}
-          />
-        </div>
-
-        <input
-          type="text"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          placeholder="Message"
-          className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
-          id="content"
-          name="content"
-        />
-        <label htmlFor="content" className="sr-only">
-          Message
-        </label>
-        <button
-          type="submit"
-          className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+          </div>
+        )}
+        <form
+          onSubmit={handleSubmit}
+          className="flex gap-2 flex-wrap bg-grey-dark rounded-xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark"
         >
-          Envoyer
-        </button>
-      </form>
+          <div className="file">
+            <label htmlFor="image" className="cursor-pointer block p-2">
+              <span className="rounded-full text-grey-dark bg-red-light text-lg p-2 block">
+                <FaPlus className="" />
+              </span>
+              <span className="sr-only">Ajouter une image</span>
+            </label>
+            <input
+              type="file"
+              name="image"
+              id="image"
+              accept="image/*"
+              className="hidden"
+              {...(image !== '' && { value: image })}
+              onChange={handleImageSelect}
+            />
+          </div>
+
+          <div className="new-message flex-grow">
+            <input
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Message"
+              className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
+              id="content"
+              name="content"
+            />
+            <label htmlFor="content" className="sr-only">
+              Message
+            </label>
+          </div>
+          <button
+            type="submit"
+            className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+          >
+            Envoyer
+          </button>
+        </form>
+      </div>
     </footer>
   );
 };