Show feedback over Article

ekaterinburgdev · Aug 27, 2024 · 3f27cb6 · 3f27cb6 · ekbdev · Aug 27, 2024
1 parent 19cf32a
commit 3f27cb6
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx
@@ -14,15 +14,15 @@ function getContent(html) {
     return t(md({ html: true }).render(html));
 }
 
-export function Article({ title, description, sidebar, external }: ArticleProps) {
+export function Article({ title, description, sidebar, external, onFeedbackClick }: ArticleProps) {
     return (
         <div className={cn(styles.Article, { [styles.Article_external]: external })}>
             {!external && <div className={cn(styles.ArticleControls)}>
                 <Link className={cn(styles.ArticleBack)} href="/">
                     <span className={cn(styles.ArticleBackArrow)}>←</span>
                     <span className={cn(styles.ArticleBackCaption)}>На главную транспорта</span>
                 </Link>
-                <Feedback size="l" />
+                <Feedback onClick={onFeedbackClick} size="l" />
             </div>}
             <article className={cn(styles.ArticleContent)}>
                 <div className={cn(styles.ArticleText)}>
@@ -32,7 +32,7 @@ export function Article({ title, description, sidebar, external }: ArticleProps)
                 {sidebar !== undefined && <aside className={cn(styles.ArticleAside)}>
                     {external && (
                         <div className={cn(styles.ArticleAsideFeedback)}>
-                            <Feedback size="l" />
+                            <Feedback size="l" onClick={onFeedbackClick} />
                         </div>
                     )}
                     {sidebar && <div dangerouslySetInnerHTML={{ __html: getContent(sidebar) }} />}

diff --git a/client/components/Articles/Article/Article.types.tsx b/client/components/Articles/Article/Article.types.tsx
@@ -2,5 +2,6 @@ export type ArticleProps = {
     title?: string;
     description: string;
     sidebar?: string;
-    external?: boolean
+    external?: boolean;
+    onFeedbackClick?: () => void;
 };
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
@@ -137,6 +137,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: Ma
                             title={openedArticle.title}
                             description={openedArticle.description}
                             sidebar={openedArticle.sidebar}
+                            onFeedbackClick={handleCloseModal}
                             external
                         />
                     </Modal>

diff --git a/client/components/UI/Feedback/Feedback.tsx b/client/components/UI/Feedback/Feedback.tsx
@@ -7,13 +7,14 @@ import styles from './Feedback.module.css';
 
 const cn = classNames.bind(styles);
 
-export function Feedback({ size } : FeedbackProps) {
+export function Feedback({ size, onClick } : FeedbackProps) {
     return (
         <a
             href="https://tally.so#tally-open=mRDkVd&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
             target="_blank"
             rel="noreferrer"
             className={cn(styles.Feedback, { [styles[`Feedback_Size-${size}`]]: size })}
+            onClick={onClick}
         >
             Фидбек
         </a>

diff --git a/client/components/UI/Feedback/Feedback.types.tsx b/client/components/UI/Feedback/Feedback.types.tsx
@@ -1,4 +1,5 @@
 export type FeedbackProps = {
     caption?: string;
     size: 'm' | 'l';
+    onClick?: () => void
 };