Add files via upload

Hermes - Bing Explore from - related qna/people also ask

hermes-master/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "hermes",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.19.0",
+    "cors": "^2.8.5",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

hermes-master/src/App.css

@@ -0,0 +1,99 @@
+.leave-margin {
+  margin-top: 50px;
+  margin-left: 50px;
+}
+
+.intent-margin {
+  margin-left: 100px;
+  margin-top: 20px;
+}
+
+
+.questions-margin {
+  margin-left: 100px;
+  margin-top: 150px;
+}
+
+.item-margin {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.vlcard-height {
+  height: 181px;
+  border-radius: 6px;
+  border-spacing: 0px;
+  border-collapse: collapse;
+  width: 197px;
+}
+
+.slide-margin {
+  margin-right: 8px;
+  border-radius: 6px;
+  border: 1px solid;
+  margin-bottom: 8px;
+}
+
+.cico-style {
+  width:197px;height:110px;
+}
+
+.some-class {
+  height:46.5px
+}
+
+.vcac-style {
+  height: 32px; margin-top: -16px;
+}
+
+.questions-slides {
+  overflow: hidden;
+  margin-top: 20px;
+}
+
+.questions {
+  display: flex;
+  width: 960px;
+  flex-wrap: wrap;
+}
+
+/* .scrollbar-prop {
+  height: 206px; margin-bottom: -30px; padding-bottom: 30px;
+}
+
+.slidebar-height {
+  height: 181px;
+} */
+/* .App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+} */

hermes-master/src/App.js

@@ -0,0 +1,55 @@
+import './bing-css1.css';
+import './bing-css3.css';
+import './bing-css3.css';
+import './bing-ftrD_MmVert.css';
+import './bing-mc_vtvc.css';
+import './bing-b_bfb.css';
+import './App.css';
+
+var React = require('react');
+// //import logo from './logo.svg';
+// var css1 = require('./bing-css1.css');
+// var css2 = require('./bing-css2.css');
+// var css3 = require('./bing-ftrD_MmVert.css');
+// var css4 = require('./bing-mc_vtvc.css');
+// var css5 = require('./bing-b_bfb.css');
+var Intents = require('./components/intents/Intents');
+var Questions = require('./components/questions/Questions');
+
+function App() {  
+  return (
+    <div className="leave-margin">
+      <header className="App-header">
+        <form action="/videos/search" id="sb_form">
+          <a className="b_logoArea" href="/?FORM=Z9FD1" h="ID=video,5042.1">
+          <h1 className="b_logo" title="Back to Bing search" aria-label="Go to Bing homepage" data-bm="1"><img src="https://www.bing.com/sa/simg/SharedSpriteDesktop_2x_040919.png" alt="Go to Bing homepage" title="Back to Bing search" data-bm="13"/></h1>
+            </a>
+            <div className="b_searchboxForm" role="search" data-bm="2">
+              <input className="b_searchbox" id="sb_form_q" name="q" aria-autocomplete="both" aria-label="Enter your search here - Search suggestions will show as you type" 
+              type="search" readOnly value="india culture" maxLength="1000" aria-controls="sw_as"/>
+                <div id="sb_go_par" data-sbtip="Search the web"><input type="submit" className="b_searchboxSubmit" id="sb_form_go" tabIndex="0" name="go" value="Search"/>          
+                </div>
+                <input id="sa_qs" name="qs" value="ds" type="hidden"/>
+                  <input type="hidden" value="QBVR" name="form"/>
+                  <input type="hidden" value="video" name="scope"/>
+                  <div id="sw_as"></div>
+                </div>
+        </form>
+        <div className="intent-margin">        
+          {
+          <Intents query="Australia" />
+          }
+          </div> 
+
+          <div className="questions-margin"> 
+          {
+            <Questions query="Australia"/>
+          }
+          </div>  
+      </header>
+    </div>
+
+  );
+}
+
+export default App;

hermes-master/src/App.test.js

@@ -0,0 +1,9 @@
+var  React = require('react');
+var ReactDOM = require('react-dom');
+var App = require('./App');
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

hermes-master/src/components/header/Header.js

@@ -0,0 +1,62 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+var pmaapi = require('../utils/pmaapi/pmaapi');
+
+var Intents = require('../intents/Intents');
+var Questions = require('../questions/Questions');
+
+
+class Header extends React.Component {
+constructor(userQuery) {
+    super();
+    this.userQuery = 'australia';
+    //this.searchForImages = this.searchForImages.bind(this);
+  }
+
+  componentDidMount() {
+    this.render();
+  }
+
+  searchForImages(){    
+    var input = this.refs.searchInput;
+    this.userQuery = input.value;
+    this.render();
+    console.log(input.value);
+    console.log(this.userQuery);
+  }
+
+  render(){
+      return (
+          <div>
+        <form action="/videos/search" id="sb_form">
+        <a className="b_logoArea" href="/?FORM=Z9FD1" h="ID=video,5042.1">
+        <h1 className="b_logo" title="Back to Bing search" aria-label="Go to Bing homepage" data-bm="1"><img src="https://www.bing.com/sa/simg/SharedSpriteDesktop_2x_040919.png" alt="Go to Bing homepage" title="Back to Bing search" data-bm="13"/></h1>
+          </a>
+          <div className="b_searchboxForm" role="search" data-bm="2">
+            <input className="b_searchbox" ref="searchInput" id="sb_form_q" name="q" aria-label="Enter your search here - Search suggestions will show as you type" 
+            type="text" value="australia" readOnly placeholder="Enter your query" maxLength="1000"/>
+            {/* onChange={()=> this.searchForImages()}  */}
+              <div id="sb_go_par" data-sbtip="Search the web"><input type="submit" className="b_searchboxSubmit" id="sb_form_go" tabIndex="0" name="go" value="Search"/>          
+              </div>
+              <input id="sa_qs" name="qs" value="ds" type="hidden"/>
+                <input type="hidden" value="QBVR" name="form"/>
+                <input type="hidden" value="video" name="scope"/>
+                <div id="sw_as"></div>
+              </div>
+      </form>
+      <div className="intent-margin">        
+      {
+      <Intents query={this.userQuery} />
+      }
+      </div> 
+
+      <div className="questions-margin"> 
+      {
+        <Questions query={this.userQuery}/>
+      }
+        </div>  
+        </div>
+      );
+
+  }
+}

hermes-master/src/components/intents/Intents.js

@@ -0,0 +1,85 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+var pmaapi = require('../utils/pmaapi/pmaapi');
+
+
+function ShowIntents (intents) {
+  return (
+  <ol className="items">
+      { !!intents.intents && intents.intents.length > 0
+        ? intents.intents.map(function (intent, index) {
+        return (
+          <li className="item col item-margin" key={'intent'+index}>              
+          <a title={intent.Text} className="suggestion-item " href="#">
+            <div className="suggestion-color noimage" ></div>
+            <div className="suggestion-title-wrapper">
+              <span className="suggestion-title"><strong>{intent.Text}</strong>
+              </span>
+            </div>
+            </a>
+        </li>)})
+        : <li key={'loading intent'}>
+              Loading intents!
+        </li>}
+    </ol>
+  )
+}
+
+ShowIntents.propTypes = {
+  intents: PropTypes.array.isRequired
+}
+
+module.exports = class Intents extends React.Component {  
+    constructor(query) {
+      super();
+      this.state = {
+        query: query,
+        intents: []
+      }
+    }
+
+    componentDidMount() {
+      this.updateState(this.state.query);
+    }
+
+    updateState(query) {
+      this.setState(function() {
+        return {
+          query: query,
+          intents : []
+        }
+      });
+
+      if(!!pmaapi && !!pmaapi.fetchIntents)
+      pmaapi.fetchIntents(this.query).then(function(data) {        
+        this.setState(function() {
+          return {
+            intents: data.item
+          }
+        });
+      }.bind(this))
+      .catch(err => {
+        console.log("Intents");
+      });
+    }
+
+    render() {
+      return (
+        <div className="rfvalid">
+          <div className="touchQuery">
+            <div className="carousel">
+              <div className="carousel-controls lightcar">   
+                <div className="carousel-content">
+                  <div className="carousel-scroll-wrapper">  
+                    <div className="carousel-scroll-content carousel_scroll">
+                      <ShowIntents intents={this.state.intents}/>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }