-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
IndexSidebar.tsx
97 lines (85 loc) · 3.16 KB
/
IndexSidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import Component from '../../common/Component';
import type { ComponentAttrs } from '../../common/Component';
import type Mithril from 'mithril';
import ItemList from '../../common/utils/ItemList';
import app from '../app';
import Button from '../../common/components/Button';
import SelectDropdown from '../../common/components/SelectDropdown';
import listItems from '../../common/helpers/listItems';
import LinkButton from '../../common/components/LinkButton';
export interface IndexSidebarAttrs extends ComponentAttrs {}
export default class IndexSidebar<CustomAttrs extends IndexSidebarAttrs = IndexSidebarAttrs> extends Component<CustomAttrs> {
view(vnode: Mithril.Vnode<CustomAttrs, this>): Mithril.Children {
return (
<nav className="IndexPage-nav sideNav">
<ul>{listItems(this.items().toArray())}</ul>
</nav>
);
}
/**
* Build an item list for the sidebar of the index page. By default this is a
* "New Discussion" button, and then a DropdownSelect component containing a
* list of navigation items.
*/
items() {
const items = new ItemList<Mithril.Children>();
const canStartDiscussion = app.forum.attribute('canStartDiscussion') || !app.session.user;
items.add(
'newDiscussion',
<Button
icon="fas fa-edit"
className="Button Button--primary IndexPage-newDiscussion"
itemClassName="App-primaryControl"
onclick={() => {
// If the user is not logged in, the promise rejects, and a login modal shows up.
// Since that's already handled, we dont need to show an error message in the console.
return this.newDiscussionAction().catch(() => {});
}}
disabled={!canStartDiscussion}
>
{app.translator.trans(`core.forum.index.${canStartDiscussion ? 'start_discussion_button' : 'cannot_start_discussion_button'}`)}
</Button>
);
items.add(
'nav',
<SelectDropdown
buttonClassName="Button"
className="App-titleControl"
accessibleToggleLabel={app.translator.trans('core.forum.index.toggle_sidenav_dropdown_accessible_label')}
>
{this.navItems().toArray()}
</SelectDropdown>
);
return items;
}
/**
* Build an item list for the navigation in the sidebar of the index page. By
* default this is just the 'All Discussions' link.
*/
navItems() {
const items = new ItemList<Mithril.Children>();
const params = app.search.state.stickyParams();
items.add(
'allDiscussions',
<LinkButton href={app.route('index', params)} icon="far fa-comments">
{app.translator.trans('core.forum.index.all_discussions_link')}
</LinkButton>,
100
);
return items;
}
/**
* Open the composer for a new discussion or prompt the user to login.
*/
newDiscussionAction(): Promise<unknown> {
return new Promise((resolve, reject) => {
if (app.session.user) {
app.composer.load(() => import('./DiscussionComposer'), { user: app.session.user }).then(() => app.composer.show());
return resolve(app.composer);
} else {
app.modal.show(() => import('./LogInModal'));
return reject();
}
});
}
}