toasts + sharing + comments

epam · Sep 10, 2024 · cdaf6f6 · cdaf6f6
1 parent 9c617c5
commit cdaf6f6
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 52 deletions.
diff --git a/apps/chat/src/components/Chat/Chat.tsx b/apps/chat/src/components/Chat/Chat.tsx
@@ -43,6 +43,7 @@ import { DEFAULT_ASSISTANT_SUBMODEL_ID } from '@/src/constants/default-ui-settin
 
 import Loader from '../Common/Loader';
 import { NotFoundEntity } from '../Common/NotFoundEntity';
+import ApplicationDetails from '../Marketplace/ApplicationDetails/ApplicationDetails';
 import { ChatCompareRotate } from './ChatCompareRotate';
 import { ChatCompareSelect } from './ChatCompareSelect';
 import ChatExternalControls from './ChatExternalControls';
@@ -1015,5 +1016,11 @@ export function Chat() {
       />
     );
   }
-  return <ChatView />;
+  return (
+    <ApplicationDetails
+      onClose={function (): void {
+        throw new Error('Function not implemented.');
+      }}
+    />
+  );
 }
diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationContent.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationContent.tsx
@@ -2,10 +2,7 @@ import {
   IconCheck,
   IconChevronLeft,
   IconChevronRight,
-  IconMessageStar,
-  IconStarFilled,
 } from '@tabler/icons-react';
