Commit 0e687a2e authored by Sadposter's avatar Sadposter

Add user search

parent c13481fc
......@@ -19,3 +19,42 @@ instance.
- Expand conversations into a cute little modally thingy
- Oauth token-based stuff. Yes it asks for your password but how else are we supposed to do oauth without a backend?
- I mean what else do you want it's a UI
## Installation
You will need:
- nginx
- [NPM](https://www.npmjs.com/get-npm)
You'll also want a subdomain pointing at your server. I use `sad.*` but you can use
whatever. This is set in your registrar's DNS settings.
Once you've got that, you can run
```bash
# Install yarn, a better package manager (imo)
sudo npm i -g yarn
cd /var/www # or equivalent
# Get the repo
git clone https://git.pleroma.social/FloatingGhost/sad-fe.git
cd sad-fe
# Set some initial config
vi src/reducers/config.js
# Change the `url` to your instance's URL if you want, not mandatory though
# Install dependencies
yarn
# Might take a bit
npx webpack -p
# Now wait a little
```
Now you'll have the frontend built. Copy the nginx file from `install/sadfe.nginx` t
`/etc/nginx/sites-available` then `ln -s /etc/nginx/sites-available/sadfe.nginx /etc/nginx/sites-enabled/`.
You'll need to change the `server_name` and potentially the `root` parts of the config.
Test that the config is correct with `sudo nginx -t`, then reload `sudo systemctl reload nginx.service`
Now you can visit the frontend at `https://subdomain.domain.com/`
server {
listen 443 ssl;
listen [::]:443 ssl;
access_log /var/log/nginx/sadfe.log;
include ssl;
index index.html;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/activity+json application/atom+xml;
server_name sad.ihatebeinga.live;
client_max_body_size 16m;
root /var/www/sad-fe/dist;
index index.html;
location / {
try_files \$uri/ @frontend;
}
location @frontend {
recursive_error_pages on;
error_page 404 = @rewrite_proxy;
}
location @rewrite_proxy {
rewrite ^/(.*)$ /index.html?\$1 break;
try_files $uri $uri/ =404;
}
}
......@@ -232,6 +232,7 @@ export function* poll_statuses() {
} catch(e) {
console.error("Error in timeline poll");
console.error(e);
yield call(delay, 10000);
}
}
}
......
......@@ -54,12 +54,18 @@ class NavBar extends React.Component {
<Menu.Item as={NavLink} to="/follow-suggestions">
Follow Suggestions
</Menu.Item>
<Menu.Item as={NavLink} to="/user-search">
Search Users
</Menu.Item>
</OnlyLoggedIn>
<Menu.Menu position="right">
<SwitchInstance />
<OnlyLoggedIn>
<Menu.Menu>
<NavLink to="/settings">
<Icon name="settings" size="big" inverted />
</NavLink>
......
......@@ -12,7 +12,7 @@ const UserHeader = ({ id, user, local_id, follow, unfollow, block, unblock, mute
<Segment inverted as={Container}>
<Item>
<Item.Header>
<h2><Image spaced src={user.avatar_static} size="tiny" circular inline/>
<h2><Image spaced src={user.avatar_static} width="40px" circular inline/>
<DisplayName user={user} /> <small style={{fontSize:"50%"}}>@{user.acct}</small></h2>
</Item.Header>
......
import React from "react";
import { Form, Container, Segment, Item } from "semantic-ui-react";
import { add_auth, backend_url } from "utils";
import UserHeader from "user-header/index";
import { receive_user } from "actions/remote-users";
import { connect } from "react-redux";
class UserSearch extends React.Component {
state = { results: [], q: "" }
search = async () => {
const {q} = this.state;
const resp = await fetch(`${backend_url()}/api/v1/accounts/search?q=${q}`,
{headers: add_auth({})}
);
const json = await resp.json();
json.forEach(user => this.props.receive_user(user));
this.setState({ results: json });
}
onChange = (e, {name, value}) => this.setState({[name]: value})
render() {
return (
<Segment inverted as={Container}>
<Form inverted>
<Form.Input
value={this.state.q}
onChange={this.onChange}
name="q"
label="Search"
/>
<Form.Button
content="Submit"
onClick={this.search}
color="black"
icon="search"
/>
</Form>
<Item.Group>
{this.state.results.map(user => (
<UserHeader id={user.id} key={user.id} user={user} />
))}
</Item.Group>
</Segment>
);
}
}
const mapDispatchToProps = {
receive_user
};
export default connect(null, mapDispatchToProps)(UserSearch);
......@@ -13,6 +13,7 @@ const routes = [
{ path: "/user/:id", component: () => import("user-timeline/index") },
{ path: "/follow-requests", component: () => import("follow-requests/index") },
{ path: "/follow-suggestions", component: () => import("follow-suggestions/index") },
{ path: "/user-search", component: () => import("user-search/index") },
{ path: "/settings", component: () => import("user-settings/index") }
];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment