Merge pull request #27 in PROD/datahubenterprise from ~AYUWONO/datahu…

…benterprise:develop to develop * commit '21d8aaf99f24c87bba72562bb27a59034ce3ee6c': passing props uri and hardcoded db name, implement Descriptions Item fetching data from ML Server
SameeraPriyathamTadikonda · Aug 22, 2019 · cdbb567 · cdbb567
2 parents 1fb9766 + 21d8aaf
commit cdbb567
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/web/src/main/explorer-ui/src/components/search-results/search-results.tsx b/web/src/main/explorer-ui/src/components/search-results/search-results.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { List } from 'antd';
+import { List, Descriptions } from 'antd';
 import styles from './search-results.module.scss';
 
 type Props = {
     data: any[];
 };
 
 const SearchResults:React.FC<Props> = (props) => {
+    console.log(props.data);
 
     return (
         <div className={styles.searchResultsContainer}>
@@ -17,16 +18,21 @@ const SearchResults:React.FC<Props> = (props) => {
                 renderItem={item => (
                     <List.Item>
                         <List.Item.Meta
-                            title={<Link to="/detail" style={{ color: 'rgba(0, 0, 0, 0.65)', fontWeight: 'bold', fontSize: '16px' }}>{item.collection + " > id: " + item.id}</Link>} 
+                            title={
+                                <Link to={{ pathname: "/detail", state: { uri: item.uri, database: "data-hub-FINAL" }}}>
+                                    {"Customer > uri: " + item.uri}
+                                </Link>
+                            }
                             description={
-                                <p>
-                                    <label className={styles.label}>Created: </label>{item.created} 
-                                    <label className={styles.label}>&nbsp; &nbsp; Source: </label>{item.source}
-                                    <label className={styles.label}>&nbsp; &nbsp; File Type: </label>{item.fileType}
-                                    <label className={styles.label}>&nbsp; &nbsp; User: </label>{item.user}
+                                <Descriptions title="Content">
+                                    <Descriptions.Item label="Created" className={styles.label}>2019-09-09</Descriptions.Item>
+                                    <Descriptions.Item label="Source" className={styles.label}>AdvantageFlow</Descriptions.Item>
+                                    <Descriptions.Item label="File Type" className={styles.label}>{item.format}</Descriptions.Item>
+                                    <Descriptions.Item label="User" className={styles.label}>admin</Descriptions.Item>
+                                    <br />
                                     <br />
-                                    {item.content}
-                                </p>
+                                    <Descriptions.Item span={3}>Lorem ipsum dolor sit amet, eos ei utamur scriptorem, omnesque efficiendi interesset vis an. Illud ullum vim te, sit atqui dolore cu, vix te modus lorem sadipscing.</Descriptions.Item>
+                                </Descriptions>
                             }
                         />
                     </List.Item>

diff --git a/web/src/main/explorer-ui/src/pages/Browse.tsx b/web/src/main/explorer-ui/src/pages/Browse.tsx
@@ -1,28 +1,30 @@
-import React, {useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Sidebar from '../components/sidebar/sidebar';
 import SearchBar from '../components/search-bar/search-bar';
 import SearchPagination from '../components/search-pagination/search-pagination';
-import { Layout, Menu, Icon } from 'antd';
+import { Layout } from 'antd';
 import SearchSummary from '../components/search-summary/search-summary';
 import SearchResults from '../components/search-results/search-results';
-import searchResultsData from '../assets/mock-data/search-results';
 
 const Browse: React.FC = () => {
   const { Content, Sider } = Layout;
 
+  const [data, setData] = useState();
+
   useEffect(() => {
     const fetchData = async () => {
-    const result = await axios(
+      const result = await axios(
         `/v1/search?format=json&database=data-hub-STAGING`,
       );
-        console.log('fetch flows', result);
+      setData(result.data.results);
+      console.log('fetch flows', result.data);
     };
 
     fetchData();
   }, []);
 
-  
+
   return (
     <Layout>
       <Sider width={300} style={{ background: '#f3f3f3' }}>
@@ -34,7 +36,7 @@ const Browse: React.FC = () => {
           <SearchPagination />
           <br />
           <br />
-          <SearchResults data={searchResultsData}/>
+          <SearchResults data={data}/>
         </Content>
     </Layout>
   );