move spaces

packages/app/src/pages/home/[type].jsx

@@ -6,10 +6,10 @@ import { Icons, createIconRender } from "components/Icons"
 
 import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
 
-import FeedBrowser from "./components/feed"
+import FeedTab from "./components/feed"
-import ExploreBrowser from "./components/explore"
+import ExploreTab from "./components/explore"
-import LivestreamsBrowser from "./components/livestreams"
+import TrendingsTab from "./components/trendings"
-import SavedPostsBrowser from "./components/savedPosts"
+import SavedPostsTab from "./components/savedPosts"
 
 import "./index.less"
 
@@ -17,23 +17,23 @@ const Tabs = {
     "feed": {
         title: "Feed",
         icon: "Rss",
-        component: FeedBrowser
+        component: FeedTab
+    },
+    "trendings": {
+        title: "Trendings",
+        icon: "TrendingUp",
+        component: TrendingsTab
     },
     "explore": {
         title: "Explore",
         icon: "Search",
-        component: ExploreBrowser
+        component: ExploreTab
     },
     "savedPosts": {
         title: "Saved posts",
         icon: "Bookmark",
-        component: SavedPostsBrowser
+        component: SavedPostsTab
-    },
+    }
-    "livestreams": {
-        title: "Livestreams",
-        icon: "Tv",
-        component: LivestreamsBrowser
-    },
 }
 
 export default class Dashboard extends React.Component {

packages/app/src/pages/home/[type].mobile.jsx

@@ -2,14 +2,10 @@ import React from "react"
 import * as antd from "antd"
 import classnames from "classnames"
 
-import { Icons, createIconRender } from "components/Icons"
+import FeedTab from "./components/feed"
-
+import ExploreTab from "./components/explore"
-import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
+import TrendingsTab from "./components/trendings"
-
+import SavedPostsTab from "./components/savedPosts"
-import FeedBrowser from "./components/feed"
-import ExploreBrowser from "./components/explore"
-import LivestreamsBrowser from "./components/livestreams"
-import SavedPostsBrowser from "./components/savedPosts"
 
 import "./index.less"
 
@@ -17,23 +13,23 @@ const Tabs = {
     "feed": {
         title: "Feed",
         icon: "Rss",
-        component: FeedBrowser
+        component: FeedTab
+    },
+    "trendings": {
+        title: "Trendings",
+        icon: "TrendingUp",
+        component: TrendingsTab
     },
     "explore": {
         title: "Explore",
         icon: "Search",
-        component: ExploreBrowser
+        component: ExploreTab
     },
     "savedPosts": {
         title: "Saved posts",
         icon: "Bookmark",
-        component: SavedPostsBrowser
+        component: SavedPostsTab
-    },
+    }
-    "livestreams": {
-        title: "Livestreams",
-        icon: "Tv",
-        component: LivestreamsBrowser
-    },
 }
 
 export default class Dashboard extends React.Component {

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

@@ -1,123 +0,0 @@
-import React from "react"
-import * as antd from "antd"
-
-import { UserPreview } from "components"
-import { Icons } from "components/Icons"
-
-import Livestream from "../../../../models/livestream"
-
-import "./index.less"
-
-const LivestreamItem = (props) => {
-    const { livestream = {} } = props
-
-    const handleOnClick = async () => {
-        if (typeof props.onClick !== "function") {
-            console.warn("LivestreamItem: onClick is not a function")
-            return
-        }
-
-        return await props.onClick(livestream)
-    }
-
-    return <div className="livestream_item" onClick={handleOnClick}>
-        <div className="livestream_thumbnail">
-            <img src={livestream.info?.thumbnail ?? "/assets/new_file.png"} />
-        </div>
-        <div className="livestream_info">
-            <UserPreview username={livestream.username} />
-
-            <div className="livestream_title">
-                <h1>{livestream.info?.title}</h1>
-            </div>
-            <div className="livestream_description">
-                <h2>{livestream.info?.description ?? "No description"}</h2>
-            </div>
-            <div className="livestream_category">
-                {livestream.info?.category?.label ?? "No category"}
-            </div>
-        </div>
-    </div>
-}
-
-export default (props) => {
-    const [loading, setLoading] = React.useState(true)
-    const [list, setList] = React.useState([])
-
-    const loadStreamings = async () => {
-        setLoading(true)
-
-        const livestreams = await Livestream.getLivestreams().catch((err) => {
-            console.error(err)
-            app.message.error("Failed to load livestreams")
-            return false
-        })
-
-        console.log("Livestreams", livestreams)
-
-        setLoading(false)
-
-        if (livestreams) {
-            if (!Array.isArray(livestreams)) {
-                console.error("Livestreams is not an array")
-                return false
-            }
-
-            setList(livestreams)
-        }
-    }
-
-    const onClickItem = (livestream) => {
-        app.setLocation(`/live/${livestream.username}`)
-    }
-
-    const onClickControlPanel = () => {
-        app.setLocation("/live_control")
-    }
-
-    const renderList = () => {
-        if (loading) {
-            return <antd.Skeleton active />
-        }
-
-        if (list.length === 0) {
-            return <antd.Result>
-                <h1>
-                    No livestreams found
-                </h1>
-            </antd.Result>
-        }
-
-        return list.map((livestream) => {
-            return <LivestreamItem livestream={livestream} onClick={onClickItem} />
-        })
-    }
-
-    React.useEffect(() => {
-        loadStreamings()
-    }, [])
-
-    return <div className="livestreamsBrowser">
-        <div className="header">
-            <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">
-            {renderList()}
-        </div>
-    </div>
-}

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

@@ -1,119 +0,0 @@
-@item_border_radius: 10px;
-
-.livestreamsBrowser {
-    display: flex;
-    flex-direction: column;
-
-    width: 100%;
-
-    .header {
-        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;
-    }
-
-    .livestream_list {
-        display: flex;
-        flex-direction: column;
-        padding: 0 50px;
-
-        .livestream_item {
-            display: flex;
-            flex-direction: row;
-
-            align-items: center;
-
-            background-color: var(--background-color-primary2);
-
-            border: 1px solid var(--border-color);
-
-            padding: 10px;
-            margin-bottom: 20px;
-
-            border-radius: @item_border_radius;
-
-            cursor: pointer;
-            transition: all 0.2s ease-in-out;
-
-            &:hover {
-                background-color: var(--background-color-accent);
-            }
-
-            .livestream_thumbnail {
-                width: 8vw;
-                height: 100%;
-
-                img {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: @item_border_radius;
-                }
-            }
-
-            .livestream_info {
-                position: relative;
-
-                width: 100%;
-
-                margin-left: 20px;
-                font-size: 1rem;
-
-                padding: 10px 0;
-
-                color: var(--text-color);
-
-                .userPreview {
-                    font-size: 1.5rem;
-                }
-
-                h1,
-                h2 {
-                    margin: 0;
-                    height: fit-content;
-                    color: var(--text-color);
-                }
-
-                .livestream_title {
-                    margin-top: 10px;
-                    font-size: 1.5rem;
-                    height: fit-content;
-                    font-family: "Space Grotesk", sans-serif;
-                }
-
-                .livestream_description {
-                    font-size: 0.6rem;
-                    font-weight: 400;
-                    height: fit-content;
-                }
-
-                .livestream_category {
-                    position: absolute;
-
-                    top: 0;
-                    right: 0;
-
-                    padding: 10px;
-                }
-            }
-        }
-    }
-}

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

@@ -0,0 +1,14 @@
+import React from "react"
+import { Result } from "antd"
+
+import "./index.less"
+
+export default (props) => {
+    return <div className="trendingsBrowser">
+        <Result
+            status="404"
+            title="Not implemented"
+            subTitle="Sorry, but this feature is not implemented yet."
+        />
+    </div>
+}

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

@@ -0,0 +1 @@
+.trendingsBrowser {}

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

@@ -1,7 +1,7 @@
 import React from "react"
 
 export default () => {
-    app.setLocation("home/feed")
+    app.setLocation("/home/feed")
 
     return <></>
 }