Feat/migrate

README.md

@@ -4,6 +4,13 @@ A GitHub repo explorer app.
 
 Read how we built it in this [freecodecamp post here](https://medium.freecodecamp.org/building-a-github-repo-explorer-with-react-and-elasticsearch-8e1190e59c13).
 
+
+## Development
+
+```sh
+yarn install && yarn start
+```
+
 Built with 
 
 - [React](https://reactjs.org/)

package.json

@@ -9,10 +9,10 @@
   },
   "homepage": "https://appbaseio-apps.github.io/gitxplore-app",
   "dependencies": {
-    "@appbaseio/reactivesearch": "^2.3.0",
-    "react": "^16.2.0",
+    "@appbaseio/reactivesearch": "^3.7.11",
+    "react": "^16.8.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.0.17"
+    "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -24,6 +24,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "gh-pages": "^1.1.0"
+    "gh-pages": "^2.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.css

@@ -36,6 +36,7 @@
 .result-list-info {
   margin: 1rem;
   justify-content: space-between;
+
 }
 
 .result-list-pagination {
@@ -285,6 +286,12 @@
 		margin-top: 65px;
   }
 
+  .result-list-info {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column !important;
+  }
+
   .search-input {
     height: 42px;
   }

src/App.js

@@ -1,68 +1,59 @@
-import React, { Component } from 'react';
-import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';
+import React, { useState } from "react";
+import { ReactiveBase, DataSearch } from "@appbaseio/reactivesearch";
 
-import Header from './components/Header';
-import Results from './components/Results';
+import Header from "./components/Header";
+import Results from "./components/Results";
 
-import theme from './theme';
-import './App.css';
+import theme from "./theme";
+import "./App.css";
 
-class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			currentTopics: [],
-		};
-	}
+const App = props => {
+  const [currentTopics, setTopics] = useState([]);
 
-	setTopics = (currentTopics) => {
-		this.setState({
-			currentTopics: currentTopics || [],
-		});
-	}
+  const toggleTopic = topic => {
+    const nextState = currentTopics.includes(topic)
+      ? currentTopics.filter(item => item !== topic)
+      : currentTopics.concat(topic);
+    setTopics(nextState);
+  };
 
-	toggleTopic = (topic) => {
-		const { currentTopics } = this.state;
-		const nextState = currentTopics.includes(topic)
-			? currentTopics.filter(item => item !== topic)
-			: currentTopics.concat(topic);
-		this.setState({
-			currentTopics: nextState,
-		});
-	}
-
-	render() {
-		return (
-			<section className="container">
-				<ReactiveBase
-					app="gitxplore-app"
-					credentials="4oaS4Srzi:f6966181-1eb4-443c-8e0e-b7f38e7bc316"
-					type="gitxplore-latest"
-					theme={theme}
-				>
-					<div className="flex row-reverse app-container">
-						<Header currentTopics={this.state.currentTopics} setTopics={this.setTopics} />
-						<div className="results-container">
-							<DataSearch
-								componentId="repo"
-								filterLabel="Search"
-								dataField={['name', 'description', 'name.raw', 'fullname', 'owner', 'topics']}
-								placeholder="Search Repos"
-								iconPosition="left"
-								autosuggest={false}
-								URLParams
-								className="data-search-container results-container"
-								innerClass={{
-									input: 'search-input',
-								}}
-							/>
-							<Results currentTopics={this.state.currentTopics} toggleTopic={this.toggleTopic} />
-						</div>
-					</div>
-				</ReactiveBase>
-			</section>
-		);
-	}
-}
+  return (
+    <section className="container">
+      <ReactiveBase
+        app="gitxplore-app"
+        url="https://xe6N9nDRV:51ea7a8a-6354-4b5f-83e1-12dce3b7ec47@arc-cluster-appbase-demo-ps1pgt.searchbase.io"
+        enableAppbase
+        theme={theme}
+      >
+        <div className="flex row-reverse app-container">
+          <Header currentTopics={currentTopics} setTopics={setTopics} />
+          <div className="results-container">
+            <DataSearch
+              componentId="repo"
+              filterLabel="Search"
+              dataField={[
+                "name",
+                "description",
+                "name.keyword",
+                "fullname",
+                "owner",
+                "topics"
+              ]}
+              placeholder="Search Repos"
+              iconPosition="left"
+              autosuggest={false}
+              URLParams
+              className="data-search-container results-container"
+              innerClass={{
+                input: "search-input"
+              }}
+            />
+            <Results currentTopics={currentTopics} toggleTopic={toggleTopic} />
+          </div>
+        </div>
+      </ReactiveBase>
+    </section>
+  );
+};
 
 export default App;

src/components/Header.js

@@ -1,31 +1,18 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import SearchFilters from './SearchFilters';
 
-class Header extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			visible: false,
-		};
-	}
+const Header = props => {
+
+	const [visible, toggleVisibility] = useState(false)
 
-	toggleVisibility = () => {
-		const visible = !this.state.visible;
-		this.setState({
-			visible,
-		});
-	}
-
-	render() {
-		return (
-			<nav className={`navbar ${this.state.visible ? 'active' : ''}`}>
-				<div className="title">GitXplore</div>
-				<div className="btn toggle-btn" onClick={this.toggleVisibility}>Toggle Filters</div>
-				<SearchFilters {...this.props} visible={this.state.visible} />
-			</nav>
-		);
-	}
+	return (
+		<nav className={`navbar ${visible ? 'active' : ''}`}>
+			<div className="title">GitXplore</div>
+			<div className="btn toggle-btn" onClick={() => toggleVisibility(!visible)}>Toggle Filters</div>
+			<SearchFilters {...props} visible={visible} />
+		</nav>
+	);
 }
 
 export default Header;