move browsers to each component

packages/app/src/components/index.js

@@ -26,7 +26,6 @@ export { default as Login } from "./Login"
 export { default as Image } from "./Image"
 export { default as LoadMore } from "./LoadMore"
 export { default as EmbbededMediaPlayer } from "./EmbbededMediaPlayer"
-export { default as LivestreamsBrowser } from "./LivestreamsBrowser"
 export { default as HashtagTrendings } from "./HashtagTrendings"
 export { default as Searcher } from "./Searcher"
 export { default as UserPreview } from "./UserPreview"

packages/app/src/pages/home/components/feed/index.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+import { PostCreator, PostsFeed } from "components"
+
+export default () => {
+    return <>
+        <PostCreator />
+        <PostsFeed />
+    </>
+}

packages/app/src/pages/home/components/livestreams/index.jsx

@@ -4,7 +4,7 @@ import * as antd from "antd"
 import { UserPreview } from "components"
 import { Icons } from "components/Icons"
 
-import Livestream from "../../models/livestream"
+import Livestream from "../../../../models/livestream"
 
 import "./index.less"
 
@@ -56,10 +56,14 @@ export default (props) => {
         }
     }
 
-    const onClickItem = async (livestream) => {
+    const onClickItem = (livestream) => {
         app.setLocation(`/live/${livestream.username}`)
     }
 
+    const onClickControlPanel = () => {
+        app.setLocation("/live_control")
+    }
+
     const renderList = () => {
         if (list.length === 0) {
             return <antd.Result>
@@ -80,10 +84,21 @@ export default (props) => {
 
     return <div className="livestreamsBrowser">
         <div className="header">
-            <h1>
-                <Icons.Tv />
-                <span>Livestreams</span>
-            </h1>
+            <div className="title">
+                <h1>
+                    <Icons.Tv />
+                    <span>Livestreams</span>
+                </h1>
+            </div>
+
+            <div className="panel">
+                <antd.Button
+                    icon={<Icons.Settings />}
+                    onClick={onClickControlPanel}
+                >
+                    Control Panel
+                </antd.Button>
+            </div>
         </div>
 
         <div className="livestream_list">

packages/app/src/pages/home/components/livestreams/index.less

@@ -7,8 +7,25 @@
     width: 100%;
 
     .header {
-        svg {
-            font-size: 2.5rem;
+        display: inline-flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: space-between;
+
+        width: 100%;
+
+        .panel {
+            display: inline-flex;
+            flex-direction: row;
+
+            align-items: center;
+        }
+
+        .title {
+            svg {
+                font-size: 2.5rem;
+            }
         }
 
         font-size: 2rem;

packages/app/src/pages/home/components/savedPosts/index.jsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+import { PostsFeed } from "components"
+
+export default () => {
+    return <PostsFeed savedOnly />
+}

packages/app/src/pages/home/index.jsx

@@ -4,7 +4,11 @@ import classnames from "classnames"
 
 import { Icons, createIconRender } from "components/Icons"
 
-import { PostCreator, PostsFeed, LivestreamsBrowser, HashtagTrendings } from "components"
+import { HashtagTrendings } from "components"
+
+import FeedBrowser from "./components/feed"
+import LivestreamsBrowser from "./components/livestreams"
+import SavedPostsBrowser from "./components/savedPosts"
 
 import "./index.less"
 
@@ -12,30 +16,17 @@ const Tabs = {
     "feed": {
         title: "Feed",
         icon: "Rss",
-        component: (props) => {
-            return <>
-                <PostCreator />
-                <PostsFeed />
-            </>
-        }
+        component: FeedBrowser
     },
     "livestreams": {
         title: "Livestreams",
         icon: "Tv",
-        component: (props) => {
-            return <>
-                <LivestreamsBrowser />
-            </>
-        }
+        component: LivestreamsBrowser
     },
     "savedPosts": {
         title: "Saved posts",
         icon: "Bookmark",
-        component: (props) => {
-            return <>
-                <PostsFeed savedOnly />
-            </>
-        }
+        component: SavedPostsBrowser
     }
 }