fixed emoji picking issue while editing a todo item

Author: Sabbirhossain97

components/AllTasks.jsx

@@ -76,6 +76,11 @@ export default function AllTasks({ user, todoList, setLoading }) {
         return item;
       }
     });
+    setUpdates({
+      title: result[0].title,
+      status: result[0].status,
+      isImportant: result[0].isImportant
+    });
     setCurrentItem(result);
   };
 
@@ -90,9 +95,9 @@ export default function AllTasks({ user, todoList, setLoading }) {
   };
 
   const onEmojiClick = (emojiObject) => {
-    setUpdates((prevUpdates) => ({
-      ...prevUpdates,
-      title: prevUpdates.title + emojiObject.emoji,
+    setUpdates((currentItem) => ({
+      ...currentItem,
+      title: currentItem.title + emojiObject.emoji,
     }));
     setShowEmojiPicker(false);
   };
@@ -115,7 +120,7 @@ export default function AllTasks({ user, todoList, setLoading }) {
 
   return (
     <>
-      <ul className=" transition duration-300 ease-out">
+      <ul className="transition duration-300 ease-out ">
         {todoList ? (
           todoList.length === 0 ? (
             <motion.div
@@ -163,9 +168,9 @@ export default function AllTasks({ user, todoList, setLoading }) {
                       transition={{ delay: 0.25 }}
                     >
                       <div className="flex gap-2">
-                        <div className={`${item.status === "completed" && 'border-gray-600'} relative w-11/12 h-auto p-2 bg-transparent transition ${edit && item.id === currentItem?.[0]?.id ? "border-cyan-400 border-b-2" : "border-cyan-600 border-b"}  flex justify-start items-center px-1`}>
+                        <div className={`${item.status === "completed" && 'border-gray-600'} relative min-w-[400px] w-11/12 h-auto p-2 bg-transparent transition ${edit && item.id === currentItem?.[0]?.id ? "border-cyan-400 border-b-2" : "border-cyan-600 border-b"} flex justify-start items-center px-1`}>
                           <div className="flex items-center gap-1">
-                           {!edit && item.id === currentItem?.[0]?.id} <Popconfirm
+                            {!edit && item.id === currentItem?.[0]?.id} <Popconfirm
                               title={item.isImportant ? "Mark as not important" : "Mark as important"}
                               onConfirm={() => handleToggleImportant(item.isImportant, item)}
                               onCancel={cancel}
@@ -189,7 +194,6 @@ export default function AllTasks({ user, todoList, setLoading }) {
                           {edit && item.id === currentItem[0].id ? (
                             <>
                               <input
-                                defaultValue={item.title}
                                 value={updates.title}
                                 onChange={(e) => {
                                   setUpdates((prevUpdates) => {
@@ -213,14 +217,13 @@ export default function AllTasks({ user, todoList, setLoading }) {
                                   exit={{ opacity: 0 }}
                                   transition={{ delay: 0.50 }}
                                   className="absolute right-6 top-10 z-10" ref={pickerRef}>
-                                  <Picker
-                                    onEmojiClick={onEmojiClick} />
+                                  <Picker onEmojiClick={onEmojiClick} />
                                 </motion.div>
                               }
                             </>
                           ) : (
                             <motion.p
-                              className={`${item.status === "completed" ? 'line-through text-gray-400' : ""} decoration-white decoration-3 text-sm mt-0.5 ml-2 text-gray-300 font-semibold`}
+                              className={`${item.status === "completed" ? 'line-through text-gray-400' : ""} overflow-hidden line-clamp-3 decoration-white decoration-3 text-sm mt-0.5 ml-2 text-gray-300 break-words ... font-semibold`}
                               initial={{ opacity: 0, y: 5 }}
                               animate={{ opacity: 1, y: 0 }}
                               exit={{ opacity: 0, x: 5 }}

helpers/hooks/useAuth.js

@@ -1,8 +1,14 @@
 import { auth } from '../../server/firebase';
 import { useAuthState } from "react-firebase-hooks/auth";
+import Cookies from 'js-cookie';
 
 const useAuth = () => {
     const [user, laoding, error] = useAuthState(auth);
+    if(user){
+        Cookies.set('token', user.accessToken)
+    } else [
+        Cookies.remove('token')
+    ]
     return user;
 };
 

src/app/Home/page.js

@@ -138,7 +138,7 @@ export default function Home() {
       >
         <Header />
         <User />
-        <div className="h-[700px] mt-10 transition-all w-11/12 md:w-3/4 lg:w-2/3 xl:w-2/3 2xl:w-1/2  bg-slate-900  rounded-lg p-10 drop-shadow-md shadow-cyan-800">
+        <div className="h-[700px] pt-10 transition-all w-full sm:w-11/12 md:w-3/4 lg:w-2/3 xl:w-2/3 2xl:w-1/2 sm:bg-slate-900 rounded-lg p-4 sm:p-10 drop-shadow-md shadow-cyan-800">
           <div className="mt-3 text-sm  text-white flex justify-between items-center">
             <p className=" font-semibold">{currentDate}</p>
             <p className=" font-semibold">{currentTime}</p>

src/app/common/header.js

@@ -3,7 +3,7 @@ import React from 'react'
 export default function Header() {
   return (
     <>
-      <div className='fixed top-4 left-10'>
+      <div className='fixed top-4 left-4 sm:left-10'>
         <p className="text-xl font-semibold mt-6  text-white border-l-8  border-cyan-500 pl-3">
           TO-DO
         </p>

src/middleware.js

@@ -1,35 +1,34 @@
 import { NextResponse } from "next/server";
 
-// let authToken = Cookies.get("authToken");
-
 export default function middleware(request) {
+  const { cookies } = request;
+  const authToken = cookies.get("token");
   const req = request;
-  
-  // if (req.nextUrl.pathname.startsWith("/Home")) {
-  //   if (authToken) {
-  //     const url = request.nextUrl.clone();
-  //     url.pathname = "/Home";
-  //     return NextResponse.rewrite(url);
-  //   } else {
-  //     return NextResponse.redirect("http://localhost:3000/Login");
-  //   }
-  // }
-  // if (req.nextUrl.pathname.startsWith("/Register")) {
-  //   if (authToken) {
-  //     return NextResponse.redirect("http://localhost:3000/Home");
-  //   } else {
-  //     const url = request.nextUrl.clone();
-  //     url.pathname = "/Register";
-  //     return NextResponse.rewrite(url);
-  //   }
-  // }
-  // if (
-  //   req.nextUrl.pathname.startsWith("/Login")
-  // ) {
-  //   if (authToken) {
-  //     return NextResponse.redirect("http://localhost:3000/Home");
-  //   }
-  // }
+  if (req.nextUrl.pathname.startsWith("/Home")) {
+    if (authToken) {
+      const url = request.nextUrl.clone();
+      url.pathname = "/Home";
+      return NextResponse.rewrite(url);
+    } else {
+      return NextResponse.redirect("http://localhost:3000/Login");
+    }
+  }
+  if (req.nextUrl.pathname.startsWith("/Register")) {
+    if (authToken) {
+      return NextResponse.redirect("http://localhost:3000/Home");
+    } else {
+      const url = request.nextUrl.clone();
+      url.pathname = "/Register";
+      return NextResponse.rewrite(url);
+    }
+  }
+  if (
+    req.nextUrl.pathname.startsWith("/Login")
+  ) {
+    if (authToken) {
+      return NextResponse.redirect("http://localhost:3000/Home");
+    }
+  }
 }
 
 export const config = {