RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

use params to render tabs

Browse Source
This commit is contained in:
srgooglo 2022-11-14 02:07:23 +00:00
parent 5b7daac89a
commit 08a237affd
2 changed files with 135 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
packages/app/src/pages/home/[type].jsx Executable file
View File

@ -0,0 +1,132 @@
import React from "react"
import * as antd from "antd"
import classnames from "classnames"
import { Icons, createIconRender } from "components/Icons"
import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
import FeedBrowser from "./components/feed"
import ExploreBrowser from "./components/explore"
import LivestreamsBrowser from "./components/livestreams"
import SavedPostsBrowser from "./components/savedPosts"
import "./index.less"
const Tabs = {
"feed": {
title: "Feed",
icon: "Rss",
component: FeedBrowser
},
"explore": {
title: "Explore",
icon: "Search",
component: ExploreBrowser
},
"livestreams": {
title: "Livestreams",
icon: "Tv",
component: LivestreamsBrowser
},
"savedPosts": {
title: "Saved posts",
icon: "Bookmark",
component: SavedPostsBrowser
}
}
export default class Dashboard extends React.Component {
state = {
activeTab: this.props.match.params.type ?? "feed"
}
primaryPanelRef = React.createRef()
componentDidMount() {
app.eventBus.emit("style.compactMode", false)
}
renderActiveTab() {
const tab = Tabs[this.state.activeTab]
if (!tab) {
return <antd.Result
status="404"
title="404"
subTitle="Sorry, the tab you visited does not exist."
/>
}
return React.createElement(tab.component)
}
handleTabChange = (key) => {
if (this.state.activeTab === key) return
// set to primary panel fade-opacity-leave class
this.primaryPanelRef.current.classList.add("fade-opacity-leave")
setTimeout(() => {
this.setState({ activeTab: key })
// update location
app.history.replace(key)
}, 200)
// remove fade-opacity-leave class after animation
setTimeout(() => {
this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
}, 300)
}
render() {
return <div className="dashboard">
<div></div>
<div
ref={this.primaryPanelRef}
className={classnames("panel", "fade-opacity-active")}
style={{ width: "102%" }}
>
{this.renderActiveTab()}
</div>
<div className="panel">
<div className="card" id="browserType">
<h2><Icons.Compass /> Browse</h2>
<antd.Menu
mode="inline"
selectedKeys={[this.state.activeTab]}
activeKey={this.state.activeTab}
onClick={({ key }) => this.handleTabChange(key)}
>
{Object.keys(Tabs).map((key) => {
const tab = Tabs[key]
return <antd.Menu.Item
key={key}
icon={createIconRender(tab.icon)}
>
{tab.title}
</antd.Menu.Item>
})}
</antd.Menu>
</div>
<div className="card" id="trendings">
<h2><Icons.TrendingUp /> Trendings</h2>
<HashtagTrendings />
</div>
<div className="card" id="onlineFriends">
<h2><Icons.Rss /> Online Friends</h2>
<div className="content">
<ConnectedFriends />
</div>
</div>
<FeaturedEventsAnnouncements />
</div>
</div>
}
}

126
packages/app/src/pages/home/index.jsx Executable file → Normal file
View File

@ -1,127 +1,7 @@
import React from "react" import React from "react"
import * as antd from "antd"
import classnames from "classnames"
import { Icons, createIconRender } from "components/Icons" export default () => {
app.setLocation("home/feed")
import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components" return <></>
import FeedBrowser from "./components/feed"
import ExploreBrowser from "./components/explore"
import LivestreamsBrowser from "./components/livestreams"
import SavedPostsBrowser from "./components/savedPosts"
import "./index.less"
const Tabs = {
"feed": {
title: "Feed",
icon: "Rss",
component: FeedBrowser
},
"explore": {
title: "Explore",
icon: "Search",
component: ExploreBrowser
},
"livestreams": {
title: "Livestreams",
icon: "Tv",
component: LivestreamsBrowser
},
"savedPosts": {
title: "Saved posts",
icon: "Bookmark",
component: SavedPostsBrowser
}
}
export default class Dashboard extends React.Component {
state = {
activeTab: "feed"
}
primaryPanelRef = React.createRef()
componentDidMount() {
app.eventBus.emit("style.compactMode", false)
}
renderActiveTab() {
const tab = Tabs[this.state.activeTab]
if (!tab) {
return null
}
return React.createElement(tab.component)
}
handleTabChange = (key) => {
if (this.state.activeTab === key) return
// set to primary panel fade-opacity-leave class
this.primaryPanelRef.current.classList.add("fade-opacity-leave")
setTimeout(() => {
this.setState({ activeTab: key })
}, 200)
// remove fade-opacity-leave class after animation
setTimeout(() => {
this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
}, 300)
}
render() {
return <div className="dashboard">
<div></div>
<div
ref={this.primaryPanelRef}
className={classnames("panel", "fade-opacity-active")}
style={{ width: "102%" }}
>
{this.renderActiveTab()}
</div>
<div className="panel">
<div className="card" id="browserType">
<h2><Icons.Compass /> Browse</h2>
<antd.Menu
mode="inline"
selectedKeys={[this.state.activeTab]}
activeKey={this.state.activeTab}
onClick={({ key }) => this.handleTabChange(key)}
>
{Object.keys(Tabs).map((key) => {
const tab = Tabs[key]
return <antd.Menu.Item
key={key}
icon={createIconRender(tab.icon)}
>
{tab.title}
</antd.Menu.Item>
})}
</antd.Menu>
</div>
<div className="card" id="trendings">
<h2><Icons.TrendingUp /> Trendings</h2>
<HashtagTrendings />
</div>
<div className="card" id="onlineFriends">
<h2><Icons.Rss /> Online Friends</h2>
<div className="content">
<ConnectedFriends />
</div>
</div>
<FeaturedEventsAnnouncements />
</div>
</div>
}
} }