feat: #87 - update search home page

SAP · May 30, 2023 · 8a889e1 · 8a889e1
1 parent 130ea6a
commit 8a889e1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 43 deletions.
diff --git a/packages/types/src/types/tutorials.types.ts b/packages/types/src/types/tutorials.types.ts
@@ -12,13 +12,13 @@ export interface TutorialsState {
     pending: boolean;
 }
 export interface TutorialsSearchQuery {
-    rows?: number;
-    start?: number;
-    searchField?: string;
-    pagePath?: string;
-    language?: string;
-    addDefaultLanguage?: boolean;
-    filters?: string[];
+    rows: number;
+    start: number;
+    searchField: string;
+    pagePath: string;
+    language: string;
+    addDefaultLanguage: boolean;
+    filters: string[];
 }
 
 export interface TutorialsUiState {

diff --git a/packages/webapp/src/webview/components/TutorialsFiltersBar/TutorialsFiltersBar.scss b/packages/webapp/src/webview/components/TutorialsFiltersBar/TutorialsFiltersBar.scss
@@ -2,7 +2,6 @@
     display: flex;
     justify-content: space-between;
     box-sizing: content-box;
-    padding-bottom: 10px;
     flex-direction: column;
 
     &-header {
@@ -18,7 +17,7 @@
         flex-direction: row;
         flex-wrap: wrap;
         align-items: center;
-        margin-top: 4px;
+        margin-top: 5px;
 
         &-tag-entry {
             padding-right: 5px;

diff --git a/packages/webapp/src/webview/features/blogs/Blogs.tsx b/packages/webapp/src/webview/features/blogs/Blogs.tsx
@@ -15,10 +15,9 @@ import { BlogFiltersEntryType } from '@sap/knowledge-hub-extension-types';
 
 import { blogsPageChanged, blogsManagedTagsAdd, blogsTagsAdd, blogsFilterEntryAdd } from '../../store/actions';
 import { store, useAppSelector } from '../../store';
-import { getBlogs, getBlogsQuery, getBlogsOrderBy, getManagedTags, getBlogsUIIsLoading } from './Blogs.slice';
+import { getBlogs, getBlogsQuery, getBlogsOrderBy, getManagedTags } from './Blogs.slice';
 import { getTagsBlogsData } from '../tags/Tags.slice';
-import { fetchBlogData, isManagedTag, getBlogsTagById, onTagSelected, searchBlogs } from './Blogs.utils';
-import { getSearchTerm } from '../search/Search.slice';
+import { fetchBlogData, isManagedTag, getBlogsTagById, onTagSelected } from './Blogs.utils';
 
 import type { UIPaginationSelected } from '../../components/UI/UIPagination';
 import { UIPagination } from '../../components/UI/UIPagination';
@@ -42,10 +41,8 @@ export const Blogs: FC = (): JSX.Element => {
 
     const activeBlogs: BlogsState = useAppSelector(getBlogs);
     const activeQuery: BlogsSearchQuery = useAppSelector(getBlogsQuery);
-    const activeSearchTerm: string = useAppSelector(getSearchTerm);
     const activeOrderBy: string | undefined = useAppSelector(getBlogsOrderBy);
-    const activeManagedTags: string[] = useAppSelector(getManagedTags) || [];
-    const activeLoading = useAppSelector(getBlogsUIIsLoading);
+    const activeManagedTags: string[] = useAppSelector(getManagedTags) ?? [];
     const tags = useAppSelector(getTagsBlogsData);
 
     const [loading, setLoading] = useState(true);
@@ -79,7 +76,7 @@ export const Blogs: FC = (): JSX.Element => {
             setNoResult(true);
             setError(true);
         } else if (!activeBlogs.pending) {
-            if (location.state && location.state.tagId && !isManagedTag(location.state.tagId, activeManagedTags)) {
+            if (location?.state?.tagId && !isManagedTag(location.state.tagId, activeManagedTags)) {
                 const tag = getBlogsTagById(location.state.tagId, tags);
                 const filterEntry: BlogFiltersEntry = {
                     id: tag.guid,
@@ -112,19 +109,11 @@ export const Blogs: FC = (): JSX.Element => {
         }
     }, [activeBlogs]);
 
-    // useEffect(() => {
-    //     searchBlogs(activeSearchTerm);
-    // }, [activeSearchTerm]);
-
-    // useEffect(() => {
-    //     const state = store.getState();
-    //     const currentQuery = state.blogs.query;
-    //     fetchBlogData(currentQuery);
-    // }, [activeOrderBy]);
-
-    // useEffect(() => {
-    //     setLoading(activeLoading);
-    // }, [activeLoading]);
+    useEffect(() => {
+        const state = store.getState();
+        const currentQuery = state.blogs.query;
+        fetchBlogData(currentQuery);
+    }, [activeOrderBy]);
 
     return (
         <motion.div

diff --git a/packages/webapp/src/webview/features/tutorials/Tutorials.tsx b/packages/webapp/src/webview/features/tutorials/Tutorials.tsx
@@ -14,11 +14,10 @@ import type {
 } from '@sap/knowledge-hub-extension-types';
 import { TUTORIALS_LIMIT_PER_PAGE } from '@sap/knowledge-hub-extension-types';
 
-import { tutorialsPageChanged, tutorialsFiltersTagsResetWith, tutorialsSearchFieldChanged } from '../../store/actions';
+import { tutorialsPageChanged, tutorialsFiltersTagsResetWith } from '../../store/actions';
 import { store, useAppSelector } from '../../store';
-import { getTutorials, getTutorialsQuery, getTutorialsUIIsLoading } from './Tutorials.slice';
-import { getTutorialsTag, onTagSelected, fetchTutorialsData, searchTutorials } from './Tutorials.utils';
-import { getSearchTerm } from '../search/Search.slice';
+import { getTutorials, getTutorialsQuery } from './Tutorials.slice';
+import { getTutorialsTag, onTagSelected, fetchTutorialsData } from './Tutorials.utils';
 
 import type { UIPaginationSelected } from '../../components/UI/UIPagination';
 import { UIPagination } from '../../components/UI/UIPagination';
@@ -40,8 +39,6 @@ export const Tutorials: FC = (): JSX.Element => {
 
     const activeTutorials: TutorialsState = useAppSelector(getTutorials);
     const activeQuery: TutorialsSearchQuery = useAppSelector(getTutorialsQuery);
-    const activeSearchTerm: string = useAppSelector(getSearchTerm);
-    const activeLoading = useAppSelector(getTutorialsUIIsLoading);
 
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
@@ -123,14 +120,6 @@ export const Tutorials: FC = (): JSX.Element => {
         }
     }, [activeTutorials]);
 
-    // useEffect(() => {
-    //     searchTutorials(activeSearchTerm);
-    // }, [activeSearchTerm]);
-
-    // useEffect(() => {
-    //     setLoading(activeLoading);
-    // }, [activeLoading]);
-
     return (
         <motion.div
             className="tutorials"