From fe1096f308d00156ffe0bbc0c93cfbb979c48111 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Sat, 15 Oct 2022 17:50:13 +0200
Subject: [PATCH] move browsers to each component

---
 packages/app/src/components/index.js          |  1 -
 .../src/pages/home/components/feed/index.jsx  | 10 +++++++
 .../home/components/livestreams}/index.jsx    | 29 ++++++++++++++-----
 .../home/components/livestreams}/index.less   | 21 ++++++++++++--
 .../home/components/savedPosts/index.jsx      |  7 +++++
 packages/app/src/pages/home/index.jsx         | 25 +++++-----------
 6 files changed, 66 insertions(+), 27 deletions(-)
 create mode 100644 packages/app/src/pages/home/components/feed/index.jsx
 rename packages/app/src/{components/LivestreamsBrowser => pages/home/components/livestreams}/index.jsx (78%)
 mode change 100755 => 100644
 rename packages/app/src/{components/LivestreamsBrowser => pages/home/components/livestreams}/index.less (80%)
 mode change 100755 => 100644
 create mode 100644 packages/app/src/pages/home/components/savedPosts/index.jsx

diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js
index 14f55b3e..1b8833bc 100755
--- a/packages/app/src/components/index.js
+++ b/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"
diff --git a/packages/app/src/pages/home/components/feed/index.jsx b/packages/app/src/pages/home/components/feed/index.jsx
new file mode 100644
index 00000000..8d72997b
--- /dev/null
+++ b/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 />
+    </>
+}
\ No newline at end of file
diff --git a/packages/app/src/components/LivestreamsBrowser/index.jsx b/packages/app/src/pages/home/components/livestreams/index.jsx
old mode 100755
new mode 100644
similarity index 78%
rename from packages/app/src/components/LivestreamsBrowser/index.jsx
rename to packages/app/src/pages/home/components/livestreams/index.jsx
index 1f6cb9e3..feda82e0
--- a/packages/app/src/components/LivestreamsBrowser/index.jsx
+++ b/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"
 
@@ -51,15 +51,19 @@ export default (props) => {
                 console.error("Livestreams is not an array")
                 return false
             }
-            
+
             setList(livestreams)
         }
     }
 
-    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">
diff --git a/packages/app/src/components/LivestreamsBrowser/index.less b/packages/app/src/pages/home/components/livestreams/index.less
old mode 100755
new mode 100644
similarity index 80%
rename from packages/app/src/components/LivestreamsBrowser/index.less
rename to packages/app/src/pages/home/components/livestreams/index.less
index ce21b392..18d67fd1
--- a/packages/app/src/components/LivestreamsBrowser/index.less
+++ b/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;
diff --git a/packages/app/src/pages/home/components/savedPosts/index.jsx b/packages/app/src/pages/home/components/savedPosts/index.jsx
new file mode 100644
index 00000000..dce63b11
--- /dev/null
+++ b/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 />
+}
\ No newline at end of file
diff --git a/packages/app/src/pages/home/index.jsx b/packages/app/src/pages/home/index.jsx
index e642792d..b5dae9b5 100755
--- a/packages/app/src/pages/home/index.jsx
+++ b/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
     }
 }