Delete channel & improved Searching

src/Front_end/homepage/Totalsearch/totalsearch.jsx

@@ -0,0 +1,132 @@
+import { useState, useEffect, useContext } from "react";
+import { fetchUserDmChats, fetchUserchannelsbyid } from "../../database";
+import totalsearchCSS from "./totalsearch.module.css";
+import { Allconvers } from "../../context api/context";
+import { Channelcontext } from "../../context api/channelcontext.jsx";
+import { Chatcontext } from "../../context api/chatcontext";
+
+const Totalsearch = () => {
+  const { currentUser, setDm, setChannelchat, setConformdm, setchat } =
+    useContext(Allconvers);
+  const { dispatch } = useContext(Chatcontext);
+  const { dispatchchannel } = useContext(Channelcontext);
+  const [dmcontacts, setdmcontacts] = useState([]);
+  const [channels, setchannels] = useState([]);
+  const [search, setSearch] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+
+  useEffect(() => {
+    const fetchdata = async () => {
+      const fetcheddm = await fetchUserDmChats(currentUser[0]);
+      const filteredDm = fetcheddm.filter((contact) => contact.showstatus);
+      setdmcontacts(filteredDm);
+      const fetchedchannel = await fetchUserchannelsbyid(currentUser[0].id);
+      setchannels(fetchedchannel);
+    };
+    fetchdata();
+  }, [currentUser]);
+
+  useEffect(() => {
+    if (search.trim() === "") {
+      setSearchResults([]);
+      return;
+    }
+
+    const filteredDmContacts = dmcontacts.filter((contact) =>
+      contact.userinfo.uusername.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const filteredChannels = channels.filter((channel) =>
+      channel.channelname.toLowerCase().includes(search.toLowerCase())
+    );
+
+    setSearchResults([...filteredDmContacts, ...filteredChannels]);
+  }, [dmcontacts, channels, search]);
+
+  const handleInput = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const handleChannelSelect = (channel) => {
+    dispatchchannel({ type: "Change_channel", payload: channel });
+    resetSearch();
+    setDm(false);
+    setChannelchat(true);
+    setConformdm(false);
+    setchat(false);
+  };
+
+  const handleDMSelect = (userinfo) => {
+    dispatch({ type: "Change_user", payload: userinfo });
+    resetSearch();
+    setDm(false);
+    setChannelchat(false);
+    setConformdm(false);
+    setchat(true);
+  };
+
+  const resetSearch = () => {
+    setSearch("");
+    setSearchResults([]);
+  };
+
+  const handleBlur = (e) => {
+    // Check if the relatedTarget (where focus is going) is not inside results
+    if (
+      e.relatedTarget &&
+      !e.currentTarget.contains(e.relatedTarget) &&
+      e.relatedTarget.className !== totalsearchCSS.resultItem
+    ) {
+      setShowResults(false);
+    }
+  };
+
+  return (
+    <div className={totalsearchCSS.container}>
+      <input
+        type="text"
+        value={search}
+        onChange={handleInput}
+        onClick={() => setSearchResults([])}
+        onBlur={handleBlur}
+        placeholder="Search a Channel or Contact...."
+        className={totalsearchCSS.input}
+      />
+      {search.trim() !== "" && (
+        <div className={totalsearchCSS.results}>
+          {searchResults.map((result, index) => (
+            <div
+              key={index}
+              className={totalsearchCSS.resultItem}
+              onClick={() => {
+                if (result.userinfo) {
+                  handleDMSelect(result.userinfo);
+                } else {
+                  handleChannelSelect(result);
+                }
+              }}
+            >
+              {result.userinfo ? (
+                <div
+                  className={`${totalsearchCSS.dmContact} ${totalsearchCSS.item}`}
+                >
+                  <p>DM Contact: {result.userinfo.uusername}</p>
+                  <p>Email: {result.userinfo.uemail}</p>
+                </div>
+              ) : (
+                <div
+                  className={`${totalsearchCSS.channel} ${totalsearchCSS.item}`}
+                >
+                  <p>Channel: {result.channelname}</p>
+                  <p>Created by: {result.channelinfo.createdby}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Totalsearch;

src/Front_end/homepage/Totalsearch/totalsearch.module.css

@@ -0,0 +1,59 @@
+* {
+    box-sizing: border-box;
+  }
+
+  .container {
+    width: 100%;
+    max-width: 600px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative; /* Ensure relative positioning for absolute children */
+  }
+
+  .input {
+    width: 100%;
+    padding: 10px;
+    font-size: 15px;
+    height: 85%;
+    border-radius: 5px;
+  }
+
+  .results {
+    width: 100%;
+    display: grid;
+    gap: 1px;
+    position: absolute;
+    z-index: 2;
+    top: calc(100% + 10px); /* Adjust top position to create a gap below the input */
+    background-color: #fff; /* Ensure a white background for results */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a card-like appearance */
+    border-radius: 4px; /* Rounded corners for the results box */
+    max-height: 300px; /* Limit max height if needed */
+    overflow-y: auto; /* Enable scrolling if results exceed max height */
+  }
+
+  .resultItem {
+    padding: 10px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+    cursor: pointer; /* Add pointer cursor for clickable items */
+  }
+
+  .resultItem:hover {
+    background-color: #ebebeb; /* Lighten background on hover */
+  }
+
+  .item {
+    padding: 10px;
+  }
+
+  .dmContact {
+    border-left: 5px solid #1a73e8; /* Blue color for DM Contacts */
+  }
+
+  .channel {
+    border-left: 5px solid #34a853; /* Green color for Channels */
+  }
+

src/Front_end/homepage/channels/addchannel.jsx

@@ -16,77 +16,76 @@ const Addchannel = () => {
   const { addchannel, setAddchannel, currentUser } = useContext(Allconvers);
   const { dispatchchannel } = useContext(Channelcontext);
   const [currentuserchannels, setCurrentuserchannels] = useState({});
-  console.log(currentUser[0]);
   const channel = useRef("");
+
   useEffect(() => {
     const fetchchannel = async () => {
       const user = await fetchUserchannels(currentUser[0]);
       if (user) {
         setCurrentuserchannels(user);
-        console.log(currentuserchannels);
       }
     };
     fetchchannel();
-
-    // Cleanup function to potentially unsubscribe from subscriptions or close connections
   }, [currentUser]);
 
-  useEffect(() => {
-    console.log(currentuserchannels);
-  }, [currentuserchannels]);
-
   const clear = () => {
     channel.current.value = "";
     setAddchannel(false);
   };
-  const create = async () => {
-    const channelname = channel.current.value;
+
+  const createChannel = async () => {
+    const channelname = channel.current.value.trim();
+    if (channelname === "") {
+      return; // Exit early if channel name is empty
+    }
+
     const id = uuid();
     const creation = await insertchannelid(id, channelname);
     const insertionlist = await insertchanneldolistid(id);
+
     if (creation && insertionlist) {
       const checkIdExists = (channels) =>
         channels.some((channel) => channel.channel_id === id);
 
       const currentUserIdExists = checkIdExists(currentuserchannels);
+
       if (!currentUserIdExists) {
-        const { data, error } = await supabase
-          .from("channels_list")
-          .update({
-            channels: [
-              ...currentuserchannels,
-              {
-                channel_id: id,
-                channelname: channelname,
-                channelinfo: {
-                  createdby: currentUser[0].username,
-                  createdbyid: currentUser[0].id,
-                  adminid: [{ id: currentUser[0].id }],
+        try {
+          const { data, error } = await supabase
+            .from("channels_list")
+            .update({
+              channels: [
+                ...currentuserchannels,
+                {
+                  channel_id: id,
+                  channelname: channelname,
+                  channelinfo: {
+                    createdby: currentUser[0].username,
+                    createdbyid: currentUser[0].id,
+                    adminid: [{ id: currentUser[0].id }],
+                  },
+                  date: new Date().toISOString(),
+                  allowshow: true,
                 },
-                date: new Date().toISOString(),
-                allowshow: true,
-              },
-            ],
-          })
-          .eq("id", currentUser[0].id)
-          .select();
+              ],
+            })
+            .eq("id", currentUser[0].id)
+            .select();
 
-        if (error) {
-          console.error("Error updating channels:", error);
-        } else {
-          console.log("channel updated:", data);
-          const members = await fetchUserchannelmembers(id);
-          console.log(members);
-          const newmember = [
-            ...members,
-            {
-              member_id: currentUser[0].id,
-              member_name: currentUser[0].username,
-              member_mail: currentUser[0].email,
-            },
-          ];
-          const insert = insertchannelmember(id, newmember);
-          if (insert) {
+          if (error) {
+            console.error("Error updating channels:", error);
+          } else {
+            console.log("channel updated:", data);
+            const members = await fetchUserchannelmembers(id);
+            const newmember = [
+              ...members,
+              {
+                member_id: currentUser[0].id,
+                member_name: currentUser[0].username,
+                member_mail: currentUser[0].email,
+              },
+            ];
+            await insertchannelmember(id, newmember);
             dispatchchannel({
               type: "Change_channel",
               payload: {
@@ -101,12 +100,23 @@ const Addchannel = () => {
               },
             });
           }
-
+        } catch (error) {
+          console.error("Error creating channel:", error);
+        } finally {
           setAddchannel(false);
         }
       }
     }
   };
+
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      createChannel();
+    } else if (e.key === "Escape") {
+      clear();
+    }
+  };
+
   if (addchannel) {
     return (
       <div className={AddchannnelCSS.body}>
@@ -120,20 +130,23 @@ const Addchannel = () => {
               placeholder="Enter the Channel Name"
               className={AddchannnelCSS.input}
               ref={channel}
+              onKeyDown={handleKeyPress}
             />
           </div>
           <div className={AddchannnelCSS.bottom}>
             <div className={AddchannnelCSS.cancel} onClick={clear}>
               Clear
             </div>
-            <div className={AddchannnelCSS.submit} onClick={create}>
+            <div className={AddchannnelCSS.submit} onClick={createChannel}>
               Create
             </div>
           </div>
         </div>
       </div>
     );
   }
+
+  return null;
 };
 
 export default Addchannel;