change interface and remove usememo

packages/app/src/components/SearchPage/SearchResultList.tsx

@@ -1,18 +1,10 @@
 import React, { FC } from 'react';
 import SearchResultListItem from './SearchResultListItem';
-import { IPage } from '../../interfaces/page';
+import { IPageHasId } from '../../interfaces/page';
 
 // TOOD: retrieve bookmark count and add it to the following type
-export type ISearchedPage = Omit<IPage, 'revision' | 'tags' | 'creator'> & {
-  _id: string,
+export type ISearchedPage = IPageHasId & {
   snippet: string,
-  revision: string,
-  tags?: string[],
-  creator: string,
-  lastUpdateUser: any,
-  seenUsers: string[],
-  liker: string[],
-  commentCount: number,
   elasticSearchResult: {
     snippet: string,
     matchedPath: string,

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -81,56 +81,48 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
     }
   };
 
-  const renderPageItem = useMemo(() => {
-    return (
-      <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
-        <a
-          className="d-block pt-3"
-          href={pageId}
-          onClick={() => onClickInvoked(page._id)}
-        >
-          <div className="d-flex">
-            {/* checkbox */}
-            <div className="form-check my-auto mx-2">
-              <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
-            </div>
-            <div className="w-100">
-              {/* page path */}
-              <small className="mb-1">
-                <i className="icon-fw icon-home"></i>
-                {pagePathElem}
-              </small>
-              <div className="d-flex my-1 align-items-center">
-                {/* page title */}
-                <h3 className="mb-0">
-                  <UserPicture user={page.lastUpdateUser} />
-                  <span className="mx-2">{dPagePath.latter}</span>
-                </h3>
-                {/* page meta */}
-                <div className="d-flex mx-2">
-                  <PageListMeta page={page} />
-                </div>
-                {/* doropdown icon includes page control buttons */}
-                <div className="ml-auto">
-                  <PageItemControl page={page} />
-                </div>
+  return (
+    <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
+      <a
+        className="d-block pt-3"
+        href={pageId}
+        onClick={() => onClickInvoked(page._id)}
+      >
+        <div className="d-flex">
+          {/* checkbox */}
+          <div className="form-check my-auto mx-2">
+            <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
+          </div>
+          <div className="w-100">
+            {/* page path */}
+            <small className="mb-1">
+              <i className="icon-fw icon-home"></i>
+              {pagePathElem}
+            </small>
+            <div className="d-flex my-1 align-items-center">
+              {/* page title */}
+              <h3 className="mb-0">
+                <UserPicture user={page.lastUpdateUser} />
+                <span className="mx-2">{dPagePath.latter}</span>
+              </h3>
+              {/* page meta */}
+              <div className="d-flex mx-2">
+                <PageListMeta page={page} />
+              </div>
+              {/* doropdown icon includes page control buttons */}
+              <div className="ml-auto">
+                <PageItemControl page={page} />
               </div>
             </div>
           </div>
-          {/* TODO: adjust snippet position */}
-          {page.snippet
-            ? <div className="mt-1">page.snippet</div>
-            : <div className="mt-1" dangerouslySetInnerHTML={{ __html: page.elasticSearchResult.snippet }}></div>
-          }
-        </a>
-      </li>
-    );
-  }, []);
-
-  return (
-    <>
-      {renderPageItem}
-    </>
+        </div>
+        {/* TODO: adjust snippet position */}
+        {page.snippet
+          ? <div className="mt-1">page.snippet</div>
+          : <div className="mt-1" dangerouslySetInnerHTML={{ __html: page.elasticSearchResult.snippet }}></div>
+        }
+      </a>
+    </li>
   );
 };
 

packages/app/src/interfaces/page.ts

@@ -5,10 +5,17 @@ import { ITag } from './tag';
 export type IPage = {
   path: string,
   status: string,
-  revision: IRevision,
-  tags: ITag[],
-  creator: IUser,
+  revision: string | IRevision,
+  tags?: ITag[],
+  lastUpdateUser: any,
+  commentCount: number,
+  creator: string | IUser,
+  seenUsers: string[],
+  liker: string[],
   createdAt: Date,
   updatedAt: Date,
-  seenUsers: string[]
-}
+};
+
+export type IPageHasId = IPage & {
+  _id: string,
+};