Code cleanup, fix modal

superdesk · Mar 14, 2024 · 58ceff9 · 58ceff9
1 parent 119c541
commit 58ceff9
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 44 deletions.
diff --git a/client/components/EventsRelatedArticles/EventsRelatedArticlesModal.tsx b/client/components/EventsRelatedArticles/EventsRelatedArticlesModal.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import {SearchBar, Modal, Dropdown} from 'superdesk-ui-framework/react';
-// import {superdeskApi} from '../../superdeskApi';
-import {ISuperdesk} from 'superdesk-api';
+import {SearchBar, Modal, Dropdown, Loader, Spacer} from 'superdesk-ui-framework/react';
 import {RelatedArticleComponent} from './RelatedArticleComponent';
 import {gettext} from 'superdesk-core/scripts/core/utils';
 
@@ -16,6 +14,7 @@ interface IProps {
 interface IState {
     articles: Array<IBelgaArchiveNewsObject>;
     searchQuery: string;
+    loading: boolean;
 }
 
 export interface IBelgaArchiveNewsObject {
@@ -76,6 +75,7 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
         this.state = {
             articles: [],
             searchQuery: '',
+            loading: true,
         };
     }
 
@@ -85,11 +85,18 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
             {
                 method: 'GET'
             },
-        ).then((result: IBelgaArchiveResult) => {
-            this.setState({
-                articles: result.newsObjects,
+        )
+            .then((result) => result.json())
+            .then((parsedResult: IBelgaArchiveResult) => {
+                this.setState({
+                    articles: parsedResult.newsObjects,
+                    loading: false,
+                });
             });
-        });
+    }
+
+    componentDidMount(): void {
+        this.fetchArticles();
     }
 
     render(): React.ReactNode {
@@ -104,34 +111,43 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
                 size="medium"
                 onHide={closeModal}
             >
-                <SearchBar
-                    value={this.state.searchQuery}
-                    onSubmit={(value: string) => {
-                        this.setState({
-                            searchQuery: value,
-                        });
-                    }}
-                    placeholder={gettext('Search articles')}
-                    boxed
-                >
-                    <Dropdown
-                        maxHeight={300}
-                        append
-                        zIndex={2001}
-                        items={[]}
+                <Spacer v gap="16">
+                    <SearchBar
+                        value={this.state.searchQuery}
+                        onSubmit={(value: string) => {
+                            this.setState({
+                                searchQuery: value,
+                            });
+                        }}
+                        placeholder={gettext('Search articles')}
+                        boxed
                     >
-                        {gettext('All searches')}
-                    </Dropdown>
-                </SearchBar>
-                <ul className="compact-view list-view">
-                    {this.state.articles.map((articleFromArchive) => (
-                        <RelatedArticleComponent
-                            selected={this.props.selectedArticles.includes(articleFromArchive.newsObjectId)}
-                            key={articleFromArchive.newsObjectId}
-                            article={articleFromArchive}
-                        />
-                    ))}
-                </ul>
+                        <Dropdown
+                            maxHeight={300}
+                            append
+                            zIndex={2001}
+                            items={[]}
+                        >
+                            {gettext('All searches')}
+                        </Dropdown>
+                    </SearchBar>
+                    <ul className="compact-view list-view">
+                        {this.state.loading ? (
+                            <div><Loader /></div>
+                        ) : (
+                            this.state.articles
+                                .filter((x) => x.headLine.toLowerCase().includes(this.state.searchQuery ?? ''))
+                                .map((articleFromArchive) => (
+                                    <RelatedArticleComponent
+                                        prevSelected={(this.props.selectedArticles ?? [])
+                                            .includes(articleFromArchive.newsObjectId)}
+                                        key={articleFromArchive.newsObjectId}
+                                        article={articleFromArchive}
+                                    />
+                                ))
+                        )}
+                    </ul>
+                </Spacer>
             </Modal>
         );
     }

diff --git a/client/components/EventsRelatedArticles/RelatedArticleComponent.tsx b/client/components/EventsRelatedArticles/RelatedArticleComponent.tsx
@@ -3,26 +3,30 @@ import {IBelgaArchiveNewsObject} from './EventsRelatedArticlesModal';
 
 interface IProps {
     article: IBelgaArchiveNewsObject;
-    selected?: boolean;
+    prevSelected?: boolean;
 }
 
-export const RelatedArticleComponent = ({article, selected}: IProps) => {
-    const [hovered, setHovered] = useState(selected ?? false);
+export const RelatedArticleComponent = ({article, prevSelected}: IProps) => {
+    const [hovered, setHovered] = useState(false);
+    const [selected, useSelected] = useState(prevSelected ?? false);
 
     return (
         <li
             className="list-item-view actions-visible"
             draggable
             tabIndex={0}
             data-test-id="article-item"
+            onClick={() => {
+                useSelected(!selected);
+            }}
+            onMouseOver={() => {
+                setHovered(!hovered);
+            }}
         >
             <div className="media-box media-text">
                 <div>
                     <span className="state-border" />
                     <div
-                        onMouseOver={() => {
-                            setHovered(!hovered);
-                        }}
                         className="list-field type-icon sd-monitoring-item-multi-select-checkbox"
                         data-test-id="item-type-and-multi-select"
                         style={{lineHeight: 0}}
@@ -36,7 +40,7 @@ export const RelatedArticleComponent = ({article, selected}: IProps) => {
                                     aria-label="bulk actions"
                                     data-test-id="multi-select-checkbox"
                                 >
-                                    <span className="sd-checkbox checked" />
+                                    {selected ? <span className="sd-checkbox checked" /> : <span className="sd-checkbox unchecked" />}
                                 </button>
                             ) : (
                                 <i

diff --git a/client/components/fields/editor/EventRelatedPlannings/EventRelatedArticles.tsx b/client/components/fields/editor/EventRelatedPlannings/EventRelatedArticles.tsx
@@ -8,7 +8,7 @@ import {
     IProfileSchemaTypeList,
     ISearchProfile
 } from '../../../../interfaces';
-import {planningApi, superdeskApi} from '../../../../superdeskApi';
+import {superdeskApi} from '../../../../superdeskApi';
 
 import {ButtonGroup, Button} from 'superdesk-ui-framework/react';
 import {Row} from '../../../UI/Form';
@@ -17,7 +17,7 @@ import {PlanningMetaData} from '../../../RelatedPlannings/PlanningMetaData';
 
 import './style.scss';
 import {showModal} from '@superdesk/common';
-import EventsRelatedArticlesModal from 'components/EventsRelatedArticles/EventsRelatedArticlesModal';
+import EventsRelatedArticlesModal from '../../../EventsRelatedArticles/EventsRelatedArticlesModal';
 
 interface IProps extends IEditorFieldProps {
     item: IEventItem;
@@ -70,7 +70,7 @@ export class EditorFieldEventRelatedItems extends React.PureComponent<IProps> {
                                     ));
                                 }}
                             >
-                                Show search
+                                {gettext('Show search')}
                             </button>
                         </div>
                     </Row>