Merge pull request #21 from hyperspacedev/notification-streaming
Stream notifications and reply button on mention-related notifs
This commit is contained in:
Marquis Kurt
GitHub
commit
25f434adb5
65
README.md
65
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
|
||||
|
||||
|
|
@ -19,4 +17,63 @@ The 1.0 redesign of Hyperspace acts differently from the current classic version
|
|||
- **Less intrusive by nature.** Hyperspace 1.0 pushes notifications when the window isn't in focus versus all the time, and the snackbar (toast) notifications are displayed more often when something is happening or when an error occurs. Timelines also no longer keep pushing posts during streaming, letting anyone read the timeline and still be able to get updates with a non-intrusive `View (x) new posts` chip at the top.
|
||||
- **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.
|
||||
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?
|
||||
<Tooltip title="View conversation">
|
||||
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
|
||||
<ForumIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>:
|
||||
<span>
|
||||
<Tooltip title="View conversation">
|
||||
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
|
||||
<ForumIcon/>
|
||||
</LinkableIconButton>
|
||||
</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