Merge pull request #44 from ecency/bugfix/chats-issues

bugfix/chats-issues
ecency · Oct 4, 2024 · a35a6c6 · a35a6c6
2 parents 1468913 + 8e8678f
commit a35a6c6
Show file tree

Hide file tree

Showing 21 changed files with 369 additions and 84 deletions.
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
diff --git a/public/sw.js b/public/sw.js
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/app/chat-provider.tsx b/src/app/chat-provider.tsx
@@ -4,7 +4,6 @@ import { ChatContextProvider } from "@ecency/ns-query";
 import { useGlobalStore } from "@/core/global-store";
 import { getAccountFullQuery } from "@/api/queries";
 import { getAccessToken } from "@/utils";
-import { ChatPopUp } from "@/app/chats/_components/chat-popup";
 
 export function ChatProvider(props: PropsWithChildren) {
   const activeUser = useGlobalStore((state) => state.activeUser);
@@ -24,7 +23,6 @@ export function ChatProvider(props: PropsWithChildren) {
       ecencyAccessToken={accessToken}
     >
       {props.children}
-      <ChatPopUp />
     </ChatContextProvider>
   );
 }
diff --git a/src/app/chats/_components/chat-message-box.tsx b/src/app/chats/_components/chat-message-box.tsx
@@ -33,20 +33,20 @@ export function ChatsMessagesBox(props: Props) {
   );
 
   const { isSuccess: isDirectContactsLoaded } = useDirectContactsQuery();