-import { useSession } from 'next-auth/react';
 import { useRef, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
@@ -19,12 +16,7 @@ import { isSmallScreen } from '@/src/utils/app/mobile';
 
 import { Translation } from '@/src/types/translation';
 
-import UserIcon from '../../../../public/images/icons/user.svg';
 import FullScreenImage from '../../Common/FullScreenImages';
-import { RatingHandler } from '../Rating/RatingHandler';
-import { RatingProgressBar } from '../Rating/RatingProgressBar';
-
-import round from 'lodash-es/round';
 
 interface Props {
   application: {
@@ -69,13 +61,15 @@ const calculateTranslateX = (
 export const ApplicationDetailsContent = ({ application }: Props) => {
   const { t } = useTranslation(Translation.Marketplace);
 
-  const { data: session } = useSession();
+  // const dispatch = useAppDispatch();
+
+  // const { data: session } = useSession();
 
   const sliderRef = useRef<HTMLDivElement>(null);
 
   const [activeSlide, setActiveSlide] = useState(0);
   const [fullScreenSlide, setFullScreenSlide] = useState<number>();
-  const [isRate, setIsRate] = useState(false);
+  // const [isRate, setIsRate] = useState(false);
 
   const swipeHandlers = useMobileSwipe({
     onSwipedLeft: () => {
@@ -89,18 +83,18 @@ export const ApplicationDetailsContent = ({ application }: Props) => {
   });
 
   const previewImgsCount = application.previewImages.length;
-  const totalRating = Object.values(application.rating).reduce(
-    (totalRating, rating) => totalRating + rating,
-    0,
-  );
-  const ratingEntries = Object.entries(application.rating);
-  const averageRating = round(
-    ratingEntries.reduce(
-      (acc, [rating, count]) => acc + Number(rating) * count,
-      0,
-    ) / totalRating,
-    1,
-  );
+  // const totalRating = Object.values(application.rating).reduce(
+  //   (totalRating, rating) => totalRating + rating,
+  //   0,
+  // );
+  // const ratingEntries = Object.entries(application.rating);
+  // const averageRating = round(
+  //   ratingEntries.reduce(
+  //     (acc, [rating, count]) => acc + Number(rating) * count,
+  //     0,
+  //   ) / totalRating,
+  //   1,
+  // );
 
   return (
     <div className="divide-y divide-tertiary overflow-auto">
@@ -180,7 +174,7 @@ export const ApplicationDetailsContent = ({ application }: Props) => {
           ))}
         </ul>
       </section>
-      <section className="px-4 py-5 md:p-6">
+      {/* <section className="px-4 py-5 md:p-6">
         <div className="flex items-center justify-between">
           <h3 className="text-lg font-semibold">{t('Rating')}</h3>
           <button
@@ -252,14 +246,14 @@ export const ApplicationDetailsContent = ({ application }: Props) => {
               <span className="text-sm">John Dough</span>
             </div>
             <RatingHandler
-              onRatingApply={function (): void {
-                throw new Error('Function not implemented.');
-              }}
+              onRatingApply={() =>
+                dispatch(UIActions.showSuccessToast(t('Rate sent')))
+              }
               onClose={() => setIsRate(false)}
             />
           </div>
         )}
-      </section>
+      </section> */}
       <section className="px-4 py-5 md:p-6">
         <div className="flex items-center justify-between">
           <h3 className="text-lg font-semibold">{t('Details')}</h3>
@@ -269,7 +263,7 @@ export const ApplicationDetailsContent = ({ application }: Props) => {
           </button> */}
         </div>
         <div className="mt-4 flex flex-col gap-6 md:mt-5 md:flex-row md:gap-12">
-          <div className="flex flex-col gap-2">
+          {/* <div className="flex flex-col gap-2">
             <p className="font-semibold">{t('Author')}</p>
             <div className="flex items-center gap-2">
               <Image
@@ -281,7 +275,7 @@ export const ApplicationDetailsContent = ({ application }: Props) => {
               />
               <span>{application.author.name}</span>
             </div>
-          </div>
+          </div> */}
           <div className="flex flex-col gap-2">
             <p className="font-semibold">{t('Release date')}</p>
             <span>{application.releaseDate}</span>

diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx
@@ -1,9 +1,9 @@
 import { ModalState } from '@/src/types/modal';
 
 import Modal from '../../Common/Modal';
-import { ApplicationDetailsContent } from './Content';
-import { ApplicationDetailsFooter } from './Footer';
-import { ApplicationDetailsHeader } from './Header';
+import { ApplicationDetailsContent } from './ApplicationContent';
+import { ApplicationDetailsFooter } from './ApplicationFooter';
+import { ApplicationDetailsHeader } from './ApplicationHeader';
 
 const appHeader = {
   tags: ['Development', 'SQL'],

diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx
@@ -1,10 +1,10 @@
 import {
   IconBrandFacebook,
-  IconBrandLinkedin,
   IconBrandX,
   IconLink,
   IconShare,
 } from '@tabler/icons-react';
+import { useMemo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
@@ -14,7 +14,10 @@ import { translate } from '@/src/utils/app/translation';
 
 import { Translation } from '@/src/types/translation';
 
-import { Menu } from '../../Common/DropdownMenu';
+import { useAppDispatch } from '@/src/store/hooks';
+import { UIActions } from '@/src/store/ui/ui.reducers';
+
+import { Menu, MenuItem } from '../../Common/DropdownMenu';
 
 interface Props {
   application: {
@@ -26,16 +29,44 @@ interface Props {
 
 const src = 'https://i.pravatar.cc/300?img=3';
 
-const contextMenuItems = [
-  { BrandIcon: IconLink, text: translate('Copy link') },
-  { BrandIcon: IconBrandFacebook, text: translate('Share via Facebook') },
-  { BrandIcon: IconBrandX, text: translate('Share via X') },
-  { BrandIcon: IconBrandLinkedin, text: translate('Share via LinkedIn') },
-];
-
 export const ApplicationDetailsHeader = ({ application }: Props) => {
   const { t } = useTranslation(Translation.Marketplace);
 
+  const dispatch = useAppDispatch();
+
+  const contextMenuItems = useMemo(
+    () => [
+      {
+        BrandIcon: IconLink,
+        text: translate('Copy link'),
+        onClick: () => {
+          dispatch(UIActions.showInfoToast(t('Link copied')));
+        },
+      },
+      {
+        BrandIcon: IconBrandFacebook,
+        text: translate('Share via Facebook'),
+        onClick: () => {
+          const shareUrl = encodeURIComponent(window.location.href);
+          window.open(`https://m.me/?link=${shareUrl}`, '_blank');
+        },
+      },
+      {
+        BrandIcon: IconBrandX,
+        text: translate('Share via X'),
+        onClick: () => {
+          const shareText = encodeURIComponent(
+            'Check out this awesome content!',
+          );
+          const twitterUrl = `https://twitter.com/messages/compose?text=${shareText}`;
+
+          window.open(twitterUrl, '_blank');
+        },
+      },
+    ],
+    [dispatch, t],
+  );
+
   return (
     <header className="flex items-center gap-2 p-4 md:gap-4 md:px-6">
       <Image
@@ -61,6 +92,7 @@ export const ApplicationDetailsHeader = ({ application }: Props) => {
             listClassName="bg-layer-1 !z-[60] w-[290px]"
             placement="bottom-end"
             type="contextMenu"
+            data-qa="application-share-type-select"
             trigger={
               <button className="hidden items-center gap-3 text-accent-primary md:flex">
                 <IconShare className="[&_path]:fill-current" size={18} />
@@ -80,14 +112,18 @@ export const ApplicationDetailsHeader = ({ application }: Props) => {
                 <h5 className="text-xl">{application.title}</h5>
               </div>
               <div>
-                {contextMenuItems.map(({ BrandIcon, text }) => (
-                  <button
+                {contextMenuItems.map(({ BrandIcon, text, ...props }) => (
+                  <MenuItem
                     key={text}
+                    item={
+                      <>
+                        <BrandIcon size={18} className="text-secondary" />
+                        <span>{text}</span>
+                      </>
+                    }
                     className="flex w-full items-center gap-3 px-3 py-2 hover:bg-accent-primary-alpha"
-                  >
-                    <BrandIcon size={18} className="text-secondary" />
-                    <span>{text}</span>
-                  </button>
+                    {...props}
+                  />
                 ))}
               </div>
             </div>

diff --git a/apps/chat/src/components/Marketplace/Rating/RatingProgressBar.tsx b/apps/chat/src/components/Marketplace/Rating/RatingProgressBar.tsx
@@ -5,11 +5,11 @@ interface Props {
 
 export const RatingProgressBar = ({ total, count }: Props) => {
   return (
-    <div className="relative h-1.5 w-full rounded bg-layer-4">
-      <span
-        className="relative h-1.5 w-full rounded bg-accent-secondary"
+    <div className="h-1.5 w-full rounded bg-layer-4">
+      <div
+        className="h-1.5 w-full rounded bg-accent-secondary"
         style={{ width: `${(count / total) * 100}%` }}
-      ></span>
+      ></div>
     </div>
   );
 };