Merge pull request #21 from hyperspacedev/notification-streaming
Stream notifications and reply button on mention-related notifs
This commit is contained in:
commit
25f434adb5
63
README.md
63
README.md
|
@ -6,9 +6,7 @@ The new beautiful, fluffy client for Mastodon written in TypeScript and React
|
|||
|
||||
This is the official repository for the Hyperspace 1.0 release. This release includes many more changes and will include a redesign that accomodates for desktop and mobile devices.
|
||||
|
||||
> Note: This version is _NOT_ production-ready. Rather, this version is under heavy development and will take a while to match feature parity with the current releases of Hyperspace.
|
||||
|
||||
If you are looking for the **current** release of Hyperspace, please look at [hyperspace-classic](https://github.com/hyperspacedev/hyperspace-classic).
|
||||
> Note: If you are looking for the current **stable** release of Hyperspace, please look at [hyperspace-classic](https://github.com/hyperspacedev/hyperspace-classic).
|
||||
|
||||
## What makes Hyperspace 1.0 different from the current version
|
||||
|
||||
|
@ -20,3 +18,62 @@ The 1.0 redesign of Hyperspace acts differently from the current classic version
|
|||
- **Configurable at every level.** Hyperspace 1.0 allows anyone to customize their theme and settings to however they like, and admins can customize Hyperspace further with branding, federation support, registration URLs, and more (done via `config.json`). [Learn more ›](CONFIG.md)
|
||||
|
||||
This is a growing list and new things will be added over time.
|
||||
|
||||
## Build instrictions
|
||||
|
||||
### Prerequisites
|
||||
|
||||
To develop Hyperspace, you'll need the following tools and packages:
|
||||
|
||||
- Node.js 8 or later
|
||||
- (Optional) Visual Studio Code
|
||||
|
||||
### Installing dependencies
|
||||
|
||||
First, clone the repository from GitHub:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/hyperspacedev/hyperspace
|
||||
```
|
||||
|
||||
Then, in the app directory, run the following command to install all of the package dependencies:
|
||||
|
||||
```npm
|
||||
npm install
|
||||
```
|
||||
|
||||
### Testing changes
|
||||
|
||||
Before testing Hyperspace, make the following change in `config.json`, located in the public directory:
|
||||
|
||||
```json
|
||||
"location": "https://localhost:3000"
|
||||
```
|
||||
|
||||
This is necessary to test Hyperspace locally and will need to be reverted after testing or before releasing to `master`.
|
||||
|
||||
To run a development version of Hyperspace, either run the `start` task from VS Code or run the following in the terminal:
|
||||
|
||||
```npm
|
||||
npm start
|
||||
```
|
||||
|
||||
The site will be hosted at `https://localhost:3000`, where you can sign in and test Hyperspace using your Mastodon account. If you have signed in before, you will be automatically logged in.
|
||||
|
||||
### Building a release
|
||||
|
||||
To build a release, run the following command:
|
||||
|
||||
```npm
|
||||
npm build
|
||||
```
|
||||
|
||||
The built files will be available under `build` as static files. These files should get hosted to a web server.
|
||||
|
||||
## Contribute
|
||||
|
||||
Contrubition guidelines are available in the [contributing file](.github/contributing.md) and when you make an issue/pull request. Additionally, you can access our [Code of Conduct](.github/code_of_conduct.md).
|
||||
|
||||
If you want to aid the project in other ways, consider supporting the project on [Patreon](https://patreon.com/marquiskurt).
|
||||
|
||||
If you have Matrix, you can join the Hyperspace community ([+hyperspace-masto:matrix.org](https://matrix.to/#/+hyperspace-masto:matrix.org)).
|
|
@ -6,7 +6,6 @@ import {
|
|||
ListSubheader,
|
||||
ListItemSecondaryAction,
|
||||
ListItemAvatar,
|
||||
Avatar,
|
||||
Paper,
|
||||
IconButton,
|
||||
withStyles,
|
||||
|
@ -27,6 +26,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
|
|||
import {styles} from './PageLayout.styles';
|
||||
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||
import ForumIcon from '@material-ui/icons/Forum';
|
||||
import ReplyIcon from '@material-ui/icons/Reply';
|
||||
import Mastodon from 'megalodon';
|
||||
import { Notification } from '../types/Notification';
|
||||
import { Account } from '../types/Account';
|
||||
|
@ -44,6 +44,7 @@ interface INotificationsPageState {
|
|||
class NotificationsPage extends Component<any, INotificationsPageState> {
|
||||
|
||||
client: Mastodon;
|
||||
streamListener: any;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
@ -73,6 +74,22 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
|
|||
})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.streamNotifications();
|
||||
}
|
||||
|
||||
streamNotifications() {
|
||||
this.streamListener = this.client.stream('/streaming/user');
|
||||
|
||||
this.streamListener.on('notification', (notif: Notification) => {
|
||||
let notifications = this.state.notifications;
|
||||
if (notifications) {
|
||||
notifications.unshift(notif);
|
||||
this.setState({ notifications });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
toggleDeleteDialog() {
|
||||
this.setState({ deleteDialogOpen: !this.state.deleteDialogOpen });
|
||||
}
|
||||
|
@ -179,11 +196,21 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
|
|||
</span>:
|
||||
|
||||
notif.status?
|
||||
<span>
|
||||
<Tooltip title="View conversation">
|
||||
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
|
||||
<ForumIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>:
|
||||
</Tooltip>
|
||||
{
|
||||
notif.type === "mention"?
|
||||
<Tooltip title="Reply">
|
||||
<LinkableIconButton to={`/compose?reply=${notif.status.reblog? notif.status.reblog.id: notif.status.id}&visibility=${notif.status.visibility}&acct=${notif.status.reblog? notif.status.reblog.account.acct: notif.status.account.acct}`}>
|
||||
<ReplyIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>: null
|
||||
}
|
||||
</span>:
|
||||
null
|
||||
}
|
||||
<Tooltip title="Remove notification">
|
||||
|
|
Loading…
Reference in New Issue