home page #24

src/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Components from './Components';
+import { HomePage } from './Views';
 import {
     createPngcat,
     deletePngcat,
@@ -74,7 +75,7 @@ export default function App() {
             <Router>
                 <Components.Navbar />
                 <Switch>
-                    <Route exact path="/" render={() => <Components.Search />} />
+                    <Route exact path="/" render={() => <HomePage />} />
                     <Route exact path="/About" render={() => <Components.About />} />
                     <Route exact path="/Box" render={() => <Components.DragBox pngcat={activeSeq} handleSave={handleSave} />} />
                     <Route exact path="/Browse" render={() => <Components.Browse getAllPngcats={getAllPngcats} updateState={setActiveSeq} />} />

src/Components/index.js

@@ -1,19 +1,13 @@
-
-
-// import {default as Search} from './Search/Search';
-// import {default as Navbar} from './Navbar/Navbar';
-// import {default as About} from './About/About';
-// import {default as Dragbox} from './DragBox/DragBox';
-// import {default as Browse} from './Browse/Browse';
-
-import Search from './Search/Search';
+// import Search from './Search/Search';
 import Navbar from './Navbar/Navbar';
 import About from './About/About';
 import BrowsePngcats from './Browse/Browse';
 import DragBox from './DragBox/DragBox';
 
+// to use separately like in HomePage
+export { default as Search } from "./Search/Search";
+
 const Components = {
-  Search: Search,
   Navbar: Navbar,
   About: About,
   DragBox: DragBox,

src/Views/HomePage.js

@@ -0,0 +1,11 @@
+import { Search } from "../Components";
+
+
+export default function HomePage() {
+  return (
+    <div id="homepage">
+      <Search />
+      {/* TODO: tutorial button */}
+    </div>
+  )
+}

src/Views/index.js

@@ -0,0 +1,3 @@
+// TODO: treeshaking
+
+export { default as HomePage } from './HomePage';