From a19e999c1178f2dccb3fd9dcb4b55cdbac7e657d Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:08:49 +0500
Subject: [PATCH] [MM-56845] Convert
 `./components/suggestion/suggestion_date.tsx` from Class Component to
 Function Component (#26236)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../components/suggestion/suggestion_date.tsx | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/webapp/channels/src/components/suggestion/suggestion_date.tsx b/webapp/channels/src/components/suggestion/suggestion_date.tsx
index 50f7116716..f4737f9403 100644
--- a/webapp/channels/src/components/suggestion/suggestion_date.tsx
+++ b/webapp/channels/src/components/suggestion/suggestion_date.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
 import Popover from 'components/widgets/popover';
 
@@ -27,40 +27,44 @@ type Props = {
     components: Array<React.ComponentType<SuggestionItem>>;
 }
 
-export default class SuggestionDate extends React.PureComponent<Props> {
-    render() {
-        if (this.props.items.length === 0) {
-            return null;
-        }
+const SuggestionDate = ({
+    items,
+    terms,
+    components,
+    matchedPretext,
+    onCompleteWord,
+    preventClose,
+    handleEscape,
+}: Props) => {
+    if (items.length === 0) {
+        return null;
+    }
 
-        const item = this.props.items[0];
-        const term = this.props.terms[0];
+    const item = items[0];
+    const term = terms[0];
 
-        // ReactComponent names need to be upper case when used in JSX
-        const Component = this.props.components[0];
+    // ReactComponent names need to be upper case when used in JSX
+    const Component = components[0];
 
-        const itemComponent = (
+    return (
+        <Popover
+            id='search-autocomplete__popover'
+            className='search-help-popover autocomplete visible'
+            placement='bottom'
+        >
             <Component
                 key={term}
                 ref={term}
                 item={item}
                 term={term}
-                matchedPretext={this.props.matchedPretext[0]}
+                matchedPretext={matchedPretext[0]}
                 isSelection={false}
-                onClick={this.props.onCompleteWord}
-                preventClose={this.props.preventClose}
-                handleEscape={this.props.handleEscape}
+                onClick={onCompleteWord}
+                preventClose={preventClose}
+                handleEscape={handleEscape}
             />
-        );
+        </Popover>
+    );
+};
 
-        return (
-            <Popover
-                id='search-autocomplete__popover'
-                className='search-help-popover autocomplete visible'
-                placement='bottom'
-            >
-                {itemComponent}
-            </Popover>
-        );
-    }
-}
+export default memo(SuggestionDate);