-  const updateDirectContactsLastSeenDate = useUpdateDirectContactsLastSeenDate();
+  const { mutateAsync: updateDirectContactsLastSeenDate } = useUpdateDirectContactsLastSeenDate();
   const updateChannelLastSeenDate = useUpdateChannelLastSeenDate();
 
   useAutoScrollInChatBox(props.currentContact, props.channel);
 
   // Whenever current contact is exists need to turn unread to 0
   useEffect(() => {
     if (props.currentContact && isDirectContactsLoaded) {
-      updateDirectContactsLastSeenDate.mutateAsync({
+      updateDirectContactsLastSeenDate({
         contact: props.currentContact,
         lastSeenDate: new Date()
       });
     }
-  }, [props.currentContact, isDirectContactsLoaded, updateDirectContactsLastSeenDate]);
+  }, [props.currentContact, isDirectContactsLoaded]);
 
   useEffect(() => {
     if (props.channel) {

diff --git a/src/app/chats/_components/chat-popup/_index.scss b/src/app/chats/_components/chat-popup/_index.scss
@@ -1,29 +1,9 @@
 @import "src/styles/vars_mixins";
 
 .chatbox-container {
-  position: fixed;
-  z-index: 99;
-  right: 13rem;
-  bottom: 0;
-  height: 50px;
-  width: 410px;
+  height: 530px;
 
-  border-top-right-radius: 16px;
-  border-top-left-radius: 16px;
-
-  transition: height 0.5s ease;
-
-  @include themify(day) {
-    @apply bg-white border-[--border-color] border shadow-2xl;
-  }
-
-  @include themify(night) {
-    @apply bg-dark-200 border-[--border-color] border shadow-2xl;
-  }
-
-  &.expanded {
-    height: 530px;
-  }
+  @apply bg-white dark:bg-dark-200;
 
   .chat-body {
     position: relative;
@@ -135,7 +115,7 @@
 
   @media screen and (max-width: 768px) {
     right: 0;
-    width: 100vw;
+    width: 100%;
     display: grid;
     grid-template-rows: min-content 1fr min-content;
     grid-template-columns: repeat(1, 1fr);

diff --git a/src/app/chats/_components/chat-popup/chat-popup-header.tsx b/src/app/chats/_components/chat-popup/chat-popup-header.tsx
@@ -7,29 +7,25 @@ import { getCommunityCache } from "@/core/caches";
 import i18next from "i18next";
 import { classNameObject } from "@ui/util";
 import { Tooltip } from "@ui/tooltip";
-import { addMessageSvg, arrowBackSvg, expandArrow } from "@/assets/img/svg";
+import { addMessageSvg, arrowBackSvg } from "@/assets/img/svg";
 import { UserAvatar } from "@/features/shared";
 
 interface Props {
   directContact?: DirectContact;
   channel?: Channel;
   showSearchUser: boolean;
-  expanded: boolean;
   canSendMessage: boolean;
   handleBackArrowSvg: () => void;
   handleMessageSvgClick: () => void;
-  setExpanded: (v: boolean) => void;
 }
 
 export function ChatPopupHeader({
   directContact,
   channel,
   showSearchUser,
-  expanded,
   canSendMessage,
   handleBackArrowSvg,
-  handleMessageSvgClick,
-  setExpanded
+  handleMessageSvgClick
 }: Props) {
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
@@ -62,20 +58,19 @@ export function ChatPopupHeader({
       return i18next.t("chat.new-message");
     }
 
-    return i18next.t("chat.page-title");
+    return "";
   }, [directContact, community, showSearchUser, revealPrivateKey, isActiveUser]);
   const isExpanded = useMemo(
-    () => (directContact || community || showSearchUser || revealPrivateKey) && expanded,
-    [directContact, community, showSearchUser, revealPrivateKey, expanded]
+    () => directContact || community || showSearchUser || revealPrivateKey,
+    [directContact, community, showSearchUser, revealPrivateKey]
   );
 
   return (
     <div
       className={classNameObject({
-        "flex items-center justify-between px-2 py-2 gap-2 cursor-pointer": true,
+        "flex items-center relative justify-between px-2 py-2 gap-2 cursor-pointer": true,
         "border-b border-[--border-color]": !!directContact || !!channel
       })}
-      onClick={() => setExpanded(!expanded)}
     >
       <div className="flex items-center">
         {isExpanded && (
@@ -91,7 +86,7 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        <div className="flex items-center" onClick={() => setExpanded(!expanded)}>
+        <div className="flex items-center">
           {(directContact || channel) &&
             (isActiveUser ? (
               <ChatSidebarSavedMessagesAvatar width={24} height={24} />
@@ -106,25 +101,16 @@ export function ChatPopupHeader({
           >
             {title}
           </div>
-
-          <Tooltip content={expanded ? i18next.t("chat.collapse") : i18next.t("chat.expand")}>
-            <Button
-              size="sm"
-              appearance="gray-link"
-              className={classNameObject({
-                "duration-300": true,
-                "rotate-180": !expanded
-              })}
-              onClick={(e: { stopPropagation: () => void }) => {
-                e.stopPropagation();
-                setExpanded(!expanded);
-              }}
-              icon={expandArrow}
-            />
-          </Tooltip>
         </div>
       </div>
-      <div className="flex items-center gap-4">
+      <div
+        className={classNameObject({
+          "flex items-center": true,
+          "absolute right-2 bg-gray-100 dark:bg-gray-900 rounded-full pl-3 pr-1 py-1 top-2 z-10 gap-2":
+            !isExpanded,
+          "gap-4": !!isExpanded
+        })}
+      >
         {canSendMessage && (
           <Tooltip content={i18next.t("chat.new-message")}>
             <Button
@@ -140,13 +126,7 @@ export function ChatPopupHeader({
           </Tooltip>
         )}
         {privateKey && (
-          <div
-            className="flex items-center"
-            onClick={(e) => {
-              e.stopPropagation();
-              setExpanded(true);
-            }}
-          >
+          <div className="flex items-center">
             <ChatsDropdownMenu
               channel={channel}
               contact={directContact}

diff --git a/src/app/chats/_components/chat-popup/chat-popup-messages-list.tsx b/src/app/chats/_components/chat-popup/chat-popup-messages-list.tsx
@@ -30,7 +30,7 @@ export function ChatPopupMessagesList({ currentContact, currentChannel }: Props)
   const messages = useMessagesQuery(currentContact, currentChannel);
   const { isSuccess: isDirectContactsLoaded } = useDirectContactsQuery();
 
-  const updateDirectContactsLastSeenDate = useUpdateDirectContactsLastSeenDate();
+  const { mutateAsync: updateDirectContactsLastSeenDate } = useUpdateDirectContactsLastSeenDate();
   const updateChannelLastSeenDate = useUpdateChannelLastSeenDate();
 
   const isActiveUser = useMemo(
@@ -41,12 +41,12 @@ export function ChatPopupMessagesList({ currentContact, currentChannel }: Props)
   // Whenever current contact is exists need to turn unread to 0
   useEffect(() => {
     if (currentContact && isDirectContactsLoaded) {
-      updateDirectContactsLastSeenDate.mutateAsync({
+      updateDirectContactsLastSeenDate({
         contact: currentContact,
         lastSeenDate: new Date()
       });
     }
-  }, [currentContact, isDirectContactsLoaded, updateDirectContactsLastSeenDate]);
+  }, [currentContact, isDirectContactsLoaded]);
 
   useEffect(() => {
     if (currentChannel) {

diff --git a/src/app/chats/_components/chat-popup/index.tsx b/src/app/chats/_components/chat-popup/index.tsx
@@ -25,7 +25,6 @@ import { NetworkError } from "../network-error";
 import { useGlobalStore } from "@/core/global-store";
 import usePrevious from "react-use/lib/usePrevious";
 import { usePathname } from "next/navigation";
-import { classNameObject } from "@ui/util";
 import { LinearProgress } from "@/features/shared";
 
 export const ChatPopUp = () => {
@@ -44,7 +43,6 @@ export const ChatPopUp = () => {
   const prevActiveUser = usePrevious(activeUser);
   const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
 
-  const [expanded, setExpanded] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
   const [show, setShow] = useState(false);
   const [communityName, setCommunityName] = useState("");
@@ -94,7 +92,6 @@ export const ChatPopUp = () => {
 
   const handleMessageSvgClick = () => {
     setShowSearchUser(!showSearchUser);
-    setExpanded(true);
     setRevealPrivateKey(false);
     setReceiverPubKey("");
   };
@@ -110,18 +107,11 @@ export const ChatPopUp = () => {
   return (
     <>
       {show && (
-        <div
-          className={classNameObject({
-            "chatbox-container": true,
-            expanded
-          })}
-        >
+        <div className="chatbox-container">
           <ChatPopupHeader
             directContact={currentContact}
             channel={currentChannel}
-            setExpanded={setExpanded}
             canSendMessage={canSendMessage}
-            expanded={expanded}
             handleBackArrowSvg={handleBackArrowSvg}
             handleMessageSvgClick={handleMessageSvgClick}
             showSearchUser={showSearchUser}

diff --git a/src/app/client-providers.tsx b/src/app/client-providers.tsx
@@ -10,9 +10,9 @@ import { makeQueryClient } from "@/core/react-query";
 import { UserActivityRecorder } from "@/features/user-activity";
 import { Tracker } from "@/features/monitoring";
 import { Announcements } from "@/features/announcement";
-import { FloatingFAQ } from "@/features/faq";
 import { EcencyConfigManager } from "@/config";
 import { PushNotificationsProvider } from "@/features/push-notifications";
+import { EcencyCenter } from "@/features/ecency-center";
 
 export function ClientProviders(props: PropsWithChildren) {
   return (
@@ -26,10 +26,16 @@ export function ClientProviders(props: PropsWithChildren) {
         </EcencyConfigManager.Conditional>
         <Tracker />
         <PushNotificationsProvider>
-          <ChatProvider>{props.children}</ChatProvider>
+          <ChatProvider>
+            {props.children}
+            <EcencyConfigManager.Conditional
+              condition={({ visionFeatures }) => visionFeatures.center.enabled}
+            >
+              <EcencyCenter />
+            </EcencyConfigManager.Conditional>
+          </ChatProvider>
         </PushNotificationsProvider>
         <Announcements />
-        <FloatingFAQ />
       </UIManager>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

diff --git a/src/config/config.template.ts b/src/config/config.template.ts
@@ -12,7 +12,6 @@ const CONFIG = {
           enabled: true
         }
       },
-
       polls: {
         creating: {
           enabled: true
@@ -87,6 +86,9 @@ const CONFIG = {
       },
       editHistory: {
         enabled: true
+      },
+      center: {
+        enabled: true
       }
     },
     service: {

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -87,6 +87,9 @@ const CONFIG = {
       },
       editHistory: {
         enabled: true
+      },
+      center: {
+        enabled: true
       }
     },
     service: {

diff --git a/src/features/ecency-center/center-button.tsx b/src/features/ecency-center/center-button.tsx
@@ -0,0 +1,38 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+interface Props {
+  onClick?: () => void;
+}
+
+export function CenterButton(props: Props) {
+  return (
+    <motion.div
+      {...props}
+      initial="rest"
+      whileHover="hover"
+      animate="rest"
+      className="flex items-center justify-start bg-white border border-[--border-color] rounded-full cursor-pointer"
+      variants={{
+        rest: {},
+        hover: {}
+      }}
+    >
+      <motion.div
+        variants={{
+          rest: { rotate: 0 },
+          hover: { rotate: 25, scale: 0.9 }
+        }}
+      >
+        <Image
+          src="/assets/logo-circle.svg"
+          alt="Logo"
+          width={75}
+          height={72}
+          className="w-[3rem] h-[3rem] duration-300"
+        />
+      </motion.div>
+      <div className="pl-2 pr-4 font-semibold text-sm text-blue-dark-sky">Center</div>
+    </motion.div>
+  );
+}